:root {
  --text-primary: #26282d;
  --text-secondary: #565963;
  --color-Secondary: #565963; /* secondary dark */

  /* fixed radii (px only, never % or vw) so corners stay constant as images scale */
  --radius-media: 20px;
  --radius-phone: 16px;
  --text-muted: #737785;
  --text-accent: #717686;
  --accent: #0004f0;
  --border-card: #e9e9e9;
  --border-tag: #e4e5e8;
  --border-divider: #cfcfcf;

  --font-sans: "Inter", system-ui, sans-serif;
  --font-serif: "DM Serif Display", Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: #fff;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ul { margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; }

.accent { color: var(--accent); }

/* ---------- Top nav ---------- */
html { scroll-padding-top: 98px; scroll-behavior: smooth; }

.top-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* full-bleed bar, content capped to the 1440px frame: 100px each side at 1440, in line with the page content */
  padding: 32px max(32px, calc((100% - 1240px) / 2));
  background: #fff;
}
.logo { white-space: nowrap; font-size: 20px; line-height: 33px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; color: var(--text-primary); }
.top-nav__links { display: flex; gap: 40px; flex: none; white-space: nowrap; }
.top-nav__links a {
  position: relative;
  display: inline-block;
  font-weight: 500;
  color: var(--color-Secondary);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 6px;
  text-decoration-color: transparent;
  transition: color 0.25s ease, text-decoration-color 0.25s ease;
}
/* reserve the bold width so switching to the active state never moves the neighbours */
.top-nav__links a::after {
  content: attr(data-label);
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-weight: 600;
  pointer-events: none;
}
.top-nav__links a:hover,
.top-nav__links a:focus-visible { color: var(--text-primary); text-decoration-color: currentColor; }
/* current page / section */
.top-nav__links a.is-active,
.top-nav__links a.is-active:hover {
  color: var(--text-primary);
  font-weight: 600;
  text-decoration-color: currentColor;
}

/* ---------- Layout ---------- */
:root { --gut: 16px; }
@media (max-width: 1100px) {
  :root { --gut: 24px; } /* side margin on tablets and phones */
  .top-nav, .footer { padding-inline: var(--gut); }
}

.page {
  width: min(1240px, 100% - 2 * var(--gut));
  margin: 70px auto 0;
  margin-left: round(down, calc((100% - min(1240px, 100% - 2 * var(--gut))) / 2), 1px);
  display: flex;
  flex-direction: column;
  gap: 136px;
}

