/* ============================================================
   Portfolio v2 – minimal grid (1:1 Figma)
   Pure HTML + CSS. No JS, no dependencies.

   Figma variables (from variable set):
   ┌──────────────┬─────────┬────────┐
   │ Name         │ Desktop │ Mobile │
   ├──────────────┼─────────┼────────┤
   │ Screen w / h │ 1512    │ 390    │
   │ Page margin  │  50     │  20    │
   │ Block gap    │  80     │  50    │
   │ Chapter gap  │  75     │  50    │
   │ Title size   │  40     │  32    │
   │ Cold         │ #2B3645          │
   │ Warm         │ #F3D3A4          │
   └──────────────┴─────────┴────────┘

   Text styles (Inter):
   - Inter Medium  40 / 100%   – section + case titles
   - Inter Medium  24 / 100%   – chapter titles, internal block titles
   - Inter Regular 18 / 100%   – body, sub-links, contacts
   - Inter SemiBold 18 / 100%  – name, accented bold
   - Inter Regular 15 / 24px   – credit-card text
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

/* Smooth scrolling + anchor breathing room for in-page section links */
html { scroll-behavior: smooth; }
:where(#products, #expertise, #case-studies, #contacts, .chapter[id], .section-heading[id], .case-section__title[id], .process-section[id], .about-section[id]) { scroll-margin-top: 40px; }

/* ---------- Variables (Desktop set) ---------- */
:root {
  /* Colors */
  --c-bg: rgb(255, 255, 255);
  --c-cold: rgb(43, 54, 69);       /* #2B3645 – titles */
  --c-warm: rgb(243, 211, 164);    /* #F3D3A4 – divider / highlight */
  --c-text: rgb(0, 0, 0);          /* body text */
  --c-link-hover: rgb(153, 85, 63);/* #99553F – terracotta */
  --c-line: rgb(224, 224, 224);    /* #E0E0E0 – table border */
  --c-linkedin: rgb(0, 102, 153);
  --c-telegram-from: rgb(55, 174, 226);
  --c-telegram-to:   rgb(30, 150, 200);
  --c-card-from: rgb(71, 71, 78);
  --c-card-to:   rgb(6, 6, 10);

  /* Typography */
  --ff: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --fs-title:   40px;   /* "Title font size" – section + case titles */
  --fs-chapter: 24px;   /* chapter titles + block titles in cases */
  --fs-body:    18px;   /* sub-links, body, contacts */
  --fs-card:    15px;   /* credit card text */

  /* Spacing */
  --pad-side:    50px;  /* "Page margin" */
  --gap-block:   120px;  /* "Block gap" – between major sections */
  --gap-chapter: 75px;  /* "Chapter gap" – between chapter cards */
  --gap-title-body: 40px; /* between a block heading and its content */

  /* Component sizes */
  --avatar-size: 192px;
  --rec-avatar:   48px;
  --social-size:  48px;
  --max-content: 1412px;

  /* Effects */
  --shadow-img: 0 8px 20px rgba(0, 0, 0, 0.2);  /* shared drop-shadow for framed shots / canvas */
}

/* ---------- Variables (Mobile set) ---------- */
@media (max-width: 768px) {
  :root {
    --pad-side:    20px;
    --gap-block:   50px;
    --gap-chapter: 50px;
    --fs-title:    32px;
    --avatar-size: 140px;
  }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: rgb(20, 20, 20); }
/* Global keyboard-focus indicator for every link/button. The more specific
   rules below (.chapter li a, .rec) keep their own tuned offsets. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--c-link-hover);
  outline-offset: 2px;
  border-radius: 6px;
}
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  /* default: Body text style (Inter Regular 18 / 1.5) */
  font-family: var(--ff);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, p, ul, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }

/* ============================================================
   Canonical text styles (from Figma – the only allowed variations)
   ------------------------------------------------------------
   1. Title       – Inter Medium  var(--fs-title) (40/32) / 1.1 / cold
   2. Block title – Inter Medium  24            / 1.2 / cold
   3. Body        – Inter Regular var(--fs-body) (18) / 1.5 / black   (default)
   4. Body bold   – Inter SemiBold same          (use <strong> inline)
   ============================================================ */
h1, h2 {
  font-family: var(--ff);
  font-size: var(--fs-title);
  font-weight: 500;
  line-height: 1.1;
  color: var(--c-cold);
  letter-spacing: -0.01em;
}
h3 {
  font-family: var(--ff);
  font-size: var(--fs-chapter);
  font-weight: 500;
  line-height: 1.2;
  color: var(--c-cold);
  letter-spacing: -0.005em;
}
p, li, td, th, figcaption {
  /* inherits Body from body{} */
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.5;
  color: var(--c-text);
}
strong, b { font-weight: 600; }

/* ---------- Page layout ---------- */
.page {
  max-width: var(--max-content);
  margin: 0 auto;
  /* viewport-fit=cover lets the background reach the screen edges in landscape;
     the safe-area insets keep content out from under the notch / rounded corners. */
  padding: 40px calc(var(--pad-side) + env(safe-area-inset-right)) 40px calc(var(--pad-side) + env(safe-area-inset-left));
}

/* ---------- Site header (overlaps hero photo, translucent + blurred) ---------- */

/* Same bar on pages without the hero photo: in flow, dark text on the page background. */

