/* ==========================================================================
   International Online: v3 (Pixso-style restyle)
   Base, layout & components (consumes tokens.css)
   Same class names as v2, so the page markup carries over unchanged.
   ========================================================================== */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea { font: inherit; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--color-heading);
  line-height: var(--leading-tight);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
}
:focus-visible { outline: 2px solid var(--color-obsidian); outline-offset: 3px; }

/* ---------- Layout helpers ---------- */
.container {
  width: calc(100% - var(--rail-gutter) * 2);
  max-width: var(--rail-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
/* Vertical padding lives on the container, not the section, so the
   rails (container borders) run unbroken from section line to section line. */
.section > .container { padding-block: var(--section-gap); }
.section--tight > .container { padding-block: var(--space-12); }
.section--alt, .section--inverse { background: transparent; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 5px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: var(--text-meta);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  line-height: 1.3;
}

.section-head {
  max-width: 680px;
  margin-bottom: var(--space-12);
  padding-bottom: var(--space-12);
}
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 {
  font-size: var(--text-heading-lg);
  font-weight: var(--weight-bold);
  line-height: var(--leading-heading);
  margin-top: var(--space-4);
}
.section-head p { color: var(--color-text-muted); margin-top: var(--space-4); font-size: var(--text-body-lg); }

.grid { display: grid; gap: var(--space-5); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- Buttons: Carbon filled + Mist outlined ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 10px 20px;
  border-radius: var(--radius-xl);
  border: 1px solid transparent;
  font-weight: var(--weight-medium);
  font-size: var(--text-body);
  line-height: 1.4;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
}
.btn svg { width: 15px; height: 15px; }
.btn-primary {
  background: var(--color-action);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--color-action-hover); }
.btn-ghost,
.btn-outline {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-obsidian);
  box-shadow: var(--shadow-subtle);
}
.btn-ghost:hover,
.btn-outline:hover { border-color: var(--color-border-strong); }

/* ---------- Topbar (quiet utility strip) ---------- */
.topbar {
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--text-caption);
  border-bottom: 1px solid var(--color-border);
}
.topbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: 6px;
}
.topbar-contact { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.topbar-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}
.topbar-link svg { width: 12px; height: 12px; flex-shrink: 0; color: var(--color-pebble); }
.topbar-link:hover { color: var(--color-obsidian); }

.topbar-search { position: relative; display: flex; align-items: center; }
.topbar-search-toggle {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.topbar-search-toggle svg { width: 13px; height: 13px; }
.topbar-search-toggle:hover, .topbar-search.is-open .topbar-search-toggle {
  background: var(--color-mist);
  color: var(--color-obsidian);
}
/* Words typed in the box: the magnifier turns solid green and runs the search when clicked */
.topbar-search.has-query .topbar-search-toggle,
.topbar-search.has-query .topbar-search-toggle:hover { background: #8dc63f; color: #ffffff; }
.topbar-search.has-query .topbar-search-toggle svg { stroke-width: 3.2; }
.topbar-search-form {
  position: absolute;
  right: 34px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  visibility: hidden;
  overflow: hidden;
  transition: width var(--transition-base), visibility var(--transition-base);
}
.topbar-search.is-open .topbar-search-form { width: 220px; visibility: visible; }
.topbar-search-form input {
  width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 4px 10px;
  color: var(--color-obsidian);
  font-size: var(--text-caption);
}
.topbar-search-form input::placeholder { color: var(--color-fog); }
.topbar-search-form input:focus { outline: none; border-color: var(--color-border-strong); }

/* ---------- Header: flat, flush with the canvas ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  height: var(--header-height);
  display: flex;
  align-items: center;
  background: rgba(250, 248, 253, 0.88);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  transition: box-shadow var(--transition-base);
}
.site-header { border-bottom: 1px solid var(--color-border); }
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}
.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand .logo {
  height: 69px;                              /* v5: original stacked logo (owner: +5px, 2026-10-20) (leaf over "international online", 1.67:1) */
  width: auto;
  display: block;
  object-fit: contain;
  object-position: left center;
}
.brand--lg .logo { height: 84px; }   /* footer */

/* v5: nav links sit on the header's centre line, level with the other header items
   (the v4 baseline shift to the compact logo's lettering is no longer needed). */
.nav { display: flex; align-items: center; gap: 2px; }
.nav-item { position: relative; }
.nav-link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  color: var(--color-nav);
  border-radius: var(--radius-md);
  transition: color var(--transition-fast), background var(--transition-fast);
}
.nav-link .chev { width: 11px; height: 11px; flex-shrink: 0; opacity: 0.55; }
.nav-link:hover { background: rgba(0, 0, 0, 0.045); color: var(--color-obsidian); }
.nav-link[aria-current="page"] { color: var(--color-obsidian); font-weight: var(--weight-semibold); }

.dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 260px;
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
  z-index: var(--z-dropdown);
}
.nav-item.has-dropdown:hover .dropdown,
.nav-item.has-dropdown:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dropdown a {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  transition: background var(--transition-fast);
}
.dropdown.dropdown--wide {
  min-width: 480px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
}
.dropdown a:hover { background: var(--color-bone); }
.dropdown a strong { font-size: var(--text-body); font-weight: var(--weight-semibold); color: var(--color-obsidian); }
.dropdown a span { font-size: var(--text-meta); color: var(--color-text-muted); }
.dropdown-label {
  grid-column: 1 / -1;
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  color: var(--color-ash);
  padding: 8px 12px 2px;
}
.dropdown-label:not(:first-child) { margin-top: 4px; border-top: 1px solid var(--color-border); padding-top: 12px; }

.header-actions { display: flex; align-items: center; gap: var(--space-3); }
.header-actions .btn-primary { padding: 8px 16px; border-radius: var(--radius-md); }

.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  place-items: center;
  color: var(--color-obsidian);
}
.nav-toggle:hover { background: rgba(0, 0, 0, 0.045); }

/* ---------- Home hero: centred statement + icon scatter ---------- */
.hero { text-align: center; }
.hero > .container { padding-block: var(--space-20); }
.hero-inner { position: relative; max-width: 860px; margin-inline: auto; }
.hero h1 {
  margin-top: var(--space-5);
  font-size: clamp(36px, 5.6vw, var(--text-display-lg));
  font-weight: var(--weight-bold);
  line-height: var(--leading-display);
  letter-spacing: -0.025em;
}
.hero-lede {
  margin: var(--space-5) auto 0;
  max-width: 600px;
  font-size: var(--text-subheading);
  color: var(--color-text-muted);
}
.hero-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--space-8);
}
.hero-meta {
  margin-top: var(--space-5);
  font-size: var(--text-meta);
  color: var(--color-ash);
}

.hero-scatter { position: absolute; inset: 0; pointer-events: none; }
.hero-scatter .deco {
  position: absolute;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  background: var(--surface-card);
  box-shadow: var(--shadow-sm);
}
.hero-scatter .deco svg { width: 20px; height: 20px; }
.deco--1 { top: 4%;  left: 4%;  color: var(--deco-pink); transform: rotate(-8deg); }
.deco--2 { top: 38%; left: -2%; color: var(--deco-blue); width: 44px !important; height: 44px !important; transform: rotate(6deg); }
.deco--3 { top: 76%; left: 9%;  color: var(--deco-green); transform: rotate(-4deg); }
.deco--4 { top: 0;   right: 6%; color: var(--deco-orange); transform: rotate(10deg); }
.deco--5 { top: 44%; right: -1%; color: var(--deco-purple); width: 44px !important; height: 44px !important; transform: rotate(-6deg); }
.deco--6 { top: 82%; right: 10%; color: var(--deco-blue); transform: rotate(4deg); }

/* Product showcase frame: landscape photo behind floating white cards */
.showcase {
  position: relative;
  margin-top: var(--space-16);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  padding: var(--space-12) var(--space-10);
  box-shadow: var(--shadow-sm);
}
.showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--img-showcase) center/cover, #7cb86a;
}
.showcase-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  text-align: left;
}
.showcase-card {
  background: var(--surface-card);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transition: transform var(--transition-base);
}
.showcase-card:nth-child(even) { transform: translateY(var(--space-8)); }
.showcase-card:hover { transform: translateY(-4px); }
.showcase-card:nth-child(even):hover { transform: translateY(calc(var(--space-8) - 4px)); }
.showcase-card .media { aspect-ratio: 4/3; background-color: var(--color-bone); background-position: center; background-size: cover; }
.showcase-card .body { padding: 14px 16px 16px; }
.showcase-card .kicker { font-size: var(--text-caption); color: var(--color-text-muted); }
.showcase-card h3 { margin-top: 2px; font-size: var(--text-body-lg); }
.showcase-card p { margin-top: 4px; font-size: var(--text-meta); color: var(--color-text-muted); line-height: 1.5; }

/* ---------- Stats ---------- */
.stats .container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-inline: 0;
}
.stat { text-align: center; padding: var(--space-10) var(--space-4); border-right: 1px solid var(--color-border); }
.stat:last-child { border-right: none; }
.stat .num {
  font-size: var(--text-heading-lg);
  font-weight: var(--weight-bold);
  color: var(--color-obsidian);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.stat .label { margin-top: 4px; font-size: var(--text-body); color: var(--color-text-muted); }

/* ---------- Who we are ---------- */
.who .container { display: grid; grid-template-columns: 6fr 5fr; gap: var(--space-16); align-items: center; }
.who-copy h2 { font-weight: var(--weight-bold); line-height: var(--leading-heading); }
.who-copy p { color: var(--color-text-muted); margin-top: var(--space-5); font-size: var(--text-body-lg); }
.pull-quote {
  margin-top: var(--space-6);
  padding: var(--space-5);
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  color: var(--color-obsidian) !important;
  font-weight: var(--weight-medium);
}
.who .container > * { min-width: 0; }
/* Why IOL: the section's whole railed box is filled with a wide version of
   the brand leaf: top-left and bottom-right square, top-right and
   bottom-left swept into large curves. Drawn as a pseudo-element behind the
   content so the rails (container borders) stay straight. */
.who {
  --who-bg: #eef6e2;                              /* soft tint of the logo green #8dc63f */
  --who-curve: clamp(56px, 12vw, 180px);
}
.who > .container {
  position: relative;
  isolation: isolate;
  padding: calc(var(--section-gap) + var(--space-4)) clamp(24px, 5vw, 72px);
}
.who > .container::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--who-bg);
  border-radius: 0 var(--who-curve) 0 var(--who-curve);
}
.who .eyebrow { background: rgba(255, 255, 255, 0.7); border-color: rgba(0, 0, 0, 0.06); }
.who-visual { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); }
.who-visual .tile {
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  background: var(--color-bone);
  box-shadow: var(--shadow-sm);
}
.who-visual .tile:nth-child(2) { margin-top: var(--space-8); }
.who-visual .tile:nth-child(3) { margin-top: calc(var(--space-8) * -1); }

/* ---------- Tabs (kept for parity with v2) ---------- */
.tabs { display: flex; gap: var(--space-2); justify-content: center; flex-wrap: wrap; margin-bottom: var(--space-10); }
.tab-btn {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 8px 16px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
}
.tab-btn.is-active, .tab-btn:hover { background: var(--color-action); color: #fff; border-color: var(--color-action); }
.tab-panels { max-width: 760px; margin-inline: auto; text-align: center; }
.tab-panel { display: none; color: var(--color-text-muted); }
.tab-panel.is-active { display: block; }

/* ---------- Cards ---------- */
.card {
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.card .icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-bone);
  border: 1px solid var(--color-border);
  color: var(--color-obsidian);
  display: grid;
  place-items: center;
  margin-bottom: var(--space-5);
}
.card .icon svg { width: 20px; height: 20px; }
.card h3 { font-size: var(--text-body-lg); font-weight: var(--weight-semibold); margin-bottom: 6px; }
.card p { color: var(--color-text-muted); font-size: var(--text-body); }

.card--lg { padding: var(--space-8); }
.card--lg h3 { font-size: var(--text-heading-sm); margin-bottom: var(--space-2); }
.card--lg p { font-size: var(--text-body-lg); }

.tech-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-4); }
.tech-tags .tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: var(--radius-sm);
  background: var(--color-bone);
  border: 1px solid var(--color-border);
  color: var(--color-graphite);
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

/* Inline "Read the case study" style links */
.flip-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--space-4);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  color: var(--color-obsidian);
}
.flip-link svg { transition: transform var(--transition-fast); }
.flip-link:hover svg { transform: translateX(3px); }

/* ---------- Tech cards: design-kit style (photo top, white body) ---------- */
.tech-card { position: relative; overflow: hidden; padding-top: 0; }
.tech-card::before {
  content: "";
  display: block;
  height: 150px;
  margin: 0 calc(var(--space-8) * -1) var(--space-6);
  background: var(--tech-img, none) center/cover, var(--color-bone);
}
.tech-card .icon {
  position: absolute;
  top: 126px;
  left: var(--space-8);
  margin: 0;
  background: var(--surface-card);
  box-shadow: var(--shadow-sm);
  border: none;
}

/* ---------- Process strip ---------- */
.process-strip { position: relative; display: flex; justify-content: center; gap: var(--space-4); }
.process-strip::before {
  content: ""; position: absolute; top: 28px; left: 12%; right: 12%;
  height: 1px; background: var(--color-border); z-index: 0;
}
.process-step { position: relative; z-index: 1; flex: 1; max-width: 220px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.process-step .num {
  width: 56px; height: 56px; border-radius: var(--radius-xl);
  background: var(--surface-card); box-shadow: var(--shadow-sm);
  display: grid; place-items: center;
  font-weight: var(--weight-bold); font-size: var(--text-subheading); color: var(--color-obsidian);
}
.process-step.is-final .num { background: var(--color-action); color: #fff; }
.process-step h4 { margin-top: var(--space-4); font-size: var(--text-body); }
.process-step p { margin-top: 2px; font-size: var(--text-meta); color: var(--color-text-muted); }

/* ---------- Values ---------- */
.values-row { display: flex; align-items: center; gap: var(--space-16); }
.values-list { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.value-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.value-item .icon {
  width: 40px; height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-bone);
  border: 1px solid var(--color-border);
  color: var(--color-obsidian);
  display: grid; place-items: center;
}
.value-item h4 { font-size: var(--text-body-lg); margin-bottom: 4px; }
.value-item p { color: var(--color-text-muted); font-size: var(--text-body); }
.values-visual {
  flex: 0 0 380px;
  align-self: stretch;
  min-height: 360px;
  border-radius: var(--radius-2xl);
  background: var(--color-bone);
  box-shadow: var(--shadow-sm);
}

/* ---------- Banner: cool-wash panel inside a hatched frame ---------- */
.banner > .container {
  padding: var(--space-5);
  background: var(--hatch);
}
.banner-panel {
  padding: var(--space-16) var(--space-8);
  background: var(--surface-cool-wash);
  border-radius: var(--radius-2xl);
  text-align: center;
}
.banner p:first-of-type {
  font-size: var(--text-heading);
  font-weight: var(--weight-bold);
  color: var(--color-obsidian);
  line-height: var(--leading-heading);
  letter-spacing: -0.015em;
  max-width: 720px;
  margin-inline: auto;
}
.banner p + p {
  margin: var(--space-3) auto 0;
  max-width: 620px;
  color: var(--color-graphite);
  font-size: var(--text-body-lg);
}

/* Banner as the brand leaf: square top-left / bottom-right, swept
   top-right / bottom-left, in a light tint of the logo blue #00a4e4. */
.banner--leaf .banner-panel {
  background: #dff3fb;
  border-radius: 0 clamp(40px, 7vw, 96px) 0 clamp(40px, 7vw, 96px);
}
/* The leaf fills the whole railed box; the hatching moves out to the
   strips either side of the rails (the section's full-width background),
   and the canvas shows where the leaf's corners curve away. */
.banner--leaf { background: var(--hatch); }
.banner--leaf > .container { padding: 0; background: var(--color-bg); }

/* Split closing banner on case study pages: back to Work (green leaf)
   beside the contact leaf (blue). Stacks on narrow screens. */
.banner--split > .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
.banner--split .banner-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; padding-inline: var(--space-8); }
.banner--split .banner-panel--work { background: #eef6e2; }
.banner--split .banner-panel .btn { align-self: center; }
.banner--split.banner p:first-of-type { font-size: var(--text-heading-sm); }
@media (max-width: 860px) {
  .banner--split > .container { grid-template-columns: 1fr; }
}

/* A content section styled like the leaf banners: the light-blue leaf fills
   the whole railed box, hatching shows in the strips either side. */
.section--leaf { background: var(--hatch); }
.section--leaf > .container {
  position: relative;
  isolation: isolate;
  background: var(--color-bg);
  padding: var(--space-16) clamp(24px, 6vw, 96px);
}
.section--leaf > .container::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #dff3fb;
  border-radius: 0 clamp(40px, 7vw, 96px) 0 clamp(40px, 7vw, 96px);
}
.section--leaf .eyebrow { background: rgba(255, 255, 255, 0.7); border-color: rgba(0, 0, 0, 0.06); }

/* ---------- Clients ---------- */
.clients-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}
.client-logo {
  height: 72px;
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-sm);
  display: grid;
  place-items: center;
  padding-inline: var(--space-4);
  text-align: center;
  color: var(--color-slate);
  font-weight: var(--weight-semibold);
  font-size: var(--text-body);
  transition: color var(--transition-fast);
}
.client-logo:hover { color: var(--color-obsidian); }

/* Clients band inside the hero stage: opaque canvas strip above the photo's
   guide lines (z-index), label on the left, scrolling wordmarks filling the rest. */
.hero-clients {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  height: var(--clients-h);
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
}
/* Hatched strip above the band, like the page's spacer strips: hatching either
   side of the rails, plain canvas between them, a hairline underneath. */