/* ---------- Hero ---------- */
/* text on the left, the "let's do something creative together" card on the right */
.hero {
  display: flex;
  align-items: stretch;
  gap: 70px;
  /* on short windows the gap under the hero tightens a little so the first project always peeks in under the "Case Studies" title */
  margin-bottom: clamp(-64px, calc(100vh - 820px), 0px);
}
.hero__text {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 50px;
}
.hero__title {
  font-family: var(--font-serif);
  font-weight: 400;
  /* 62px at the 1440px frame, scaling proportionally below it */
  font-size: clamp(40px, 4.3056vw, 62px);
  line-height: 0.89;
  display: flex;
  flex-direction: column;
  gap: 0.25em;
}
/* the title: a soft blue spotlight follows the cursor over the letters (and glides over them once when the page lands), and the phrase "digital & physical products" does a wave */
@property --hs-r { syntax: "<length>"; inherits: true; initial-value: 0px; }
.hero__title { position: relative; }
.hero-spot {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 0.25em;
  color: var(--accent);
  --hs-x: -300px;
  --hs-y: -300px;
  --hs-r: 0px;
  -webkit-mask-image: radial-gradient(circle var(--hs-r) at var(--hs-x) var(--hs-y), #000 62%, transparent 100%);
  mask-image: radial-gradient(circle var(--hs-r) at var(--hs-x) var(--hs-y), #000 62%, transparent 100%);
  transition: --hs-r 0.35s var(--ease-out);
}
.js .hero-spot .hero__line { animation: none; }
.hero__title.is-lit > .hero-spot { --hs-r: 120px; }
.hero-ch { display: inline-block; will-change: transform; }
.hero__line { display: flex; align-items: center; }
.hero__line:first-child { min-height: 1.28em; } /* the star makes the first row taller: 83px from line to line at 62px */
.hero__line--indent { padding-left: 1.922em; } /* 119px at 62px */
/* the title star is an Inter semibold asterisk, set up and to the left as in the design */
.hero__star { flex: none; width: 0.75em; margin-right: -0.153em; text-align: left; font-family: var(--font-sans); font-weight: 600; position: relative; top: -0.153em; }
.hero__multi { flex: none; white-space: nowrap; }
.hero__nowrap { display: inline-flex; align-items: center; white-space: nowrap; }
.hero__dot { width: 0.625em; margin-left: -0.16em; text-align: center; }

.hero__body {
  width: 544px;
  max-width: 100%;
  margin: 0 0 0 calc(1.922 * clamp(40px, 4.3056vw, 62px));
  font-size: 16px;
  line-height: 28px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--text-light);
}
/* "*digital & physical products" stays together on one line: the phrase is in the dark text colour, the star is a small raised accent */
.hero__keep { white-space: nowrap; }
.hero__body .hero__serif { color: var(--text-primary); font-weight: 600; }
.hero__body .hero__asterisk { font-weight: 600; font-size: 23px; line-height: 1; }
/* the lines break where the design breaks them (only where the text column is wide enough; narrower, the text just flows) */
.hero__br { display: none; }
@media (min-width: 1150px) { .hero__br { display: inline; } }

/* the card: dotted paper and the letters */
.hero-card {
  position: relative;
  flex: none;
  width: 517px;
  aspect-ratio: 517 / 347.5;
  border-radius: 16px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  /* dotted paper: a dot every 24.15px, the first one 19.5px from the left and 12px from the top, so none is cut by the edge */
  background: #f9f9f9 radial-gradient(circle, #d7d7d7 1.3px, transparent 1.8px) 7.4px 0 / 24.15px 24.15px;
  user-select: none;
  -webkit-user-select: none;
}
.hero-card__letters { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

@media (max-width: 1100px) {
  .hero { flex-direction: column; gap: 56px; }
  /* narrow: one left edge for the title, the paragraph and the card */
  .hero__line--indent { padding-left: 0; }
  .hero__body { margin-left: 0; }
  .hero-card { width: min(517px, 100%); }
}

/* ---------- Case studies ---------- */
.case-studies { display: flex; flex-direction: column; gap: 24px; }
.projects { display: flex; flex-direction: column; gap: 40px; }
.case-studies__title { font-size: 36px; line-height: 42px; font-weight: 600; }

.project {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  height: 526px;
  padding: 48px;
  border: 1px solid var(--border-card);
  border-radius: 26px;
  background: #fff;
}

.project__info {
  flex: 1;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}
.project__info > div { width: 320px; max-width: 100%; display: flex; flex-direction: column; gap: 16px; }
.project__name { font-size: 28px; line-height: 42px; font-weight: 600; white-space: nowrap; }
.project__desc { color: var(--text-secondary); }

.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.tags li {
  height: 25px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid var(--border-tag);
  border-radius: 103px;
  font-size: 12px;
  letter-spacing: -0.228px;
  color: var(--text-accent);
  white-space: nowrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 36px;
  padding: 8px 16px;
  border: 1px solid var(--text-secondary);
  border-radius: 167px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: -0.266px;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.btn:hover { background: #f4f4f6; }
/* on the landing page every project button takes its project's colours on hover, focus and press */
.project { --btn-color: var(--text-secondary); }
.project--belingual { --btn-color: #df5d09; }
.project--reflect { --btn-color: #2e4eb1; }
.project--fha { --btn-color: #2f4552; }
.project .btn:hover,
.project .btn:focus-visible,
.project .btn:active { background: var(--btn-color); border-color: var(--btn-color); color: #fff; }
/* icon frame 21x21 holding a 7.95x7.95 arrow with a 1.5px stroke; points up-right, turns to point right on hover */
.btn__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 21px;
  height: 21px;
}
.btn__icon svg {
  display: block;
  overflow: visible; /* stroke may extend past the 7.95px vector box */
  width: 7.95px;
  height: 7.95px;
  transition: transform 0.3s ease;
}
.btn:hover .btn__icon svg,
.btn:focus-visible .btn__icon svg,
.btn:active .btn__icon svg { transform: translateY(0.75px) rotate(45deg); } /* a hair below the geometric centre, which is where the lowercase text reads as centred */

/* Project media */
.project__media {
  position: relative;
  flex: 0 1 650px;
  min-width: 0;
  aspect-ratio: 650 / 428;
  border-radius: var(--radius-media);
}
.project__media > img { position: absolute; max-width: none; border-radius: var(--radius-media); }

.project__media--belingual {
  overflow: hidden;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
}
.project__media--belingual img { top: 0; left: 0; width: 100%; height: 235.95%; }

.project__media--reflect {
  background: #2e4eb1;
  overflow: hidden;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}
.project__media--reflect img { top: 2.89%; left: 0; width: 99.93%; height: 94.85%; }

.project__media--fha {
  overflow: visible; /* phone mockup overhangs the screenshot */
  aspect-ratio: 650 / 420;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
}
.project__media--fha > img { inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-media); }

/* Find Healthcare Abroad: one relative wrapper holds the screenshot and the phone (700 = 650 screenshot + 50 phone overhang) */
.project__visual {
  position: relative;
  flex: 0 1 700px;
  min-width: 0;
  aspect-ratio: 700 / 420;
}
.project__visual .project__media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 92.857%;
  aspect-ratio: auto;
}

.project__mobile {
  position: absolute;
  /* V2 geometry, in % of the shared wrapper so phone + screenshot scale as one unit */
  left: 0;
  top: 13.8%;
  bottom: 0;
  width: 26.43%;
  overflow: hidden;
  border-radius: var(--radius-phone);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
.project__mobile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  max-width: none;
}

/* Screenshot hover: uniform scale of the whole unit (the FHA wrapper scales screenshot + phone together) */
.project__media--belingual,
.project__media--reflect,
.project__visual { transition: transform 0.35s ease; }
@media (hover: hover) {
  .project__media--belingual:hover,
  .project__media--reflect:hover,
  .project__visual:hover { transform: scale(1.03); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* Landing page: hero parts ease in one after another on load; project cards reveal on scroll
   (the shared .reveal rules live in the About section below) */
.js .hero__line:nth-child(1) { animation: intro-in 0.8s var(--ease-out) 0.05s backwards; }
.js .hero__line:nth-child(2) { animation: intro-in 0.8s var(--ease-out) 0.2s backwards; }
.js .hero__body { animation: intro-in 0.8s var(--ease-out) 0.45s backwards; }
.js .hero-card { animation: intro-in 0.8s var(--ease-out) 0.3s backwards; }

@keyframes media-in { from { opacity: 0; } }
.js .project.is-visible .project__media,
.js .project.is-visible .project__visual { animation: media-in 0.9s ease 0.2s backwards; }

@media (prefers-reduced-motion: reduce) {
  .js .hero__line, .js .hero__body, .js .hero-card,
  .js .project.is-visible .project__media,
  .js .project.is-visible .project__visual { animation: none; }
}

/* ---------- Footer ---------- */
.footer {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100px;
  margin-top: 80px;
  padding: 0 100px;
  border-top: 1px solid var(--border-divider);
}
.footer__copy { flex: 1; text-align: center; padding-left: 78px; /* balances the social icons */ }
.footer__social { display: flex; gap: 10px; }

.social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 20px;
  background: var(--text-primary);
}
.social { transition: transform 0.25s ease; }
.social:hover,
.social:focus-visible { transform: scale(1.1); }
.social__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 21px;
  height: 21px;
}
.social__icon img { display: block; }
.social__linkedin { width: 14px; height: 14px; }

/* ---------- Responsive ---------- */
/* Stacked card: text on top, screenshots underneath at full text width */
@media (max-width: 1024px) {
  :root { --radius-media: 16px; --radius-phone: 12px; }
  .project { flex-direction: column; align-items: stretch; height: auto; gap: 32px; padding: 48px; }
  .project__info { flex: none; align-self: auto; gap: 24px; }
  .project__info > div { width: 100%; }
  .project__media { flex: none; width: 100%; margin-inline: 0; }

  .top-nav { padding-inline: var(--gut); }
  .footer { padding-inline: var(--gut); }
  .footer__copy { padding-left: 0; }
}

/* The phone mockup overhangs the screenshot, so this card stacks earlier */
@media (max-width: 1260px) {
  .project--fha { flex-direction: column; align-items: stretch; height: auto; gap: 32px; padding: 48px; }
  .project--fha .project__info { flex: none; align-self: auto; gap: 24px; }
  .project--fha .project__info > div { width: 100%; }
  .project--fha .project__visual { flex: none; width: 100%; }
}

@media (max-width: 760px) {
  .page { gap: 96px; }
}

@media (max-width: 600px) {
  :root { --radius-media: 12px; --radius-phone: 10px; }
  .hero__title { font-size: min(40px, 10vw); }
  .project__name { white-space: normal; }
  .top-nav, .footer { padding-inline: var(--gut); }
  .top-nav__links { gap: 20px; }
  .footer { height: auto; padding-block: 24px; flex-direction: column; gap: 16px; }
}

/* =====================================================================
   About page
   ===================================================================== */
:root {
  --font-script: "Rock Salt", cursive;
  --text-light: #818694;
  --border-tag-strong: #caccd2;
  --timeline-line: #cacccd;
}

.about {
  width: min(1069px, 100% - 2 * var(--gut));
  margin: 70px auto 0;
  /* snap to a whole pixel so text is never rendered on a half-pixel (blurry) boundary */
  margin-left: round(down, calc((100% - min(1069px, 100% - 2 * var(--gut))) / 2), 1px);
  display: flex;
  flex-direction: column;
  gap: 50px;
  overflow-x: clip; /* slide-in offsets must never create a horizontal scrollbar */
}

/* design: 150px between the last timeline item and the footer */
.about + .footer { margin-top: 150px; }

/* ---------- Intro ---------- */
.intro { width: 448px; max-width: 100%; display: flex; flex-direction: column; }
.intro__name { font-size: 24px; line-height: 33px; font-weight: 600; color: var(--text-primary); }
.intro__text { margin-top: 20px; color: var(--text-secondary); }
/* View CV: a white button with a hard blue shadow; on hover it presses into the shadow, fills blue, and the arrow pushes on */
.intro__cv {
  align-self: flex-start;
  margin-top: 24px;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  height: 36px;
  padding: 0 27px 0 20px;
  border: 1px solid var(--accent);
  border-radius: 12px;
  background: #fff;
  color: var(--accent);
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: -0.4px;
  text-transform: uppercase;
  box-shadow: 2px 2px 0 var(--accent);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s, color 0.18s;
}
.intro__cv-arrow { flex: none; display: block; width: 11px; height: 11px; overflow: visible; transition: transform 0.25s var(--ease-out); }
.intro__cv:hover,
.intro__cv:focus-visible,
.intro__cv:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--accent); background: var(--accent); color: #fff; }
.intro__cv:hover .intro__cv-arrow,
.intro__cv:focus-visible .intro__cv-arrow { transform: translate(2px, -2px); }
.intro__cv:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.intro__divider { width: 100%; height: 0; margin: 32px 0; border: 0; border-top: 1px solid #e4e5e8; }

.disciplines { width: 345px; max-width: 100%; display: flex; flex-direction: column; gap: 20px; }
.disciplines__label { color: var(--text-light); }
.disciplines__tags { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.disciplines__tags li {
  display: flex;
  align-items: center;
  padding: 4px 16px;
  border: 1px solid var(--border-tag-strong);
  border-radius: 103px;
  color: var(--text-secondary);
  white-space: nowrap;
  cursor: default;
}
.disciplines__tags li.is-active {
  background: rgba(0, 4, 222, 0.05);
  border-color: rgba(0, 4, 222, 0.3);
  color: var(--accent);
}

.intro__journey {
  margin-top: 56px;
  font-family: var(--font-script);
  font-weight: 400;
  font-size: 20px;
  line-height: normal;
  letter-spacing: 1.2px;
  text-transform: lowercase;
  color: var(--accent);
  white-space: nowrap;
}

/* ---------- Timeline ---------- */
.timeline { position: relative; width: 1069px; max-width: 100%; padding-top: 43px; }
.timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 520px;
  width: 2px;
  background: var(--timeline-line);
}

.tl { position: relative; }
.tl + .tl { margin-top: 48px; }
.tl__conn { position: absolute; top: -3px; z-index: 1; display: block; }
.tl--left .tl__conn { left: 392px; }
.tl--right .tl__conn { left: 507px; }
.tl--right .tl__content { margin-left: 689px; }
.tl--right .tl__here { position: absolute; left: 507px; top: -2px; width: 142px; z-index: 1; }

.tl-01 .tl__content { margin-left: 27px; }
.tl-03 .tl__content,
.tl-05 .tl__content { margin-left: 12px; }

.tl__content { display: flex; flex-direction: column; gap: 24px; width: 380px; max-width: 100%; }
.tl-01 .tl__content { width: 321px; }
.tl-02 .tl__content { width: 307px; }
.tl-06 .tl__content { width: 277px; }
.tl-07 .tl__content { width: 392px; }
.tl-08 .tl__content { width: 298px; }

.tl__text { display: flex; flex-direction: column; width: var(--text-w, 321px); max-width: 100%; }
.tl__text--current { padding-top: 30px; }
.tl-06 .tl__text { max-width: none; } /* design text column is wider than its picture column */
.tl__category { color: var(--text-light); font-size: 14px; line-height: 20px; letter-spacing: -0.266px; white-space: pre-wrap; margin-bottom: 8px; }
.tl__title { color: var(--text-primary); font-size: 24px; line-height: 33px; font-weight: 600; }
.tl__place { margin-top: 4px; color: var(--text-secondary); font-weight: 600; white-space: nowrap; }
.tl__body { margin-top: 8px; color: var(--text-light); font-size: 16px; line-height: 24px; }

/* photos: fixed 20px radius, scaled uniformly */
.tl__figure { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.tl__figure figcaption {
  font-family: var(--font-script);
  font-size: 14px;
  line-height: 33px;
  letter-spacing: 0.84px;
  text-transform: lowercase;
  color: var(--accent);
  white-space: nowrap;
}
.tl__photo { position: relative; overflow: hidden; border-radius: 20px; }
.tl__photo img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.tl__photo--portrait { width: 253px; height: 380px; }
.tl__photo--landscape { width: 380px; max-width: 100%; aspect-ratio: 380 / 253; }
.tl__photo--bottom img { object-position: bottom; }
.tl__photo--london { opacity: 0.95; }
.tl__photo--london img { object-position: right; }

/* current position */
.tl__here-label {
  height: 33px;
  display: flex;
  align-items: center;
  position: relative;
  top: 2px;
  padding-left: 62px;
  white-space: nowrap;
  margin-bottom: -5px;
  font-family: var(--font-script);
  font-size: 14px;
  line-height: normal;
  letter-spacing: 0.84px;
  text-transform: lowercase;
  color: var(--accent);
}
.tl__here-marker { display: flex; align-items: center; }
.tl__here-marker img { display: block; flex: none; }
.tl__accent { color: var(--accent); }

/* the "I'm here" dot: steady blue glow + two expanding rings */
.tl__dot {
  position: relative;
  display: block;
  flex: none;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(152, 169, 244, 0.35), 0 0 22px 4px rgba(0, 4, 240, 0.35);
}
.tl__dot::before,
.tl__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(0, 4, 240, 0.55);
  animation: dot-pulse 2.4s ease-out infinite;
}
.tl__dot::after { animation-delay: 1.2s; }
.tl__dot img { position: relative; z-index: 1; }
@keyframes dot-pulse {
  0%   { transform: scale(1);   opacity: 0.9; }
  75%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}

@keyframes dot-pulse-small {
  0%   { transform: scale(1);   opacity: 0.9; }
  75%  { transform: scale(2);   opacity: 0; }
  100% { transform: scale(2);   opacity: 0; }
}

/* ---------- Scroll reveal (only when JS is running) ---------- */
:root { --ease-out: cubic-bezier(0.22, 0.7, 0.2, 1); }

/* sections and timeline stops fade in with a small rise as they scroll into view */
.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s var(--ease-out);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* the white axis circle stays opaque while the rest of the stop fades in: the stop itself rises, but only its
   content and connector line fade, so the axis line never shows through the circle */
.js .tl.reveal { opacity: 1; }
.js .tl.reveal > :not(.tl__conn--dot) { opacity: 0; transition: opacity 0.8s ease; }
.js .tl.reveal.is-visible > :not(.tl__conn--dot) { opacity: 1; }
/* left stops use the art with the circle on its right end, right stops the one with the circle on its left */
.tl--left .tl__conn--dot { clip-path: inset(-4px -4px -4px 114px); }
.tl--left .tl__conn--line { clip-path: inset(-4px 27px -4px -4px); }
.tl--right .tl__conn--dot { clip-path: inset(-4px 114px -4px -4px); }
.tl--right .tl__conn--line { clip-path: inset(-4px -4px -4px 27px); }

/* inside a stop, the photo follows the text a beat later */
.js .tl .tl__figure { opacity: 0; transition: opacity 0.9s ease 0.2s; }
.js .tl.is-visible .tl__figure { opacity: 1; }

/* photo: the zoom happens inside the frame, so the 20px corners, the frame and the caption never move */
.tl__photo img { transition: transform 0.9s cubic-bezier(0.25, 0.1, 0.25, 1); }
@media (hover: hover) {
  .tl__figure:hover .tl__photo img { transform: scale(1.06); }
}

/* top section: each part eases in one after another when the page opens */
@keyframes intro-in {
  from { opacity: 0; transform: translateY(14px); }
}
.js .intro > * { animation: intro-in 0.8s var(--ease-out) backwards; }
.js .intro > :nth-child(1) { animation-delay: 0.05s; }
.js .intro > :nth-child(2) { animation-delay: 0.15s; }
.js .intro > :nth-child(3) { animation-delay: 0.25s; }
.js .intro > :nth-child(4) { animation-delay: 0.30s; }
.js .intro > :nth-child(5) { animation-delay: 0.40s; }
.js .intro > :nth-child(6) { animation-delay: 0.65s; }
.js .disciplines__tags li { animation: intro-in 0.7s var(--ease-out) backwards; }
.js .disciplines__tags li:nth-child(1) { animation-delay: 0.50s; }
.js .disciplines__tags li:nth-child(2) { animation-delay: 0.60s; }
.js .disciplines__tags li:nth-child(3) { animation-delay: 0.70s; }
.js .disciplines__tags li:nth-child(4) { animation-delay: 0.80s; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .tl.reveal > *, .js .tl .tl__figure { opacity: 1; transform: none; transition: none; }
  .tl__photo img { transition: none; }
  .tl__figure:hover .tl__photo img { transform: none; }
  .js .intro > *, .js .disciplines__tags li { animation: none; }
  .tl__dot::after, .tl__dot::before { animation: none; opacity: 0; }
}

/* ---------- Between 1005 and 1100px: the same alternating timeline, scaled down in small steps so it still fits (1.0 at 1101px and up) ---------- */
@media (min-width: 1069px) and (max-width: 1100px) { .timeline { zoom: 0.97; } }
@media (min-width: 1037px) and (max-width: 1068px) { .timeline { zoom: 0.94; } }
@media (min-width: 1005px) and (max-width: 1036px) { .timeline { zoom: 0.91; } }

/* ---------- Narrow screens: single column with the rail on the left ---------- */
@media (max-width: 1004px) {
  .about { gap: 40px; }
  .intro__journey { white-space: normal; }
  /* the rail starts at the first dot, and its circles sit on the same left edge as the content above (the glow of the blue dot may spill into the page margin) */
  .about { overflow-x: visible; }
  html:has(.about), body:has(.about) { overflow-x: clip; }
  .timeline { padding-top: 0; padding-left: 0; }
  .timeline::before { left: 13px; }

  .tl, .tl + .tl { margin-top: 0; margin-bottom: 72px; padding-left: 56px; } /* 29px between the dot and the text */
  .tl--left .tl__content,
  .tl--right .tl__content,
  .tl-01 .tl__content, .tl-03 .tl__content, .tl-05 .tl__content,
  .tl-02 .tl__content, .tl-06 .tl__content, .tl-07 .tl__content, .tl-08 .tl__content { margin-left: 0; width: 100%; max-width: 380px; }
  .tl__text { width: 100%; }
  .tl__figure figcaption, .tl__place { white-space: normal; }

  /* show only the circle of each connector */
  .tl--left .tl__conn,
  .tl--right .tl__conn { top: -3px; left: 0; width: 27px; height: 27px; object-fit: none; }
  .tl--left .tl__conn { object-position: right; }
  .tl--right .tl__conn { object-position: left; }
  .tl--left .tl__conn--dot, .tl--right .tl__conn--dot { clip-path: none; }
  .tl__conn--line { display: none; }

  .tl--right .tl__here { top: -2px; left: 0; width: auto; }
  .tl__here-label { display: none; }
  /* a slightly smaller glow, so it fits between the rail and the edge of the page */
  .tl__dot { box-shadow: 0 0 0 4px rgba(152, 169, 244, 0.35), 0 0 12px 3px rgba(0, 4, 240, 0.3); }
  .tl__dot::before, .tl__dot::after { animation-name: dot-pulse-small; }
  .tl-08 .tl__here-marker > img { display: none; }
  .tl-08 .tl__text--current { padding-top: 2px; } /* the label lines up with the blue dot */
}

@media (max-width: 600px) {
  .intro__journey { font-size: 18px; letter-spacing: 1.1px; }
  .tl__photo--portrait { width: min(253px, 100%); height: auto; aspect-ratio: 253 / 380; }
  .tl__category, .tl__place { white-space: normal; }
}

/* =====================================================================
   Case study page (BeLingual)
   ===================================================================== */
html { --nav-h: 97px; }
:root {
  --orange: #df5d09;
  --orange-soft: #e6813f; /* number badges and the "See the solution" link */
  --line: #e4e5e8;
}

.cs {
  /* same side padding as the top nav, so the section menu starts on the logo's left edge; the content column stays where it was */
  margin: 70px 0 0;
  padding-inline: max(64px, calc((100% - 1440px) / 2 + 64px));
  display: grid;
  grid-template-columns: 279px minmax(0, 1fr);
  align-items: start;
}
.cs-main { max-width: 1000px; min-width: 0; }

/* ---------- Left navigation (sticky on desktop) ---------- */
.cs-nav { position: sticky; top: 157px; margin-top: -10px; align-self: start; }
.cs-nav ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.cs-nav li + li { margin-top: 9px; }
.cs-nav a {
  position: relative;
  display: block;
  height: 39px;
  padding-left: 16px;
  font-size: 16px;
  line-height: 39px;
  text-transform: uppercase;
  white-space: nowrap;
  font-weight: 400;
  color: var(--text-light);
  transition: color 0.25s ease;
}
.cs-nav a:hover,
.cs-nav a.is-active { color: var(--text-secondary); }
.cs-nav a.is-active { font-weight: 600; }
.cs-nav a.is-active::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1px;
  width: 3px;
  background: var(--cs-accent, var(--orange));
}

/* ---------- Shared pieces ---------- */
.cs-hero { display: block; width: 100%; height: auto; aspect-ratio: 1000 / 540; object-fit: cover; border-radius: 20px; }
.cs-main .cs-label {
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--text-light);
}
.cs-title { margin: 0; font-size: 24px; line-height: 33px; font-weight: 600; color: var(--text-primary); }
.cs-main p { margin: 0; color: var(--text-secondary); }
.cs-main p + p { margin-top: 24px; }
.cs-title + p { margin-top: 16px; }
.cs-divided { position: relative; border-top: 1px solid var(--line); padding: 64px 0 63px; }

/* ---------- Overview ---------- */
.cs-overview {
  margin-top: 55px;
  padding-bottom: 62px;
  display: grid;
  grid-template-columns: 305px minmax(0, 1fr);
  grid-template-rows: auto auto;
}
.cs-overview__brand { margin-left: 7px; }
.cs-overview__brand img { display: block; }
.cs-main .cs-overview__tagline {
  align-self: center;
  padding-top: 8px;
  font-size: 24px;
  line-height: 33px;
  font-weight: 600;
  color: var(--text-secondary);
}
.cs-meta { margin: 30px 0 0; padding: 0; }
.cs-meta > div { margin-bottom: 15.5px; }
.cs-meta > div:last-child { margin-bottom: 0; }
.cs-meta dt { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--text-light); }
.cs-meta dd { margin: 3px 0 0; color: var(--text-primary); }
.cs-overview__text { margin-top: 14px; }

/* ---------- The problem ---------- */
.cs-problems {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: grid;
  /* 312px is the narrowest a card can be before its longest title wraps: 3 columns, then 2, then 1 */
  grid-template-columns: repeat(auto-fit, minmax(min(312px, 100%), 1fr));
  gap: 32px;
}
.cs-problem {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 200px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 14px rgba(38, 40, 45, 0.09);
  overflow: hidden;
  transition: transform 0.3s var(--ease-out);
  scroll-margin-top: 130px;
}
.cs-problem h3 {
  flex: none;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 50px;
  margin: 0;
  padding-left: 14px;
  background: var(--orange);
  color: #fff;
  font-size: 15px;
  line-height: 24px;
  font-weight: 600;
}
.cs-problem h3 img { flex: none; width: 36px; height: 34px; display: block; }
.cs-main .cs-problem p { flex: 1; display: flex; align-items: center; padding: 0 30px 36px; }
/* the number: a soft circle in the header */
.cs-problem__n { margin: 0 14px 0 auto; flex: none; width: 20px; height: 20px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); font-size: 12px; line-height: 20px; font-weight: 600; text-align: center; }
/* "See the solution": the whole card is the link */
.cs-problem__go { position: absolute; left: 30px; bottom: 12.5px; pointer-events: none; display: inline-flex; align-items: center; gap: 11px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--orange-soft); transition: color 0.25s ease; }
/* the 1 has its weight on the right: pull it back to the optical centre */
.cs-pill__n.is-one { transform: translateX(-0.4px); }
.cs-problem__n.is-one { transform: translateX(-0.5px); }
.cs-problem__arrow { display: block; flex: none; }
.cs-problem__link { position: relative; display: flex; flex: 1; flex-direction: column; min-height: 0; color: inherit; }
.cs-problem__link:focus-visible { outline: none; }
.cs-problem:has(.cs-problem__link:focus-visible) { outline: 2px solid var(--orange); outline-offset: 3px; }
@media (hover: hover) {
  .cs-problem:hover { transform: scale(1.03); }
  .cs-problem:hover .cs-problem__go { color: var(--orange); font-weight: 700; }
}
.cs-problem:active .cs-problem__go { color: var(--orange); font-weight: 700; }