/* On the light pages the warm highlight disappears against white – use the same
   terracotta the body links already use. */

/* ---------- Hero banner (full-bleed photo, fixed height, header overlaps it) ---------- */

/* ---------- Products (horizontal-scroll award cards) ---------- */

/* ---------- Hero (home page) ---------- */

/* narrow screens: smaller bubble, wraps inside the free space right of the avatar */

/* hero titles inherit from h1 / p – no overrides needed */

/* ---------- Chapters grid ---------- */
/* Dark band closing the page (case studies + contacts). Full-bleed; the local
   token overrides recolour every heading, link and body line inside it. The
   preceding light section keeps the full --gap-block above the seam, and the
   band's own padding repeats it on the dark side. */

/* Chapter titles stay pure white; the lists sit one step back. */

/* The band's own padding is the bottom spacing; the page spacer would double it. */
.dark-zone .page-foot { display: none; }

/* Chapters flow left-to-right and wrap; the section spans the same width as Recommendations. */

/* ---------- Recommendations ---------- */
/* .section-heading is centered – grouped with the case headings further down */
.recommendations {
  max-width: 2258px;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--gap-chapter);
  justify-content: center;
  width: 100%;
}
.rec {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}
.rec:hover .rec-name { color: var(--c-link-hover); }
.rec:focus-visible {
  outline: 2px solid var(--c-link-hover);
  outline-offset: 8px;
  border-radius: 4px;
}
.rec-head {
  display: flex;
  flex-direction: row;
  gap: 14px;
  align-items: center;
  margin-bottom: 16px;
}
.rec-avatar {
  flex: 0 0 var(--rec-avatar);
  width: var(--rec-avatar);
  height: var(--rec-avatar);
  border-radius: 50%;
  overflow: hidden;
}
.rec-avatar img { width: 100%; height: 100%; object-fit: cover; }
.rec-name { font-weight: 600; transform: translateY(1px); }   /* Body bold, nudged 1px to align with avatar */
.rec-position { margin-top: 0; }/* Body inherits */
.rec p { margin: 0; }
.rec p + p { margin-top: 10px; }

/* ---------- Contacts ---------- */
.contacts {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
}
.contacts-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.contacts a:hover { color: var(--c-link-hover); }
.socials {
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: center;
}
.social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform 150ms ease;
}
.social:hover { transform: translateY(-2px); }
.social-linkedin { width: 44px; height: 44px; border-radius: 6px; background: transparent; }
.social-telegram { width: 48px; height: 48px; border-radius: 50%; background: transparent; }
.social img { width: 100%; height: 100%; display: block; }

/* ---------- Footer spacer ---------- */
.page-foot { height: 40px; }
/* Content <main> mirrors the hero's zero bottom padding so the space below the
   footer icons matches index.html (flex gap + .page-foot, no extra padding). */
main.page:not(.hero) { padding-bottom: 0; }

/* ============================================================
   Internal case page
   ============================================================ */

.case-head {
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  gap: 10px;
  align-items: center;
  padding: 40px 0;
}
/* Tighter header – 20px vertical on internal pages. The header element carries
   two stacked 40px paddings (.page + .case-head); this collapses them to 20px. */
.head-tight { padding-top: 0; padding-bottom: 0; }
.head-tight .case-head { padding: 20px 0; }
/* .case-back is fixed (out of grid flow) – pin the other children to their columns */
.case-head > :nth-child(2) { grid-column: 2; }
.case-head > :nth-child(3) { grid-column: 3; }
.case-head { grid-auto-rows: minmax(48px, auto); }
.case-back {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-cold);
  transition: color 120ms ease, background-color 120ms ease;
  /* Pinned to the top-left corner; the header grid keeps its 48px column empty */
  position: fixed;
  /* 64px circle centred where the 48px button used to be (-8px each side) */
  top: 12px;
  left: calc(var(--pad-side) - 8px + env(safe-area-inset-left));
  z-index: 100;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.case-back:hover { background: rgba(255, 255, 255, 0.7); }
/* Slightly larger hit area around the circle */
.case-back::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
}
.case-back:hover { color: var(--c-link-hover); }
/* On hover the arrow slides left by the same 6px the button arrow slides right.
   Base translateX(0) keeps it on a composite layer (no 1px vertical jump). */
.case-back svg { width: 32px; height: 24px; stroke: currentColor; transform: translateX(0); transition: transform 150ms ease; }
.case-back:hover svg,
.case-back:focus-visible svg { transform: translateX(-6px); }
/* Language switch: same glass circle as .case-back, mirrored to the top-right corner.
   Case pages: level with .case-back. The homepage overrides top in home.css.
   On mobile it scrolls away with the page instead of staying pinned. */
.lang-switch { position: fixed; top: 12px; right: calc(var(--pad-side) - 8px + env(safe-area-inset-right)); z-index: 100; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, 0.5); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); transition: background-color 120ms ease; }
.lang-switch:hover { background: rgba(255, 255, 255, 0.7); }
.lang-switch::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
.lang-switch svg { display: block; width: 24px; height: 24px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.15); transition: transform 150ms ease; }
.lang-switch:hover svg, .lang-switch:focus-visible svg { transform: scale(1.1); }
.lang-switch:focus-visible { outline: 2px solid var(--c-link-hover); outline-offset: 2px; }
@media (max-width: 768px) {
  .lang-switch { position: absolute; width: 56px; height: 56px; }
  .lang-switch::before { inset: -6px; }
}
/* .case-title is centered (Title style from h1) – grouped with the other headings */
.divider {
  height: 2px;
  background: var(--c-warm);
  border: 0;
  margin: 0;
}
.case-main {
  display: flex;
  flex-direction: column;
  gap: var(--gap-block);
  align-items: center;
  padding-top: var(--gap-block);
  padding-bottom: 0;   /* bottom spacing comes from .page-foot + .page padding, matching index.html */
}