.hero-clients__hatch {
  flex: none;
  height: var(--clients-hatch);
  background: var(--hatch-blue);
  border-bottom: 1px solid var(--color-border);
}
.hero-clients__hatch > .container {
  height: 100%;
  background: var(--color-bg);
  border-inline: 1px solid var(--color-border);
}
.hero-clients__inner { flex: 1; justify-content: center; }
.hero-clients__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }   /* label centred above the strip */
.hero-clients__label {
  flex: none;
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ash);
}
.hero-clients .logo-marquee { width: 100%; min-width: 0; }
.hero-clients .logo-marquee__item { height: 60px; min-width: 170px; font-size: var(--text-body); }

/* ---------- Clients: continuously scrolling logo strip ----------
   Items are listed twice; the track slides by exactly half its width, so the
   loop is seamless. Names are styled as greyscale wordmarks until real logo
   files are supplied (swap each <li> text for an <img>). Pauses on hover;
   edges fade out; reduced motion shows a static, wrapping row instead. */
.logo-marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logo-marquee__track {
  display: flex;
  width: max-content;
  gap: var(--space-4);
  margin: 0;
  padding: var(--space-2) 0;
  list-style: none;
  animation: logo-marquee 32s linear infinite;
}
.logo-marquee:hover .logo-marquee__track { animation-play-state: paused; }
.logo-marquee__item {
  display: grid;
  place-items: center;
  min-width: 190px;
  height: 76px;
  padding: 0 var(--space-6);
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  font-size: var(--text-body-lg);
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--color-fog);                   /* greyscale until hovered */
  transition: color var(--transition-fast);
}
.logo-marquee__item:hover { color: var(--color-obsidian); }
@keyframes logo-marquee { to { transform: translateX(calc(-50% - var(--space-4) / 2)); } }
@media (prefers-reduced-motion: reduce) {
  .logo-marquee { -webkit-mask-image: none; mask-image: none; }
  .logo-marquee__track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
  .logo-marquee__item[aria-hidden="true"] { display: none; }
}
@media (max-width: 640px) {
  .logo-marquee__item { min-width: 150px; height: 64px; font-size: var(--text-body); }
}

/* Client names are buttons (for focus and tap) that show a hover card (.client-pop). */
.logo-marquee__item:has(.logo-marquee__btn) { padding: 0; }
.logo-marquee__btn {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 0 var(--space-6);
  border: 0;
  border-radius: inherit;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  cursor: default;
}
.logo-marquee__btn:focus-visible { outline: 2px solid var(--color-action); outline-offset: -2px; }
.logo-marquee__item:has(.logo-marquee__btn:focus-visible),
.logo-marquee__item:has(.logo-marquee__btn[aria-expanded="true"]) { color: var(--color-obsidian); }
.logo-marquee:focus-within .logo-marquee__track,
html.client-pop-open .logo-marquee__track { animation-play-state: paused; }
@media (max-width: 640px) {
  .logo-marquee__btn { padding: 0 var(--space-4); }
}

/* ---------- Client hover card ----------
   One floating card (position: fixed, placed by js/main.js) above the hovered
   client name, with a small pointer down to it. A transparent strip under the
   card bridges the gap so the pointer can move onto it and click Read more. */
.client-pop {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: min(300px, calc(100vw - 24px));
  padding: var(--space-4) var(--space-5);
  background: var(--surface-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  color: var(--color-text);
  opacity: 0;
  visibility: hidden;
  translate: 0 6px;
  pointer-events: none;
  transition: opacity 160ms ease, translate 200ms var(--ease-out), visibility 0s linear 200ms;
}
.client-pop.is-open { opacity: 1; visibility: visible; translate: 0 0; pointer-events: auto; transition-delay: 0s; }
.client-pop::before {                        /* hover bridge to the name below */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 16px;
}
.client-pop::after {                         /* pointer */
  content: "";
  position: absolute;
  top: 100%;
  left: var(--arrow-x, 50%);
  width: 12px;
  height: 12px;
  background: var(--surface-card);
  transform: translate(-50%, -6px) rotate(45deg);
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.06);
}
.client-pop.is-below::before { top: auto; bottom: 100%; }
.client-pop.is-below::after { top: auto; bottom: 100%; transform: translate(-50%, 6px) rotate(45deg); box-shadow: -1px -1px 2px rgba(0, 0, 0, 0.05); }
.client-pop__meta {
  margin: 0 0 var(--space-1);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ash);
}
.client-pop__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-body-lg);
  font-weight: var(--weight-bold);
  color: var(--color-heading);
}
.client-pop__text { margin: 0; font-size: var(--text-meta); line-height: 1.55; }
.client-pop__link {
  display: inline-flex;
  gap: 6px;
  margin-top: var(--space-3);
  font-size: var(--text-meta);
  font-weight: var(--weight-semibold);
  color: var(--color-action);
  text-decoration: none;
}
.client-pop__link:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) {
  .client-pop { translate: none; transition: opacity 120ms ease, visibility 0s linear 120ms; }
}

.solution-block[id] { scroll-margin-top: calc(var(--header-height, 68px) + var(--space-6)); }

/* ---------- Industries (flip cards) ---------- */
.industries-grid { grid-template-columns: repeat(3, 1fr); }
.industry-card {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--radius-lg);
  perspective: 1400px;
  cursor: pointer;
}
.flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 700ms var(--ease-out);
  transform-style: preserve-3d;
}
/* Tap/click (is-flipped) and keyboard focus flip everywhere; hover-flip only
   on devices that really hover, so a tap can always flip a card back. */
.industry-card.is-flipped .flip-inner,
.industry-card:focus-visible .flip-inner { transform: rotateY(180deg); }
@media (hover: hover) and (pointer: fine) {
  .industry-card:hover .flip-inner { transform: rotateY(180deg); }
}
.flip-face {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: var(--shadow-sm);
}
.flip-front {
  display: flex;
  align-items: flex-end;
  padding: var(--space-4);
  background: var(--color-bone);
}
.flip-front span {
  padding: 8px 12px;
  background: var(--surface-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  font-weight: var(--weight-semibold);
  font-size: var(--text-body);
  color: var(--color-obsidian);
}
.flip-back {
  transform: rotateY(180deg);
  background: var(--surface-card);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.flip-back h4 { font-size: var(--text-subheading); margin-bottom: var(--space-2); }
.flip-back p { color: var(--color-text-muted); font-size: var(--text-body); }

/* Small "flip" badge on the front so it reads as interactive (esp. on touch) */
.flip-front::after {
  content: "";
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121212' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-3-6.7L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3C/svg%3E") center / 15px no-repeat;
  box-shadow: var(--shadow-sm);
}

/* Tablet: keep three across but make the cards portrait so the back fits */
@media (min-width: 761px) and (max-width: 960px) {
  .industries-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
  .industry-card { aspect-ratio: 3 / 4; }
  .flip-back { padding: var(--space-4); }
  .flip-back h4 { font-size: var(--text-body-lg); }
  .flip-back p { font-size: var(--text-meta); }
}

/* Phone: a swipeable row that snaps card by card, next card peeking in */
@media (max-width: 760px) {
  .industries-grid {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 80%;
    gap: var(--space-3);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--container-pad);
    margin-inline: calc(var(--container-pad) * -1);
    padding: 4px var(--container-pad) var(--space-3);
    scrollbar-width: none;
  }
  .industries-grid::-webkit-scrollbar { display: none; }
  .industry-card { scroll-snap-align: start; aspect-ratio: 4 / 3; }
  .flip-back { padding: var(--space-5); }
  .flip-back p { font-size: var(--text-meta); }
}
@media (max-width: 480px) {
  .industry-card { aspect-ratio: 1 / 1; }   /* room for the longest description */
}

/* ---------- Image-led work cards (design-kit gallery) ---------- */
.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.work-card {
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.work-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.work-card__media { aspect-ratio: 16/10; background-color: var(--color-bone); background-position: center; background-size: cover; transition: transform 600ms var(--ease-out); }
.work-card__mediawrap { overflow: hidden; }
.work-card:hover .work-card__media { transform: scale(1.04); }
.work-card--static:hover { transform: none; }   /* image cards that aren't links (DaybookPro page) keep the photo zoom only */
.work-card__body { padding: var(--space-5); display: flex; flex-direction: column; flex: 1; }
.work-card__kicker { font-size: var(--text-meta); color: var(--color-text-muted); }
.work-card__title { margin-top: 4px; font-size: var(--text-subheading); }
.work-card__desc { margin-top: 6px; font-size: var(--text-body); color: var(--color-text-muted); flex: 1; }
.work-card .flip-link { margin-top: var(--space-4); }

/* ---------- Quick nav ---------- */
.quick-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }
.quick-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 8px;
  border-radius: var(--radius-xl);
  background: var(--surface-card);
  box-shadow: var(--shadow-subtle);
  font-weight: var(--weight-medium);
  font-size: var(--text-body);
  color: var(--color-obsidian);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.quick-nav a:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.quick-nav .icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: var(--color-bone);
  border: 1px solid var(--color-border);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

/* The 8 solution pills: one row on wide screens, otherwise two even rows
   of four (never a lone pill on its own row), two columns on phones. */
.quick-nav--8 {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: center;
  gap: var(--space-3);
}
.quick-nav--8 a { justify-content: flex-start; }
@media (min-width: 1240px) {
  .quick-nav--8 { grid-template-columns: repeat(8, auto); gap: 10px; }
  .quick-nav--8 a { padding: 6px 12px 6px 6px; gap: 8px; font-size: var(--text-meta); }
  .quick-nav--8 .icon { width: 28px; height: 28px; }
}
@media (max-width: 640px) {
  .quick-nav--8 { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; }
}

/* ---------- Solution blocks ---------- */
.solution-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
  padding-block: var(--space-16);
  border-bottom: 1px solid var(--color-border);
}
.solution-block:last-child { border-bottom: none; }
.solution-block__copy { order: 1; }
.solution-block__visual { order: 2; }
.solution-block.is-reverse .solution-block__copy { order: 2; }
.solution-block.is-reverse .solution-block__visual { order: 1; }
.solution-block__tag { font-size: var(--text-meta); font-weight: var(--weight-medium); color: var(--color-text-muted); }
.solution-block__copy h3 {
  font-size: var(--text-heading);
  font-weight: var(--weight-bold);
  line-height: var(--leading-heading);
  margin-top: var(--space-2);
}
.solution-block__copy > p { margin-top: var(--space-4); color: var(--color-text-muted); font-size: var(--text-body-lg); }
.solution-block__copy > p strong { color: var(--color-obsidian); font-weight: var(--weight-semibold); }
.solution-block__copy > p a { color: var(--color-obsidian); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--color-fog); }
.solution-list { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-6); }
.solution-list li { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-body); color: var(--color-graphite); }
.solution-list li svg { flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; color: var(--color-obsidian); }
.solution-block__copy .btn { margin-top: var(--space-8); }

.solution-visual {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background: var(--color-bone);
  box-shadow: var(--shadow-sm);
}

/* ---------- Page hero (inner pages): centred, then a framed photo ---------- */
.page-hero { text-align: center; }
.page-hero > .container { padding-block: var(--space-16); }
.page-hero .container > * { max-width: 760px; margin-inline: auto; }
.breadcrumb {
  display: flex;
  justify-content: center;
  gap: 6px;
  font-size: var(--text-meta);
  color: var(--color-ash);
  margin-bottom: var(--space-5);
}
.breadcrumb a:hover { color: var(--color-obsidian); }
.page-hero h1 {
  margin-top: var(--space-5);
  font-size: clamp(32px, 4.4vw, var(--text-display));
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
}
.page-hero p { margin-top: var(--space-4); color: var(--color-text-muted); font-size: var(--text-subheading); }
.page-hero.has-photo .container::after {
  content: "";
  display: block;
  max-width: none;
  height: clamp(180px, 26vw, 320px);
  margin-top: var(--space-12);
  border-radius: var(--radius-2xl);
  background: var(--img-page, none) center/cover, var(--color-bone);
  box-shadow: var(--shadow-sm);
}

/* Page hero as a leaf: the whole railed box is filled with the brand leaf
   (square top-left / bottom-right, swept top-right / bottom-left) in a soft
   green tint; the header photo moves to its own .page-photo section. */
.page-hero--leaf { --hero-leaf-bg: #eef6e2; --hero-leaf-curve: clamp(56px, 10vw, 160px); }
/* Header leaf tint follows the page's photo leaf: green pages keep the soft
   green, blue pages (About, Work) get the soft light blue. */
.page-hero--blue { --hero-leaf-bg: #dff3fb; }
.page-hero--leaf > .container {
  position: relative;
  isolation: isolate;
  padding: var(--space-20) clamp(24px, 6vw, 96px);
}
.page-hero--leaf > .container::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--hero-leaf-bg);
  border-radius: 0 var(--hero-leaf-curve) 0 var(--hero-leaf-curve);
}
.page-hero--leaf .eyebrow { background: rgba(255, 255, 255, 0.7); border-color: rgba(0, 0, 0, 0.06); }

/* Standalone header photo, filling its railed box */
.page-photo > .container { padding: 0; }
.page-photo__img {
  height: clamp(220px, 30vw, 420px);
  background: var(--img-page, none) center / cover, var(--color-bone);
}

/* ---------- Contact ---------- */
.contact-grid { grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: start; }
.contact-info { display: flex; flex-direction: column; gap: var(--space-3); }
.contact-info .item {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4);
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.contact-info .icon {
  width: 40px; height: 40px; border-radius: var(--radius-md);
  background: var(--color-bone); border: 1px solid var(--color-border);
  color: var(--color-obsidian);
  display: grid; place-items: center; flex-shrink: 0;
}
.contact-info h4 { font-size: var(--text-body); margin-bottom: 2px; }
.contact-info p { color: var(--color-text-muted); font-size: var(--text-body); }

.contact-form {
  padding: var(--space-8);
  background: var(--surface-card);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-sm);
}
.form-field { margin-bottom: var(--space-5); }
.form-field label { display: block; font-size: var(--text-body); font-weight: var(--weight-medium); margin-bottom: 6px; color: var(--color-obsidian); }
.form-field input, .form-field textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--surface-card);
  color: var(--color-obsidian);
  font-size: var(--text-body);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--color-fog); }
.form-field input:focus, .form-field textarea:focus {
  outline: none;
  border-color: var(--color-border-strong);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}
.contact-form .btn { width: auto; }   /* normal width, sized to its label */
/* Contact: email panel in place of the form (no plugins) */
.contact-email { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.contact-email__icon {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border-radius: var(--radius-xl);
  background: var(--color-action); color: #fff;
}
.contact-email h3 { margin: 0; }
.contact-email p { margin: 0; color: var(--color-text-muted); }
.contact-email__note { font-size: var(--text-meta); }
.contact-email__note a, .contact-info .item a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* Contact: the photo fills the whole block and the details + email panel sit on
   top of it as white cards, with even padding all round (owner, 2026-10-15). */
.contact-stage {
  position: relative;
  isolation: isolate;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  padding: clamp(20px, 4vw, 56px);
}
.contact-stage > .contact-visual {
  position: absolute;
  inset: 0;
  z-index: -1;
  margin: 0;
  aspect-ratio: auto;
  border-radius: 0;
  box-shadow: none;
}
.contact-stage .contact-grid { gap: clamp(16px, 3vw, 40px); align-items: stretch; }
.contact-stage .contact-email { justify-content: center; box-shadow: var(--shadow-lg); }
.contact-stage .contact-info .item { box-shadow: var(--shadow-md); }

/* ---------- Footer: same canvas, hairline separated ---------- */
.site-footer { color: var(--color-text-muted); }
.site-footer > .container { padding-block: var(--space-16) 0; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--space-8);
  padding-bottom: var(--space-12);
}
.footer-grid h4 { color: var(--color-obsidian); font-size: var(--text-body); font-weight: var(--weight-semibold); margin-bottom: var(--space-4); }
.footer-grid ul { display: flex; flex-direction: column; gap: 10px; font-size: var(--text-body); }
.footer-grid a:hover { color: var(--color-obsidian); }
.footer-about p { font-size: var(--text-body); margin-top: var(--space-4); max-width: 34ch; }
.footer-social { display: flex; gap: var(--space-2); margin-top: var(--space-5); }
.footer-social a {
  width: 34px; height: 34px; border-radius: var(--radius-md);
  background: var(--surface-card);
  box-shadow: var(--shadow-subtle);
  color: var(--color-graphite);
  display: grid; place-items: center;
  transition: color var(--transition-fast);
}
.footer-social a:hover { color: var(--color-obsidian); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  margin-inline: calc(var(--container-pad) * -1);
  padding: var(--space-6) var(--container-pad);
  border-top: 1px solid var(--color-border);
  background: var(--color-bg);   /* keeps the row itself plain; hatch shows either side */
  font-size: var(--text-meta);
  color: var(--color-ash);
  flex-wrap: wrap;
  gap: var(--space-4);
}
.footer-bottom .links { display: flex; gap: var(--space-5); }
/* Hatched strips either side of the rails, the height of the copyright row */
.footer-bottom::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -1px;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--hatch);
  border-top: 1px solid var(--color-border);
}
.footer-bottom a:hover { color: var(--color-obsidian); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .nav-link { padding: 8px 9px; }
  .showcase-grid { grid-template-columns: repeat(2, 1fr); }
  .showcase-card:nth-child(even) { transform: none; }
  .showcase-card:nth-child(even):hover { transform: translateY(-4px); }
}
@media (max-width: 960px) {
  .nav, .header-actions .btn-primary { display: none; }
  .nav-toggle { display: grid; }
  .who .container, .contact-grid { grid-template-columns: 1fr; }
  .values-row { flex-direction: column; align-items: stretch; }
  .values-visual { flex: none; width: 100%; min-height: 260px; }
  .process-strip { flex-direction: column; align-items: center; gap: var(--space-8); }
  .process-strip::before { display: none; }
  .solution-block { grid-template-columns: 1fr; gap: var(--space-8); padding-block: var(--space-12); }
  .solution-block__copy, .solution-block.is-reverse .solution-block__copy { order: 2; }
  .solution-block__visual, .solution-block.is-reverse .solution-block__visual { order: 1; }
  .grid-3, .grid-4, .work-grid { grid-template-columns: repeat(2, 1fr); }
  .clients-row { grid-template-columns: repeat(2, 1fr); }
  .stats .container { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: none; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--color-border); }
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }   /* about row on top, then the 3 link groups side by side */
  .footer-about { grid-column: 1 / -1; }
  .hero-scatter { display: none; }
}
@media (max-width: 640px) {
  :root { --header-height: 72px; --section-gap: 56px; }
  .brand .logo { height: 57px; }   /* v5: stacked logo on phones (+5px) */
  .topbar { display: none; }
  .grid-3, .grid-4, .grid-2, .work-grid, .values-list { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6) var(--space-4); }
  .footer-grid ul { font-size: var(--text-meta); gap: 8px; }
  .footer-grid h4 { font-size: var(--text-meta); margin-bottom: var(--space-3); }
  .hero { padding-top: var(--space-12); }
  .hero-actions .btn { flex: 1 1 100%; }
  .showcase { padding: var(--space-5); margin-top: var(--space-10); }
  .showcase-grid { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  .showcase-card p { display: none; }
  .section-head h2 { font-size: var(--text-heading); }
  .banner p:first-of-type { font-size: var(--text-heading-sm); }
  .banner > .container { padding: var(--space-3); }
  .banner-panel { padding: var(--space-10) var(--space-5); }
  .dropdown.dropdown--wide { min-width: 0; }
}