/* ---------- User research ---------- */
.cs-research { display: grid; grid-template-columns: 382px minmax(0, 1fr); }
.cs-research__img { display: block; margin: 28px 0 -11px -5px; max-width: none; height: auto; }
.cs-research__text { min-width: 0; }

/* ---------- Key insights ---------- */
.cs-insights {
  position: relative;
  margin-top: 32px;
  min-height: 541px;
}
/* the exported card (rounded corners, ruled lines, orange margin line and soft shadow are all in the image); it bleeds 20px past the box so the shadow is never clipped */
.cs-insights::before {
  content: "";
  position: absolute;
  inset: -20px;
  background: url("assets/belingual/insights-card.webp") center / 100% 100% no-repeat;
}
.cs-insights ul { list-style: none; margin: 0; padding: 54px 24px 0 125px; position: relative; }
.cs-insights li { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 5px; }
.cs-insights li + li { margin-top: 28px; }
.cs-insights li img { display: block; margin-top: -5px; width: 34px; height: 34px; }
.cs-insights h3 { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--text-primary); }
.cs-main .cs-insights p { margin-top: 4px; font-size: 14px; line-height: 20px; letter-spacing: -0.266px; color: var(--text-light); }
.cs-main .cs-insights p.is-large { font-size: 16px; line-height: 24px; letter-spacing: 0; margin-top: 4px; }
.cs-insights p.is-large span { font-size: 14px; letter-spacing: -0.266px; }