/* ============================================================
   Process optimisation case – wider 840px content column with
   stacked text blocks + image groups (2-up / 3-up / full-width).
   ============================================================ */
/* Stacked section wrapper – shared by process / case / about pages.
   Only the title→content gap differs (50px vs 40px). */
.process-section,
.case-section,
.about-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.process-section { gap: 50px; }            /* section title -> content (Figma) */

/* Centered headings (all share text-align:center; font comes from h1/h3) */
.process-section__title,
.case-section__title,
.section-heading,
.case-title { text-align: center; }

/* Content column – text + images share the same 840px measure */
.process-col {
  width: 100%;
  max-width: 840px;
  display: flex;
  flex-direction: column;
  gap: var(--gap-title-body);   /* 40px between text blocks and image groups */
}
/* Body paragraphs across process / case / about blocks share margins. */
.process-text p,
.case-block p { text-align: left; margin: 0; align-self: stretch; }
.process-text p + p,
.case-block p + p,
.about-head p + p { margin-top: 10px; }

/* Image group + optional caption (caption sits --gap below the pictures) */
.process-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;            /* picture -> caption (Figma) */
}
.process-caption {
  text-align: center;
  color: rgb(96, 96, 96);   /* #606060 – grey caption */
}

/* Landscape screenshot – rounded corners + drop-shadow */
.shot-figure {
  margin: 0;
  width: 100%;
}
.shot-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  box-shadow: var(--shadow-img);
}

/* Plain full-width image – no shadow, no rounding (e.g. wide data tables) */
.plain-figure {
  margin: 0;
  width: 100%;
}
.plain-figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* Image pairs (phone shots + landscape/portrait shots): shared layout + shadow.
   .phone-pair caps each shot at 300px; .shot-pair lets them fill equally. */
.phone-pair,
.shot-pair {
  margin: 0;
  display: flex;
  gap: 32px;
  justify-content: center;
}
.phone-pair img,
.shot-pair img {
  height: auto;
  box-shadow: var(--shadow-img);
}
.phone-pair { flex-wrap: wrap; }
.phone-pair img {
  flex: 0 1 300px;
  max-width: 300px;
  display: block;
  border-radius: 18px;
}

/* Multi-image rows: wrap + centre, no shadows. Wrapper shared with .about-pics. */
.process-grid,
.about-pics {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}
.process-grid img {
  border-radius: 12px;
  display: block;
  height: auto;
  min-width: 0;         /* allow flex items to shrink below intrinsic width */
}
.process-grid--2 img {
  flex: 1 1 300px;      /* two squares; wrap to stack when narrow */
  max-width: 412px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.process-grid--3 {
  align-items: flex-end;     /* bottoms aligned (Figma) */
}
.process-grid--3 img {
  flex: 1 1 200px;      /* three portrait cards; wrap when narrow */
  max-width: 270px;
  /* UI screenshots – keep natural aspect ratio, never crop */
}

/* Full-width single image – shared base; max-width + radius differ per context */
.process-img,
.case-image,
.about-image {
  width: 100%;
  height: auto;
  display: block;
}
.process-img { max-width: 840px; border-radius: 12px; }

/* Case section – heading + content tightly grouped (gap = title-to-body, not block gap) */
.case-section { gap: var(--gap-title-body); }
/* Mid-section headings sit closer to the text they introduce than to the text above */
.case-section > .process-section__title:not(:first-child) { margin-top: 20px; }
/* Long chapter title constrained to the 840px content measure (Figma) */
.case-section__title--narrow { max-width: 840px; }

/* Case images – illustrations between case blocks */
.case-figure {
  margin: 0;
  width: 100%;
  max-width: 1160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fs-title);
}

@media (max-width: 768px) {

}
.case-image { max-width: 1160px; height: auto; border-radius: 12px; }
.case-image--shadow { box-shadow: var(--shadow-img); }
.case-figure > a { display: block; width: 100%; }
.case-video-frame { width: 100%; max-width: 640px; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-img); background: rgb(20, 20, 20); }
.case-video { display: block; width: 100%; height: auto; }
.case-video-frame--portrait { max-width: 320px; margin: 0 auto; aspect-ratio: 499 / 1080; border-radius: 28px; }
.case-video-frame--portrait .case-video { height: 100%; object-fit: contain; }
.case-video-frame--plain { max-width: 640px; margin: 0 auto; aspect-ratio: 16 / 9; box-shadow: none; }
.case-video-frame--flat { max-width: 640px; margin: 0 auto; box-shadow: none; }
.case-video-frame--plain .case-video { height: 100%; object-fit: contain; }