/* ==========================================================================
   Canvas frame: the Pixso "design canvas" structure:
   · full-width hairline under every section
   · vertical rails on the content column, unbroken down the page
   · 9px rounded-square markers where rails cross a line
   · rail-to-rail rule closing each section header
   · dashed rule behind pill rows, diagonal hatch in frames
   ========================================================================== */
main > section {
  position: relative;
  border-bottom: 1px solid var(--color-border);
}
main > section > .container,
.site-footer > .container {
  position: relative;
  border-inline: 1px solid var(--color-border);
}

/* Markers at both ends of each section line (a single strip: two
   markers + the line between, so no extra markup is needed). */
main > section::after {
  content: "";
  position: absolute;
  z-index: 2;
  bottom: -5px;
  left: calc((100% - min(100% - var(--rail-gutter) * 2, var(--rail-max))) / 2 - 5px);
  right: calc((100% - min(100% - var(--rail-gutter) * 2, var(--rail-max))) / 2 - 5px);
  height: 9px;
  background: var(--marker) left center / 9px 9px no-repeat, var(--marker) right center / 9px 9px no-repeat;
  pointer-events: none;
}

/* Header strip: a rail-to-rail rule (with markers) under each section head.
   Absolutely positioned with no top, so it sits at the head's static
   position, then nudged down past its bottom padding. */
.section-head::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: -5px;
  right: -5px;
  height: 9px;
  transform: translateY(calc(var(--space-12) - 4px));
  background:
    var(--marker) left center / 9px 9px no-repeat,
    var(--marker) right center / 9px 9px no-repeat,
    linear-gradient(var(--color-border), var(--color-border)) center / calc(100% - 10px) 1px no-repeat;
  pointer-events: none;
}

/* A section head that follows other content in the same section also
   gets a rule above it, so it reads as its own strip. */
.section-head:not(:first-child) { padding-top: var(--space-12); }
.section-head:not(:first-child)::before {
  content: "";
  position: absolute;
  z-index: 2;
  left: -5px;
  right: -5px;
  height: 9px;
  transform: translateY(calc(var(--space-12) * -1 - 4px));
  background:
    var(--marker) left center / 9px 9px no-repeat,
    var(--marker) right center / 9px 9px no-repeat,
    linear-gradient(var(--color-border), var(--color-border)) center / calc(100% - 10px) 1px no-repeat;
  pointer-events: none;
}

/* A head that belongs with the content below it (no header strip):
   no rule under it, and only normal spacing before the content. */
.section-head--joined { padding-bottom: 0; }
.section-head--joined::after { content: none; }
.section-head--joined:not(:first-child) { padding-top: 0; }
.section-head--joined:not(:first-child)::before { content: none; }

/* Empty spacer strip between sections */
/* Brand-coloured hatching: these override --hatch for that section only */
.hatch--blue  { --hatch: var(--hatch-blue); }
.hatch--green { --hatch: var(--hatch-green); }
.hatch--navy  { --hatch: var(--hatch-navy); }
.site-footer  { --hatch: var(--hatch-blue); }

/* Spacer strips: hatching either side of the rails, plain canvas between */
.section-spacer { background: var(--hatch); }
.section-spacer > .container { height: 150px; padding-block: 0; background: var(--color-bg); }
.section-spacer--75 > .container { height: 75px; }
.section-spacer--125 > .container { height: 125px; }
/* Plain spacer: a gap with no crosshatching either side (used between a leaf section and the case study closing banner) */
.section-spacer.section-spacer--plain { --hatch: none; }

/* Dashed rule running rail to rail behind a row of pills */
.quick-nav { position: relative; }
.quick-nav::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(var(--container-pad) * -1);
  right: calc(var(--container-pad) * -1);
  height: 1px;
  background: var(--dash);
}
.quick-nav a { position: relative; }

/* Dashed rule between hero copy and the showcase frame */
.hero .showcase { margin-top: var(--space-16); }
.hero-inner::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(var(--space-8) * -1);
  width: calc(min(100vw - var(--rail-gutter) * 2, var(--rail-max)) - 2px);
  transform: translateX(-50%);
  height: 1px;
  background: var(--dash);
}

/* ==========================================================================
   v4 leaf hero
   Full-bleed photo with the brand "leaf square" as a green content panel.
   The section is taller than the screen; its stage is sticky, so scrolling
   through it steps data-step 0 → 1 → 2 (set by js/main.js):
     0  leaf left, intro copy (0°)
     1  leaf centre, stats: a quarter-turn clockwise (90°)
     2  leaf right, CTA: another quarter-turn clockwise (180°)
   Content is counter-rotated so text always reads upright.
   Leaf shape: square with the top-right and bottom-left corners swept into
   large curves (matches the brand asset, Asset 4.svg). Drawn with
   border-radius rather than a clip-path so it animates smoothly.
   ========================================================================== */
.leaf-hero {
  /* The hero's bottom edge lands at 900px from the top of the page (as in
     the owner's mockups): 900 minus the topbar and header above it. On
     shorter screens it is simply the viewport below the header. */
  --hero-bottom: 900px;
  --topbar-h: 39px;
  --clients-hatch: 40px;                      /* hatched strip on top of the clients band */
  --clients-h: calc(132px + var(--clients-hatch));   /* clients band along the bottom of the hero */
  /* Minimum leaf size, so the text inside always fits (its 3/4-line copy was
     measured at ~410px). The stage never gets shorter than the leaf plus the
     clients band and breathing room, even in a short or narrow window; on a
     short window the band simply sits below the fold. */
  --leaf-min: 400px;
  --stage-h: max(calc(var(--leaf-min) + var(--clients-h) + 120px),
                 min(calc(100vh - var(--header-height) - var(--topbar-h)), calc(var(--hero-bottom) - var(--topbar-h) - var(--header-height))));
  --leaf: max(var(--leaf-min), min(475px, 40vw, calc(var(--stage-h) - var(--clients-h) - 120px)));
  /* Leaf colour per step, cross-faded as it moves */
  --leaf-colour-1: rgba(141, 198, 63, 0.95);  /* logo green #8dc63f */
  --leaf-colour-2: rgba(0, 164, 228, 0.95);   /* light (logo) blue #00a4e4 */
  --leaf-colour-3: rgba(13, 53, 82, 0.95);    /* dark blue  #0d3552 */
  /* Solid version of the current step's colour, for the step chip and CTA text */
  --leaf-accent: #8dc63f;
  --leaf-ease: cubic-bezier(0.65, 0, 0.35, 1);
  --leaf-dur: 900ms;
  position: relative;
  height: calc(var(--stage-h) + 140vh);
}
.leaf-hero__stage {
  position: sticky;
  top: var(--header-height);
  height: var(--stage-h);
  overflow: hidden;
  background: #0d1622;
}

/* One photo per step, cross-faded. The active photo also eases in from
   a slight zoom so each change feels like a move, not a cut. */
.leaf-hero__photos { position: absolute; inset: 0 0 var(--clients-h) 0; }
.leaf-hero__photo {
  position: absolute;
  inset: 0;
  background: center / cover no-repeat;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 1100ms ease, transform 2400ms var(--leaf-ease);
}
.leaf-hero__photo[data-photo="0"] { background-image: var(--img-hero-step-1); }
.leaf-hero__photo[data-photo="1"] { background-image: var(--img-hero-step-2); }
.leaf-hero__photo[data-photo="2"] { background-image: var(--img-hero-step-3); }
.leaf-hero[data-step="init"] [data-photo="0"],
.leaf-hero[data-step="0"] [data-photo="0"],
.leaf-hero[data-step="1"] [data-photo="1"],
.leaf-hero[data-step="2"] [data-photo="2"] { opacity: 1; transform: scale(1.02); }

.leaf-hero__frame { position: relative; height: calc(100% - var(--clients-h)); }

/* .leaf-box carries position (it slides, never rotates) and the guide
   lines; .leaf inside it does the rotating. Quarter-turns keep the leaf's
   square unchanged, so the guides frame it exactly in every state. */
.leaf-box {
  position: absolute;
  top: 50%;
  left: var(--container-pad);
  width: var(--leaf);
  height: var(--leaf);
  margin-top: calc(var(--leaf) / -2);
  transition: left var(--leaf-dur) var(--leaf-ease);
}
.leaf {
  position: absolute;
  inset: 0;
  background-color: var(--leaf-colour-1);
  border-radius: 6px 33% 6px 33%;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.45);
  transform: rotate(0deg) scale(1);   /* explicit, so every state interpolates rotate→rotate */
  transition: transform var(--leaf-dur) var(--leaf-ease), background-color var(--leaf-dur) ease,
              opacity 700ms ease 500ms, rotate 1200ms var(--ease-out) 500ms, scale 1200ms var(--ease-out) 500ms;
}
/* Page-load intro (js/main.js removes .is-intro): like the sub-page photo
   leaves, the leaf fades and spins in from -90°, 0.5s after the lines start.
   Uses the separate rotate/scale properties so it stacks on the step transform. */
.leaf-hero.is-intro .leaf { opacity: 0; rotate: -90deg; scale: 0.8; }

/* ---- Guide lines: retract while the leaf moves (.is-moving, set by JS),
        then draw outward from the leaf once it settles ---- */
.leaf-guides { position: absolute; inset: 0; pointer-events: none; }
.leaf-guide {
  position: absolute;
  background: rgba(255, 255, 255, 0.6);
  transition: transform 900ms var(--leaf-ease), opacity 600ms ease;
}
.leaf-guide--top,
.leaf-guide--bottom { left: -200vw; right: -200vw; height: 1px; transform-origin: center; }
.leaf-guide--top    { top: -0.5px; }
.leaf-guide--bottom { bottom: -0.5px; }
.leaf-guide--left,
.leaf-guide--right  { top: -200vh; bottom: -200vh; width: 1px; transform-origin: center; }
.leaf-guide--left   { left: -0.5px; }
.leaf-guide--right  { right: -0.5px; }
.leaf-mark {
  position: absolute;
  width: 9px;
  height: 9px;
  margin: -4.5px;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.18);
  transition: opacity 400ms ease 500ms, transform 400ms ease 500ms;
}
.leaf-mark--tl { top: 0; left: 0; }
.leaf-mark--tr { top: 0; right: 0; }
.leaf-mark--bl { bottom: 0; left: 0; }
.leaf-mark--br { bottom: 0; right: 0; }

.leaf-hero.is-moving .leaf-guide { opacity: 0; transition-duration: 250ms, 200ms; }
.leaf-hero.is-moving .leaf-guide--top,
.leaf-hero.is-moving .leaf-guide--bottom { transform: scaleX(0); }
.leaf-hero.is-moving .leaf-guide--left,
.leaf-hero.is-moving .leaf-guide--right { transform: scaleY(0); }
.leaf-hero.is-moving .leaf-mark { opacity: 0; transform: scale(0.4); transition-delay: 0s; transition-duration: 150ms; }
/* Each step is a further quarter-turn clockwise: 0° → 90° → 180°.
   The leaf is symmetric under a half-turn, so at 180° it is the same shape
   as at 0°; at 90° its swept corners sit top-left / bottom-right. */
.leaf-hero[data-step="2"] .leaf-box { left: calc(100% - var(--leaf) - var(--container-pad)); }
.leaf-hero[data-step="2"] .leaf { transform: rotate(180deg) scale(1); background-color: var(--leaf-colour-3); }
.leaf-hero[data-step="1"] .leaf-box { left: calc(50% - var(--leaf) / 2); }
.leaf-hero[data-step="1"] .leaf {
  transform: rotate(90deg) scale(1);
  background-color: var(--leaf-colour-2);
}

/* Content rides along with the leaf but is counter-rotated (and
   counter-scaled) in state 2 so text always reads upright at full size. */
.leaf__content {
  position: absolute;
  inset: 0;
  transform: rotate(0deg) scale(1);
  transition: transform var(--leaf-dur) var(--leaf-ease);
}
.leaf-hero[data-step="2"] .leaf__content { transform: rotate(-180deg) scale(1); }
.leaf-hero[data-step="1"] .leaf__content {
  transform: rotate(-90deg) scale(1);
}

.leaf__panel {
  position: absolute;
  inset: 0;
  padding: 12% 10%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-5);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 50, 80, 0.2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 400ms ease, transform 400ms ease, visibility 400ms;
}
.leaf-hero[data-step="0"] [data-panel="0"],
.leaf-hero[data-step="1"] [data-panel="1"],
.leaf-hero[data-step="2"] [data-panel="2"] {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: calc(var(--leaf-dur) * 0.55);
}
.leaf__panel h1,
.leaf__panel h2 {
  color: #fff;
  font-size: clamp(20px, 2.1vw, 30px);
  font-weight: var(--weight-bold);
  line-height: 1.18;
  letter-spacing: -0.015em;
}
.leaf__panel p { font-size: clamp(14px, 1.15vw, 17px); line-height: 1.55; }

/* ---- Shared hero-panel layout (all 3 steps): centred kicker near the top,
        then the same corner-bracketed rectangle holding that step's content.
        Step 2's stats grid sets the rectangle's size (its natural height);
        js/main.js copies that into --leaf-box-h for steps 1 and 3. ---- */
.leaf__panel--framed { justify-content: center; align-items: center; padding: 5% 10% 13%; gap: 0; }   /* label + box centred as one group */
.leaf__kicker {
  display: inline-block;
  align-self: center;
  position: relative;
  top: -20px;                                /* label lifted 20px; the box stays put */
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radius-md);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.leaf__box {
  position: relative;
  width: 100%;
  height: var(--leaf-box-h, auto);
  margin-top: var(--space-6);                /* gap between label and box */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3);
  padding: 0 var(--space-4);
}
.leaf__box::before {                         /* corner brackets (crop marks), each arm ending in a
                                                hollow ring like the circuit lines in the IOL logo */
  content: "";
  position: absolute;
  inset: -11px;                              /* brackets sit 6px out; 5px extra room for the rings */
  pointer-events: none;
  --b: rgba(255, 255, 255, 0.7);
  --ring: radial-gradient(circle, transparent 1.9px, var(--b) 2.1px, var(--b) 2.9px, transparent 3.2px);   /* 4px hole, 1px line, 6px across */
  background:
    var(--ring) left 18px top 1px / 9px 9px no-repeat,
    var(--ring) left 1px top 18px / 9px 9px no-repeat,
    var(--ring) right 18px top 1px / 9px 9px no-repeat,
    var(--ring) right 1px top 18px / 9px 9px no-repeat,
    var(--ring) left 18px bottom 1px / 9px 9px no-repeat,
    var(--ring) left 1px bottom 18px / 9px 9px no-repeat,
    var(--ring) right 18px bottom 1px / 9px 9px no-repeat,
    var(--ring) right 1px bottom 18px / 9px 9px no-repeat,
    linear-gradient(var(--b), var(--b)) left 5px top 5px / 14px 1px no-repeat,
    linear-gradient(var(--b), var(--b)) left 5px top 5px / 1px 14px no-repeat,
    linear-gradient(var(--b), var(--b)) right 5px top 5px / 14px 1px no-repeat,
    linear-gradient(var(--b), var(--b)) right 5px top 5px / 1px 14px no-repeat,
    linear-gradient(var(--b), var(--b)) left 5px bottom 5px / 14px 1px no-repeat,
    linear-gradient(var(--b), var(--b)) left 5px bottom 5px / 1px 14px no-repeat,
    linear-gradient(var(--b), var(--b)) right 5px bottom 5px / 14px 1px no-repeat,
    linear-gradient(var(--b), var(--b)) right 5px bottom 5px / 1px 14px no-repeat;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 500ms ease, transform 700ms var(--ease-out);
}
.leaf-hero[data-step="0"] [data-panel="0"] .leaf__box::before,
.leaf-hero[data-step="1"] [data-panel="1"] .leaf__box::before,
.leaf-hero[data-step="2"] [data-panel="2"] .leaf__box::before { opacity: 1; transform: none; transition-delay: 650ms; }
.leaf__box h1, .leaf__box h2 { margin: 0; }

/* ---- Step 2: 2x2 stats split by a white cross with a centre marker;
        cells stagger in and the numbers count up ---- */