/* narrow screens: the exported card (photo, ruled lines, margin line) is cropped to its edge with percentages, so it stretches with the text and the corners are always drawn by CSS */
@media (max-width: 1100px) {
  .cs-insights { border-radius: 20px; overflow: hidden; background: #faf8f5; box-shadow: 0 4px 24px rgba(38, 40, 45, 0.08); }
  .cs-insights::before { inset: -3.45% -1.92%; background-size: 100% 100%; }
  .cs-insights ul { padding-left: calc(6.2% + 63px); }
}
@media (max-width: 760px) { .cs-insights ul { padding-left: calc(6.2% + 34px); } }

/* ---------- The solution ---------- */
.cs-solution-head { padding-bottom: 0; }
.cs-solution-head + .cs-sol { margin-top: 32px; }
.cs-sol { padding-bottom: var(--pb, 56px); }
.cs-sol + .cs-sol { border-top: 1px solid var(--line); padding-top: 64px; }
.cs-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  position: relative;
  z-index: 1;
  height: 23px;
  padding: 0 8.5px 0 2.5px;
  border: 1px solid var(--text-light);
  border-radius: 100px;
  background: #f9f9fa;
  font-size: 12px;
  line-height: 21px;
  letter-spacing: -0.3px;
  color: var(--text-secondary);
  scroll-margin-top: 130px;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease, box-shadow 0.6s ease;
}
.cs-pill__n { flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--orange-soft); color: #fff; font-size: 10px; line-height: 16px; font-weight: 600; text-align: center; letter-spacing: 0; }
.cs-pill__arrow { display: block; flex: none; width: 9px; height: 10px; }
/* the pill is a link back to its problem */
.cs-pill:hover, .cs-pill:active, .cs-pill:focus-visible, .cs-pill.is-flash { border-color: var(--orange); color: var(--orange); background: #fff; box-shadow: 0 0 8px 1px rgba(223, 93, 9, 0.38); }
.cs-pill__arrow { transition: color 0.2s ease; }
.cs-pill:hover .cs-pill__arrow, .cs-pill:active .cs-pill__arrow, .cs-pill:focus-visible .cs-pill__arrow, .cs-pill.is-flash .cs-pill__arrow { color: var(--orange); }
.cs-pill:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
/* arriving from the other end: a soft orange glow on all sides (like the Measuring success cards), then it fades */
.cs-problem.is-flash { animation: cs-flash-card 2.4s ease; }
@keyframes cs-flash {
  0% { box-shadow: 0 0 0 0 rgba(223, 93, 9, 0); }
  15%, 65% { box-shadow: 0 0 8px 1px rgba(223, 93, 9, 0.38); }
  100% { box-shadow: 0 0 0 0 rgba(223, 93, 9, 0); }
}
@keyframes cs-flash-card {
  0% { box-shadow: 0 2px 14px rgba(38, 40, 45, 0.09), 0 0 0 0 rgba(223, 93, 9, 0); }
  15%, 65% { box-shadow: 0 2px 14px rgba(38, 40, 45, 0.09), 0 0 12px 2px rgba(223, 93, 9, 0.38); }
  100% { box-shadow: 0 2px 14px rgba(38, 40, 45, 0.09), 0 0 0 0 rgba(223, 93, 9, 0); }
}
.cs-sub {
  display: flex;
  align-items: center;
  margin: 14px 0 0;
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  color: var(--text-primary);
}
/* the icon files already include their light circle; shown at their natural (width/height attribute) size */
.cs-sub img { display: block; flex: none; margin: 0 9px 0 0; }
.cs-main .cs-sol__text { margin-top: 6px; max-width: var(--w, 680px); }
.cs-main .cs-ba { margin-top: 31px; font-weight: 500; text-transform: uppercase; color: var(--text-accent); }
.cs-main .cs-ba--after { margin-top: 30px; }
.cs-main .cs-sol__text--after { margin-top: 8px; max-width: 455px; }

.cs-fig { margin: 32px -5px 0 -3px; overflow: visible; }
.cs-fig img { display: block; width: 100%; height: auto; }
/* mockup images carry their own drop shadow: the file is cropped with extra room (10px top, 24px elsewhere) and bleeds past the figure box so nothing is clipped */
.cs-fig:not(.cs-fig--flow) .cs-shot { position: relative; width: calc(100% + 48px); margin: -20px -24px -24px; }
.cs-shot img { display: block; width: 100%; max-width: none; margin: 0; height: auto; }
/* taller shadows: 32px of padding above the screen holds the shadow, so the screen sits exactly 32px below the body text */
.cs-fig.cs-fig--shadow:not(.cs-fig--flow) { overflow: visible; padding-top: 32px; margin-top: 0; }
.cs-fig.cs-fig--shadow:not(.cs-fig--flow) .cs-shot { margin-top: -32px; }
/* every annotated figure (label, screens, callouts) starts --fm below the text above it */
.cs-sol .cs-fig:not(.cs-fig--flow), .cs-sol .cs-fig.cs-fig--shadow:not(.cs-fig--flow) { margin-top: var(--fm, 32px); padding-top: 0; }
.cs-sol .cs-fig.cs-fig--shadow:not(.cs-fig--flow) .cs-shot { margin-top: -20px; }
/* narrower than the desktop layout the screens shrink with the column (the crop margins are percentages of the image) */
@media (max-width: 1100px) {
  .cs-fig:not(.cs-fig--flow) .cs-shot { width: 105%; margin: -2% 0 -2.4% calc(-2.7% + 3px); }
  .cs-fig--narrow:not(.cs-fig--flow) .cs-shot { width: 107.5%; margin-left: calc(-4.2% + 3px); }
  .cs-sol .cs-fig.cs-fig--shadow:not(.cs-fig--flow) .cs-shot { margin-top: -2%; }
}
.cs-fig--flow { margin: 4px 0 0 -5px; width: 888px; max-width: calc(100% + 5px); }
.cs-fig--narrow { width: 640px; max-width: 100%; margin-right: 0; }

/* ---------- Measuring success ---------- */
.cs-main .cs-success__intro { margin-top: 16px; max-width: 590px; }
.cs-metrics {
  list-style: none;
  margin: 50px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.cs-metric {
  position: relative;
  min-height: 255px;
  padding: 95px 28px 0 32px;
  filter: drop-shadow(0 0 7px rgba(223, 93, 9, 0.2));
  isolation: isolate;
}
.cs-metric__shape,
.cs-metric::before {
  content: "";
  position: absolute;
  z-index: -1;
  background: #fbe6da;
  border-radius: 24px;
  clip-path: path("M60 0 H288 A24 24 0 0 1 312 24 V231 A24 24 0 0 1 288 255 H24 A24 24 0 0 1 0 231 V52 Z");
}
.cs-metric__shape { inset: 0; z-index: -2; }
.cs-metric::before {
  inset: 1px;
  background: #fff;
  clip-path: path("M60.5 0 H287 A23 23 0 0 1 310 23 V230 A23 23 0 0 1 287 253 H23 A23 23 0 0 1 0 230 V52.5 Z");
}
.cs-metric__num {
  position: absolute;
  top: 28px;
  right: 40px;
  font-size: 24px;
  line-height: 33px;
  font-weight: 500;
  color: var(--line);
}
/* three in a row while the shape (312px each) fits; otherwise one under the other, never two and one */
.cs-success { container-type: inline-size; }
@container (max-width: 999px) {
  .cs-metrics { grid-template-columns: minmax(0, 1fr); }
  .cs-metric { clip-path: none; min-height: 0; padding-top: 72px; padding-bottom: 28px; }
  .cs-metric__shape, .cs-metric::before { clip-path: none; border-radius: 20px; }
}
.cs-metric h3 {
  display: flex;
  align-items: center;
  margin: 0 0 15px;
  font-size: 18px;
  line-height: 28px;
  font-weight: 600;
  color: var(--text-primary);
}
.cs-metric h3 img { display: block; flex: none; box-sizing: content-box; width: 24px; height: 24px; margin-right: 10px; object-fit: contain; }
.cs-main .cs-metric p { font-size: 14px; line-height: 20px; letter-spacing: -0.266px; color: var(--text-light); }

/* ---------- More case studies ---------- */
.cs-more { padding: 64px 0 0; margin-bottom: -10px; } /* 70px from the cards to the footer */
/* the two cards sit in the middle of the column, 32px apart */
.cs-more__cards { display: flex; justify-content: center; gap: 32px; }
.cs-more--left .cs-more__cards { justify-content: flex-start; } /* Reflect: the two cards start at the left edge of the content, as in the design */
.more-card {
  position: relative;
  display: flex;
  flex: none;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 350 / 227.5;
  align-items: flex-end;
  border-radius: 10px;
  overflow: hidden;
  color: #fff;
  box-shadow: 0 4px 10px rgba(38, 40, 45, 0.2);
  transition: transform 0.35s ease;
}
.more-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.more-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(38, 40, 45, 0) 38%, rgba(38, 40, 45, 0.82));
}
.more-card__body { position: relative; z-index: 1; display: flex; flex-direction: column; width: 100%; padding: 0 18px 17px; }
.more-card__title { display: flex; align-items: center; gap: 2px; font-size: 16px; line-height: 28px; font-weight: 600; text-transform: uppercase; }
.more-card--next .more-card__body { align-items: flex-end; }
.more-card__sub { margin-top: 3px; font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: -0.266px; }
.more-card--next .more-card__sub { text-align: right; }
.more-card--prev .more-card__sub { padding-left: 0; }
.more-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* on hover the whole unit (the Previous / Next word and its card) zooms together */
.more-side { transition: transform 0.35s ease; }
@media (hover: hover) {
  .more-side:hover { transform: scale(1.03); }
}