.case-figure--tight { margin-top: -40px; margin-bottom: -40px; }
.case-main .section-heading { margin-bottom: -30px; }
.case-shots-grid {
  width: 100%;
  max-width: 640px;
  margin: var(--gap-title-body) auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.case-shots-grid img { width: 100%; height: auto; }
@media (max-width: 768px) {
  .case-shots-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Two landscape/portrait screenshots side by side (layout/shadow shared with .phone-pair above) */
.shot-pair {
  flex-direction: row;
  width: 100%;
  max-width: 840px;
  margin-inline: auto;
  align-items: flex-start;
}
.shot-pair--narrow { max-width: 640px; gap: 16px; }
.shot-pair--plain img { box-shadow: none; }
.shot-pair--mt { margin: 15px 0 0; }
.shot-pair > a,
.shot-pair > label.zoom { flex: 1 1 0; min-width: 0; display: block; }
.shot-pair > a img,
.shot-pair > label.zoom img { width: 100%; flex: none; }
.shot-pair img {
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  border-radius: 12px;
  object-fit: contain;
}
@media (max-width: 768px) {
  /* Horizontal scroller. --r (set inline per gallery) = aspect ratio of the widest image;
     that image gets 80% of the gallery width, the gallery height follows from it. */
  .shot-pair { container-type: inline-size; justify-content: flex-start; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; gap: 16px; }
  .shot-pair::-webkit-scrollbar { display: none; }
  .process-figure:has(> .shot-pair) { align-self: stretch; width: 100%; box-sizing: border-box; }
  /* Bleed 20px past the column so shadows aren't clipped; content box stays = column, so 80cqw is still 80% of it */
  .shot-pair { align-self: stretch; box-sizing: border-box; width: calc(100% + 40px); max-width: none; padding: 20px 20px 40px; margin: -20px -20px -40px; scroll-padding-inline: 20px; }
  .shot-pair--mt { margin-top: -5px; }
  .phone-pair { container-type: inline-size; flex-wrap: nowrap; justify-content: flex-start; 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; }
  .phone-pair::-webkit-scrollbar { display: none; }
  .phone-pair img { flex: none; width: 80cqw; max-width: none; height: auto; }
  .shot-pair > a, .shot-pair > label.zoom { flex: none !important; }
  .shot-pair img, .shot-pair > a img, .shot-pair > label.zoom img { flex: none; width: auto; max-width: none; height: calc(80cqw / var(--r, 1.5)); }
  /* Homepage "Cross-team cooperation" pair: same scroller; !important beats the inline desktop sizing */
  .about-pics.about-pics--lead { container-type: inline-size; flex-wrap: nowrap; justify-content: flex-start; 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; }
  .about-pics--lead::-webkit-scrollbar { display: none; }
  .about-pics--lead img { flex: none !important; width: auto !important; max-width: none !important; aspect-ratio: auto !important; height: calc(80cqw / var(--r, 1.5)); }
}
.case-figure figcaption {
  /* Body style inherited */
  text-align: center;
}
.case-figure figcaption a { color: var(--c-link-hover); }
/* When the figcaption is a body paragraph (multi-sentence), constrain it like .case-block p */
.case-figure--pair figcaption,
.case-figure--narrow figcaption {
  max-width: 640px;
  text-align: left;
  margin: 0 auto;
}
/* Narrow figure – image matches body text width (640px) */
.case-figure--narrow .case-image,
.case-figure--narrow > a {
  max-width: 640px;
}

/* Credit card mockup (SVG) */
.card-mock {
  width: 390px;
  max-width: 100%;
  height: auto;
  display: block;
  /* SVG viewBox 390×256 has the card inset (10px top / 22px bottom) to fit its
     drop-shadow; cancel that transparent padding so the visible card edges keep
     the true --gap-block (80px) gap, shadow living inside it. */
  margin-top: -10px;
  margin-bottom: -22px;
}

/* Case section title + body */
.case-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 640px;
}
.case-block h2 {
  /* Title style inherited */
  margin-bottom: 50px;
}
/* .case-block p margins grouped with .process-text p above */
.case-block p.t-center { text-align: center; }
.case-list{list-style:disc;padding-left:22px;display:flex;flex-direction:column;gap:10px;align-self:stretch;text-align:left}
.case-list li::marker{color:currentColor}
.case-block p + .case-list,.case-block .case-list + p{margin-top:10px}

/* Education logos (MIEM page) */
.edu-logos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}
.edu-logos img { display: block; width: auto; }
.edu-logos .edu-logo-hse  { height: 90px; }
.edu-logos .edu-logo-miem { height: 56px; }

/* Data lists */
.data-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.data-heading {
  /* Body bold */
  text-align: center;
  font-weight: 600;
}
.data-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 60px;
  justify-content: center;
}
.data-col {
  flex: 0 1 360px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding-left: 2.4em; /* room for numbers (up to 3 digits) */
  list-style: decimal;
  font-weight: 400;
}
.data-col li {
  /* Body style inherited */
  padding-left: 4px;
}
.data-col li::marker {
  color: var(--c-text);
  font-weight: 400;
}