.leaf__panel--stats .leaf__box { padding: 0; height: auto; }
.leaf__stats {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  text-align: center;
}
.stat-cell {
  padding: var(--space-5) var(--space-3);
  opacity: 0;
  translate: 0 12px;
  transition: opacity 500ms ease, translate 600ms var(--ease-out);
}
.leaf__stats .num {
  display: block;
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.leaf__stats .label { display: block; margin-top: 4px; font-size: clamp(12px, 1vw, 14px); line-height: 1.35; opacity: 0.92; }
.leaf__stats-line {                         /* cross lines, each end finished with a circuit ring
                                                (same 6px ring as the corner brackets and divider) */
  position: absolute;
  --ring: radial-gradient(circle, transparent 1.9px, rgba(255, 255, 255, 0.7) 2.1px, rgba(255, 255, 255, 0.7) 2.9px, transparent 3.2px);
  --line: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5));
  transition: transform 700ms var(--ease-out);
}
.leaf__stats-line--v {
  left: 50%; top: 8%; bottom: 8%; width: 9px; margin-left: -4px;
  background:
    var(--ring) center top / 7px 7px no-repeat,
    var(--ring) center bottom / 7px 7px no-repeat,
    var(--line) center / 1px calc(100% - 12px) no-repeat;
  transform: scaleY(0);
}
.leaf__stats-line--h {
  top: 50%; left: 4%; right: 4%; height: 9px; margin-top: -4px;
  background:
    var(--ring) left center / 7px 7px no-repeat,
    var(--ring) right center / 7px 7px no-repeat,
    var(--line) center / calc(100% - 12px) 1px no-repeat;
  transform: scaleX(0);
}
.leaf__stats-mark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.25);
  transform: scale(0) rotate(45deg);
  transition: transform 400ms var(--ease-out);
}
.leaf-hero[data-step="1"] .leaf__stats-line { transform: none; transition-delay: 650ms; }
.leaf-hero[data-step="1"] .leaf__stats-mark { transform: scale(1) rotate(45deg); transition-delay: 1100ms; }
.leaf-hero[data-step="1"] .stat-cell { opacity: 1; translate: 0 0; }
.leaf-hero[data-step="1"] .stat-cell:nth-child(1) { transition-delay: 600ms; }
.leaf-hero[data-step="1"] .stat-cell:nth-child(2) { transition-delay: 720ms; }
.leaf-hero[data-step="1"] .stat-cell:nth-child(3) { transition-delay: 840ms; }
.leaf-hero[data-step="1"] .stat-cell:nth-child(4) { transition-delay: 960ms; }

/* ---- Steps 1 and 3: headline, a centre divider with a diamond (drawn
        like step 2's cross), then small text + "Read more" / the CTA ---- */
.leaf__panel--framed .leaf__box h1,
.leaf__panel--framed .leaf__box h2 { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.2; }
/* Steps 1 and 3: two equal halves with the divider exactly in the middle
   (where step 2's horizontal line sits); headline centred in the top half,
   small text centred in the bottom half. */
.leaf__panel--framed:not(.leaf__panel--stats) .leaf__box {
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  gap: 0;
}
.leaf__panel--framed:not(.leaf__panel--stats) .leaf__box > h1,
.leaf__panel--framed:not(.leaf__panel--stats) .leaf__box > h2 { grid-row: 1; align-self: center; }
.leaf__panel--framed:not(.leaf__panel--stats) .leaf__divider { grid-row: 2; }
/* Fixed line counts: type scales with the box width (container units), so the
   words break in the same places at every size; the copy is written to fill
   exactly 3 headline lines and 4 small-text lines. Clamps are a safety net. */
.leaf__panel--framed:not(.leaf__panel--stats) .leaf__box { container-type: inline-size; }
.leaf__panel--framed:not(.leaf__panel--stats) .leaf__box > h1,
.leaf__panel--framed:not(.leaf__panel--stats) .leaf__box > h2 {
  font-size: 6cqi !important;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  min-height: 3.6em;
}
.leaf__panel--framed:not(.leaf__panel--stats) .leaf__small {
  font-size: 3.45cqi !important;
  line-height: 1.45 !important;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
  min-height: 5.8em;
}
.leaf__panel--framed:not(.leaf__panel--stats) .leaf__small { grid-row: 3; align-self: center; }
.leaf__divider { position: relative; display: block; flex: none; height: 9px; }
.leaf__divider::before {                    /* the line, ending in a circuit ring at each end
                                                (same 6px ring as the corner brackets) */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 9px;
  --ring: radial-gradient(circle, transparent 1.9px, rgba(255, 255, 255, 0.7) 2.1px, rgba(255, 255, 255, 0.7) 2.9px, transparent 3.2px);
  background:
    var(--ring) left center / 7px 7px no-repeat,
    var(--ring) right center / 7px 7px no-repeat,
    linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)) center / calc(100% - 12px) 1px no-repeat;
  transform: scaleX(0);
  transition: transform 700ms var(--ease-out);
}
.leaf__divider::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.25);
  transform: scale(0) rotate(45deg);
  transition: transform 400ms var(--ease-out);
}
.leaf__small { margin: 0; font-size: 12px !important; line-height: 1.45 !important; opacity: 0; transition: opacity 500ms ease; }
/* "Read more" button sits just under step 1's box. It is absolutely
   positioned off the box so the box keeps exactly step 2's size/position. */
.leaf__more-btn {
  position: absolute;
  top: calc(100% + 18px);
  left: 50%;
  translate: -50% 0;
  margin: 0 !important;
  white-space: nowrap;
  color: var(--leaf-accent) !important;
  opacity: 0;
  transition: opacity 500ms ease, background var(--transition-fast);
}
.leaf__more-btn svg { transition: transform 300ms var(--ease-out); }
.leaf__more-btn:hover svg { transform: translateX(3px); }
.leaf-hero[data-step="0"] [data-panel="0"] .leaf__divider::before,
.leaf-hero[data-step="2"] [data-panel="2"] .leaf__divider::before { transform: none; transition-delay: 650ms; }
.leaf-hero[data-step="0"] [data-panel="0"] .leaf__divider::after,
.leaf-hero[data-step="2"] [data-panel="2"] .leaf__divider::after { transform: scale(1) rotate(45deg); transition-delay: 1100ms; }
.leaf-hero[data-step="0"] [data-panel="0"] .leaf__small { opacity: 0.92; transition-delay: 900ms; }
.leaf-hero[data-step="0"] [data-panel="0"] .leaf__more-btn,
.leaf-hero[data-step="1"] [data-panel="1"] .leaf__more-btn,
.leaf-hero[data-step="2"] [data-panel="2"] .leaf__more-btn { opacity: 1; transition-delay: 1050ms; }
.leaf-hero[data-step="2"] [data-panel="2"] .leaf__small { opacity: 0.92; transition-delay: 900ms; }

/* ---- Step 3: headline + nudging CTA ---- */
.leaf__panel .btn { align-self: flex-start; margin-top: var(--space-1); }
.leaf__cta svg { transition: transform 300ms var(--ease-out); }
.leaf-hero[data-step="2"] .leaf__cta svg { animation: leaf-nudge 1.6s ease-in-out 1.8s infinite; }
.leaf__cta:hover svg { animation: none; transform: translateX(4px); }
@keyframes leaf-nudge { 0%, 60%, 100% { transform: none; } 30% { transform: translateX(5px); } }

@media (prefers-reduced-motion: reduce) {
  .stat-cell, .leaf__box::before, .leaf__stats-line, .leaf__stats-mark,
  .leaf__divider::before, .leaf__divider::after, .leaf__small { transition: opacity 200ms ease !important; translate: none !important; }
  .leaf__more-btn { transition: opacity 200ms ease !important; }   /* keep its -50% centring translate */
  .leaf__cta svg { animation: none !important; }
}

.btn-light {
  background: #fff;
  color: var(--color-brand-blue);
  box-shadow: var(--shadow-sm);
  text-shadow: none;
}
.btn-light:hover { background: var(--color-bone); }