/* "Previous" and "Next" above the cards: links too, darker on hover (the card counts) and darker still while pressed */
.more-side { display: flex; flex-direction: column; gap: 8px; flex: 0 0 350px; max-width: 100%; }
.more-label {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 6px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: color 0.2s ease, font-weight 0.2s ease;
}
/* the word gets bolder on hover without moving anything: its bold width is already reserved */
.more-label__t { display: inline-grid; }
.more-label__t::after { content: attr(data-label); font-weight: 600; height: 0; overflow: hidden; visibility: hidden; pointer-events: none; }
.more-label--next { justify-content: flex-end; }
.more-label svg { display: block; flex: none; width: 7px; height: 12px; }
.more-label:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.more-side:hover .more-label, .more-label:focus-visible { color: var(--text-primary); font-weight: 600; }
.more-side:active .more-label { color: #0b0c0e; font-weight: 600; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .cs { grid-template-columns: minmax(0, 1fr); }
  .cs-nav {
    top: var(--nav-h);
    z-index: 50;
    margin: 0 0 24px;
    background: #fff;
    border-bottom: 1px solid var(--line);
  }
  .cs-nav ul { display: flex; gap: 28px; border-left: 0; overflow-x: auto; scrollbar-width: none; padding: 0 2px; }
  .cs-nav ul::-webkit-scrollbar { display: none; }
  .cs-nav li + li { margin-top: 0; }
  .cs-nav a { height: 48px; line-height: 48px; padding: 0; font-size: 14px; }
  .cs-nav a.is-active::before { top: auto; bottom: -1px; left: 0; right: 0; width: auto; height: 3px; }
  .cs {
    margin: 32px auto 0;
    margin-left: round(down, calc((100% - min(1252px, 100% - 2 * var(--gut))) / 2), 1px);
    padding-inline: 0;
    width: min(1252px, 100% - 2 * var(--gut));
  }
  .cs-hero { border-radius: 16px; }
  .cs-overview { margin-top: 32px; }
  .cs-main { scroll-margin-top: 160px; }
  html { scroll-padding-top: calc(var(--nav-h) + 72px); }
}

@media (max-width: 1000px) {
  .cs-overview { grid-template-columns: minmax(0, 1fr); }
  .cs-main .cs-overview__tagline { padding-top: 11.5px; } /* 20px of visible space under the logo */
  .cs-overview__text { margin-top: 48px; }
  .cs-research { grid-template-columns: minmax(0, 1fr); }
  .cs-research__img { margin: 24px 0 -13.5px -5px; order: 2; max-width: 100%; height: auto; }
  .cs-research__text { order: 1; }
}

@media (max-width: 760px) {
  .cs-insights ul { padding: 36px 20px 36px calc(6.2% + 34px); }
  .cs-insights li + li { margin-top: 24px; }
  .cs-more__cards { flex-direction: column; align-items: stretch; }
  .more-side { flex: 0 0 auto; }
  .more-card { aspect-ratio: auto; height: 225px; }
  .cs-sol { padding-bottom: 40px; }
}

/* ---------- Compact header on small screens (the wider logo needs the room) ---------- */
@media (max-width: 600px) {
  html { --nav-h: 65px; }
  .top-nav { padding-block: 16px; }
  .logo { font-size: 16px; letter-spacing: 1.4px; }
  .top-nav__links { gap: 16px; font-size: 14px; }
  .top-nav__links a { line-height: 33px; }
  .cs { margin-top: 16px; }
}
@media (max-width: 480px) {
  /* the 30px side margin leaves less room, so the header tightens a little */
  .logo { font-size: 14px; letter-spacing: 1px; }
  .top-nav__links { gap: 12px; font-size: 13px; }
}
@media (max-width: 380px) {
  /* on the narrowest phones the logo and links need the room */
  .top-nav { padding-inline: var(--gut); }
  .top-nav__links { gap: 10px; }
}

/* case study pages: smooth anchor scrolling */
html:has(.cs) { scroll-behavior: smooth; }
/* the screens bleed a little past the column on narrow screens; never let that create a sideways scroll */
html:has(.cs), body:has(.cs) { overflow-x: clip; }

/* ---------- Expand a screen (lightbox) ---------- */
.cs-expand {
  position: absolute;
  --off: clamp(10px, 2.4%, 12.5px); /* from the screen's right and bottom edges, in the same proportion to the screen as on Reflect and FHA (2.5% of the screen's width: 20px of an 800px screen is ~12px of a 485px one) */
  bottom: var(--b);
  margin-bottom: var(--off);
  right: calc(var(--r) + var(--off));
  z-index: 2;
  display: grid;
  place-items: center;
  --sz: clamp(28px, 5%, 40px); /* the same rule on every project: ~5% of the screen, 28px at least */
  width: var(--sz);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 27%; /* the same roundness at every size */
  background: var(--text-secondary);
  color: #fff;
  opacity: 0.7;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
}
.cs-expand svg { display: block; width: 64%; height: auto; }
.cs-expand svg path { stroke-width: 1.2; }
/* a 44px target for a finger, whatever the size of the icon */
.cs-expand::before { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.cs-expand { touch-action: manipulation; }
.cs-expand:hover { transform: scale(1.08); background: var(--text-primary); opacity: 1; }
.cs-expand:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 72px 32px 32px;
  background: rgba(38, 40, 45, 0.72);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; }