/* Color accents used in WeavePay case data lists (hex sampled from PDF) */
.c-blue1   { color: #00A2FF; }   /* Email */
.c-blue2   { color: #0076BA; }   /* Phone */
.c-teal1   { color: #006C65; }   /* Country / Zip / (country) */
.c-teal2   { color: #00AB8E; }   /* Password */
.c-cyan    { color: #16E7CF; }   /* City */
.c-green   { color: #1DB100; }   /* Human confirmation / Selfie */
.c-coral   { color: #FF644E; }   /* names */
.c-pink    { color: #FF42A1; }   /* date of birth */
.c-orange  { color: #F27200; }   /* addresses */
.c-gold    { color: #FEAE00; }   /* Company name */
.c-grey    { color: #969696; }   /* Company name */
.c-magenta { color: #970E53; }   /* Passport */
.c-navy    { color: #004D80; }   /* Citizenship / US residence */
.data-col li.strike {
  color: rgb(150, 150, 150);
  text-decoration: line-through;
}
.data-col li.strike::marker { color: rgb(150, 150, 150); }

/* Table scroll wrapper – keeps horizontal scroll local to the table on narrow screens */
.case-table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 16px;
}

/* Table */
.case-table {
  width: 1160px;
  max-width: 1160px;
  margin: 0 auto;
  border-collapse: collapse;
  table-layout: fixed;
}
.case-table .col-mark      { width: 10px; }
.case-table .col-individual{ width: 350px; }
.case-table .col-director  { width: 250px; }
.case-table .col-company   { width: 350px; }
.case-table .col-partner   { width: 200px; }
.case-table th,
.case-table td {
  /* Body style inherited */
  border: 0;
  border-bottom: 1px solid var(--c-line);
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
  word-wrap: break-word;
}
.case-table thead th { font-weight: 600; }   /* Body bold */
.case-table .mark    { padding: 0; border-bottom: 0; }
.case-table tr.marked .mark         { background: var(--c-warm); }
.case-table tr.marked--photo .mark  { background: var(--c-warm); }
.case-table .note,
.case-table .note-q { color: rgb(150, 150, 150); }

/* Legend below structured-data table */
.case-legend {
  /* Body style inherited */
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 auto;
  max-width: 1160px;
  width: 100%;
}
.case-legend--center {
  width: auto;
  justify-content: flex-start;
}
.legend-summary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-align: left;
  max-width: 1160px;
  width: 100%;
  margin: 0 auto;
}
.legend-summary p { margin: 0; }
.legend-mark {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  background: var(--c-warm);
  border-radius: 50%;
  display: inline-block;
  /* align with the cap-height of the first text line (Inter 18px body) */
  margin-top: 6px;
}
.legend-mark--grey { background: #969696; }
.legend-mark--black { background: #222222; }

/* Case footer links – centered row with underline (this is the only place we underline links) */
.case-links {
  display: flex;
  flex-direction: row;
  gap: 50px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 0;
}
.case-links a {
  /* Body style inherited */
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color 120ms ease;
}
.case-links a:hover { color: var(--c-link-hover); }

/* ============================================================
   About page
   ============================================================ */
.case-title--sm { font-size: var(--fs-chapter); }

.about-main {
  display: flex;
  flex-direction: column;
  gap: var(--gap-block);
  align-items: center;
  /* .page already adds 40px top padding; subtract it so the divider-to-first-block
     distance equals one --gap-block (matching the gaps between sections). */
  padding-top: calc(var(--gap-block) - 40px);
  padding-bottom: 0;   /* match index.html bottom spacing */
}
/* .about-section base grouped with .process-section above */
.about-section { gap: 50px; }
.about-head {
  max-width: 640px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.about-head h2 { margin-bottom: 20px; }
.about-head p { margin: 0; }   /* + p margin grouped with .process-text p */
.about-head--left { text-align: left; }
.about-head--left h2 { text-align: center; }
.about-section > h2 { text-align: center; }

/* Picture groups (wrapper base grouped with .process-grid above) */
.about-pics { width: 100%; }
.about-pics img {
  border-radius: 12px;
  display: block;
  width: 100%;
  object-fit: cover;
}
/* Two-up image pairs (edu / ai / ai45 / logos) share the same flex sizing;
   only the aspect-ratio (and a couple of object-fit/radius tweaks) differ. */
.about-pics--edu img,
.about-pics--ai img,
.about-pics--ai45 img,
.about-pics--logos img {
  flex: 1 1 240px;
  max-width: 312px;
}
/* Education: two equal portraits */
.about-pics--edu img { aspect-ratio: 312 / 370; }
/* AI slop / stack / logos / ai45 groups share the same 640px measure as body text */
.about-pics--ai,
.about-pics--stack,
.about-pics--logos,
.about-pics--ai45 {
  max-width: 640px;
  margin-inline: auto;
}
.about-pics--ai img { aspect-ratio: 1 / 1; }
/* Acronis branding: two full-width shots stacked, natural ratios (no crop) */
.about-pics--stack {
  flex-direction: column;
  align-items: center;
}
/* Logo redraw: two wordmarks side by side, natural ratio (no crop) */
.about-pics--logos img {
  aspect-ratio: 312 / 176;
  object-fit: contain;
  border-radius: 0;
}
/* Art direction pair 2: two 4:5 portrait ads, natural ratio (no crop) */
.about-pics--ai45 img { aspect-ratio: 4 / 5; }
/* Lead: wide sprint + portrait scrum, same height on desktop */
/* Single full-width image (no crop); base shared with .process-img / .case-image.
   max-width only matters where .about-image is a direct child of .about-section
   (not inside .about-head--wide, which already caps at 840px). */
.about-image { max-width: 840px; }
/* Paired before/after comparison: stacked full-width blocks, each = funnel + interface + caption */
.compare-pair {
  display: flex;
  flex-direction: column;
  gap: 48px;
  width: 100%;
  max-width: 840px;
  margin-inline: auto;
}
.compare-col {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.compare-col .compare-funnel {
  width: 100%;
  height: auto;
  border-radius: 0;
  box-shadow: none;
  object-fit: contain;
}
.compare-col .about-image { width: 100%; }
/* Framed variant: rounded corners only (no shadow) */
.about-image--framed {
  border-radius: 12px;
}
.case-list--num{list-style:decimal}
/* Shadow variant: same drop-shadow as the desktop app shots / canvas */
.about-image--shadow {
  box-shadow: var(--shadow-img);
}
/* Image paragraphs sit as far from text as paragraphs sit from each other.
   Text paragraphs have ~4.5px line leading + 10px margin between them; an
   image block has no leading, so it needs a larger margin to match visually. */
.case-block > .process-figure{margin:15px 0;align-self:stretch}
.case-main--tight-top{padding-top:var(--gap-title-body)}
.case-block p:has(> .about-image),
.case-block p:has(> .zoom > .about-image) {
  margin-top: 15px;
  margin-bottom: 15px;
}
/* GLSL demo canvas – same framing as the desktop app shots */
.canvas {
  border-radius: 12px;
  box-shadow: var(--shadow-img);
}

/* Logos row */
.about-logos {
  width: 100%;
  max-width: 848px;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 28px 48px;
  justify-content: center;
  align-items: center;
  /* No top padding: the text→logos distance is just the .about-section gap (50px).
     Bottom padding keeps the row off the section boundary. */
  padding: 0 0 40px;
}
.about-logos img {
  height: 44px;
  width: auto;
}
.about-logos--icons { gap: 8px; max-width: 640px; margin-inline: auto; }
.about-logos--icons img {
  width: 48px;
  height: 48px;
  border-radius: 10px;
}

/* About footer single link */
.about-foot-link {
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 4px;
}
/* Inline body links (about paragraphs + .inline-link) – identical behaviour */
.about-head p a,
.inline-link { color: var(--c-link-hover); transition: color 250ms ease; }
.about-head p a:hover,
.inline-link:hover { color: rgb(198, 148, 114); transition: none; }

.about-foot-link:hover { color: var(--c-link-hover); }

/* Mobile adjustments – layout only, no font-size overrides
   (text sizes scale automatically via --fs-title) */
@media (max-width: 768px) {
  
  
  
  .case-head { padding: 20px 0; grid-template-columns: 40px 1fr 40px; grid-auto-rows: minmax(40px, auto); }
  .case-back { width: 56px; height: 56px; top: 12px; left: calc(var(--pad-side) - 8px + env(safe-area-inset-left)); }
  .case-back::before { inset: -6px; }
  .case-main { padding-top: 40px; padding-bottom: 0; }
  .case-table th, .case-table td { padding: 8px 10px; }
  .card-mock { width: 100%; max-width: 358px; margin-top: -9px; margin-bottom: -20px; }
  .data-columns { row-gap: 0; }
  
  .compare-pair { grid-template-columns: 1fr; }
  .case-links { gap: 20px; }
}

/* Industry awards cards (about page) */
/* Scroll-drawn stacked bar chart (about page, "Data-driven design").
   Every segment is a scroll-driven scaleY: the 7 columns share the chart's
   view() timeline, the columns overlapping by half within the 10-55% cover range (10% is soon after the top of
   the chart enters the viewport), and inside
   a column Android, iOS and web animate one after another with a spring ease.
   Without animation-timeline support the whole chart is simply drawn. */

/* Percentage column-gap resolves against the padded content box, so to make the
   six inner gaps equal the two 8.83% edge paddings the gap is 8.83 / 0.8234. */

/* Only the topmost (yellow) segment overshoots – a springy blue or red segment
   would visibly detach from the segment stacked above it during the bounce. */
/* Percentage heights land on fractional pixels, so the seam between two
   segments can rasterise as a hairline. Each lower segment paints 1px past its
   top edge in its own colour, which covers the seam without changing layout. */

/* Where scroll-TRIGGERED animations exist (Chrome 145+), each bar runs on its
   own clock instead of being scrubbed. Every COLUMN owns a trigger that fires at
   its own scroll position (10%, 16%, ... of the cover range), so a column starts
   when the scroll reaches it, whatever the neighbouring columns are doing –
   columns overlap freely. Inside a column the three segments keep a short stagger. */

/* Owl (education section): the artwork draws itself as the section scrolls, each
   brush shape outlined first and then filled. It is complete when the drawing
   sits a little above the middle of the viewport (cover 42%). Filled paths, so the
   "pen" is the outline of each shape; pathLength="1" makes long and short paths
   take the same share of the scroll. */

/* Infinite logo marquee on a very shallow arc (about page, "20 years").
   The logos are laid out around a 3500px-radius circle and the whole ring
   rotates, so they drift right-to-left and dip slightly towards the middle.
   One rotation step equals exactly one set of logos, so the loop is seamless. */

/* Scroll-driven three-phone composition (about page).
   Stacked at the top of the page, spread into the hero composition by the time
   the block reaches the middle of the viewport. No JS: CSS scroll-driven
   animations. Browsers without animation-timeline get the spread state
   straight away (0s duration + fill both). */

/* Centre phone carries its drop-shadow in the bitmap: 2113px wide against the
   1814px phone body, so it is drawn wider to keep the body at the same size. */

/* Spread measured in cqw – a share of the stack, not of the phone – so the
   composition keeps its proportions at every width. */

.zoom img { transition: box-shadow 200ms ease; }

/* Card too narrow for the two-column layout: stack and centre, whatever the viewport */

/* Analytics tables (screen resolutions case) */
/* Fluid up to 640px: the two number columns keep their fixed width, the label
   columns take the rest. min-width is the point where the labels stop fitting –
   below it the wrapper scrolls horizontally. */
.case-table--stats { width: 100%; max-width: 640px; min-width: 485px; }
/* Four-column variant (screen resolutions): two label columns to fit instead of one. */
.case-table--stats-4 { min-width: 525px; }
.case-block--after-table { margin-top: calc(-1 * (var(--gap-block) - var(--gap-title-body)) - 16px); }
.tight-top { margin-top: calc(-1 * (var(--gap-block) - var(--gap-title-body))); }
.case-table--stats .col-num { width: 120px; }
.case-table--stats .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; word-wrap: normal; overflow-wrap: normal; }
.case-table--stats thead th.num { text-align: right; }
/* Section rows inside a table (typography variables, InvestEngine design system) */
.case-table__section th { font-weight: 600; text-align: left; padding-top: 24px; }
.case-block:has(> .case-table-scroll) { width: 100%; min-width: 0; }
.case-block > .case-table-scroll { min-width: 0; align-self: stretch; }

/* Zoomable images – pure-CSS lightbox (checkbox based, so it leaves no history entries).
   Usage: wrap the thumbnail in <label class="zoom" for="z-slug">…</label> and add
   <input type="checkbox" class="lightbox-toggle" id="z-slug" hidden />
   <div class="lightbox"><label class="lightbox__backdrop" for="z-slug"></label>
   <img src="…" alt="…" /><label class="lightbox__close" for="z-slug">×</label></div> */
/* position: relative keeps every .zoom in the same paint layer – without it the
   transformed (hovered) one would paint above its later siblings. */
.zoom { position: relative; display: block; cursor: zoom-in; transition: transform 200ms ease; }
.zoom:hover { transform: translateY(-2px); }
.zoom:hover img { box-shadow: 0 12px 28px rgba(0, 0, 0, 0.26); }
.shot-pair--plain .zoom:hover img, .zoom--plain:hover img { box-shadow: none; }
.lightbox-toggle:checked + .lightbox { display: flex; }
.lightbox { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 40px; background: rgba(20, 20, 20, 0.92); }

.lightbox__backdrop { position: absolute; inset: 0; cursor: zoom-out; }
.lightbox > img { position: relative; max-width: min(100%, 1600px); max-height: 100%; width: auto; height: auto; border-radius: 4px; }
.lightbox__close { cursor: pointer; position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font-size: 32px; line-height: 1; padding-bottom: 4px; box-sizing: border-box; color: rgb(255, 255, 255); text-decoration: none; border-radius: 50%; background: rgba(255, 255, 255, 0.12); }
.lightbox__close:hover { background: rgba(255, 255, 255, 0.24); color: rgb(255, 255, 255); }
@media (max-width: 768px) { .lightbox { padding: 20px; } .lightbox__close { top: 12px; right: 12px; } }

/* Information-architecture matrix (BaaS dashboard) */
.case-table-scroll--840 { max-width: 840px; margin: 0 auto; }
.case-table--ia { width: 1030px; max-width: 1030px; }
.case-table--ia .col-type      { width: 160px; }
.case-table--ia .col-all       { width: 155px; }
.case-table--ia .col-payments  { width: 170px; }
.case-table--ia .col-card      { width: 165px; }
.case-table--ia .col-questions { width: 380px; }
.case-table--ia td { overflow-wrap: anywhere; }
.case-table--ia td.col-type    { color: rgb(150, 150, 150); }
.case-table--ia .c-warn { color: var(--c-link-hover); }
.case-table--ia .c-ok   { color: oklch(0.52 0.09 155); }

/* Glossary of terms (copywriting case) */
.case-table--dict { width: 1160px; max-width: 1160px; }
.case-table--dict .col-type  { width: 175px; }
.case-table--dict .col-right { width: 290px; }
.case-table--dict .col-wrong { width: 290px; }
.case-table--dict .col-why   { width: 405px; }
.case-table--dict td.col-type { color: rgb(150, 150, 150); }

/* Horizontal bar chart (b2b-user-interviews). Palette matches .chart on the homepage. */
.hchart { --label: 300px; --gap: 20px; margin: 0; width: 100%; max-width: 840px; position: relative; display: flex; flex-direction: column; gap: 14px; }
.hchart__row { display: grid; grid-template-columns: var(--label) minmax(0, 1fr); gap: var(--gap); align-items: center; view-timeline-name: --hrow; }
.hchart__label { font-size: 15px; line-height: 1.3; text-align: right; text-wrap: pretty; }
.hchart__bars { display: flex; flex-direction: column; gap: 3px; padding: 4px 0; background: linear-gradient(#E1E3E6, #E1E3E6) 0 0 / 1px 100% no-repeat; }
.hbar { position: relative; display: block; height: 14px; width: var(--v); border-radius: 0 4px 4px 0; transform-origin: left; }
.hbar b { position: absolute; left: calc(100% + 6px); top: 50%; transform: translateY(-50%); font-size: 12px; font-weight: 400; line-height: 1; color: #7A828C; white-space: nowrap; }
.hbar--freq { background: #FBBC04; }
.hbar--imp { background: #4285F4; }
.hchart__legend { margin: 10px 0 0; display: flex; flex-wrap: wrap; justify-content: center; column-gap: 24px; row-gap: 6px; }
.hchart__legend p { margin: 0; }
.legend-mark--freq { background: #FBBC04; }
.legend-mark--imp { background: #4285F4; }
@supports (animation-timeline: view()) {
  .hbar { animation: hbar-grow linear both; animation-timeline: --hrow; animation-range: cover 8% cover 38%; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  .hbar--imp { animation-range: cover 14% cover 44%; }
  .hbar b { animation: hbar-num linear both; animation-timeline: --hrow; animation-range: cover 30% cover 44%; }
  .hbar--imp b { animation-range: cover 36% cover 50%; }
}
@keyframes hbar-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes hbar-num { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hbar, .hbar b { animation: none; } }
@media (max-width: 768px) {
  .hchart { --label: 0px; --gap: 0px; gap: 16px; }
  .hchart__row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .hchart__label { text-align: left; font-size: 14px; }
}

/* Stacked bar chart (homepage, platform-dependency). Moved from home.css so case pages can use it. */
.process-figure:has(> .chart) { align-self: stretch; align-items: center; }
.chart { --plot: 260px; --axis: 62px; width: 100%; max-width: 840px; view-timeline-name: --chart; }
.chart__legend { margin-top: 18px; text-align: center; font-size: 15px; }
.key--title { color: #7A828C; }
.key--web { color: #FBBC04; }
.key--ios { color: #EA4335; }
.key--android { color: #4285F4; }
.chart__plot { position: relative; height: var(--plot); }
.chart__row { position: absolute; left: var(--axis); right: 0; top: var(--y); height: 0; border-top: 1px solid #E1E3E6; }
.chart__row span { position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%); font-size: 13px; line-height: 1; color: #7A828C; white-space: nowrap; }
.chart__cols { position: absolute; left: var(--axis); right: 0; top: 0; bottom: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10.72%; padding-inline: 8.83%; }
.chart__col { height: 100%; display: flex; flex-direction: column-reverse; align-items: center; }
.bar { flex: 0 0 auto; width: 100%; max-width: 38px; transform: scaleY(0); transform-origin: bottom; animation-name: bar-grow; animation-fill-mode: both; animation-timeline: --chart; animation-range: cover var(--s) cover var(--e); animation-timing-function: linear(0, 0.42 22%, 0.86 42%, 1.06 58%, 0.98 72%, 1.01 86%, 1); }
.bar--android, .bar--ios { animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); box-shadow: 0 -1px 0 0 currentColor; }
.bar--android { color: #4285F4; background: #4285F4; }
.bar--ios { color: #EA4335; background: #EA4335; }
.bar--web { background: #FBBC04; border-radius: 4px 4px 0 0; }
@keyframes bar-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.chart__months { margin-left: var(--axis); display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10.72%; padding-inline: 8.83%; }
.chart__months span { padding-top: 10px; text-align: center; font-size: 14px; color: #7A828C; width: max-content; justify-self: center; }
@supports (animation-trigger: --t play-once) {
  /* Segments inside a column run strictly one after another (0.2s each, no
     overlap): a segment sits at a fixed place in the stack, so if the one above
     it started growing early there would be a visible gap under it. */
  .bar { animation-timeline: auto; animation-duration: 0.2s; animation-delay: 0s; }
  .bar:nth-child(2) { animation-delay: 0.2s; }
  .bar:nth-child(3) { animation-delay: 0.4s; animation-duration: 0.35s; }
  .chart__col:nth-child(1) { timeline-trigger: --c1 view() cover 10%; }
  .chart__col:nth-child(1) .bar { animation-trigger: --c1 play-once; }
  .chart__col:nth-child(2) { timeline-trigger: --c2 view() cover 16%; }
  .chart__col:nth-child(2) .bar { animation-trigger: --c2 play-once; }
  .chart__col:nth-child(3) { timeline-trigger: --c3 view() cover 22%; }
  .chart__col:nth-child(3) .bar { animation-trigger: --c3 play-once; }
  .chart__col:nth-child(4) { timeline-trigger: --c4 view() cover 28%; }
  .chart__col:nth-child(4) .bar { animation-trigger: --c4 play-once; }
  .chart__col:nth-child(5) { timeline-trigger: --c5 view() cover 34%; }
  .chart__col:nth-child(5) .bar { animation-trigger: --c5 play-once; }
  .chart__col:nth-child(6) { timeline-trigger: --c6 view() cover 40%; }
  .chart__col:nth-child(6) .bar { animation-trigger: --c6 play-once; }
  .chart__col:nth-child(7) { timeline-trigger: --c7 view() cover 46%; }
  .chart__col:nth-child(7) .bar { animation-trigger: --c7 play-once; }
}
@media (prefers-reduced-motion: reduce) {
  .bar { animation-timeline: auto; animation-trigger: none; animation-delay: 0s; }
}
@media (max-width: 768px) {
  .chart { --plot: 260px; --axis: 48px; }
  .chart__legend { margin-top: 12px; font-size: 13px; }
  .chart__row span, .chart__months span { font-size: 11px; }
}