/* Step chips (1 · 2 · 3): show where you are, click to jump */
.leaf-hero__steps {
  position: absolute;
  left: 50%;
  bottom: var(--clients-h);                  /* centred on the photo's bottom edge */
  z-index: 7;                                /* above the clients band (z-index 6) */
  transform: translate(-50%, 50%);
  display: flex;
  gap: var(--space-2);
  padding: 4px;
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
}
.leaf-hero__steps button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 5px;
  border-radius: var(--radius-md);
  font-size: var(--text-meta);
  font-weight: var(--weight-medium);
  color: var(--color-graphite);
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.leaf-hero__steps button span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--color-mist);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.leaf-hero__steps button:hover { background: rgba(255, 255, 255, 0.7); }
.leaf-hero__steps button[aria-current="true"] { background: #fff; color: var(--color-obsidian); }
.leaf-hero__steps button[aria-current="true"] span { background: var(--leaf-accent); color: #fff; }
.leaf-hero[data-step="1"] { --leaf-accent: #00a4e4; }
.leaf-hero[data-step="2"] { --leaf-accent: #0d3552; }
.leaf-hero .btn-light { color: var(--leaf-accent); }

/* Header "Get in touch" takes the leaf's colour while the hero is in view
   (js sets html[data-hero-step]); outside the hero it is the normal brand blue. */
.header-actions .btn-primary { transition: background-color var(--leaf-dur, 900ms) ease, filter var(--transition-fast); }
html[data-hero-step="0"] .header-actions .btn-primary { background-color: #8dc63f; }
html[data-hero-step="1"] .header-actions .btn-primary { background-color: #00a4e4; }
html[data-hero-step="2"] .header-actions .btn-primary { background-color: #0d3552; }
html[data-hero-step] .header-actions .btn-primary:hover { filter: brightness(0.92); }

/* "Skip intro" (replaces the old Scroll hint): a pill with a bobbing chevron,
   bottom-right on the photo. Click glides past the held steps (main.js). */
.leaf-hero__skip {
  position: absolute;
  right: var(--space-6);
  bottom: calc(var(--clients-h) + var(--space-6));
  z-index: 7;
  display: flex; align-items: center; gap: 10px;
  padding: 6px 6px 6px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
  font-size: var(--text-meta); font-weight: var(--weight-semibold);
  color: var(--color-obsidian);
  transition: background var(--transition-fast);
}
.leaf-hero__skip:hover { background: #fff; }
.leaf-hero__skip:focus-visible { outline: 2px solid var(--leaf-accent, #8dc63f); outline-offset: 2px; }
.leaf-hero__skip-icon {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--leaf-accent, #8dc63f); color: #fff;
  transition: background var(--leaf-dur, 900ms) ease;
}
.leaf-hero__skip-icon svg { animation: leaf-skip 1.6s ease-in-out infinite; }
@keyframes leaf-skip { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }

/* Tablet & phone: the leaf stays centred; it still turns 0° → 90° → 180°. */
@media (max-width: 760px) {
  .leaf-hero {
    --leaf-min: min(91.6vw, 343px);            /* phones: side gaps cut 40% (86vw -> 91.6vw) so the leaf and its content run larger */
    --stage-h: max(calc(var(--leaf-min) + var(--clients-h) + 110px), min(calc(100svh - var(--header-height)), 900px));
    --leaf: max(var(--leaf-min), min(91.6vw, 440px, calc(var(--stage-h) - var(--clients-h) - 110px)));
    height: calc(var(--stage-h) + 140svh);
  }
  .leaf-box,
  .leaf-hero[data-step="1"] .leaf-box,
  .leaf-hero[data-step="2"] .leaf-box { left: calc(50% - var(--leaf) / 2); }
  .leaf__panel { padding: 10% 9%; gap: var(--space-3); }
  .leaf__panel h1, .leaf__panel h2 { font-size: clamp(18px, 5vw, 24px); }
  .leaf__panel p { font-size: clamp(13px, 3.6vw, 15px); line-height: 1.5; }
  .photo-leaf__content { padding: 8% 9% 9%; }
  .photo-leaf .leaf__box { margin-top: var(--space-4); }
  .leaf__more-btn { top: calc(100% + 10px); padding: 7px 14px; }
  .leaf__kicker { top: -10px; }   /* smaller lift so it clears the leaf edge */
  .stat-cell { padding: var(--space-3) var(--space-2); }
  .leaf__stats .num { font-size: clamp(18px, 5vw, 24px); }
  .leaf__stats .label { font-size: 11px; }
  .leaf-hero { --clients-hatch: 32px; --clients-h: calc(112px + var(--clients-hatch)); --topbar-h: 0px; }
  .hero-clients__inner { gap: var(--space-2); }
  .hero-clients .logo-marquee__item { height: 52px; min-width: 140px; font-size: var(--text-meta); }
  /* Phone step chips 20% larger for thumbs: 38px buttons (were 32px) */
  .leaf-hero__steps { padding: 5px; gap: 10px; }
  .leaf-hero__steps button { padding: 6px; font-size: 0; gap: 0; }
  .leaf-hero__steps button span { width: 26px; height: 26px; border-radius: 7px; font-size: 14px; }
  /* phones: round chevron only, kept clear of the centred step chips */
  .leaf-hero__skip { right: var(--space-4); bottom: calc(var(--clients-h) + var(--space-4)); padding: 5px; }
  .leaf-hero__skip-label { display: none; }
  .leaf-hero__skip-icon { width: 34px; height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .leaf-box, .leaf__content { transition: none; }
  .leaf { transition: background-color 300ms ease; }
  .leaf-guide, .leaf-mark { transition: opacity 200ms ease; transform: none !important; }
  .leaf-hero__photo { transform: none !important; transition: opacity 300ms ease; }
  .leaf__panel { transform: none; transition: opacity 200ms ease, visibility 200ms; }
  .leaf-hero__skip-icon svg { animation: none; }
}

/* ==========================================================================
   Scroll reveal (v4, every page except the hero)
   js/main.js adds .is-inview to each section as it enters the viewport and
   to each text/card item (.rv) individually, with a short stagger. All
   hidden states sit inside prefers-reduced-motion: no-preference and under
   html.reveal-on (set in <head>, removed if IntersectionObserver is missing),
   so without motion or JS everything is simply visible.
   Text uses the `translate` property (not transform) so it never clashes
   with the cards' own hover transforms.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* ---- Lines: rails draw down, bottom line draws across ---- */
  .reveal-on main > section:not(.leaf-hero) { border-bottom-color: transparent; }
  .reveal-on main > section:not(.leaf-hero) > .container { border-inline-color: transparent; }
  .frame-lines { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
  .fl {
    position: absolute;
    background: var(--color-border);
    transition: transform 1100ms var(--ease-out);
  }
  .fl--l, .fl--r { top: 0; bottom: 0; width: 1px; transform: scaleY(0); transform-origin: top; }
  .fl--l { left:  calc((100% - min(100% - var(--rail-gutter) * 2, var(--rail-max))) / 2); }
  .fl--r { right: calc((100% - min(100% - var(--rail-gutter) * 2, var(--rail-max))) / 2); }
  .fl--b { left: 0; right: 0; bottom: 0; height: 1px; transform: scaleX(0); transform-origin: left; }
  .is-inview > .frame-lines .fl { transform: none; }
  .is-inview > .frame-lines .fl--b { transition-delay: 250ms; }

  /* Corner markers pop in once the lines have drawn */
  .reveal-on main > section:not(.leaf-hero)::after { opacity: 0; transition: opacity 300ms ease; }
  .reveal-on main > section.is-inview::after { opacity: 1; transition: opacity 500ms ease 900ms; }

  /* Section-head strip rules draw outward from the centre */
  .reveal-on .section-head::after,
  .reveal-on .section-head:not(:first-child)::before {
    clip-path: inset(0 50% 0 50%);
    transition: clip-path 600ms var(--ease-out);
  }
  .reveal-on .is-inview .section-head::after,
  .reveal-on .is-inview .section-head:not(:first-child)::before { clip-path: inset(0 0 0 0); transition: clip-path 1000ms var(--ease-out) 300ms; }

  /* ---- Text, cards, images: fade up, staggered ---- */
  .reveal-on .rv {
    opacity: 0;
    translate: 0 18px;
    transition: opacity 700ms ease, translate 800ms var(--ease-out);
    transition-delay: calc(var(--rv-d, 0) * 1ms);
  }
  .reveal-on .rv.is-inview { opacity: 1; translate: 0 0; }

  /* Why IOL copy comes in slower, from further down, more spaced out */
  .reveal-on .who-copy > .rv {
    translate: 0 44px;
    transition-duration: 2200ms, 2500ms;
    transition-delay: calc(var(--rv-d, 0) * 2.6ms);
  }
  .reveal-on .who-copy > .rv.is-inview { translate: 0 0; }

  /* ---- Motifs ---- */
  /* Why IOL leaf panel grows in from its square (top-left) corner */
  .reveal-on .who > .container::before {
    transform-origin: top left;
    transition: opacity 900ms ease, transform 1200ms var(--ease-out);
  }
  .reveal-on .who:not(.is-inview) > .container::before { opacity: 0; transform: scale(0.94); }

  /* Page-hero leaf grows in from its square corner, like Why IOL */
  .reveal-on .page-hero--leaf > .container::before {
    transform-origin: top left;
    transition: opacity 900ms ease, transform 1200ms var(--ease-out);
  }
  .reveal-on .page-hero--leaf:not(.is-inview) > .container::before { opacity: 0; transform: scale(0.94); }

  /* Standalone header photo fades and settles */
  .reveal-on .page-photo__img { transition: opacity 1000ms ease, transform 1400ms var(--ease-out); }
  .reveal-on .page-photo:not(.is-inview) .page-photo__img { opacity: 0; transform: scale(1.04); }
  .page-photo > .container { overflow: hidden; }

  /* Leaf content sections grow in like the banners */
  .reveal-on .section--leaf > .container::before { transform-origin: top left; transition: opacity 900ms ease, transform 1100ms var(--ease-out); }
  .reveal-on .section--leaf:not(.is-inview) > .container::before { opacity: 0; transform: scale(0.96); }

  /* Leaf banners scale in */
  .reveal-on .banner--leaf .banner-panel { transition: opacity 900ms ease, transform 1100ms var(--ease-out); transform-origin: top left; }
  .reveal-on .banner--leaf:not(.is-inview) .banner-panel { opacity: 0; transform: scale(0.96); }

  /* Hatched strips fade in (hatch moved to a pseudo layer so it can fade) */
  .reveal-on .section-spacer,
  .reveal-on .banner--leaf,
  .reveal-on .section--leaf { background: none; }
  .reveal-on .section-spacer::before,
  .reveal-on .banner--leaf::before,
  .reveal-on .section--leaf::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--hatch);
    opacity: 0;
    transition: opacity 600ms ease;
  }
  .reveal-on .section-spacer.is-inview::before,
  .reveal-on .banner--leaf.is-inview::before,
  .reveal-on .section--leaf.is-inview::before { opacity: 1; transition: opacity 1200ms ease 200ms; }
}

/* ==========================================================================
   Photo zoom (v4): every photo block zooms its image inside a fixed frame.
   The element's own background is copied onto a ::before layer
   (background: inherit) which is what scales, so the box never grows.
   · hover: slow 6% zoom-in
   · scroll: photos start zoomed and settle as their section is revealed
   (work cards already zoom via .work-card__media; the hero has its own zoom;
   industry flip cards are deliberately left out: a layer there breaks the 3D flip)
   ========================================================================== */
.who-visual .tile,
.values-visual,
.solution-visual,
.contact-visual,
.page-photo__img { position: relative; overflow: hidden; }
.who-visual .tile::before,
.values-visual::before,
.solution-visual::before,
.contact-visual::before,
.page-photo__img::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: inherit;
  border-radius: inherit;
  transform: scale(1);
  transition: transform 1600ms var(--ease-out);
}

.who-visual .tile:hover::before,
.values-visual:hover::before,
.solution-visual:hover::before,
.contact-visual:hover::before,
.page-photo__img:hover::before { transform: scale(1.06); }

/* Technology card photo strips: the strip is itself a ::before, so zoom its
   background size instead (its width-fit size equals "cover" for these). */
.tech-card::before { background-size: 100% auto; transition: background-size 1600ms var(--ease-out); }
.tech-card:hover::before { background-size: 106% auto; }

@media (prefers-reduced-motion: no-preference) {
  .reveal-on main > section:not(.is-inview) .who-visual .tile::before,
  .reveal-on main > section:not(.is-inview) .values-visual::before,
  .reveal-on main > section:not(.is-inview)   .reveal-on main > section:not(.is-inview) .solution-visual::before,
  .reveal-on main > section:not(.is-inview) .contact-visual::before,
  .reveal-on main > section:not(.is-inview) .page-photo__img::before { transform: scale(1.12); }
  .reveal-on main > section.is-inview .who-visual .tile::before,
  .reveal-on main > section.is-inview .values-visual::before,
  .reveal-on main > section.is-inview   .reveal-on main > section.is-inview .solution-visual::before,
  .reveal-on main > section.is-inview .contact-visual::before,
  .reveal-on main > section.is-inview .page-photo__img::before { transition-duration: 2600ms; }
}
@media (prefers-reduced-motion: reduce) {
  .who-visual .tile::before, .values-visual::before,   .solution-visual::before, .contact-visual::before, .page-photo__img::before { transition: none; transform: none !important; }
  .tech-card::before { transition: none; }
}

/* ==========================================================================
   About header photo with a stats leaf (mirrors hero step 2)
   The light-blue leaf turns 0° → 90° and grows in as the section reveals
   (.is-inview from the scroll-reveal script); guide lines draw out, the
   stats grid lines/marker/cells animate and numbers count up ([data-countup]
   in js/main.js). Reverses on scroll up like the rest of the page.
   ========================================================================== */
.page-photo--stats .page-photo__img { height: clamp(500px, 44vw, 620px); }
.photo-leaf {
  --pl: min(440px, calc(100vw - 72px));
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--pl);
  height: var(--pl);
  margin: calc(var(--pl) / -2) 0 0 calc(var(--pl) / -2);
  z-index: 1;
  color: #fff;
}
/* Leaf sits on the left so it doesn't cover the woman at the whiteboard
   (centre-right of the photo); phones keep it centred. */
@media (min-width: 761px) {
  .photo-leaf { left: clamp(24px, 7%, 96px); margin-left: 0; }
}
.photo-leaf__shape {
  position: absolute;
  inset: 0;
  background: var(--pl-colour, rgba(0, 164, 228, 0.95));
  border-radius: 6px 33% 6px 33%;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: rotate(-90deg) scale(0.8);   /* spins in clockwise and settles at 0°: curved corners top-right + bottom-left, like the homepage leaf */
  transition: transform 1200ms var(--ease-out), opacity 700ms ease;
}
.photo-leaf__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 9% 10% 10%;
  text-shadow: 0 1px 2px rgba(0, 50, 80, 0.2);
}
/* leaf colours (same three as the hero steps); --leaf-accent tints the button text */
.photo-leaf--green { --pl-colour: rgba(141, 198, 63, 0.95); --leaf-accent: #8dc63f; }
.photo-leaf--blue  { --pl-colour: rgba(0, 164, 228, 0.95);  --leaf-accent: #00a4e4; }
.photo-leaf--navy  { --pl-colour: rgba(13, 53, 82, 0.95);   --leaf-accent: #0d3552; }
/* case study pages: the leaf takes the client's main brand colour, set once per page as --client-colour on the page-photo section */
.photo-leaf--client { --pl-colour: var(--client-colour, rgba(0, 164, 228, 0.95)); --leaf-accent: var(--client-colour, #00a4e4); }

/* Text pattern (hero steps 1 & 3): an invisible stats grid sizes the box so it
   is identical to the numbers pattern; the visible content sits on top in a
   3-row grid (headline centred above a middle divider, small text below).
   Type is in container units so the headline is 3 lines and the text 4. */
.photo-leaf--text .leaf__box { display: grid; container-type: inline-size; }
.photo-leaf--text .leaf__sizer,
.photo-leaf--text .leaf__inner { grid-area: 1 / 1; }
.photo-leaf--text .leaf__sizer { visibility: hidden; }
.photo-leaf--text .leaf__sizer .stat-cell { opacity: 0; }
.photo-leaf--text .leaf__inner {
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  min-height: 0;
  padding: 0 var(--space-4);
}
.photo-leaf--text .leaf__inner > h2 {
  grid-row: 1;
  align-self: center;
  margin: 0;
  color: #fff;
  font-size: 6cqi;
  font-weight: var(--weight-bold);
  line-height: 1.2;
  letter-spacing: -0.015em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  min-height: 3.6em;
  opacity: 0;
  transition: opacity 600ms ease;
}
.photo-leaf--text .leaf__divider { grid-row: 2; }
.photo-leaf--text .leaf__small {
  grid-row: 3;
  align-self: center;
  font-size: 3.45cqi !important;
  line-height: 1.45 !important;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
  min-height: 5.8em;
}
.page-photo--stats.is-inview .photo-leaf--text .leaf__inner > h2 { opacity: 1; transition-delay: 1200ms; }
/* Longer live paragraph in the leaf (e.g. Mobile Health Record): room for six lines instead of four */
.photo-leaf--text .leaf__small.leaf__small--long { -webkit-line-clamp: 6; line-clamp: 6; font-size: 3.2cqi !important; }
.page-photo--stats.is-inview .photo-leaf .leaf__divider::before { transform: none; transition-delay: 1350ms; }
.page-photo--stats.is-inview .photo-leaf .leaf__divider::after { transform: scale(1) rotate(45deg); transition-delay: 1800ms; }
.page-photo--stats.is-inview .photo-leaf .leaf__small { opacity: 0.92; transition-delay: 1500ms; }
.page-photo--stats.is-inview .photo-leaf .leaf__more-btn { opacity: 1; transition-delay: 1650ms; }
.photo-leaf .leaf__kicker { top: 0; opacity: 0; transition: opacity 500ms ease; }
.photo-leaf .leaf__box { padding: 0; height: auto; margin-top: var(--space-5); }

/* hidden until revealed */
.page-photo--stats:not(.is-inview) .photo-leaf .leaf-guide { opacity: 0; }
.page-photo--stats:not(.is-inview) .photo-leaf .leaf-guide--top,
.page-photo--stats:not(.is-inview) .photo-leaf .leaf-guide--bottom { transform: scaleX(0); }
.page-photo--stats:not(.is-inview) .photo-leaf .leaf-guide--left,
.page-photo--stats:not(.is-inview) .photo-leaf .leaf-guide--right { transform: scaleY(0); }
.page-photo--stats:not(.is-inview) .photo-leaf .leaf-mark { opacity: 0; transform: scale(0.4); transition-delay: 0s; }

/* revealed */
.page-photo--stats.is-inview .photo-leaf__shape { opacity: 1; transform: rotate(0deg) scale(1); transition-delay: 500ms; }
.page-photo--stats.is-inview .photo-leaf .leaf-guide { transition-delay: 0ms;   /* lines lead: they start drawing 0.5s before the leaf appears */ }
.page-photo--stats.is-inview .photo-leaf .leaf__kicker { opacity: 1; transition-delay: 1100ms; }
.page-photo--stats.is-inview .photo-leaf .leaf__box::before { opacity: 1; transform: none; transition-delay: 1300ms; }
.page-photo--stats.is-inview .photo-leaf .leaf__stats-line { transform: none; transition-delay: 1350ms; }
.page-photo--stats.is-inview .photo-leaf .leaf__stats-mark { transform: scale(1) rotate(45deg); transition-delay: 1800ms; }
.page-photo--stats.is-inview .photo-leaf .stat-cell { opacity: 1; translate: 0 0; }
.page-photo--stats.is-inview .photo-leaf .stat-cell:nth-child(1) { transition-delay: 1300ms; }
.page-photo--stats.is-inview .photo-leaf .stat-cell:nth-child(2) { transition-delay: 1420ms; }
.page-photo--stats.is-inview .photo-leaf .stat-cell:nth-child(3) { transition-delay: 1540ms; }
.page-photo--stats.is-inview .photo-leaf .stat-cell:nth-child(4) { transition-delay: 1660ms; }
.page-photo--stats .page-photo__img:hover::before { transform: none; }   /* no hover zoom under the leaf */

@media (prefers-reduced-motion: reduce) {
  .photo-leaf__shape { transition: opacity 300ms ease; transform: rotate(0deg) scale(1); }
}

/* ---------- Mobile nav overlay (light) ---------- */
.mobile-nav {
  position: fixed;
  inset: 0;
  background: var(--color-bg);
  z-index: var(--z-overlay);
  padding: var(--space-5) var(--container-pad);
  transform: translateX(100%);
  transition: transform var(--transition-slow);
  overflow-y: auto;
}
.mobile-nav.is-open { transform: translateX(0); }
.mobile-nav-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-6); }
.mobile-nav .close-btn { color: var(--color-obsidian); width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius-md); }
.mobile-nav .close-btn:hover { background: rgba(0, 0, 0, 0.045); }
.mobile-nav-list { display: flex; flex-direction: column; }
.mobile-nav-list > li { border-bottom: 1px solid var(--color-border); }
.mobile-nav-list > li > a,
.mobile-nav-row > a {
  display: flex;
  align-items: center;
  padding: var(--space-4) var(--space-1);
  color: var(--color-obsidian);
  font-size: var(--text-subheading);
  font-weight: var(--weight-semibold);
}
.mobile-nav-row { display: flex; align-items: center; }
.mobile-nav-row > a { flex: 1; }
.mobile-nav-row .msub-toggle {
  display: grid; place-items: center;
  width: 44px; height: 44px; flex-shrink: 0;
  color: var(--color-obsidian);
}
.mobile-nav-row .msub-toggle svg { width: 12px; height: 12px; transition: transform var(--transition-fast); }
.mobile-nav-row .msub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.mobile-submenu { display: none; padding-bottom: var(--space-4); }
.mobile-submenu.is-open { display: block; }
.mobile-submenu a { display: block; padding: 8px var(--space-4); color: var(--color-text-muted); font-size: var(--text-body-lg); }
.mobile-submenu a:hover { color: var(--color-obsidian); }
.mobile-submenu-label { display: block; padding: var(--space-3) var(--space-4) 2px; font-size: var(--text-caption); font-weight: var(--weight-medium); color: var(--color-ash); }
.mobile-nav .btn-primary { margin-top: var(--space-6); width: 100%; }

/* ==========================================================================
   LANGUAGE SWITCHER (prototype): globe + code in .header-actions, dropdown
   with English / Ελληνικά. Behaviour in js/i18n.js. Stays visible on phones.
   ========================================================================== */
.lang-switch { position: relative; }
.lang-switch__btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 10px;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--surface-card); color: var(--color-heading);
  font: var(--weight-semibold) var(--text-meta)/1 var(--font-body);
  letter-spacing: 0.04em; cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.lang-switch__btn:hover, .lang-switch.is-open .lang-switch__btn { border-color: var(--color-border-strong); background: var(--surface-panel); }
.lang-switch__btn:focus-visible { outline: 2px solid #00a4e4; outline-offset: 2px; }
.lang-switch__btn svg { flex: none; width: 16px; height: 16px; }
.lang-switch__btn .lang-switch__caret { width: 10px; height: 10px; }
.lang-switch__code { min-width: 2.1em; text-align: left; }
.lang-switch__caret { color: var(--color-text-subtle); transition: transform var(--transition-fast); }
.lang-switch.is-open .lang-switch__caret { transform: rotate(180deg); }
.lang-switch__menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: var(--z-dropdown);
  min-width: 164px; padding: 6px;
  background: var(--surface-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; translate: 0 -4px;
  transition: opacity var(--transition-fast), translate var(--transition-fast), visibility 0s linear 150ms;
}
.lang-switch.is-open .lang-switch__menu { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; }
.lang-switch__menu button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--color-text); text-align: left;
  font: var(--weight-medium) var(--text-body)/1.2 var(--font-body); cursor: pointer;
}
.lang-switch__menu button span {
  display: inline-grid; place-items: center; width: 28px; height: 20px;
  border: 1px solid var(--color-border); border-radius: 4px;
  font-size: 11px; font-weight: var(--weight-semibold); color: var(--color-slate);
}
.lang-switch__menu button:hover, .lang-switch__menu button:focus-visible { background: var(--surface-panel); outline: none; }
.lang-switch__menu button[aria-checked="true"] { color: var(--color-heading); font-weight: var(--weight-semibold); }
.lang-switch__menu button[aria-checked="true"] span { border-color: #8dc63f; background: #8dc63f; color: #fff; }
@media (max-width: 480px) {
  .lang-switch__btn { height: 34px; padding: 0 8px; gap: 4px; }
  .lang-switch__caret { display: none; }
}

/* ---- Guide lines zoom in to the motif ----
   The lines (and corner markers, so they stay on the crossings) draw in
   --g-start outside the leaf's square, then zoom in to meet its edge.
   Keyframes run on `translate`, so they never fight the scale draw-in on
   `transform`. The animation restarts each time the lines redraw (hero step
   change / photo leaf coming back into view). */
.leaf-guide--top    { --gx: 0;  --gy: -1; }
.leaf-guide--bottom { --gx: 0;  --gy: 1; }
.leaf-guide--left   { --gx: -1; --gy: 0; }
.leaf-guide--right  { --gx: 1;  --gy: 0; }
.leaf-mark--tl { --gx: -1; --gy: -1; }
.leaf-mark--tr { --gx: 1;  --gy: -1; }
.leaf-mark--bl { --gx: -1; --gy: 1; }
.leaf-mark--br { --gx: 1;  --gy: 1; }
.leaf-guides { --g-start: 150px; }

/* parked offset while retracted */
.leaf-hero.is-moving :is(.leaf-guide, .leaf-mark),
.page-photo--stats:not(.is-inview) .photo-leaf :is(.leaf-guide, .leaf-mark) {
  translate: calc(var(--gx) * var(--g-start)) calc(var(--gy) * var(--g-start));
}
/* hold at 150px while the line draws (900ms), then zoom in (500ms) */
.leaf-hero:not(.is-moving) :is(.leaf-guide, .leaf-mark) { animation: guide-zoom 1400ms both; }
.page-photo--stats.is-inview .photo-leaf :is(.leaf-guide, .leaf-mark) { animation: guide-zoom 1400ms both; }
@keyframes guide-zoom {
  0%, 64.29% {
    translate: calc(var(--gx) * var(--g-start)) calc(var(--gy) * var(--g-start));
    animation-timing-function: cubic-bezier(0.6, 0, 0.2, 1);
  }
  100% { translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .leaf-guide, .leaf-mark { animation: none !important; translate: none !important; }
}

/* Breadcrumb centred in the hatched strip under the nav (sub pages) */
.section-spacer--crumb > .container { display: flex; align-items: center; justify-content: center; height: 50px; }
.section-spacer--crumb .breadcrumb { margin: 0; }

/* ---- Phones: simpler motif content ----
   Text leaves (hero steps 1 & 3, Technology / Contact photo leaves) keep only
   the headline, larger and centred in the same box; the small text and the
   divider are dropped. Stats leaves get bigger numbers and labels. */
@media (max-width: 760px) {
  .leaf__panel--framed:not(.leaf__panel--stats) .leaf__small,
  .leaf__panel--framed:not(.leaf__panel--stats) .leaf__divider,
  .photo-leaf--text .leaf__inner > .leaf__small,
  .photo-leaf--text .leaf__inner > .leaf__divider,
  .photo-leaf--text .leaf__inner > .leaf__cite { display: none !important; }

  .leaf__panel--framed:not(.leaf__panel--stats) .leaf__box,
  .photo-leaf--text .leaf__inner { grid-template-rows: 1fr; }
  .leaf__panel--framed:not(.leaf__panel--stats) .leaf__box > h1,
  .leaf__panel--framed:not(.leaf__panel--stats) .leaf__box > h2,
  .photo-leaf--text .leaf__inner > h2 {
    grid-row: 1;
    align-self: center;
    font-size: 9.4cqi !important;
    line-height: 1.22;
    -webkit-line-clamp: 6;
    line-clamp: 6;
    min-height: 0;
  }

  .stat-cell { padding: var(--space-2); }
  .leaf__stats .num { font-size: clamp(28px, 9vw, 38px); }
  .leaf__stats .label { font-size: 13px; margin-top: 2px; }

  /* Layout: label and button both sit inside the leaf, the same distance
     (--edge) from its top and bottom edges; the corner box fills the space
     between them. Side inset keeps the box corners clear of the curved
     corners at every rotation. */
  .leaf__panel--framed,
  .photo-leaf { --edge: 32px; --kick-h: 26px; --btn-h: 34px; --gap: 10px; }
  .leaf__panel--framed { padding: 0; }
  .leaf__panel--framed > .leaf__kicker,
  .photo-leaf .leaf__kicker {
    position: absolute;
    top: var(--edge);
    left: 0;
    right: 0;
    width: max-content;
    margin-inline: auto;
  }
  .leaf__panel--framed > .leaf__box,
  .photo-leaf .leaf__box {
    position: absolute;
    top: calc(var(--edge) + var(--kick-h) + var(--gap));
    bottom: calc(var(--edge) + var(--btn-h) + var(--gap));
    left: 8%;
    right: 8%;
    width: auto;
    height: auto !important;
    margin: 0;
  }
  .leaf__more-btn { top: calc(100% + var(--gap)); height: var(--btn-h); padding: 0 14px; display: inline-flex; align-items: center; }
  .photo-leaf .leaf__box { bottom: calc(var(--edge) + var(--kick-h) + var(--gap)); }   /* no button on sub pages: box centred */
  .photo-leaf__content { padding: 0; }
  .leaf__box::before { inset: -1px -11px; }   /* top brackets 10px lower, bottom brackets 10px higher */
  /* stats spread to fill the taller box */
  .leaf__box > .leaf__stats { height: 100%; grid-template-rows: auto auto; align-content: space-evenly; align-items: baseline; }   /* numbers share a baseline per row even when a label wraps */
  /* text leaves: no hidden sizer needed now the box is sized by position */
  .photo-leaf--text .leaf__sizer { display: none; }
  .photo-leaf--text .leaf__inner { height: 100%; }
}

/* Hero stage takes horizontal swipes (js/main.js) while the page still scrolls vertically */
.leaf-hero__stage { touch-action: pan-y; }

/* ---- Contact photo: a second, blue motif beside the green leaf ----
   .photo-leaf--note reuses the photo-leaf reveal (shape fades in, guide lines
   draw and zoom in, label then text) but is a wide brand-leaf rectangle:
   square top-left / bottom-right, curved top-right / bottom-left. */
.page-photo .photo-leaf--note {
  --nw: auto;
  left: calc(clamp(24px, 7%, 96px) + var(--pl));   /* starts exactly at the green leaf's right edge */
  right: clamp(24px, 7%, 96px);
  top: auto;
  bottom: calc(50% - var(--pl) / 2);         /* same baseline as the green leaf */
  width: var(--nw);
  height: auto;
  margin: 0;
  z-index: 1;
}
.page-photo--duo .photo-leaf:not(.photo-leaf--note) { z-index: 2; }   /* green leaf sits over the blue motif's lines */
.photo-leaf--note .photo-leaf__shape {
  border-radius: clamp(48px, 6vw, 88px) 0 clamp(48px, 6vw, 88px) 0;   /* mirrored leaf: curved top-left / bottom-right, opposite the green */
  transform: scale(0.92);                     /* no spin for the rectangle: it settles in */
}
.photo-leaf--note .photo-leaf__content {
  position: relative;
  inset: auto;
  align-items: flex-start;
  padding: clamp(20px, 2vw, 28px) clamp(28px, 3.2vw, 44px);   /* shallower */
}
.photo-leaf--note .leaf__kicker { align-self: flex-start; }
.photo-leaf--note .photo-leaf__note-text {
  margin: 0;
  color: #fff;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.55;
  opacity: 0;
  transition: opacity 600ms ease;
}
/* Note's top line: runs only from the note's left edge (where it meets the
   green leaf) to the photo's right edge, and draws in from the right */
/* Desktop (side by side): only the top + right lines and the top-right
   marker, sliding in from outside the photo. */
@media (min-width: 1001px) {
  .photo-leaf--note :is(.leaf-guide--bottom, .leaf-guide--left, .leaf-mark--tl, .leaf-mark--bl, .leaf-mark--br) { display: none; }
  .photo-leaf--note .leaf-guide--top { left: 0; right: -120px; transform-origin: right center; }   /* -120px clears the max 96px inset; the photo clips the rest */
  /* ...and both note lines slide in from outside the photo together (top line
     from the right, right line from above) instead of drawing on it; the
     marker pops in as they land. Timing: lines + shape 1.2s, text 1.5s, marker 2s. */
  .page-photo--duo.page-photo--stats .photo-leaf--note :is(.leaf-guide, .leaf-mark) { animation: none; translate: none; }
  .page-photo--duo.page-photo--stats .photo-leaf--note .leaf-guide { opacity: 1; }
  .photo-leaf--note .leaf-guide--right { top: -700px; bottom: -400px; }   /* reaches past the photo's top/bottom; the photo clips it */
  .page-photo--duo.page-photo--stats:not(.is-inview) .photo-leaf--note .leaf-guide--top { transform: translateX(105%); transition: transform 0s; }
  .page-photo--duo.page-photo--stats:not(.is-inview) .photo-leaf--note .leaf-guide--right { transform: translateY(-105%); transition: transform 0s; }
  .page-photo--duo.page-photo--stats.is-inview .photo-leaf--note .leaf-guide { transform: none; transition: transform 1000ms cubic-bezier(0.16, 1, 0.3, 1) 1200ms; }
  .page-photo--duo.page-photo--stats.is-inview .photo-leaf--note .leaf-guide--top { transition-duration: 600ms; }   /* horizontal slides in faster */
  .page-photo--duo.page-photo--stats.is-inview .photo-leaf--note .leaf-mark { transition-delay: 2000ms; }
}
/* Stacked (≤1000px, blue under green): the full set of 4 lines + 4 markers,
   drawing and zooming in like the green leaf's, just after it. */
@media (max-width: 1000px) {
  .page-photo--stats.is-inview .photo-leaf--note .leaf-guide { transition-delay: 500ms; }
  .page-photo--stats.is-inview .photo-leaf--note :is(.leaf-guide, .leaf-mark) { animation-delay: 500ms; }
  .page-photo--stats.is-inview .photo-leaf--note .leaf-mark { transition-delay: 1000ms; }
  /* the two lines between the motifs (green bottom, note top) keep the normal
     zoom-in movement but stay invisible until 0.2s before they land:
     green zoom ends 1.4s -> fade 1.2s; note zoom ends 1.9s -> fade 1.7s */
  .page-photo--duo.page-photo--stats.is-inview .photo-leaf--green .leaf-guide--bottom { transition: transform 900ms var(--leaf-ease, ease) 0ms, opacity 200ms ease 1200ms; }
  .page-photo--duo.page-photo--stats.is-inview .photo-leaf--note .leaf-guide--top { transition: transform 900ms var(--leaf-ease, ease) 500ms, opacity 200ms ease 1700ms; }
}
.page-photo--stats.is-inview .photo-leaf--note .photo-leaf__shape { transition-delay: 1200ms; }   /* fades in with its lines */
.page-photo--stats.is-inview .photo-leaf--note .photo-leaf__note-text { opacity: 1; transition: opacity 400ms ease 1500ms; }

/* Narrower screens: the photo grows and the two motifs stack over it */
@media (max-width: 1000px) {
  .page-photo--duo > .container { display: flex; flex-direction: column; align-items: center; gap: 24px; padding-block: 40px; }
  .page-photo--duo .page-photo__img { position: absolute; inset: 0; height: auto; }
  .page-photo--duo .photo-leaf,
  .page-photo .page-photo--duo .photo-leaf--note,
  .page-photo--duo .photo-leaf.photo-leaf--note {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    margin: 0;
    translate: none;
  }
  .page-photo--duo .photo-leaf--note { width: var(--pl); }
  .page-photo--duo .photo-leaf--note .leaf__kicker { position: static; margin: 0; }
}

/* Headline-only text leaf (Contact): the heading alone, larger, centred in the box */
.photo-leaf--headline .leaf__inner { grid-template-rows: 1fr; }
.photo-leaf--headline .leaf__inner > h2 {
  grid-row: 1;
  font-size: 8.4cqi;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  min-height: 0;
}


/* Corner diamonds sit above the coloured motif shapes (hero leaf, photo leaves, Contact note) */
.leaf-mark { z-index: 3; }

/* Hero step 1 heading: small uppercase "Meet International Online" line above the main heading */
.leaf__h1-eyebrow {
  display: block;
  margin-bottom: 0.35em;
  font-size: 0.5em;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-transform: uppercase;
  opacity: 0.9;
}


/* ---------- Company name: "iol" ----------
   Every mention of the company in body copy is written as lowercase "iol" in a
   heavier weight, like the logo. It ignores uppercase labels (e.g. the "Why iol"
   eyebrow) and their letter-spacing. In Greek the name takes the article "Η"
   when it starts a sentence, so the switcher's text nodes don't need it. */
.iol-word {
  font-weight: 800;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
}
html[lang="el"] .iol-word--subject::before { content: "Η "; font-weight: 400; }
/* Eyebrow labels are inline-flex with an 8px gap, which would sit between "Why" and
   "iol" instead of a normal word space; pull the name back to a regular space width. */
.eyebrow > .iol-word { margin-left: calc(0.25em - 8px); }


/* ---------- Leaf cards (DaybookPro › Advantages, 2026-10-15) ----------
   Cards shaped like the brand leaf (square top-left / bottom-right, swept
   top-right / bottom-left) in the same soft tints as the large leaf panels
   (green #eef6e2, light blue #dff3fb), alternating in a checkerboard. Normal
   dark text; the icon chip carries the full brand colour as the accent. */
.leaf-cards { --leaf-r: clamp(36px, 4.5vw, 56px); gap: var(--space-5); }
.leaf-cards .card {
  border-radius: 0 var(--leaf-r) 0 var(--leaf-r);
  padding: var(--space-8) var(--space-6);
  box-shadow: none;
  background: #eef6e2;
}
.leaf-cards .card:nth-child(even) { background: #dff3fb; }
.leaf-cards .card .icon {
  background: #8dc63f;
  color: #fff;
  border-radius: 0 12px 0 12px;              /* a tiny leaf for the icon too */
}
.leaf-cards .card:nth-child(even) .icon { background: #00a4e4; }
.leaf-cards .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }


/* ---- DaybookPro case study header: outline-only note with the DaybookPro logo ----
   Same position and guide lines as the Contact note (.photo-leaf--note), but the
   mirrored leaf is just a white outline that draws in left to right, and the
   white DaybookPro logo then eases into its middle-right. */
.page-photo .photo-leaf.photo-leaf--outline .photo-leaf__shape {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.6);   /* same weight and tone as the animated guide lines */
  transform: none;
  clip-path: inset(0 100% 0 0);
  transition: opacity 300ms ease, clip-path 1000ms cubic-bezier(0.16, 1, 0.3, 1);
}
.page-photo--stats.is-inview .photo-leaf--outline .photo-leaf__shape { clip-path: inset(0 0 0 0); transition-delay: 1200ms; }
.photo-leaf--outline .photo-leaf__content {
  min-height: clamp(96px, 8.5vw, 132px);
  justify-content: center;
  align-items: flex-end;
}
.photo-leaf__logo {
  display: block;
  width: auto;
  height: clamp(26px, 2.4vw, 38px);
  opacity: 0;
  translate: 24px 0;
  transition: opacity 600ms ease, translate 900ms cubic-bezier(0.16, 1, 0.3, 1);
}
.page-photo--stats.is-inview .photo-leaf--outline .photo-leaf__logo { opacity: 1; translate: 0 0; transition-delay: 1900ms; }
@media (prefers-reduced-motion: reduce) {
  .page-photo .photo-leaf.photo-leaf--outline .photo-leaf__shape { clip-path: none; }
  .photo-leaf__logo { translate: none; }
}

/* ---------- Case study pages (nhs-scotland, wales-traklab, esa, mobile-health-record) ---------- */
/* Leaf quote attribution under the small text */
.leaf__cite { display:block; margin-top:6px; font-size:11px; line-height:1.4; font-weight:600; color:#fff; opacity:0; transition: opacity 500ms ease; }
.page-photo--stats.is-inview .leaf__cite { opacity:0.9; transition-delay:1700ms; }
/* Outline motif: client name in white until the client's logo is supplied */
.photo-leaf__logo--text { height:auto; color:#fff; font-weight:700; font-size:clamp(18px, 1.7vw, 26px); line-height:1.15; letter-spacing:-0.01em; text-align:right; }
/* Key figures: plain cards with a large number */
.card--figure h3 { font-size: var(--text-heading); font-weight: var(--weight-bold); color: var(--color-action); letter-spacing:-0.02em; line-height:1.1; }
.card--figure p { margin-top: var(--space-2); }
/* Centred tag row */
.tech-tags--center { justify-content:center; gap: var(--space-3); }
.tech-tags--center .tag { font-size: var(--text-body); padding: 8px 16px; }
/* Client quote inside a leaf section */
.case-quote { max-width: 880px; margin: 0 auto; text-align:center; }
.case-quote p { font-size: var(--text-heading-sm); font-weight: var(--weight-medium); color: var(--color-obsidian); line-height: 1.45; }
.case-quote cite { display:block; margin-top: var(--space-5); font-style:normal; font-weight: var(--weight-bold); color: var(--color-graphite); }
/* Closing paragraph under a card grid (e.g. the live "In summary..." line on NHS Scotland) */
.section-after { max-width: 760px; margin: var(--space-10) auto 0; text-align: center; color: var(--color-text-muted); font-size: var(--text-body-lg); }
/* Leaf cards that carry only the live text (no title) */
.leaf-cards .card > .icon + p { margin-top: var(--space-4); }

/* ---------- Topic pills (owner, 2026-10-15) ----------
   Labels that describe the paragraph below ("Industry · Healthcare", case study tags,
   homepage work-card kickers, client pop-up labels) sit in a coloured pill.
   Pale logo-blue / logo-green tints, with darker text so they stay readable. */
.solution-block__tag,
.work-card__kicker,
.client-pop__meta {
  --pill-bg: #cfeefb;
  --pill-fg: #005f86;
  --pill-dot: #00a4e4;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  width: fit-content;
  padding: 6px 15px 6px 12px;
  border: 0;
  border-radius: 999px;
  background: var(--pill-bg);
  color: var(--pill-fg);
  font-size: 14px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.3;
}
.solution-block__tag::before,
.work-card__kicker::before,
.client-pop__meta::before {
  content: "";
  width: 7px; height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--pill-dot);
}
/* alternate with the sections: reversed blocks and every second card go green */
.solution-block.is-reverse .solution-block__tag,
.work-card:nth-child(even) .work-card__kicker {
  --pill-bg: #e2f2cf;
  --pill-fg: #416c0f;
  --pill-dot: #8dc63f;
}
.client-pop__meta { margin: 0 0 var(--space-2); font-size: 12px; padding: 4px 12px 4px 10px; }
.work-card__kicker { margin-bottom: 0; }
/* breathing room between a pill and the title (or text) under it */
.solution-block__tag + h3,
.solution-block__tag + p { margin-top: var(--space-4); }
.work-card__kicker + .work-card__title { margin-top: 14px; }
.client-pop__meta + .client-pop__title { margin-top: 10px; }

/* ---------- Objective + Advantages split (mobile-health-record.html) ----------
   Left: the live Objective text. Right: the Advantages as a list of long, thin
   brand leaves (square top-left / bottom-right, curved top-right / bottom-left),
   icon chip beside the text, cycling logo green / logo blue / navy. */
.objective-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.objective-split__copy h2 { font-size: var(--text-heading); font-weight: var(--weight-bold); line-height: var(--leading-heading); }
.objective-split__copy p { margin-top: var(--space-4); color: var(--color-text-muted); font-size: var(--text-body-lg); }
.objective-split__heading { font-size: var(--text-heading); font-weight: var(--weight-bold); line-height: var(--leading-heading); margin-bottom: var(--space-5); }
.leaf-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.leaf-list li {
  --ll-bg: #eef6e2; --ll-accent: #8dc63f;
  display: flex; align-items: center; gap: 16px;
  padding: 12px 24px 12px 12px;
  border-radius: 0 28px 0 28px;
  background: var(--ll-bg);
}
.leaf-list li:nth-child(3n+2) { --ll-bg: #dff3fb; --ll-accent: #00a4e4; }
.leaf-list li:nth-child(3n)   { --ll-bg: #e4eaf0; --ll-accent: #0d3552; }
.leaf-list__icon {
  flex: none; display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 0 12px 0 12px;
  background: var(--ll-accent); color: #fff;
}
.leaf-list__icon svg { width: 20px; height: 20px; }
.leaf-list__text { font-size: var(--text-body); font-weight: var(--weight-semibold); color: var(--color-obsidian); line-height: 1.4; }
@media (max-width: 860px) { .objective-split { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: no-preference) {
  .reveal-on .leaf-list li { transition: opacity 500ms ease, translate 700ms cubic-bezier(0.16, 1, 0.3, 1); }
  .reveal-on section:not(.is-inview) .leaf-list li { opacity: 0; translate: 24px 0; }
  .leaf-list li:nth-child(2) { transition-delay: 80ms; }
  .leaf-list li:nth-child(3) { transition-delay: 160ms; }
  .leaf-list li:nth-child(4) { transition-delay: 240ms; }
  .leaf-list li:nth-child(5) { transition-delay: 320ms; }
  .leaf-list li:nth-child(6) { transition-delay: 400ms; }
}

/* ---------- App download block (mobile-health-record.html) ---------- */
.download-block { text-align: center; max-width: 760px; margin: 0 auto; }
.download-block h2 { font-size: var(--text-heading-sm); font-weight: var(--weight-bold); line-height: var(--leading-heading); }
.store-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); margin-top: var(--space-8); }
.store-badge {
  display: inline-flex; flex-direction: column; justify-content: center; align-items: flex-start;
  min-width: 170px; height: 54px; padding: 0 22px;
  border-radius: 12px; background: #000; color: #fff; text-decoration: none;
  line-height: 1.1; transition: transform 200ms ease, box-shadow 200ms ease;
}
.store-badge:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.store-badge__small { font-size: 11px; letter-spacing: 0.02em; opacity: 0.85; }
.store-badge__big { font-size: 20px; font-weight: var(--weight-semibold); letter-spacing: -0.01em; }

/* Hero leaf box with several paragraphs (e.g. Mobile Health Record): wider text column */
.page-hero.page-hero--wide p { max-width: 1040px; }
/* split variants (2026-10-15): list on the left, copy without a heading, rows with a title + text, plain long rows */
.objective-split--reverse .objective-split__copy { order: 2; }
.objective-split--reverse .objective-split__list { order: 1; }
.objective-split__copy > :first-child { margin-top: 0; }
.objective-split__copy > h2 + p { margin-top: var(--space-5); }
.leaf-list__text--detail { font-weight: var(--weight-regular, 400); color: var(--color-text-muted); }
.leaf-list__text--detail strong { display: block; margin-bottom: 2px; font-weight: var(--weight-bold); color: var(--color-obsidian); }
.leaf-list__text--plain { font-weight: var(--weight-medium); }
.leaf-list li:has(.leaf-list__text--plain), .leaf-list li:has(.leaf-list__text--detail) { align-items: flex-start; padding-top: 14px; padding-bottom: 14px; }
.objective-split + .section-after, .section-after { margin-top: var(--space-10); }
@media (max-width: 860px) { .objective-split--reverse .objective-split__copy, .objective-split--reverse .objective-split__list { order: 0; } }
.objective-split__copy > .solution-block__tag + p { margin-top: var(--space-4); }

/* Leaf list as a grid of three (web.html What We Offer). Colours shift by one each row,
   so no column is a single colour; 2 columns on tablets, 1 on phones. */
.leaf-list.leaf-list--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.leaf-list--grid li,
.leaf-list--grid li:has(.leaf-list__text--plain) { align-items: center; padding-top: 12px; padding-bottom: 12px; }
.leaf-list--grid li:nth-child(n)      { --ll-bg: #eef6e2; --ll-accent: #8dc63f; }
.leaf-list--grid li:nth-child(2), .leaf-list--grid li:nth-child(4), .leaf-list--grid li:nth-child(9) { --ll-bg: #dff3fb; --ll-accent: #00a4e4; }
.leaf-list--grid li:nth-child(3), .leaf-list--grid li:nth-child(5), .leaf-list--grid li:nth-child(7) { --ll-bg: #e4eaf0; --ll-accent: #0d3552; }
@media (prefers-reduced-motion: no-preference) {
  .leaf-list li:nth-child(7) { transition-delay: 480ms; }
  .leaf-list li:nth-child(8) { transition-delay: 560ms; }
  .leaf-list li:nth-child(9) { transition-delay: 640ms; }
}
@media (max-width: 960px) { .leaf-list.leaf-list--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .leaf-list.leaf-list--grid { grid-template-columns: 1fr; } }
/* Line after the What We Offer grid (web.html): stronger, centred */
.leaf-list-more { margin: var(--space-8) 0 0; text-align: center; font-size: var(--text-subheading); font-weight: var(--weight-bold); color: var(--color-obsidian); }

/* Solutions: "More details" (to the section's own page) with "Talk to us" beside it */
.btn-pair { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-6); }
.btn-pair .btn { margin: 0; }

/* Service pages: a centred lead line above a card grid, and cards holding several points */
.section-head__lead { margin: 0; font-size: var(--text-subheading); font-weight: var(--weight-bold); color: var(--color-obsidian); }
.card--group h3 { margin-bottom: var(--space-3); }
.card--group p + p { margin-top: var(--space-3); }
.card--group p strong { color: var(--color-obsidian); font-weight: var(--weight-bold); }
/* Two-card work grid (healthcare.html HealthCare Solutions) */
.work-grid.work-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; margin-inline: auto; }
@media (max-width: 640px) { .work-grid.work-grid--2 { grid-template-columns: 1fr; } }

/* ---------- Leaf tabs (integration.html Ensemble tabs, 2026-10-16) ----------
   Brand-leaf tab buttons (square top-left / bottom-right, curved top-right / bottom-left),
   alternating logo green / logo blue. The open tab fills with its colour; its panel below
   takes the matching pale tint. Behaviour: js/main.js [data-leaf-tabs]. */
.leaf-tabs { --lt-r: 26px; }
.leaf-tabs__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.leaf-tabs__tab {
  --lt-pale: #eef6e2; --lt-solid: #8dc63f; --lt-ink: #416c0f;
  display: flex; align-items: center; min-height: 64px;
  padding: 14px 20px; border: 0; border-radius: 0 var(--lt-r) 0 var(--lt-r);
  background: var(--lt-pale); color: var(--lt-ink);
  font: inherit; font-size: var(--text-body); font-weight: var(--weight-semibold); line-height: 1.3; text-align: left;
  cursor: pointer; transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.leaf-tabs__tab:nth-child(even) { --lt-pale: #dff3fb; --lt-solid: #00a4e4; --lt-ink: #005f86; }
.leaf-tabs__tab:hover { transform: translateY(-2px); }
.leaf-tabs__tab[aria-selected="true"] { background: var(--lt-solid); color: #fff; }
.leaf-tabs__tab:focus-visible { outline: 2px solid var(--lt-solid); outline-offset: 3px; }
.leaf-tabs__panel {
  margin-top: var(--space-4);
  padding: clamp(24px, 4vw, 48px) clamp(20px, 4.5vw, 56px);
  border-radius: 0 clamp(36px, 5vw, 64px) 0 clamp(36px, 5vw, 64px);
  background: var(--lt-panel, #eef6e2);
}
.leaf-tabs[data-active-colour="blue"] .leaf-tabs__panel { --lt-panel: #dff3fb; }
.leaf-tabs__panel:focus-visible { outline: 2px solid #00a4e4; outline-offset: 3px; }
.leaf-tabs__panel > * + * { margin-top: var(--space-4); }
.leaf-tabs__panel p { color: var(--color-graphite); }
.leaf-tabs__panel h3 { font-size: var(--text-heading-sm); font-weight: var(--weight-bold); color: var(--color-obsidian); line-height: var(--leading-heading); }
.leaf-tabs__panel h4 { margin-top: var(--space-8); font-size: var(--text-subheading); font-weight: var(--weight-bold); color: var(--color-obsidian); }
.leaf-tabs__sub { font-weight: var(--weight-semibold); color: var(--color-obsidian) !important; }
.leaf-tabs__bullets { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; color: var(--color-graphite); }
.leaf-tabs__bullets li::marker { color: #00a4e4; }
.leaf-tabs__quote { margin: var(--space-6) 0; padding: var(--space-5) var(--space-6); border-radius: 0 28px 0 28px; background: #fff; }
.leaf-tabs__quote p { font-size: var(--text-subheading); font-weight: var(--weight-medium); color: var(--color-obsidian) !important; line-height: 1.5; }
.leaf-tabs__quote cite { display: block; margin-top: var(--space-3); font-style: normal; font-weight: var(--weight-bold); color: var(--color-graphite); }
.leaf-tabs__caps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.leaf-tabs__cap { padding: var(--space-5); border-radius: 0 24px 0 24px; background: #fff; }
.leaf-tabs__cap h5 { margin: 0 0 var(--space-3); font-size: var(--text-body-lg); font-weight: var(--weight-bold); color: var(--color-obsidian); }
@media (max-width: 960px) { .leaf-tabs__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .leaf-tabs__caps { grid-template-columns: 1fr; }
}
/* Phones / small tablets: accordion in the original order. Each tab's text opens
   directly under that tab, and opening another closes the previous one (owner
   request 2026-10-16). The tab list is flattened (display: contents) so tabs and
   panels can be interleaved with CSS order; roles and keyboard behaviour are unchanged.
   Panels are children 2-6 of .leaf-tabs (child 1 is the tab list). */
@media (max-width: 760px) {
  .leaf-tabs { display: flex; flex-direction: column; gap: var(--space-3); }
  .leaf-tabs__list { display: contents; }
  .leaf-tabs__tab:nth-child(1) { order: 10; }  .leaf-tabs > .leaf-tabs__panel:nth-child(2) { order: 11; }
  .leaf-tabs__tab:nth-child(2) { order: 20; }  .leaf-tabs > .leaf-tabs__panel:nth-child(3) { order: 21; }
  .leaf-tabs__tab:nth-child(3) { order: 30; }  .leaf-tabs > .leaf-tabs__panel:nth-child(4) { order: 31; }
  .leaf-tabs__tab:nth-child(4) { order: 40; }  .leaf-tabs > .leaf-tabs__panel:nth-child(5) { order: 41; }
  .leaf-tabs__tab:nth-child(5) { order: 50; }  .leaf-tabs > .leaf-tabs__panel:nth-child(6) { order: 51; }
  .leaf-tabs__panel { margin-top: 0; }
}


/* Long button labels (e.g. Greek "Read the full case study") may wrap inside text blocks on small phones */
.solution-block__copy .btn, .btn-pair .btn { max-width: 100%; white-space: normal; }
.tech-tags .tag { max-width: 100%; white-space: normal; }
@media (max-width: 480px) { .btn { max-width: 100%; white-space: normal; } }   /* no button may push a small phone wider */

/* ---------- Circuit columns (cloud.html models, 2026-10-16) ----------
   Two columns, each headed by a leaf pill. A circuit line drops from the pill and branches to each
   leaf card; every branch meets the trunk at a hollow ring, and the trunk ends in one, like the
   circuit lines in the iol logo. Green column / blue column. Lines draw in and cards slide in on reveal. */
.circuit-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 64px); align-items: start; }
.circuit-col { --cc: #8dc63f; --cc-pale: #eef6e2; --cc-ink: #416c0f; }
.circuit-col--blue { --cc: #00a4e4; --cc-pale: #dff3fb; --cc-ink: #005f86; }
.circuit-col__head {
  display: inline-flex; align-items: center; gap: 12px; margin: 0;
  padding: 12px 22px 12px 12px; border-radius: 0 26px 0 26px;
  background: var(--cc); color: #fff;
  font-size: var(--text-subheading); font-weight: var(--weight-bold); line-height: 1.25;
}
.circuit-col__icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 0 12px 0 12px; background: rgba(255, 255, 255, 0.22); }
.circuit-list { position: relative; list-style: none; margin: 0; padding: 28px 0 0 52px; display: grid; gap: 22px; }
/* trunk: from under the pill's icon down to the last branch */
.circuit-list::before {
  content: ""; position: absolute; left: 29px; top: 0; bottom: 30px; width: 2px;
  background: var(--cc); transform-origin: top; transition: transform 1000ms var(--ease-out);
}
/* end ring at the bottom of the trunk */
.circuit-list::after {
  content: ""; position: absolute; left: 24px; bottom: 18px; width: 12px; height: 12px;
  border: 2px solid var(--cc); border-radius: 50%; background: var(--color-bg);
  transition: opacity 300ms ease 900ms;
}
.circuit-card {
  position: relative; padding: 20px 24px 22px;
  border-radius: 0 30px 0 30px; background: var(--cc-pale);
  transition: opacity 500ms ease, translate 700ms var(--ease-out);
}
/* branch from the trunk to the card, with a ring where it leaves the trunk */
.circuit-card::before { content: ""; position: absolute; left: -23px; top: 34px; width: 23px; height: 2px; background: var(--cc); }
.circuit-card::after {
  content: ""; position: absolute; left: -29px; top: 29px; width: 12px; height: 12px;
  border: 2px solid var(--cc); border-radius: 50%; background: var(--color-bg);
}
.circuit-card__head { display: flex; align-items: center; gap: 12px; }
.circuit-card__icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 0 12px 0 12px; background: var(--cc); color: #fff; }
.circuit-card__icon svg { width: 18px; height: 18px; }
.circuit-card h3 { margin: 0; font-size: var(--text-body-lg); font-weight: var(--weight-bold); color: var(--color-obsidian); line-height: 1.3; }
.circuit-card p { margin: var(--space-3) 0 0; color: var(--color-graphite); font-size: var(--text-body); line-height: 1.55; }
@media (prefers-reduced-motion: no-preference) {
  .reveal-on section:not(.is-inview) .circuit-list::before { transform: scaleY(0); }
  .reveal-on section:not(.is-inview) .circuit-list::after { opacity: 0; transition-delay: 0s; }
  .reveal-on section:not(.is-inview) .circuit-card { opacity: 0; translate: 24px 0; }
  .circuit-card:nth-child(1) { transition-delay: 200ms; }
  .circuit-card:nth-child(2) { transition-delay: 400ms; }
  .circuit-card:nth-child(3) { transition-delay: 600ms; }
  .circuit-col--blue .circuit-card:nth-child(1) { transition-delay: 350ms; }
  .circuit-col--blue .circuit-card:nth-child(2) { transition-delay: 550ms; }
  .circuit-col--blue .circuit-card:nth-child(3) { transition-delay: 750ms; }
}
@media (max-width: 860px) { .circuit-cols { grid-template-columns: 1fr; } }
@media (max-width: 480px) {
  .circuit-col__head { font-size: var(--text-body-lg); }
  .circuit-list { padding-left: 40px; }
  .circuit-list::before { left: 23px; }
  .circuit-list::after { left: 18px; }
  .circuit-card { padding: 18px 18px 20px; }
  .circuit-card::before { left: -17px; width: 17px; }
  .circuit-card::after { left: -23px; }
}

/* ---------- About page: more of the green / blue motif (2026-10-16) ----------
   Leaf notes replace the plain grey lines under the Philosophy, Team and Quality grids. */
.leaf-note {
  max-width: 760px; margin: var(--space-10) auto 0; padding: 16px 28px;
  border-radius: 0 26px 0 26px; text-align: center;
  font-weight: var(--weight-medium); line-height: 1.55;
}
.leaf-note--green { background: #eef6e2; color: #416c0f; }
.leaf-note--blue  { background: #dff3fb; color: #005f86; }
/* Team rows: title + text, three across, aligned to the top */
.leaf-list--team li { align-items: flex-start; padding-top: 16px; padding-bottom: 16px; }


/* ---------- About · Company: story leaf (live our-company copy, 2026-10-16) ---------- */
.story-leaf {
  position: relative; padding: 32px 32px 32px; border-radius: 0 40px 0 40px;
  background: #eef6e2; border-left: 4px solid #8dc63f;
}
.story-leaf__icon {
  display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 16px;
  border-radius: 0 12px 0 12px; background: #8dc63f; color: #fff;
}
.story-leaf p { color: var(--color-obsidian); font-size: var(--text-body-lg); line-height: 1.6; }
.leaf-note--wide { max-width: 820px; padding: 22px 32px; }
@media (max-width: 480px) { .story-leaf { padding: 24px 20px; } .leaf-note { padding: 16px 20px; } }

/* Company paragraphs under the heading: one centred column (owner request) */
.copy-cols { display: grid; gap: var(--space-4); max-width: 820px; margin-inline: auto; text-align: center; }
.copy-cols p { color: var(--color-text-muted); font-size: var(--text-body-lg); }

/* ---------- Skill band: full-bleed leaf bars (About · Company, 2026-10-16)
   Left pair is anchored to the left screen edge, right pair to the right edge.
   Outside the page width the bar is crosshatch only; the solid fill starts at
   the page edge (.skill-band__track) with a straight edge on the rail, and slides
   in 200px from the edge while fading in, once the hatched bar has slid in.
   The value counts up via [data-countup] (delay set by data-countup-delay). */
.skill-band-section { overflow: hidden; container-type: inline-size; }
.skill-band {
  --sb-r: 40px;
  /* the page edge = the rail line (container border), measured against the section width */
  --sb-edge: calc(max(var(--rail-gutter), (100cqw - var(--rail-max)) / 2) + var(--sb-r));
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
}
.skill-band__col { display: grid; gap: 18px; }
.skill-band__bar {
  --sb: #8dc63f; --sb-pale: #eef6e2;
  position: relative; height: 80px;
  background: var(--sb-pale) var(--hatch-green);
  transition: translate 0.9s cubic-bezier(.2,.75,.2,1);
}
.skill-band__bar--blue { --sb: #00a4e4; --sb-pale: #dff3fb; background: var(--sb-pale) var(--hatch-blue); }
/* leaf shape 0 R 0 R, bleeding past the screen edge so only the inner end shows the curve */
.skill-band__col--left  .skill-band__bar { margin-left: calc(var(--sb-r) * -1); padding-left: var(--sb-edge); border-radius: 0 var(--sb-r) 0 var(--sb-r); }
.skill-band__col--right .skill-band__bar { margin-right: calc(var(--sb-r) * -1); padding-right: var(--sb-edge); border-radius: var(--sb-r) 0 var(--sb-r) 0; }
.skill-band__track { position: relative; display: block; height: 100%; }
.skill-band__fill {
  position: absolute; top: 0; bottom: 0; width: var(--pct);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 28px; overflow: hidden; white-space: nowrap; background: var(--sb); color: #fff;
  /* colour block: slides the last 200px in from its own screen edge while fading 0 → 50% → 100% */
  transition: translate 1.2s cubic-bezier(.2,.75,.2,1) .6s, opacity 1.2s linear .6s;
}
.skill-band__col--left  .skill-band__fill { left: 0;  border-radius: 0 var(--sb-r) 0 0; }
.skill-band__col--right .skill-band__fill { right: 0; border-radius: var(--sb-r) 0 0 0; flex-direction: row-reverse; }
.skill-band__label { font-size: var(--text-heading-sm); font-weight: var(--weight-bold); }
.skill-band__value { font-size: var(--text-heading-sm); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; opacity: .95; }
.skill-band__bar:nth-child(2) { transition-delay: .15s; }
.skill-band__bar:nth-child(2) .skill-band__fill { transition-delay: .8s; }
@media (prefers-reduced-motion: no-preference) {
  .reveal-on .skill-band-section:not(.is-inview) .skill-band__col--left  .skill-band__bar { translate: -100% 0; }
  .reveal-on .skill-band-section:not(.is-inview) .skill-band__col--right .skill-band__bar { translate: 100% 0; }
  .reveal-on .skill-band-section:not(.is-inview) .skill-band__fill { opacity: 0; transition-delay: 0s; }
  .reveal-on .skill-band-section:not(.is-inview) .skill-band__col--left  .skill-band__fill { translate: -200px 0; }
  .reveal-on .skill-band-section:not(.is-inview) .skill-band__col--right .skill-band__fill { translate: 200px 0; }
}
@media (max-width: 860px) {
  .skill-band { grid-template-columns: 1fr; gap: 18px; }
  .skill-band__bar { height: 64px; }
  .skill-band__label, .skill-band__value { font-size: var(--text-body-lg); }
  .skill-band__fill { padding: 0 18px; }
  /* Phones: one column, so every bar comes in from the LEFT and the colours run
     green, blue, green, blue top to bottom (the right-hand pair is mirrored to match). */
  .skill-band__col--right .skill-band__bar { padding-right: 0; margin-left: calc(var(--sb-r) * -1); padding-left: var(--sb-edge); border-radius: 0 var(--sb-r) 0 var(--sb-r); }
  /* bars run edge to edge with crosshatch outside BOTH rails; the colour track sits rail to rail */
  .skill-band__bar, .skill-band__col--right .skill-band__bar { margin-right: calc(var(--sb-r) * -1); padding-right: var(--sb-edge); border-radius: 0; }
  .skill-band__col--right .skill-band__fill { right: auto; left: 0; border-radius: 0 var(--sb-r) 0 0; flex-direction: row; }
  .skill-band__col--right .skill-band__bar:nth-child(1) { --sb: #8dc63f; --sb-pale: #eef6e2; background: var(--sb-pale) var(--hatch-green); }
  .skill-band__col--right .skill-band__bar:nth-child(2) { --sb: #00a4e4; --sb-pale: #dff3fb; background: var(--sb-pale) var(--hatch-blue); }
}
/* Company story: the award leaf sits wider than the 820px text column, with equal padding all round (keeps the green left border) */
.story-leaf--wide { max-width: 1040px; margin: 0 auto var(--space-10); padding: clamp(24px, 4vw, 48px); }
/* About · Philosophy: the two live statements as a green / blue leaf pair */
.philosophy-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 1040px; margin: var(--space-10) auto 0; }
.story-leaf--blue { background: #dff3fb; border-left-color: #00a4e4; }
.story-leaf--blue .story-leaf__icon { background: #00a4e4; }
@media (max-width: 760px) { .philosophy-pair { grid-template-columns: 1fr; } }
.copy-cols + .leaf-list { margin-top: var(--space-10); }
/* About intro: homepage-style section head (eyebrow, title, lead) + pills; the title is the page H1 */
.section-head h1 { font-size: var(--text-heading-lg); font-weight: var(--weight-bold); line-height: var(--leading-heading); margin-top: var(--space-4); }
#page-hero-about .section-head { max-width: 880px; }
/* "true to its name" block: same as the green award leaf, in blue with a darker blue left line */
.story-leaf--wide.story-leaf--blue { border-left-color: #005f86; }
.story-leaf--wide.story-leaf--end { margin: var(--space-10) auto 0; }
/* Section head spanning the full container width (Healthcare · Overall Benefits, owner request 2026-10-16) */
.section-head.section-head--full { max-width: none; }
/* Skip intro moves focus to the section below the hero (tabindex=-1): no outline box around the whole section */
main > section[tabindex="-1"]:focus { outline: none; }
@media (max-width: 860px) and (prefers-reduced-motion: no-preference) {
  .reveal-on .skill-band-section:not(.is-inview) .skill-band__col--right .skill-band__bar { translate: -100% 0; }
  .reveal-on .skill-band-section:not(.is-inview) .skill-band__col--right .skill-band__fill { translate: -200px 0; }
  /* stagger all four rows top to bottom */
  .skill-band__col--right .skill-band__bar:nth-child(1) { transition-delay: .3s; }
  .skill-band__col--right .skill-band__bar:nth-child(2) { transition-delay: .45s; }
  .skill-band__col--right .skill-band__bar:nth-child(1) .skill-band__fill { transition-delay: .9s; }
  .skill-band__col--right .skill-band__bar:nth-child(2) .skill-band__fill { transition-delay: 1.05s; }
}

/* ---------- Legal pages (privacy.html, terms.html, 2026-10-20) ----------
   Numbered sections in an 820px reading column; the number sits in a small leaf,
   alternating green / blue. Text from the DaybookPro legal pages (International Online A.E.). */
.legal-prose { max-width: 820px; margin-inline: auto; display: grid; gap: var(--space-8); }
.legal-intro { font-size: var(--text-body-lg); color: var(--color-graphite); padding: 20px 28px; border-radius: 0 26px 0 26px; background: #eef6e2; border-left: 4px solid #8dc63f; }
.legal-item { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.legal-item + .legal-item { padding-top: var(--space-8); border-top: 1px solid var(--color-border, #e4e7ec); }
.legal-item__num { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 0 14px 0 14px; background: #8dc63f; color: #fff; font-weight: var(--weight-bold); }
.legal-item:nth-child(even) .legal-item__num { background: #00a4e4; }
.legal-item__body h2 { font-size: var(--text-heading-sm); font-weight: var(--weight-bold); line-height: var(--leading-heading); color: var(--color-obsidian); }
.legal-item__body p { margin-top: var(--space-3); color: var(--color-graphite); font-size: var(--text-body-lg); line-height: 1.65; }
.btn-pair.btn-pair--center { justify-content: center; }
@media (max-width: 480px) { .legal-item { grid-template-columns: 36px minmax(0, 1fr); gap: var(--space-4); } .legal-item__num { width: 36px; height: 36px; } .legal-intro { padding: 16px 20px; } }

/* ---------- Site search (search.html, 2026-10-20) ---------- */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.search-page-form { display: flex; gap: var(--space-3); max-width: 640px; margin: var(--space-6) auto 0; }
.search-page-form input { flex: 1 1 auto; min-width: 0; height: 48px; padding: 0 18px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-xl); background: #fff; font: inherit; font-size: var(--text-body-lg); color: var(--color-obsidian); }
.search-page-form input:focus-visible { outline: 2px solid var(--color-brand-blue); outline-offset: 2px; }
.search-page-form .btn { height: 48px; }
.search-results-wrap { max-width: 820px; margin-inline: auto; }
.search-status { color: var(--color-text-muted); font-size: var(--text-body-lg); margin: 0 0 var(--space-6); }
.search-results { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.search-hit { padding: 20px 24px; border-radius: 0 26px 0 26px; background: #eef6e2; }
.search-hit:nth-child(even) { background: #dff3fb; }
.search-hit__page { display: block; font-size: var(--text-caption); font-weight: var(--weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); }
.search-hit__title { display: inline-block; margin-top: 4px; font-size: var(--text-subheading); font-weight: var(--weight-bold); color: var(--color-obsidian); text-decoration: none; }
.search-hit__title:hover { color: #005f86; text-decoration: underline; }
.search-hit__text { margin: 6px 0 0; color: var(--color-graphite); line-height: 1.6; }
.search-hit mark { background: rgba(141, 198, 63, 0.45); color: inherit; padding: 0 1px; border-radius: 2px; }
@media (max-width: 480px) { .search-page-form { flex-direction: column; } .search-page-form .btn { justify-content: center; } }

/* ==========================================================================
   phone menu (v4 2026-10-21, also v5): after the Merch v2 menu, in iol style.
   "Menu" rolls to "Close" while the two green bars fold into a cross; a full
   brand-green panel slides in from the right under the (light) header, so the
   logo stays on a light ground; the big navy links drop in one by one.
   ========================================================================== */
.nav-toggle {
  width: auto; height: 44px; padding: 0 6px 0 12px;
  gap: 12px; align-items: center;
  border-radius: var(--radius-md);
  font: 600 13px/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-obsidian);
}
@media (max-width: 960px) { .nav-toggle { display: inline-flex; } }
.nav-toggle-label { display: grid; overflow: hidden; height: 1em; }
.nav-toggle-label > span { grid-area: 1 / 1; transition: transform .5s cubic-bezier(.25,.46,.45,.94); }
.nav-toggle-label > span + span { transform: translateY(110%); }
.burger { position: relative; width: 28px; height: 16px; }
.burger i {
  position: absolute; left: 0; width: 100%; height: 2.5px; border-radius: 2px;
  background: #8dc63f;
  transition: top .35s cubic-bezier(.25,.46,.45,.94), transform .35s cubic-bezier(.25,.46,.45,.94) .1s, background .35s;
}
.burger i:first-child { top: 2px; }
.burger i:last-child { top: 11.5px; }
html.menu-open .nav-toggle-label > span:first-child { transform: translateY(-110%); }
html.menu-open .nav-toggle-label > span + span { transform: none; }
html.menu-open .burger i { top: 6.75px; transition: top .35s cubic-bezier(.25,.46,.45,.94), transform .35s cubic-bezier(.25,.46,.45,.94) .25s; }
html.menu-open .burger i:first-child { transform: rotate(45deg) scaleX(.9); }
html.menu-open .burger i:last-child { transform: rotate(-45deg) scaleX(.9); }

/* the panel: full green, below the header, slides in from the right */
.mobile-nav {
  inset: var(--mnav-top, 60px) 0 0 0;
  padding: calc(var(--space-6) + 24px) var(--container-pad) calc(var(--space-10) + 24px);
  background: #8dc63f;
  color: #ffffff;
  visibility: hidden;
  transition: transform .7s cubic-bezier(.25,.46,.45,.94), visibility 0s linear .7s;
}
html.menu-open .mobile-nav { transform: none; visibility: visible; transition: transform .7s cubic-bezier(.25,.46,.45,.94), visibility 0s; }
html.menu-open .site-header { z-index: calc(var(--z-overlay) + 1); }
/* lock page scroll on <body> only (html stays visible, so body's overflow passes to the
   window). Hiding overflow on <html> makes body (overflow-x: hidden) its own scroll box,
   which un-sticks the header when the menu is opened mid-page. */
html.menu-open body { overflow: hidden; }
.mobile-nav-head { display: none; }
.mobile-nav-list > li { border-bottom: 0; position: relative; padding-bottom: 1px; }
.mobile-nav-list > li > a,
.mobile-nav-row > a {
  overflow: hidden;
  padding: 14px 2px;
  color: #ffffff;
  font-size: clamp(26px, 7.4vw, 34px);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.mobile-nav-list > li > a > span,
.mobile-nav-row > a > span { display: inline-block; transform: translateY(-110%); transition: transform .6s cubic-bezier(.25,.46,.45,.94); }
html.menu-open .mobile-nav-list > li > a > span,
html.menu-open .mobile-nav-row > a > span { transform: none; }
html.menu-open .mobile-nav-list > li:nth-child(1) span { transition-delay: .30s; }
html.menu-open .mobile-nav-list > li:nth-child(2) span { transition-delay: .37s; }
html.menu-open .mobile-nav-list > li:nth-child(3) span { transition-delay: .44s; }
html.menu-open .mobile-nav-list > li:nth-child(4) span { transition-delay: .51s; }
html.menu-open .mobile-nav-list > li:nth-child(5) span { transition-delay: .58s; }
html.menu-open .mobile-nav-list > li:nth-child(6) span { transition-delay: .65s; }
.mobile-nav-row .msub-toggle { color: #ffffff; width: 48px; height: 48px; }
.mobile-nav-row .msub-toggle svg { width: 16px; height: 16px; }
.mobile-submenu a { color: #ffffff; opacity: .92; font-size: var(--text-body-lg); font-weight: var(--weight-medium); padding: 7px 2px; }
.mobile-submenu a:hover { opacity: 1; color: #ffffff; }
.mobile-submenu-label { color: #ffffff; opacity: .8; padding: var(--space-3) 2px 2px; font-weight: var(--weight-semibold); letter-spacing: .06em; text-transform: uppercase; }

/* foot: navy "Get in touch" bar + phone and email, fade in after the links */
.mnav-foot { opacity: 0; transform: translateY(-12px); transition: opacity .5s ease, transform .5s ease; }
html.menu-open .mnav-foot { opacity: 1; transform: none; transition-delay: .75s; }
.mnav-cta {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: var(--space-8); padding: 18px 22px;
  border-radius: 0 26px 0 26px; background: #0d3552; color: #ffffff;
  font-size: 20px; font-weight: var(--weight-bold);
}
.mnav-info { display: grid; gap: 8px; margin-top: var(--space-6); }
.mnav-info a { color: #ffffff; font-weight: var(--weight-semibold); font-size: var(--text-body-lg); }
@media (prefers-reduced-motion: reduce) {
  .mobile-nav, .nav-toggle-label > span, .burger i, .mobile-nav-list span, .mnav-foot { transition-duration: .01s !important; transition-delay: 0s !important; }
}

/* Brand motif in the green panel: white crosshatch bands top and bottom, like the section strips. */
/* Bands belong to the panel (not the screen), so they travel with it as it slides in,
   then sweep across from the right once it has landed. The top band sits at the panel's
   top edge; the bottom band sticks to the panel's bottom edge while the menu scrolls. */
.mobile-nav { display: flex; flex-direction: column; }
.mobile-nav::before, .mobile-nav::after {
  content: ""; height: 24px; pointer-events: none; flex: none;
  background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.45) 0 1px, transparent 1px 8px);
  transform: scaleX(0); transform-origin: right center;
  transition: transform .6s cubic-bezier(.25,.46,.45,.94);
}
.mobile-nav::before { position: absolute; top: 0; left: 0; right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.35); }
.mobile-nav::after {
  position: sticky; bottom: calc((var(--space-10) + 24px) * -1); margin: auto calc(var(--container-pad) * -1) calc((var(--space-10) + 24px) * -1);
  border-top: 1px solid rgba(255, 255, 255, 0.35);
}
html.menu-open .mobile-nav::before { transform: none; transition-delay: .45s; }
html.menu-open .mobile-nav::after { transform: none; transition-delay: .55s; }
@media (prefers-reduced-motion: reduce) { .mobile-nav::before, .mobile-nav::after { transition: none !important; } }
.mobile-nav-list, .mnav-foot { position: relative; z-index: 1; }

/* Divider circuits: each divider is a navy line with a ring at each end (like the circuit
   lines in the logo) and a diamond in the middle; they draw in left to right with the links. */
.mobile-nav-list > li::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 9px; pointer-events: none;
  background:
    radial-gradient(circle, transparent 1.9px, rgba(13, 53, 82, 0.6) 2.1px, rgba(13, 53, 82, 0.6) 2.9px, transparent 3.2px) 0 50% / 9px 9px no-repeat,
    radial-gradient(circle, transparent 1.9px, rgba(13, 53, 82, 0.6) 2.1px, rgba(13, 53, 82, 0.6) 2.9px, transparent 3.2px) 100% 50% / 9px 9px no-repeat,
    linear-gradient(rgba(13, 53, 82, 0.3), rgba(13, 53, 82, 0.3)) 50% 50% / calc(100% - 16px) 1px no-repeat;
  transform: scaleX(0); transform-origin: left center;
  transition: transform .7s cubic-bezier(.25,.46,.45,.94);
}
.mobile-nav-list > li::before {
  content: ""; position: absolute; left: calc(50% - 4.5px); bottom: -4px; width: 9px; height: 9px; z-index: 1; pointer-events: none;
  box-sizing: border-box; border: 1px solid rgba(13, 53, 82, 0.6); background: #8dc63f;
  transform: rotate(45deg) scale(0); transition: transform .35s ease;
}
html.menu-open .mobile-nav-list > li::after { transform: none; }
html.menu-open .mobile-nav-list > li::before { transform: rotate(45deg) scale(1); }
html.menu-open .mobile-nav-list > li:nth-child(1)::after { transition-delay: .30s; } html.menu-open .mobile-nav-list > li:nth-child(1)::before { transition-delay: .75s; }
html.menu-open .mobile-nav-list > li:nth-child(2)::after { transition-delay: .37s; } html.menu-open .mobile-nav-list > li:nth-child(2)::before { transition-delay: .82s; }
html.menu-open .mobile-nav-list > li:nth-child(3)::after { transition-delay: .44s; } html.menu-open .mobile-nav-list > li:nth-child(3)::before { transition-delay: .89s; }
html.menu-open .mobile-nav-list > li:nth-child(4)::after { transition-delay: .51s; } html.menu-open .mobile-nav-list > li:nth-child(4)::before { transition-delay: .96s; }
html.menu-open .mobile-nav-list > li:nth-child(5)::after { transition-delay: .58s; } html.menu-open .mobile-nav-list > li:nth-child(5)::before { transition-delay: 1.03s; }
html.menu-open .mobile-nav-list > li:nth-child(6)::after { transition-delay: .65s; } html.menu-open .mobile-nav-list > li:nth-child(6)::before { transition-delay: 1.10s; }

/* Dropdown items (Industries, Capabilities, About sections) drop in one by one when a submenu opens */
@keyframes mnav-sub-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.mobile-submenu.is-open > * { animation: mnav-sub-in .45s cubic-bezier(.25,.46,.45,.94) both; }
.mobile-submenu.is-open > :nth-child(2) { animation-delay: .04s; }
.mobile-submenu.is-open > :nth-child(3) { animation-delay: .08s; }
.mobile-submenu.is-open > :nth-child(4) { animation-delay: .12s; }
.mobile-submenu.is-open > :nth-child(5) { animation-delay: .16s; }
.mobile-submenu.is-open > :nth-child(6) { animation-delay: .20s; }
.mobile-submenu.is-open > :nth-child(7) { animation-delay: .24s; }
.mobile-submenu.is-open > :nth-child(8) { animation-delay: .28s; }
.mobile-submenu.is-open > :nth-child(9) { animation-delay: .32s; }
.mobile-submenu.is-open > :nth-child(10) { animation-delay: .36s; }
@media (prefers-reduced-motion: reduce) {
  .mobile-nav-list > li::after, .mobile-nav-list > li::before { transition: none !important; }
  .mobile-submenu.is-open > * { animation: none !important; }
}


/* Submenu headings (Industries, Capabilities) aren't links: navy, small and set off to the
   left, while the white links are stepped in so they read as the things to tap. */
.mobile-nav .mobile-submenu-label { color: #0d3552; opacity: 1; font-size: 11px; letter-spacing: .1em; padding: var(--space-4) 2px 4px; }
.mobile-nav .mobile-submenu a { padding-left: 16px; }