.lightbox { --lbx: 32px; }
.lightbox__stage { display: flex; align-items: center; justify-content: center; max-width: 100%; max-height: 100%; touch-action: none; user-select: none; -webkit-user-select: none; cursor: zoom-in; will-change: transform; }
.lightbox__img[hidden], .lightbox__unit[hidden] { display: none; }
.lightbox__hint { display: none; }
@media (pointer: coarse) {
  .lightbox__hint { display: block; position: absolute; left: 0; right: 0; bottom: 14px; margin: 0; text-align: center; font-size: 13px; line-height: 18px; color: #fff; pointer-events: none; animation: lb-hint 3.4s ease forwards; }
}
@keyframes lb-hint { 0%, 70% { opacity: 0.9; } 100% { opacity: 0; } }
/* a screen together with its callouts: the same crop as on the page, sized to fit the window */
.lightbox__unit { position: relative; overflow: hidden; width: min(calc(100vw - 2 * var(--lbx)), 1000px, calc((100vh - 104px) * var(--ar))); aspect-ratio: var(--ar); background: #fff; border-radius: 12px; transform: scale(0.97); transition: transform 0.2s ease; }
.lightbox.is-open .lightbox__unit { transform: none; }
.lightbox__canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.lightbox__canvas[hidden] { display: none; }
.lightbox__unit img { position: absolute; top: 0; display: block; max-width: none; height: auto; pointer-events: none; -webkit-user-drag: none; }
.lightbox__img {
  display: block;
  /* the same on every project: the whole screen fits the window with some air around it */
  max-width: min(calc(100vw - 2 * var(--lbx) - 32px), 1200px);
  max-height: calc(100vh - 128px);
  object-fit: contain;
  width: auto;
  height: auto;
  /* the screen files carry their own rounded corners and soft shadow */
  transform: scale(0.97);
  transition: transform 0.2s ease;
}
.lightbox.is-open .lightbox__img { transform: none; }
.lightbox__close {
  position: absolute;
  top: 20px;
  right: 24px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--text-primary);
  cursor: pointer;
  transition: transform 0.2s ease;
}
.lightbox__close:hover { transform: scale(1.08); }
.lightbox__close:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
html.is-locked { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .lightbox, .lightbox__img { transition: none; }
}
@media (max-width: 600px) {
  .lightbox { padding: 68px 12px 16px; --lbx: 12px; }
  .lightbox__close { top: 12px; right: 12px; }
}

/* ---------- Class activity examples: real 2x2 grid, 24px between screens both ways ---------- */
.cs-acts { margin: 38.7px 0 0; }
.cs-acts__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; width: 994px; max-width: calc(100% - 3px); margin-left: 3px; }
.cs-act { position: relative; aspect-ratio: 16 / 9; }
/* the files include 20px of soft shadow on every side, which bleeds past the screen */
.cs-act img { display: block; width: calc(100% + 40px); max-width: none; height: auto; margin: -20px; }
.cs-acts__cap { margin: 0 0 10px; font-size: 14px; line-height: 18px; font-weight: 600; color: var(--text-secondary); }
@media (max-width: 760px) {
  .cs-acts__grid { grid-template-columns: minmax(0, 1fr); }
}

/* =====================================================================
   Reflect case study (reflect.html), built on the shared .cs layout
   ===================================================================== */
.rf { --cs-accent: #2e4eb1; --rf-blue: #2e4eb1; --rf-soft: #e5e9fa; }

/* side menu sized by its longest label; the content column follows it */
.cs.cs--fit { grid-template-columns: max-content minmax(0, 1fr); column-gap: 57px; padding-right: 24px; }
.cs--fit .cs-nav { padding-right: 29px; }
/* the menu is as wide as its longest label in the selected (semi-bold) state, so selecting a section never moves the content */
.cs--fit .cs-nav a::after { content: attr(data-label); display: block; height: 0; overflow: hidden; visibility: hidden; font-weight: 600; }

/* overview */
.rf-overview { grid-template-columns: 280px minmax(0, 1fr); grid-template-rows: 91px auto; }
.rf-overview .cs-meta { margin-top: 17.5px; }
.rf-overview .cs-overview__text { margin-top: 0; }
.rf-overview .cs-overview__brand { margin: 23.5px 0 0 5px; }
.cs-main .rf-overview .cs-overview__tagline { align-self: start; padding-top: 28.5px; }

/* the problem */
.rf-problem { display: grid; grid-template-columns: minmax(0, 355px) minmax(0, 1fr); align-items: start; }
.rf-problem__img { display: block; width: 257px; height: auto; margin-top: 13px; }
.rf-problem__text { padding-top: 27px; }
.cs-main .rf-problem__text p { max-width: 510px; }
.cs-main p.rf-lead { max-width: 715px; }
.cs-main p.rf-lead--narrow { max-width: 430px; }
.cs-main p.rf-lead--wide { max-width: 760px; }

/* challenge cards (2 x 2) */
.rf-cards { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 432px)); gap: 24px; }
.rf-card, .rf-principle, .rf-opp {
  border: 1px solid #e8ebf8;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(46, 78, 177, 0.1);
}
.rf-card { padding: 24px 14px 20px 24px; }
.rf-card__title, .rf-compare__title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; line-height: 28px; font-weight: 600; color: var(--rf-blue); }
.rf-card__title img { display: block; flex: none; width: auto; height: 28px; }
.cs-main .rf-card p { margin: 8px 0 0 36px; color: var(--text-light); }

/* user research */
.rf-research { padding-bottom: 93.5px; }
.rf-insights { margin-top: 32px; display: grid; grid-template-columns: minmax(0, 304px) minmax(0, 323px) minmax(0, 1fr); }
.rf-insight__art { height: 108px; display: flex; align-items: flex-end; }
.rf-insight__art img { display: block; max-width: none; }
.rf-insight h3 { margin: 20px 0 0; font-size: 18px; line-height: 28px; font-weight: 600; color: var(--rf-blue); }
.cs-main .rf-insight p { margin-top: 4px; max-width: 245px; font-size: 14px; line-height: 20px; letter-spacing: -0.266px; color: var(--text-light); }
.cs-main .rf-insight:first-child p { max-width: 215px; }

/* competitive analysis */
.rf-competitive { padding-bottom: 67px; }
.rf-competitors { display: block; margin-top: 24px; }
.rf-compare { margin-top: 25px; display: grid; grid-template-columns: 181px minmax(0, 362px) minmax(16px, 65px) minmax(0, 362px); grid-template-rows: auto auto auto; }
.cs-main .rf-compare__label { margin: 0; font-size: 16px; line-height: 28px; color: var(--text-light); }
.rf-compare__label--obs { grid-column: 1; grid-row: 1; }
.rf-obs--a { grid-column: 2; grid-row: 1; padding-left: 3px; }
.rf-obs--b { grid-column: 4; grid-row: 1; padding-left: 3px; }
.rf-compare__title img { display: block; flex: none; }
.rf-obs .rf-compare__title { gap: 9px; }
.cs-main .rf-obs p { margin-top: 4px; padding-left: 28px; color: var(--text-light); }
.rf-arrow { display: flex; justify-content: center; height: 26px; margin: 19px 0; color: var(--text-secondary); }
.rf-arrow--a { grid-column: 2; grid-row: 2; }
.rf-arrow--b { grid-column: 4; grid-row: 2; }
.rf-compare__label--opp { grid-column: 1; grid-row: 3; padding-top: 27px; }
.cs-main .rf-compare__label--opp { padding-top: 27px; line-height: 24px; }
.rf-opp { padding: 27px 24px 19px; background: #f9fafe; box-shadow: none; border-color: #e3e7f6; }
.rf-opp--a { grid-column: 2; grid-row: 3; }
.rf-opp--b { grid-column: 4; grid-row: 3; }
.cs-main .rf-opp p { margin-top: 8px; padding-left: 30px; color: var(--text-light); }

/* design approach (3 principle cards) */
.rf-principles { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 270px)); gap: 24px; }
.rf-principle { display: flex; flex-direction: column; padding: 39px 28px 42px; }
.rf-principle img { display: block; width: 42px; height: 42px; margin: -1px 0 12px -1px; }
.rf-principle h3 { margin: 0; font-size: 18px; line-height: 24px; font-weight: 600; color: var(--rf-blue); }
.cs-main .rf-principle p { margin-top: 16px; font-size: 14px; line-height: 20px; letter-spacing: -0.266px; color: var(--text-light); }

/* solution */
.rf-solution { padding-bottom: 0; }
.rf-sol { padding-bottom: 63px; }
.rf-solution .cs-title + .rf-lead + .rf-sol { margin-top: 30px; }
.rf-sol + .rf-sol { border-top: 1px solid var(--line); padding-top: 64px; }
.rf-sol__title { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 18px; line-height: 28px; font-weight: 600; color: var(--rf-blue); }
.rf-sol__title img { display: block; flex: none; margin-left: -1px; }
.cs-main .rf-sol__sub { margin-top: 4px; font-size: 14px; line-height: 20px; letter-spacing: -0.266px; color: var(--text-light); }
.rf-fig { margin: 0; width: 800px; max-width: 100%; }
.rf-sol + .rf-sol.rf-sol--cont { padding-top: 45px; padding-bottom: 71px; }
/* the screens shrink with the column (the bleed is a percentage of the figure, so it is the same 55px / 24px / 14px at full size) */
.rf-fig img { display: block; width: 106.875%; max-width: none; height: auto; margin: 0 0 -1.75% -3%; }

/* the value */
.rf-value { padding-bottom: 63px; }

/* measuring success (2 x 2) */
.rf-metrics { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 404px)); gap: 32px; }
.rf-metric { overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 4px 16px rgba(46, 78, 177, 0.12); }
.rf-metric h3 { display: flex; align-items: center; gap: 8px; height: 54px; margin: 0; padding: 0 20px 0 24px; background: var(--rf-blue); color: #fff; font-size: 18px; line-height: 28px; font-weight: 600; }
.rf-metric h3 img { display: block; flex: none; width: auto; height: 22px; margin-right: 2px; }
.rf-metric h3 span { margin-left: auto; font-size: 16px; font-weight: 500; color: #27439a; }
.cs-main .rf-metric p { padding: 22px 32px 28.5px; color: var(--text-light); }

/* responsive */
@media (max-width: 1000px) {
  .rf-overview { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  .cs-main .rf-overview .cs-overview__tagline { padding-top: 17px; } /* 20px of visible space under the logo */
  .rf-overview .cs-overview__text { margin-top: 48px; }
  .rf-problem { grid-template-columns: minmax(0, 1fr); gap: 35px; } /* 35px of visible space above the picture, the same as the BeLingual research picture */
  .rf-problem__text { padding-top: 0; }
  .rf-problem__img { order: 2; margin-top: 0; } /* the picture drops under the text, 24px below it */
  .rf-problem { padding-bottom: 64px; } /* 64px from the picture to the line */
  .rf-compare { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .rf-compare > * { grid-column: 1 !important; grid-row: auto !important; }
  /* stacked: each observation, its arrow and its opportunity belong together; the two column labels become a caption on every item */
  .cs-main .rf-compare .rf-compare__label { display: none; }
  .rf-obs--a { order: 1; } .rf-arrow--a { order: 2; } .rf-opp--a { order: 3; }
  .rf-obs--b { order: 4; margin-top: 48px; } .rf-arrow--b { order: 5; } .rf-opp--b { order: 6; }
  .rf-obs::before { content: "Key Observation"; display: block; margin-bottom: 4px; font-size: 16px; line-height: 28px; color: var(--text-light); }
  .rf-arrow { margin: 12px 0 0; justify-content: flex-start; padding-left: 37px; } /* the arrow sits over the middle of the word "Opportunity" (90px wide, so its centre is at 45px) */
  .rf-opp { position: relative; margin-top: 40px; }
  .rf-opp::before { content: "Opportunity"; position: absolute; left: 0; top: -32px; font-size: 16px; line-height: 28px; color: var(--text-light); }
  .rf-metrics, .rf-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .rf-cards, .rf-metrics { grid-template-columns: minmax(0, 1fr); }
}
/* three in a row while they fit, otherwise one under the other, never two and one */
.rf-research, #approach { container-type: inline-size; }
@container (max-width: 871px) {
  .rf-insights { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .cs-main .rf-insight p, .cs-main .rf-insight:first-child p { max-width: 460px; }
}
@container (max-width: 797px) {
  .rf-principles { grid-template-columns: minmax(0, 1fr); }
}

/* below 1100px the section menu becomes a horizontal bar above the content */
@media (max-width: 1100px) {
  .cs.cs--fit { grid-template-columns: minmax(0, 1fr); column-gap: 0; padding-right: 0; }
  .cs--fit .cs-nav { padding-right: 0; }
}

/* =====================================================================
   Find Healthcare Abroad case study ("find-healthcare-abroad.html"), built on the shared .cs layout
   ===================================================================== */
.fha { --cs-accent: #7a99ab; --fha-dark: #2f4552; --fha-mid: #7a99ab; --fha-num: #3f596a; }
.fha .cs-hero { aspect-ratio: 1000 / 538; }
/* reserve the semi-bold width so the menu never shifts when a link becomes active */
.fha .cs-nav a::after { content: attr(data-label); display: block; height: 0; overflow: hidden; visibility: hidden; font-weight: 600; }
@media (min-width: 1101px) { .cs.fha { grid-template-columns: 286px minmax(0, 1fr); } }

/* overview */
.fha-overview { margin-top: 63.5px; padding-bottom: 64px; grid-template-columns: 346px minmax(0, 1fr); grid-template-rows: auto auto; }
.fha-overview .cs-overview__brand { margin-left: -2.5px; }
.fha-overview .cs-meta { margin-top: 35.5px; margin-bottom: -16px; }
.fha-overview .cs-meta > div { margin-bottom: 15px; }
.cs-main .fha-overview .cs-overview__tagline { align-self: center; padding-top: 0; }
.fha-overview .cs-overview__text { margin-top: -6.5px; }

/* the problem */
.fha-problem { display: grid; grid-template-columns: 355px minmax(0, 1fr); align-items: center; padding-bottom: 60px; }
.fha-problem__img { display: block; width: 278px; height: auto; margin-left: -2px; }
.cs-main .fha-problem__text p { max-width: 600px; }

/* lead paragraphs */
.cs-main .fha-research p.fha-lead { max-width: 685px; }
.cs-main .fha-approach p.fha-lead { max-width: 595px; }
.cs-main .fha-solution p.fha-lead { max-width: 580px; }
.cs-main .fha-overview .cs-overview__text p { max-width: 607px; }
.cs-main p.fha-lead--success { max-width: 545px; }

/* user research */
.fha-research { padding-bottom: 64px; }
.fha-points { list-style: none; margin: 42px 0 0; padding: 0; }
.fha-points li { display: grid; grid-template-columns: 42.5px minmax(0, 1fr); align-items: center; }
.fha-points li + li { margin-top: 34px; }
.fha-points img { display: block; margin: -2px 0; }
.fha-points h3 { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--fha-dark); }
.cs-main .fha-points p { grid-column: 2; margin-top: 5px; padding-left: 2.5px; max-width: 605px; color: var(--text-light); }

/* the design approach (3 pillar cards) */
.fha-approach { padding-bottom: 71px; }
.fha-pillars { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 300px)); gap: 32px; }
.fha-pillar { height: 350px; padding: 55.5px 20px 0 29px; border: 1px solid rgba(122, 153, 171, 0.3); border-radius: 16px; background: #f5f9fa; box-shadow: 0 0 8px rgba(122, 153, 171, 0.5); }
.fha-pillar img { display: block; height: auto; }
.fha-pillar h3 { margin: 11px 0 0; font-size: 17px; line-height: 28px; font-weight: 600; color: var(--fha-dark); }
.cs-main .fha-pillar p { margin-top: 15px; color: var(--text-light); }

/* the solution */
.fha-solution { padding-bottom: 0; }
.fha-sol { padding-bottom: 59px; }
.fha-solution .fha-lead + .fha-sol { margin-top: 32.5px; }
.fha-sol + .fha-sol { border-top: 1px solid var(--line); padding-top: 64px; }
.fha-sol--cont + .fha-sol, .fha-sol--cont { padding-bottom: 70px; }
.fha-sol.fha-sol--cont { padding-top: 56px; }
.fha-sol:nth-of-type(4) { padding-bottom: 70px; }
.fha-sol__title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 18px; line-height: 28px; font-weight: 600; color: var(--fha-dark); }
.fha-sol__title img { display: block; flex: none; }
.cs-main .fha-sol__sub { margin-top: 8px; max-width: 440px; font-size: 14px; line-height: 20px; letter-spacing: -0.266px; color: var(--text-light); }
.cs-main .fha-sol__sub--wide { max-width: 480px; }
.cs-main .fha-sol__sub--narrow { max-width: 400px; }
/* the image carries 30px (3.49%) of its own margin on each side, so on narrow screens the margin shrinks with the picture and the screen stays on the text edge */
.fha-fig { margin: 0 0 -16.5px calc(-0.0349 * min(860px, 107.5%)); width: 860px; max-width: 107.5%; }
.fha-fig img { display: block; width: 100%; height: auto; }
.fha-steps { list-style: none; margin: 26px 0 0; padding: 0; max-width: 535px; }
.fha-vid + .fha-steps { margin-top: 31px; }
.fha-steps li { color: var(--text-secondary); }
.fha-steps li + li { margin-top: 16px; }
.fha-steps strong { font-weight: 600; color: var(--fha-num); }

.fha-mobile { border-top: 1px solid var(--line); padding-top: 63px; }
.fha-mfig { margin: 0 0 0 calc(-0.0288 * min(1040px, 104%)); width: 1040px; max-width: 104%; }
.fha-mfig img { display: block; width: 100%; height: auto; }
.fha-mobile__title + .fha-mfig { margin-top: 41px; }
.fha-mfig + .fha-mfig { margin-top: 112px; position: relative; }
.fha-mfig + .fha-mfig::before { content: ""; position: absolute; left: 2.88%; right: 0.96%; top: -57.5px; border-top: 1px solid var(--line); }
.fha-mfig:last-child { margin-bottom: 39.5px; }

/* looping screen recordings, styled like the other screens */
.fha-vid { margin: 12px 0 0; width: 800px; max-width: 100%; }
.fha-sol__sub + .fha-vid { margin-top: 23px; }
.fha-sol--cont > .fha-vid:first-child { margin-top: 8px; }
.fha-sol__sub + .fha-fig { margin-top: 7px; }
/* the recordings carry a white margin around the screen: the wrapper shows only the screen itself, so no frame or edge artefacts */
.fha-vid__screen { position: relative; overflow: hidden; aspect-ratio: 1644 / 1061; border-radius: 16px; background: #fff; box-shadow: 0 0 20px rgba(0, 0, 0, 0.12); }
.fha-vid video { position: absolute; display: block; width: 116.788%; height: 102.2%; left: -8.394%; top: -0.9425%; max-width: none; object-fit: cover; }
.fha-vid__screen.is-canvas video { width: 1px; height: 1px; left: 0; top: 0; opacity: 0; pointer-events: none; }
.fha-vid__canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.fha-vid figcaption { margin-bottom: 10px; font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: -0.25px; color: var(--text-secondary); }

/* measuring success */
.fha-success { padding-bottom: 62px; }
.fha-metrics { list-style: none; margin: 49px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 312px)); gap: 32px; }
.fha-metric { height: 320px; padding: 84.5px 20px 0 35px; border: 1px solid #e6eff3; border-radius: 16px; background: #f7fafa; box-shadow: 0 0 10px rgba(122, 153, 171, 0.28); }
/* the map texture keeps its size (312 x 320) and sits in the middle; the card colour continues around it, so it never stretches or grows */
.fha-metric:nth-child(1) { background: #f7fafa url("assets/fha/measure-bg-1.webp") center / 312px 320px no-repeat; }
.fha-metric:nth-child(2) { padding-top: 83px; background: #f7fafa url("assets/fha/measure-bg-2.webp") center / 312px 320px no-repeat; }
.fha-metric:nth-child(3) { padding-top: 80.5px; background: #f7fafa url("assets/fha/measure-bg-3.webp") center / 312px 320px no-repeat; }
.fha-metric img { display: block; height: auto; margin-bottom: 12.5px; }
.fha-metric:nth-child(2) img { margin-bottom: 9px; }
.fha-metric:nth-child(3) img { margin-bottom: 7.5px; }
.fha-metric h3 { margin: 0; font-size: 17.5px; line-height: 28px; font-weight: 600; color: var(--fha-dark); }
.cs-main .fha-metric p { margin-top: 14.8px; color: var(--text-light); }

/* responsive */
@media (max-width: 1000px) {
  .fha-overview { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  .fha-overview .cs-overview__brand { height: auto; }
  .fha-overview .cs-meta { margin: 24px 0 0; }
  .fha-overview .cs-overview__text { margin-top: 48px; }
  .cs-main .fha-overview .cs-overview__tagline { padding-top: 16px; } /* 20px of visible space under the logo, as on the other projects */
  .fha-problem { grid-template-columns: minmax(0, 1fr); gap: 32.5px; align-items: start; padding-bottom: 61.5px; } /* 64px from the picture itself to the line */
  .fha-problem__img { order: 2; } /* the picture drops under the text, 24px below it */
}
/* three in a row while the cards stay about 288px wide, otherwise one under the other, never two and one */
.fha-approach, .fha-success { container-type: inline-size; }
@container (max-width: 927px) {
  .fha-pillars, .fha-metrics { grid-template-columns: minmax(0, 1fr); }
  .fha-pillar, .fha-metric { height: auto; padding-bottom: 32px; }
  .fha-pillar { padding-top: 40px; }
  .fha-metric, .fha-metric:nth-child(2), .fha-metric:nth-child(3) { padding-top: 36px; }
  /* wide card: the map texture is mirrored into a seamless strip that repeats at its natural size, so it never stretches or grows */
  .fha-metric:nth-child(1) { background-image: url("assets/fha/measure-bg-1-wide.webp"); }
  .fha-metric:nth-child(2) { background-image: url("assets/fha/measure-bg-2-wide.webp"); }
  .fha-metric:nth-child(3) { background-image: url("assets/fha/measure-bg-3-wide.webp"); }
  .fha-metric:nth-child(n) { background-size: 592px 304px; background-repeat: repeat-x; background-position: center; }
}
@media (max-width: 760px) {
}

/* ---------- Two screens side by side: one unit each (screen + its callouts) ---------- */
.cs-shot, .cs-act, .cs-unit { container-type: inline-size; }
.cs-shot--pair { aspect-ratio: var(--ar); }
.cs-unit { position: absolute; top: 0; height: 100%; overflow: hidden; }
.cs-unit img { position: absolute; top: 0; max-width: none; height: auto; }
.cs-unit--a { left: 0; width: 50.19%; }
.cs-unit--a img { left: 0; width: 199.24%; }
.cs-unit--b { left: 49.62%; width: 50.38%; }
.cs-unit--b img { left: -98.5%; width: 198.5%; }
.cs-vs { position: absolute; z-index: 1; left: 49.9%; top: var(--vy); transform: translate(-50%, -50%); display: block; color: var(--text-secondary); line-height: 0; }
.cs-vs svg { display: block; }
@media (max-width: 760px) {
  /* under each other: the before/after arrow is dropped */
  .cs-sol .cs-fig:not(.cs-fig--flow) .cs-shot.cs-shot--pair { --uw: min(109.3%, 540px); aspect-ratio: auto; width: 100%; margin: -2% 0 -2.4% 0; display: flex; flex-direction: column; align-items: flex-start; }
  .cs-shot--pair .cs-unit { position: relative; left: auto; top: auto; height: auto; flex: none; }
  .cs-shot--pair .cs-unit--a { width: var(--uw); aspect-ratio: 530 / var(--H); margin-left: calc(-0.0509 * var(--uw)); }
  .cs-shot--pair .cs-unit--b { width: calc(var(--uw) * 1.0038); aspect-ratio: 532 / var(--H); margin-left: calc(-0.0338 * var(--uw)); }
  .cs-shot--pair .cs-vs { display: none; }
}

/* ---------- Section menu on small screens: one button showing where you are, opening the full list ---------- */
.cs-nav__current { display: none; }
/* the script adds .is-compact when the labels no longer fit in one row (so every page switches at its own width) */
.cs-nav.is-compact { position: sticky; }
.cs-nav.is-compact .cs-nav__current {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; height: 48px; padding: 0 2px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 14px; line-height: 48px; font-weight: 600; text-transform: uppercase; color: var(--text-secondary);
}
.cs-nav.is-compact .cs-nav__current svg { flex: none; margin-left: 12px; transition: transform 0.25s ease; }
.cs-nav.is-compact.is-open .cs-nav__current svg { transform: rotate(180deg); }
.cs-nav.is-compact .cs-nav__current:focus-visible { outline: 2px solid var(--cs-accent, var(--orange)); outline-offset: -2px; border-radius: 4px; }
.cs-nav.is-compact ul { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; overflow: visible; padding: 6px 0; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 12px 24px rgba(38, 40, 45, 0.1); }
.cs-nav.is-compact.is-open ul { display: flex; }
.cs-nav.is-compact ul li { width: 100%; }
.cs-nav.is-compact ul a { height: 48px; line-height: 48px; padding: 0 16px 0 18px; }
.cs-nav.is-compact ul a.is-active::before { top: 8px; bottom: 8px; left: 0; right: auto; width: 3px; height: auto; }

/* ---------- Expand a whole figure, on every screen size (Reflect, Find Healthcare Abroad) ---------- */
.rf-fig, .fha-fig, .fha-mfig, .fha-vid { position: relative; }
/* the buttons on these screens are about 5% of the screen width (40px on an 800px screen, down to 22px on narrow ones); BeLingual's screens are only ~485px wide, so its 22px is the same proportion */
.cs-expand--in, .cs-expand--vid { --sz: clamp(28px, 5%, 40px); --off: clamp(10px, 2.5%, 20px); border-radius: 27%; }
/* a thinner arrow that scales with the button: ~1.9px at 40px, ~1px at 22px (the default 1.5 would give 2.4px at 40px) */
.cs-expand--in svg path, .cs-expand--vid svg path { stroke-width: 1.2; }
/* a dark arrow on the light button looks heavier than a white one on the dark button, so it is a little thinner */
.cs-expand--invert svg path { stroke-width: 0.9; }
.cs-expand--ph svg path { stroke-width: 1.5; } /* the small phone button keeps a slightly bolder arrow */
.cs-expand--fig { display: grid; left: auto; right: auto; top: auto; bottom: auto; margin-bottom: 0; }
/* web screens: bottom-right corner, 20px from the screen's right and bottom edges (--sb is where the screen ends as a share of the figure height; the vertical inset is a margin so it can be a plain 20px) */
/* the Reflect figure box ends at the screen's own edge; the FHA figure box is the whole picture, whose last 3.49% (30px at full size) is shadow */
.cs-expand--in { right: var(--off); top: var(--sb); margin-top: calc(-1 * (var(--sz) + var(--off))); }
.fha-fig .cs-expand--in { right: calc(3.49% + var(--off)); }
/* screen recordings: the video ends 27px above the bottom of the figure (its caption) */
.cs-expand--vid { right: var(--off); top: 100%; margin-top: calc(-1 * (var(--sz) + var(--off))); }
/* phones (Adapting for Mobile): bottom-right corner of the phone, 10px from its right and bottom edges (--pb is where the phone ends; the phone's right edge is 20.38% in from the picture's right edge) */
.cs-expand--ph { --sz: clamp(22px, 2.7%, 28px); border-radius: 27%; --off: clamp(6px, 1.35%, 14px); right: calc(var(--pr, 20.38%) + var(--off)); top: var(--pb); margin-top: calc(-1 * (var(--sz) + var(--off))); }
/* on a dark screen the button is light with a dark icon */
.cs-expand--invert { background: #fff; color: var(--text-secondary); }
.cs-expand--invert:hover { background: #fff; color: var(--text-primary); }