/*
 * Finden Technologies — site stylesheet.
 * Written once for the HTML design pages and carried unchanged into the WordPress theme.
 * Colours come from the Finden brand guide (tokens.json); never use a raw hex below the token block.
 * Type: Bricolage Grotesque for headings, IBM Plex Sans for text (chosen by the owner, 28 Oct 2026).
 * The site is white: light theme only.
 */

/* ---------- Fonts, served from this site (Bricolage Grotesque and IBM Plex Sans, SIL Open Font License) ---------- */

/* Bricolage Grotesque, latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/bricolage-grotesque-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Bricolage Grotesque, latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/bricolage-grotesque-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Sans, latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Sans, latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Sans, latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Sans, latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */

:root {
  color-scheme: light;

  --brand: #1D4ED8;
  --brand-strong: #1E3A8A;
  --brand-tint: #EEF3FF;
  --on-brand: #FFFFFF;
  --gold: #D9A300;
  --gold-bright: #F5C542;
  --gold-text: #8A6A00;
  --ink: #0E1B3D;
  --ink-muted: #4F5B7A;
  --surface: #FFFFFF;
  --surface-alt: #F5F7FB;
  --line: #DCE3F5;
  --focus: #1D4ED8;

  --font-display: "Bricolage Grotesque", "IBM Plex Sans", system-ui, sans-serif;
  --font-text: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-ui: var(--font-text);   /* labels, buttons, navigation and interface fragments */
  --display-weight: 760;         /* Bricolage is variable: 300-800 */
  --track: 1.05;                 /* scales the negative tracking on display type */

  /* Type steps: the page uses these and nothing in between. */
  --step-hero: clamp(3rem, 6.4vw, 6.25rem);
  --step-1: clamp(2.25rem, 4.4vw, 4.25rem);
  --step-2: clamp(1.375rem, 2.3vw, 2.125rem);
  --step-lead: 1.25rem;
  --step-body: 1.0625rem;
  --step-small: 0.875rem;
  --step-label: 0.8125rem;

  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --section-gap: clamp(72px, 9vw, 136px);

  --radius: 12px;
  --gutter: 24px;
  --page-pad: var(--space-4);
  --wrap: min(1200px, 100% - 2 * var(--page-pad));

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 700ms;
}

@media (min-width: 640px) {
  :root { --page-pad: var(--space-8); }
}

/* ---------- Base ---------- */

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

/* clip at the root as well as the body, so shapes that bleed past the edge never widen a phone's layout */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 104px; background: var(--surface); overflow-x: clip; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font: 400 var(--step-body)/1.6 var(--font-text);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3, p, ol, ul, figure, blockquote { margin: 0; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

::selection { background: var(--gold-bright); color: var(--ink); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: var(--page-pad); top: -60px; z-index: 100;
  background: var(--brand); color: var(--on-brand); padding: 10px 16px; border-radius: var(--radius);
}
.skip-link:focus { top: 12px; }

.wrap { width: var(--wrap); margin-inline: auto; }

.section { padding-block: var(--section-gap); position: relative; }
.section--alt { background: var(--surface-alt); }

/* ---------- Brand devices ---------- */

/* Eyebrow: uppercase SemiBold in gold-text, led by the gold diamond. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 var(--step-label)/1.2 var(--font-ui);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: var(--space-4);
}
.eyebrow::before, .diamond {
  content: ""; flex: none; width: 9px; height: 9px;
  background: var(--gold); border-radius: 2px; transform: rotate(45deg);
}
.diamond { display: inline-block; vertical-align: middle; }

/* Signature rule: a short gold segment, then a longer blue line. */
.sig-rule { display: flex; gap: 6px; height: 2px; }
.sig-rule::before { content: ""; flex: 0 0 56px; background: var(--gold); }
.sig-rule::after { content: ""; flex: 1; background: var(--brand); }

/* The large faint diamond from the letterhead, bleeding off the right edge. */
.has-watermark { position: relative; overflow: hidden; }
.has-watermark > .wrap { position: relative; z-index: 1; }
.watermark {
  position: absolute; z-index: 0; pointer-events: none;
  width: clamp(320px, 46vw, 680px); aspect-ratio: 1;
  right: calc(clamp(320px, 46vw, 680px) * -0.32); top: 50%;
  background: var(--brand-tint); border-radius: 12%;
  transform: translateY(-50%) rotate(45deg);
  rotate: var(--spin, 0deg);
}

/* A picture set in the brand's diamond: a rotated tile with soft corners, the picture turned back upright. */
.gem {
  position: absolute; width: var(--s, 160px); aspect-ratio: 1;
  border-radius: 14%; overflow: hidden; background: var(--brand-tint);
  transform: rotate(45deg);
  translate: 0 calc(var(--lift, 0px) * var(--depth, 0));
}
.gem img {
  position: absolute; left: 50%; top: 50%; width: 142%; height: 142%; max-width: none;
  object-fit: cover; transform: translate(-50%, -50%) rotate(-45deg);
}
.gem--gold { background: var(--gold); }
.gem--light { border: 2px solid var(--line); }
.gem--line { background: transparent; border: 2px solid var(--line); }
.gem--tint { background: var(--brand-tint); }

/* ---------- Type ---------- */

.h-hero, .h-1, .h-2 { font-family: var(--font-display); font-weight: var(--display-weight); color: var(--ink); }
.h-hero { font-size: var(--step-hero); line-height: 1; letter-spacing: calc(-0.04em * var(--track)); font-variation-settings: "opsz" 96; }
.h-1, .h-2 { text-wrap: balance; }
.h-1 { font-size: var(--step-1); line-height: 1.04; letter-spacing: calc(-0.03em * var(--track)); font-variation-settings: "opsz" 96; }
.h-2 { font-size: var(--step-2); line-height: 1.15; letter-spacing: calc(-0.015em * var(--track)); }
/* An accent word in a heading: the light weight of the display face, in brand blue. */
.accent { font-style: normal; font-weight: 300; color: var(--brand); }
.lead { font-size: var(--step-lead); line-height: 1.6; max-width: 34em; }
.small { font-size: var(--step-small); line-height: 1.55; }
.muted { color: var(--ink-muted); }
.nums { font-variant-numeric: tabular-nums lining-nums; }

/* The i of "find" carries the gold square, as in the logo. */
.found { position: relative; display: inline-block; margin-left: 0.075em; }
.nobreak { white-space: nowrap; }
.found::after {
  content: ""; position: absolute; left: calc(50% + 0.02em); top: 0.11em;
  width: 0.15em; height: 0.15em; margin-left: -0.075em;
  background: var(--gold); border-radius: 0.03em;
}

/* ---------- Buttons and links ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px;
  border-radius: var(--radius); border: 2px solid var(--brand);
  background: var(--brand); color: var(--on-brand);
  font: 600 0.9375rem/1.2 var(--font-ui); text-decoration: none;
  cursor: pointer;
  transition: background-color 200ms var(--ease-out), border-color 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.btn:hover { background: var(--brand-strong); border-color: var(--brand-strong); transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn--large { min-height: 56px; padding-inline: 28px; }

.text-link {
  font-weight: 600; color: var(--brand); text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: 0.3em; transition: text-underline-offset 200ms var(--ease-out), color 200ms;
}
.text-link:hover { text-underline-offset: 0.45em; color: var(--brand-strong); }

/* ---------- Header (template part: header) ---------- */

.site-header { position: sticky; top: 0; z-index: 50; background: var(--surface); }
.site-header__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); min-height: 84px; }
.site-header__logo { display: block; flex: none; }
.site-header__logo img { height: 54px; width: auto; }
.site-header .sig-rule { transform-origin: left; transform: scaleX(0); transition: transform 600ms var(--ease-out); }
.site-header.is-scrolled .sig-rule { transform: scaleX(1); }

.site-nav { display: flex; align-items: center; gap: var(--space-8); }
.site-nav__list { display: flex; gap: var(--space-6); list-style: none; padding: 0; margin: 0; }
.site-nav__list a {
  display: inline-block; padding-block: 12px; position: relative;
  font: 600 0.9375rem/1.2 var(--font-ui); text-decoration: none; color: var(--ink);
}
.site-nav__list a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; background: var(--brand);
  transform: scaleX(0); transform-origin: left; transition: transform 300ms var(--ease-out);
}
.site-nav__list a:hover::after, .site-nav__list a[aria-current="page"]::after { transform: scaleX(1); }
.site-nav .btn { min-height: 44px; padding-block: 10px; }

.menu-toggle {
  display: none; min-height: 44px; padding: 10px 16px; border-radius: var(--radius);
  border: 2px solid var(--line); background: var(--surface); color: var(--ink);
  font: 600 0.9375rem/1 var(--font-ui); cursor: pointer;
}

@media (max-width: 1099px) {
  .menu-toggle { display: inline-flex; align-items: center; }
  .site-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: var(--space-4);
    padding: var(--space-6) var(--page-pad) var(--space-8);
    background: var(--surface); border-bottom: 2px solid var(--line);
    display: none;
  }
  .site-nav.is-open { display: flex; }
  .site-nav__list { flex-direction: column; gap: 0; }
  .site-nav__list a { font-size: 1.25rem; padding-block: 14px; }
  .no-js .site-nav { position: static; display: flex; padding: 0 0 var(--space-4); border: 0; }
}

/* ---------- Hero ---------- */

.hero { min-height: min(86svh, 840px); display: flex; align-items: center; padding-block: var(--space-16); }
.hero__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); row-gap: var(--space-12); align-items: center; }
.hero__copy { grid-column: 1 / span 8; position: relative; z-index: 1; }
.hero__title { max-width: none; }
.hero__title .line { display: block; overflow: clip; padding: 0.08em 0 0.1em; margin: -0.08em 0 -0.1em; }
.hero__title [data-line] { display: inline-block; }
.hero__copy .lead { margin-top: clamp(28px, 3vw, 40px); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: center; margin-top: var(--space-8); }

/* A cluster of diamonds: three windows onto our work, one gold diamond, one outline. */
.hero__art { grid-column: 9 / -1; position: relative; aspect-ratio: 4 / 5; }
/* positions are worked out so the turned tiles (1.41 times their side across) never touch or leave the box */
.hero__art .gem:nth-child(1) { --s: 52%; right: 19%; top: 15%; --depth: 0.5; }
.hero__art .gem:nth-child(2) { --s: 36%; left: 4%; top: 50%; --depth: 1.1; }
.hero__art .gem:nth-child(3) { --s: 30%; right: 7%; top: 66%; --depth: 0.8; }
.hero__art .gem:nth-child(4) { --s: 8%; left: 10%; top: 14%; --depth: 1.6; }
.hero__art .gem:nth-child(5) { --s: 20%; left: 42%; top: 80%; --depth: 0.35; }
.hero__art .gem:nth-child(6) { --s: 11%; right: 0; top: 45%; --depth: 1.3; }

@media (max-width: 899px) {
  .hero { min-height: auto; padding-block: var(--space-12) var(--space-16); }
  .hero__copy, .hero__art { grid-column: 1 / -1; }
  .hero__title { font-size: clamp(2.25rem, 9.4vw, 4.75rem); }
  .hero__art { aspect-ratio: 16 / 9; width: 100%; margin-right: 0; }
  .hero__art .gem:nth-child(1) { --s: 34%; right: 33%; top: 8%; }
  .hero__art .gem:nth-child(2) { --s: 25%; left: 6%; top: 26%; }
  .hero__art .gem:nth-child(3) { --s: 25%; right: 6%; top: 30%; bottom: auto; }
  .hero__art .gem:nth-child(4) { left: 6%; top: 6%; }
  .hero__art .gem:nth-child(5) { --s: 14%; left: 32%; bottom: 0; }
  .hero__art .gem:nth-child(6) { right: 2%; top: 4%; }
}

/* ---------- Clients ---------- */

.clients { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); row-gap: var(--space-8); align-items: start; }
.clients__head { grid-column: 1 / span 8; }
.clients__lead { grid-column: 1 / span 5; }
.client-list {
  grid-column: 7 / -1; list-style: none; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px;
  font: var(--display-weight) var(--step-2)/1.25 var(--font-display); letter-spacing: calc(-0.015em * var(--track));
}
.client-list li { display: inline-flex; align-items: center; gap: 22px; }
.client-list li + li::before {
  content: ""; width: 10px; height: 10px; background: var(--gold); border-radius: 2px; transform: rotate(45deg); flex: none;
}
.client-list .name { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 3px; text-underline-offset: 0.18em; transition: text-decoration-color 400ms var(--ease-out); }
.client-list .name.is-lit { text-decoration-color: var(--gold); }
.client-list small { font: 400 var(--step-small)/1 var(--font-text); color: var(--ink-muted); letter-spacing: 0; margin-left: 6px; }

@media (max-width: 899px) {
  .clients__head, .clients__lead, .client-list { grid-column: 1 / -1; }
  .client-list { flex-direction: column; align-items: flex-start; gap: 14px; }
  .client-list li { gap: 16px; }
  .client-list li::before { content: ""; width: 10px; height: 10px; background: var(--gold); border-radius: 2px; transform: rotate(45deg); flex: none; }
}

/* ---------- What we do (rows with margin pictures) ---------- */

.services__head { margin-left: calc((100% + var(--gutter)) / 3); max-width: 760px; margin-bottom: var(--space-24); }
.services__head .h-1 { margin-bottom: var(--space-4); }
.services__list { list-style: none; padding: 0; display: grid; gap: clamp(72px, 9vw, 128px); }
.service { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); row-gap: var(--space-6); align-items: start; }
.service__title { grid-column: 1 / span 4; position: relative; z-index: 1; }
.service__text { grid-column: 5 / span 4; position: relative; z-index: 1; }
.service__text p + p { margin-top: var(--space-3); }
.service__eg { color: var(--ink-muted); }
.service__eg b { color: var(--ink); font-weight: 600; }
.service__pic { grid-column: 9 / -1; justify-self: end; width: 100%; position: relative; }
.service:nth-child(1) .service__pic { max-width: 400px; }
.service:nth-child(2) .service__pic { max-width: 360px; }
.service:nth-child(3) .service__pic { max-width: 360px; }
/* a pale diamond behind each picture, alternating sides */
.service__pic::before {
  content: ""; position: absolute; z-index: -1; width: 62%; aspect-ratio: 1; top: -18%; right: -14%;
  background: var(--brand-tint); border-radius: 14%; transform: rotate(45deg);
  translate: 0 calc(var(--lift, 0px) * 0.5);
}
.service:nth-child(even) .service__pic::before { right: auto; left: -16%; top: auto; bottom: -22%; }
.service:nth-child(3) .service__pic::before { background: transparent; border: 2px solid var(--line); }
.services__list { position: relative; z-index: 0; }
.shot { border-radius: var(--radius); overflow: hidden; background: var(--surface-alt); }
.shot img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; transition: transform 900ms var(--ease-out); }
.shot:hover img { transform: scale(1.03); }
.service__pic figcaption { margin-top: var(--space-2); }
.services__more { list-style: none; padding: 0; margin-top: clamp(72px, 9vw, 128px); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
.services__more li { position: relative; padding: var(--space-8); border: 2px solid var(--line); border-radius: var(--radius); }
.services__more li::before { content: ""; display: block; width: 12px; height: 12px; margin-bottom: var(--space-4); background: var(--gold); border-radius: 2px; transform: rotate(45deg); }
.services__more .h-2 { font-size: clamp(1.25rem, 1.7vw, 1.625rem); margin-bottom: var(--space-2); }
.services__more p { color: var(--ink-muted); }
.tech { margin-top: var(--space-16); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); row-gap: var(--space-6); align-items: start; }
.tech__title { grid-column: 1 / span 3; font: 600 var(--step-label)/1.4 var(--font-ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-text); }
.tech__groups { grid-column: 4 / -1; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); }
.tech__groups dt { font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.tech__groups dd { margin: 0; color: var(--ink-muted); }
.services__after { margin-top: clamp(72px, 9vw, 128px); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); }
.services__after p { grid-column: 5 / -1; font: var(--display-weight) var(--step-2)/1.3 var(--font-display); letter-spacing: calc(-0.015em * var(--track)); }

@media (max-width: 899px) {
  .services__head { margin-left: 0; margin-bottom: var(--space-12); }
  .services__more { grid-template-columns: 1fr; }
  .tech__title, .tech__groups { grid-column: 1 / -1; }
  .tech__groups { grid-template-columns: 1fr 1fr; }
  .service__title, .service__text, .service__pic, .services__after p { grid-column: 1 / -1; }
  .service__pic { justify-self: start; }
  .service:nth-child(even) .service__pic { justify-self: end; max-width: 86%; }
  .service__pic::before { width: 44%; right: -6%; top: auto; bottom: -16%; }
  .service:nth-child(even) .service__pic::before { left: -6%; }
}

/* ---------- Interface fragments (data-ui) ---------- */

.ui {
  background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius);
  padding: 18px; font: 400 0.875rem/1.5 var(--font-ui); color: var(--ink);
}
.ui__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; color: var(--ink-muted); font-size: 0.8125rem; font-weight: 600; }
.ui__search { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 2px solid var(--line); border-radius: 8px; color: var(--ink); font-weight: 600; }
.ui__search::before { content: ""; flex: none; width: 12px; height: 12px; border: 2px solid var(--ink-muted); border-radius: 50%; }
.ui__answer { margin-top: 12px; padding: 12px; border-radius: 8px; background: var(--surface-alt); }
.ui mark { background: var(--gold-bright); color: var(--ink); padding: 0 3px; border-radius: 3px; }
.ui__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); } /* taste-skill-ignore: rows inside an interface fragment */
.ui__row:first-of-type { border-top: 0; }
.ui__ok { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; font-weight: 600; color: #127A4B; }
.ui__ok::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ui__live { padding: 2px 8px; border-radius: 6px; background: var(--brand-tint); color: var(--brand-strong); font-size: 0.75rem; }
.ui__foot { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; padding: 12px; border-radius: 8px; background: var(--surface-alt); }
.ui__foot b { font: var(--display-weight) 1.5rem/1 var(--font-display); color: var(--brand); }
.ui__cite { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 0.8125rem; font-weight: 600; color: var(--brand); }
.ui__cite::before { content: ""; width: 7px; height: 7px; background: var(--gold); border-radius: 1px; transform: rotate(45deg); }

/* ---------- At a glance (the one place the figures live) ---------- */

.stats { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); row-gap: var(--space-12); align-items: center; }
.stats__head { grid-column: 1 / span 5; }
.stats__head .lead { margin-top: var(--space-4); }
.stats__grid { grid-column: 7 / -1; position: relative; isolation: isolate; list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12) var(--gutter); }
.stats__grid::before {
  content: ""; position: absolute; z-index: -1; width: 70%; aspect-ratio: 1; left: 50%; top: 50%;
  background: var(--surface); border-radius: 14%; transform: translate(-50%, -50%) rotate(45deg);
}
.stat { display: grid; align-content: start; gap: var(--space-3); }
.stat::before { content: ""; width: 10px; height: 10px; background: var(--gold); border-radius: 2px; transform: rotate(45deg); margin-left: 2px; }
.stat__fig { font: var(--display-weight) var(--step-1)/1 var(--font-display); letter-spacing: calc(-0.03em * var(--track)); color: var(--brand); white-space: nowrap; }
.stat__cap { max-width: 22ch; color: var(--ink); }

@media (max-width: 899px) {
  .stats__head, .stats__grid { grid-column: 1 / -1; }
  .stats__grid { gap: var(--space-8) var(--space-4); }
}

/* ---------- How we work: a six-step timeline ---------- */

.process__head { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); row-gap: var(--space-4); align-items: end; margin-bottom: var(--space-16); }
.process__head > div { grid-column: 1 / span 7; }
.process__head .lead { grid-column: 9 / -1; }
.timeline { list-style: none; padding: 0; position: relative; display: grid; grid-template-columns: repeat(var(--steps, 6), 1fr); column-gap: var(--gutter); --fill: 1; }
.timeline::before, .timeline::after {
  content: ""; position: absolute; left: 9px; right: calc((100% - (var(--steps, 6) - 1) * var(--gutter)) / var(--steps, 6) - 9px); top: 9px; height: 2px; background: var(--line);
}
.timeline::after { background: var(--brand); transform-origin: left; transform: scaleX(var(--fill)); }
.step { position: relative; padding-top: 44px; }
.step__node {
  position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 3px;
  background: var(--surface); border: 2px solid var(--line); transform: rotate(45deg);
  transition: background-color 400ms var(--ease-out), border-color 400ms var(--ease-out), scale 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.step.is-reached .step__node { background: var(--gold); border-color: var(--gold); scale: 1.15; }
.step__num { font: 600 var(--step-label)/1 var(--font-ui); letter-spacing: 0.12em; color: var(--gold-text); }
.step .h-2 { font-size: clamp(1.25rem, 1.7vw, 1.625rem); margin: var(--space-3) 0 var(--space-2); }
.step p:last-child { color: var(--ink-muted); }
.process__note { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); margin-top: var(--space-16); }
.process__note p { grid-column: 1 / span 8; }

@media (max-width: 899px) {
  .process__head > div, .process__head .lead, .process__note p { grid-column: 1 / -1; }
  .timeline { grid-template-columns: 1fr; row-gap: var(--space-8); }
  .timeline::before, .timeline::after { left: 9px; right: auto; top: 9px; bottom: 9px; width: 2px; height: auto; transform-origin: top; transform: scaleY(var(--fill)); }
  .timeline::before { transform: none; }
  .step { padding-top: 0; padding-left: 44px; }
}

/* ---------- Results ---------- */

.results__head { margin-bottom: var(--space-8); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); row-gap: var(--space-4); align-items: end; }
.results__head > div { grid-column: 1 / span 7; }
.results__head .lead { grid-column: 9 / -1; font-size: var(--step-body); }
.cases { list-style: none; padding: 0; display: grid; }
.case { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); row-gap: var(--space-4); padding-block: var(--space-8); align-items: baseline; }
.case + .case { border-top: 2px solid var(--line); }
.case__name { grid-column: 1 / span 4; }
.case__sector { color: var(--ink-muted); font-weight: 600; margin-bottom: 4px; }
.case__text { grid-column: 5 / span 4; }
.case__figs { grid-column: 9 / -1; list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.case__fig b { display: block; font: var(--display-weight) var(--step-2)/1 var(--font-display); letter-spacing: calc(-0.02em * var(--track)); color: var(--brand); }
.case__fig > span { display: block; margin-top: 6px; }

@media (max-width: 899px) {
  .results__head > div, .results__head .lead, .case__name, .case__text, .case__figs { grid-column: 1 / -1; }
}

/* ---------- Our own product ---------- */

.product { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); row-gap: var(--space-12); align-items: center; }
.product__copy { grid-column: 1 / span 7; }
.product__copy .h-1 { margin-bottom: var(--space-6); }
.product__figs { list-style: none; padding: 0; margin: var(--space-8) 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
.product__figs b { display: block; font: var(--display-weight) var(--step-2)/1 var(--font-display); letter-spacing: calc(-0.02em * var(--track)); color: var(--brand); }
.product__figs li > span { display: block; margin-top: 6px; }
.product__art { grid-column: 9 / -1; position: relative; aspect-ratio: 1; }
.product__art .gem:nth-child(1) { --s: 66%; left: 17%; top: 17%; }
.product__art .gem:nth-child(2) { --s: 11%; right: 2%; top: 8%; }
.product__art .gem:nth-child(3) { --s: 22%; left: 0; bottom: 2%; }

@media (max-width: 899px) {
  .product__copy, .product__art { grid-column: 1 / -1; }
  .product__art { width: min(100%, 360px); margin-inline: auto; }
  .product__figs { grid-template-columns: 1fr 1fr 1fr; gap: var(--space-4); }
}

/* ---------- About ---------- */

.about { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); row-gap: var(--space-12); align-items: center; }
.about__body { grid-column: 1 / span 7; }
.about__body .h-1 { margin-bottom: var(--space-6); }
.about__text { font: 400 var(--step-2)/1.4 var(--font-text); letter-spacing: -0.01em; }
.about__more { margin-top: var(--space-8); display: grid; gap: var(--space-4); }
.about__more p { font-size: var(--step-lead); line-height: 1.6; }
.about__more p + p { color: var(--ink-muted); }
.about__more a { color: var(--ink); text-decoration-thickness: 2px; text-decoration-color: var(--gold); }
.about__more a:hover { color: var(--brand); }
.about__side { grid-column: 9 / -1; }
.about__facts { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--gutter); margin-top: var(--space-12); }
.about__facts li:last-child { grid-column: 1 / -1; }
.about__facts b { display: block; color: var(--ink); }

/* The lattice: a field of diamonds, and the one that is found. */
.lattice { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(10px, 1.6vw, 22px); width: min(100%, 360px); margin-inline: auto; padding: 4%; }
.lattice span { aspect-ratio: 1; border-radius: 16%; border: 2px solid var(--line); transform: rotate(45deg) scale(0.62); transition: background-color 500ms var(--ease-out), border-color 500ms var(--ease-out); }
.lattice span.is-seen { background: var(--brand-tint); border-color: var(--brand-tint); }
.lattice span.is-found { background: var(--gold); border-color: var(--gold); transform: rotate(45deg) scale(1); transition: transform 700ms cubic-bezier(0.34, 1.56, 0.64, 1), background-color 300ms; }

@media (max-width: 899px) {
  .about__body, .about__side { grid-column: 1 / -1; }
  .about__text { font-size: 1.25rem; }
  .lattice { width: min(70%, 280px); }
}

/* ---------- Closing call to action ---------- */

.cta .wrap { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); row-gap: var(--space-8); align-items: end; }
.cta .h-hero { grid-column: 1 / -1; max-width: 10em; }
.cta__text { grid-column: 1 / span 6; }
.cta__actions { grid-column: 8 / -1; display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: center; justify-content: flex-end; }

@media (max-width: 899px) {
  .cta .h-hero { font-size: clamp(2.5rem, 11vw, 4.75rem); }
  .cta__text, .cta__actions { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ---------- Inner page hero ---------- */

.page-hero { padding-block: clamp(48px, 6vw, 96px) clamp(64px, 8vw, 120px); }
.page-hero__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); row-gap: var(--space-12); align-items: center; }
.page-hero__copy { grid-column: 1 / span 7; }
.page-hero .h-hero { font-size: clamp(2.75rem, 5.4vw, 5.25rem); line-height: 1.02; text-wrap: balance; }
.page-hero .lead { margin-top: var(--space-8); }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: center; margin-top: var(--space-8); }
.page-hero__art { grid-column: 9 / -1; position: relative; aspect-ratio: 1; }
.page-hero__side { grid-column: 8 / -1; }
.page-hero__art .gem:nth-child(1) { --s: 52%; left: 8%; top: 10%; --depth: 0.5; }
.page-hero__art .gem:nth-child(2) { --s: 36%; right: 6%; top: 44%; --depth: 1; }
.page-hero__art .gem:nth-child(3) { --s: 9%; right: 16%; top: 10%; --depth: 1.5; }
.page-hero__art .gem:nth-child(4) { --s: 22%; left: 18%; bottom: 2%; --depth: 0.3; }

@media (max-width: 899px) {
  .page-hero__copy, .page-hero__art, .page-hero__side { grid-column: 1 / -1; }
  .page-hero .h-hero { font-size: clamp(2.1rem, 8.4vw, 3.5rem); }
  .page-hero__art { width: min(100%, 360px); margin-inline: auto; }
}

/* ---------- Capabilities: a sticky index beside the detail ---------- */

.caps { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); align-items: start; }
.caps__index { grid-column: 1 / span 3; position: sticky; top: 120px; }
.caps__index ol { list-style: none; padding: 0; margin: var(--space-4) 0 0; display: grid; gap: 2px; }
.caps__index a {
  display: flex; align-items: center; gap: 12px; padding: 10px 0; min-height: 44px;
  font: 600 1rem/1.3 var(--font-ui); color: var(--ink-muted); text-decoration: none; transition: color 300ms var(--ease-out);
}
.caps__index a::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 2px; border: 2px solid var(--line); transition: background-color 300ms, border-color 300ms, transform 400ms var(--ease-out); }
.caps__index a:hover { color: var(--ink); }
.caps__index a.is-current { color: var(--ink); }
.caps__index a.is-current::before { background: var(--gold); border-color: var(--gold); transform: scale(1.15); }
.caps__body { grid-column: 5 / -1; display: grid; gap: clamp(88px, 10vw, 152px); }
.cap { scroll-margin-top: 112px; }
.cap .h-1 { margin-bottom: var(--space-4); }
/* the text of each capability sits above the pale diamond behind its picture */
.cap > .h-1, .cap > .lead, .cap > .ticks, .cap__eg-text { position: relative; z-index: 1; }
.cap > .lead { max-width: 38em; }
.ticks { list-style: none; padding: 0; margin: var(--space-8) 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--gutter); }
.ticks li { position: relative; padding-left: 24px; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 0.6em; width: 8px; height: 8px; background: var(--gold); border-radius: 2px; transform: rotate(45deg); }
.cap__eg { margin-top: var(--space-12); display: grid; grid-template-columns: repeat(8, 1fr); column-gap: var(--gutter); row-gap: var(--space-6); align-items: center; }
.cap__eg-text { grid-column: 1 / span 3; }
.cap__eg-text .eg-label { font: 600 var(--step-label)/1.2 var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-text); margin-bottom: var(--space-3); }
.cap__eg-text b { font-weight: 600; }
.cap__eg-pic { grid-column: 4 / -1; position: relative; isolation: isolate; }
.cap__eg-pic::before {
  content: ""; position: absolute; z-index: -1; width: 46%; aspect-ratio: 1; right: -8%; top: -14%;
  background: var(--brand-tint); border-radius: 14%; transform: rotate(45deg);
}
.cap:nth-child(even) .cap__eg-pic::before { right: auto; left: -6%; top: auto; bottom: -16%; }
.cap__eg-pic figcaption { margin-top: var(--space-2); }
.cap__eg-pic .ui { max-width: 460px; margin-left: auto; }

/* a phone, for app screens */
.phone { width: min(100%, 260px); margin-inline: auto; border: 10px solid var(--ink); border-radius: 34px; overflow: hidden; background: var(--surface); }
.phone img { width: 100%; height: auto; }

@media (max-width: 899px) {
  .caps__index { display: none; }
  .caps__body { grid-column: 1 / -1; }
  .ticks { grid-template-columns: 1fr; }
  .cap__eg { grid-template-columns: 1fr; }
  .cap__eg-text, .cap__eg-pic { grid-column: 1 / -1; }
  .cap__eg-pic .ui { margin-left: 0; }
}

/* ---------- Security, as standard ---------- */

.assure { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); row-gap: var(--space-8); align-items: start; }
.assure__head { grid-column: 1 / span 5; }
.assure__list { grid-column: 7 / -1; list-style: none; padding: 0; display: grid; gap: var(--space-6); }
.assure__list li { display: grid; grid-template-columns: 28px 1fr; column-gap: var(--space-4); }
.assure__list li::before { content: ""; width: 14px; height: 14px; margin-top: 0.35em; background: var(--gold); border-radius: 3px; }
.assure__list b { display: block; font: var(--display-weight) clamp(1.25rem, 1.7vw, 1.625rem)/1.2 var(--font-display); letter-spacing: calc(-0.015em * var(--track)); margin-bottom: 4px; }
.assure__list span { color: var(--ink-muted); }

@media (max-width: 899px) {
  .assure__head, .assure__list { grid-column: 1 / -1; }
}

/* ---------- Build, then run ---------- */

.run { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); row-gap: var(--space-8); align-items: center; }
.run__copy { grid-column: 1 / span 7; }
.run__copy .h-1 { margin-bottom: var(--space-6); }
.run__copy .lead + .lead { margin-top: var(--space-4); }
.run__steps { grid-column: 9 / -1; list-style: none; padding: 0; display: grid; gap: var(--space-4); counter-reset: run; }
.run__steps li { padding: var(--space-4) var(--space-6); border: 2px solid var(--line); border-radius: var(--radius); background: var(--surface); font-weight: 600; display: flex; align-items: center; gap: 14px; }
.run__steps li::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--gold); border-radius: 2px; transform: rotate(45deg); }

@media (max-width: 899px) {
  .run__copy, .run__steps { grid-column: 1 / -1; }
}

/* ---------- Ask this page: an assistant that answers from the page itself ---------- */

.assistant { padding: clamp(20px, 2.4vw, 28px); display: grid; gap: var(--space-4); }
.assistant .ui__bar { margin-bottom: 0; }
.assistant__form { display: flex; gap: var(--space-2); }
.assistant__form input {
  flex: 1; min-width: 0; min-height: 48px; padding: 10px 14px;
  border: 2px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink);
  font: 400 1rem/1.3 var(--font-ui); transition: border-color 200ms;
}
.assistant__form input:hover { border-color: var(--ink-muted); }
.assistant__form input:focus { border-color: var(--brand); outline: none; }
.assistant__form .btn { min-height: 48px; padding-inline: 18px; }
.assistant__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin: 0; }
.chip {
  display: inline-flex; align-items: center; min-height: 40px; padding: 8px 12px; border-radius: 10px;
  border: 2px solid var(--line); background: var(--surface); color: var(--ink);
  font: 600 0.875rem/1.2 var(--font-ui); text-decoration: none; cursor: pointer;
  transition: border-color 200ms, transform 200ms var(--ease-out);
}
.chip:hover { border-color: var(--brand); transform: translateY(-1px); }
.chip:active { transform: scale(0.98); }
.assistant__answer { padding: var(--space-4); border-radius: 10px; background: var(--surface-alt); min-height: 150px; display: grid; gap: var(--space-3); align-content: start; }
.assistant__q { color: var(--ink-muted); font-size: 0.875rem; }
.assistant__a { font: var(--display-weight) 1.25rem/1.35 var(--font-display); letter-spacing: -0.01em; color: var(--ink); transition: opacity 250ms var(--ease-out), transform 250ms var(--ease-out); }
.assistant.is-thinking .assistant__a { opacity: 0; transform: translateY(6px); }
.assistant__src { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; font-weight: 600; color: var(--ink-muted); }
.assistant__src::before { content: ""; width: 9px; height: 9px; background: var(--gold); border-radius: 2px; }
.assistant__src a { color: var(--brand); }
.no-js .assistant__form { display: none; }
.is-found-target { position: relative; }
.is-found-target::after {
  content: ""; position: absolute; left: -26px; top: 0.45em; width: 12px; height: 12px;
  background: var(--gold); border-radius: 2px; scale: 0.4; opacity: 0;
  animation: found-land 900ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes found-land { to { scale: 1; opacity: 1; } }

/* ---------- The gap: today and with custom AI ---------- */

.gap { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); row-gap: var(--space-12); }
.gap__head { grid-column: 1 / span 5; }
.gap__table { grid-column: 7 / -1; width: 100%; border-collapse: collapse; }
.gap__table th { text-align: left; font: 600 var(--step-label)/1.2 var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); padding: 0 var(--space-4) var(--space-4) 0; }
.gap__table th:last-child { color: var(--gold-text); }
.gap__table td { padding: var(--space-4) var(--space-4) var(--space-4) 0; border-top: 2px solid var(--line); vertical-align: top; width: 50%; }
.gap__table td:first-child { color: var(--ink-muted); }
.gap__table td:last-child { font-weight: 600; }

@media (max-width: 899px) {
  .gap__head, .gap__table { grid-column: 1 / -1; }
}

/* ---------- Four ways AI helps: tabs on the left, the detail on the right ---------- */

.pillars__head { margin-bottom: var(--space-12); max-width: 760px; }
.pillars { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); row-gap: var(--space-8); align-items: start; }
.pillars__tabs { grid-column: 1 / span 4; display: grid; gap: var(--space-3); }
.pillar-tab {
  display: grid; gap: 4px; width: 100%; text-align: left; padding: var(--space-4) var(--space-6);
  border: 2px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); cursor: pointer;
  transition: border-color 250ms var(--ease-out), background-color 250ms var(--ease-out), transform 250ms var(--ease-out);
}
.pillar-tab:hover { border-color: var(--brand); }
.pillar-tab b { font: var(--display-weight) clamp(1.125rem, 1.5vw, 1.375rem)/1.2 var(--font-display); letter-spacing: -0.01em; }
.pillar-tab span { font-size: 0.875rem; color: var(--ink-muted); }
.pillar-tab[aria-selected="true"] { border-color: var(--brand); background: var(--brand-tint); }
.pillar-tab[aria-selected="true"] span { color: var(--brand-strong); }
.pillars__panels { grid-column: 6 / -1; }
.pillar { display: grid; grid-template-columns: repeat(7, 1fr); column-gap: var(--gutter); row-gap: var(--space-6); }
.pillar + .pillar { margin-top: var(--space-16); }
.pillar[hidden] { display: none; }
.pillar__text { grid-column: 1 / span 4; }
.pillar__stat { font: var(--display-weight) var(--step-2)/1.1 var(--font-display); color: var(--gold-text); margin-bottom: var(--space-2); }
.pillar__text .h-2 { margin-bottom: var(--space-3); }
.pillar__text .ticks { grid-template-columns: 1fr; margin-top: var(--space-4); }
.pillar__outcome { margin-top: var(--space-6); color: var(--ink); }
.pillar__outcome b { display: block; font: 600 var(--step-label)/1.2 var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-text); margin-bottom: 6px; }
.pillar__pic { grid-column: 5 / -1; }
.js .pillars.is-tabbed .pillar { animation: pillar-in 450ms var(--ease-out); }
.js .pillars.is-tabbed .pillar + .pillar { margin-top: 0; }
@keyframes pillar-in { from { opacity: 0; transform: translateY(10px); } }
.no-js .pillars__tabs { display: none; }
.no-js .pillars__panels { grid-column: 1 / -1; }

@media (max-width: 899px) {
  .pillars__tabs, .pillars__panels { grid-column: 1 / -1; }
  .pillars__tabs { grid-template-columns: 1fr 1fr; }
  .pillar-tab { padding: var(--space-3) var(--space-4); }
  .pillar__text, .pillar__pic { grid-column: 1 / -1; }
}

/* more interface fragments */
.ui__flag { margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: var(--brand-tint); color: var(--ink); font-weight: 600; display: flex; gap: 10px; align-items: center; }
.ui__flag::before { content: ""; width: 9px; height: 9px; background: var(--gold); border-radius: 2px; flex: none; }
.ui__actions { display: flex; gap: 8px; margin-top: 12px; }
.ui__btn { display: inline-flex; align-items: center; min-height: 34px; padding: 6px 12px; border-radius: 8px; font-weight: 600; font-size: 0.8125rem; border: 2px solid var(--brand); color: var(--brand); }
.ui__btn--solid { background: var(--brand); color: var(--on-brand); }
.ui__bubble { max-width: 86%; padding: 10px 12px; border-radius: 10px; margin-top: 8px; }
.ui__bubble--in { background: var(--surface-alt); }
.ui__bubble--out { background: var(--brand); color: var(--on-brand); margin-left: auto; }
.ui__bars { display: grid; gap: 12px; margin-top: 4px; }
.ui__barrow { display: grid; grid-template-columns: 56px 1fr 56px; align-items: center; gap: 10px; }
.ui__barfill { height: 14px; border-radius: 4px; background: var(--brand); }
.ui__barfill--after { background: var(--gold); }
.ui__k { color: var(--ink-muted); }
.ui__v { font-weight: 600; text-align: right; }

/* ---------- Approach: three principles ---------- */

.principles { list-style: none; padding: 0; margin: var(--space-12) 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
.principles li { padding-top: var(--space-6); }
.principles li::before { content: ""; display: block; width: 14px; height: 14px; margin-bottom: var(--space-4); background: var(--gold); border-radius: 3px; }
.principles b { display: block; font: var(--display-weight) var(--step-2)/1.15 var(--font-display); letter-spacing: calc(-0.015em * var(--track)); margin-bottom: var(--space-3); }
.principles span { color: var(--ink-muted); }

@media (max-width: 899px) {
  .principles { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* ---------- Contact ---------- */

.reach { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-4); }
.reach li { padding: var(--space-6); border: 2px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.reach b { display: block; font: 600 var(--step-label)/1.2 var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-text); margin-bottom: var(--space-2); }
.reach a, .reach span { font: var(--display-weight) clamp(1.125rem, 1.5vw, 1.375rem)/1.3 var(--font-display); letter-spacing: -0.01em; color: var(--ink); text-decoration: none; }
.reach a:hover { color: var(--brand); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.reach small { display: block; margin-top: 4px; color: var(--ink-muted); }

.booking__head { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); row-gap: var(--space-4); align-items: end; margin-bottom: var(--space-8); }
.booking__head > div { grid-column: 1 / span 7; }
.booking__head .lead { grid-column: 9 / -1; }
.booking__frame {
  position: relative; min-height: 680px; border: 2px solid var(--line); border-radius: var(--radius);
  background: var(--surface); overflow: hidden;
}
.booking__frame > #cal-inline { width: 100%; min-height: 680px; }
.booking__fallback {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--space-4);
  text-align: center; padding: var(--space-8); color: var(--ink-muted);
}
.booking.is-loaded .booking__fallback { display: none; }
.thanks { min-height: min(70svh, 640px); display: flex; align-items: center; }
.thanks .wrap { width: var(--wrap); }

.write { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); row-gap: var(--space-12); align-items: start; }
.write__intro { grid-column: 1 / span 4; }
.write__intro .h-1 { margin-bottom: var(--space-4); }
.write__intro .reach { margin-top: var(--space-8); }
.form { grid-column: 6 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6) var(--gutter); }
.field { display: grid; gap: var(--space-2); }
.field--wide { grid-column: 1 / -1; }
.field label, .field legend { font: 600 0.9375rem/1.3 var(--font-ui); color: var(--ink); }
.field .req { color: var(--gold-text); font-weight: 600; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 52px; padding: 12px 14px; border: 2px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--ink); font: 400 1rem/1.4 var(--font-ui);
  transition: border-color 200ms var(--ease-out);
}
.field textarea { min-height: 160px; resize: vertical; }
.field select { appearance: none; background-image: none; padding-right: 40px; }
.field--select { position: relative; }
.field--select::after { content: ""; position: absolute; right: 16px; bottom: 21px; width: 8px; height: 8px; border-right: 2px solid var(--ink-muted); border-bottom: 2px solid var(--ink-muted); transform: rotate(45deg); pointer-events: none; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-muted); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brand); outline: 2px solid var(--focus); outline-offset: 2px; }
.field__error { display: none; font-size: 0.875rem; font-weight: 600; color: #B42318; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: #B42318; }
.field.is-invalid .field__error { display: block; }
.consent { grid-column: 1 / -1; display: grid; grid-template-columns: 24px 1fr; gap: var(--space-3); align-items: start; }
.consent input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--brand); }
.consent label { font-weight: 400; color: var(--ink-muted); }
.consent label a { color: var(--ink); text-decoration-thickness: 2px; text-decoration-color: var(--gold); }
.consent .field__error { grid-column: 2; }
.form__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); }
.form__note { color: var(--ink-muted); }
.form__failed { grid-column: 1 / -1; padding: var(--space-4); border-radius: 8px; background: #FEF3F2; color: #B42318; font-weight: 600; }
.form__failed a { color: inherit; }
.form__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 899px) {
  .booking__head > div, .booking__head .lead { grid-column: 1 / -1; }
  .booking__frame, .booking__frame > #cal-inline { min-height: 760px; }
  .write__intro, .form { grid-column: 1 / -1; }
  .form { grid-template-columns: 1fr; }
}

/* ---------- Work: an index, case stories, more clients ---------- */

.work-index { list-style: none; padding: 0; margin: 0; display: grid; }
.work-index a {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: var(--space-4);
  padding: 14px 0; border-top: 2px solid var(--line); text-decoration: none; color: var(--ink);
}
.work-index li:last-child a { border-bottom: 2px solid var(--line); }
.work-index b { font: var(--display-weight) clamp(1.0625rem, 1.4vw, 1.25rem)/1.25 var(--font-display); letter-spacing: -0.01em; transition: color 250ms var(--ease-out), translate 300ms var(--ease-out); }
.work-index span { font-size: 0.875rem; color: var(--ink-muted); text-align: right; }
.work-index a:hover b { color: var(--brand); translate: 6px 0; }

.stories { display: grid; gap: clamp(96px, 11vw, 168px); }
.story { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); row-gap: var(--space-12); align-items: center; scroll-margin-top: 112px; }
.story__visual { grid-column: 1 / span 7; position: relative; isolation: isolate; }
.story__body { grid-column: 9 / -1; position: relative; z-index: 1; }
.story:nth-child(even) .story__visual { grid-column: 6 / -1; grid-row: 1; }
.story:nth-child(even) .story__body { grid-column: 1 / span 4; grid-row: 1; }
.story__visual::before {
  content: ""; position: absolute; z-index: -1; width: 42%; aspect-ratio: 1; left: -8%; bottom: -14%;
  background: var(--brand-tint); border-radius: 14%; transform: rotate(45deg); translate: 0 calc(var(--lift, 0px) * 0.5);
}
.story:nth-child(even) .story__visual::before { left: auto; right: -8%; top: -12%; bottom: auto; }
.story__visual figcaption { margin-top: var(--space-3); }
.story__visual .ui { max-width: 560px; margin-inline: auto; }
.story__frame { position: relative; }
.story__inset { position: absolute; right: -2%; bottom: -18%; width: min(30%, 200px); }
.story__frame + figcaption { max-width: 64%; }
.story__inset .phone { width: 100%; border-width: 8px; border-radius: 28px; }
.story__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: var(--space-4); }
.story__meta b { font: 600 var(--step-label)/1.2 var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-text); }
.tag { display: inline-flex; padding: 4px 10px; border-radius: 999px; background: var(--surface-alt); color: var(--ink-muted); font: 600 0.8125rem/1.3 var(--font-ui); }
.section--alt .tag { background: var(--surface); }
.story__body .h-1 { font-size: clamp(2rem, 3.4vw, 3.25rem); margin-bottom: var(--space-4); }
.story__body .ticks { grid-template-columns: 1fr; margin-top: var(--space-6); }
.story__figs { list-style: none; padding: 0; margin: var(--space-8) 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6) var(--gutter); }
.story__figs b { display: block; font: var(--display-weight) var(--step-2)/1 var(--font-display); letter-spacing: calc(-0.02em * var(--track)); color: var(--brand); }
.story__figs li > span { display: block; margin-top: 6px; }
.story__body .text-link { display: inline-block; margin-top: var(--space-8); }

.more-work { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); margin-top: var(--space-12); list-style: none; padding: 0; }
.more-work li { padding: var(--space-6); border: 2px solid var(--line); border-radius: var(--radius); background: var(--surface); display: grid; gap: var(--space-3); align-content: start; }
.more-work .shot { margin-bottom: var(--space-3); }
.more-work .h-2 { font-size: clamp(1.25rem, 1.8vw, 1.75rem); }
.more-work p { color: var(--ink-muted); }
.more-work figure { margin: 0; }
.more-work .tag { background: var(--surface-alt); }
.work-more { margin-top: var(--space-12); }

@media (max-width: 899px) {
  .story__visual, .story__body,
  .story:nth-child(even) .story__visual, .story:nth-child(even) .story__body { grid-column: 1 / -1; grid-row: auto; }
  .story__inset { right: 0; bottom: -24%; width: 30%; }
  .story__meta b { flex-basis: 100%; }
  .story__visual { margin-bottom: var(--space-8); }
  .more-work { grid-template-columns: 1fr; }
}

/* ---------- About: the name, what we stand for, sectors, where we work ---------- */

.define { margin: 0; padding: clamp(24px, 3vw, 40px); border: 2px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.define__word { margin-top: var(--space-6); font: var(--display-weight) clamp(3rem, 4.6vw, 4.25rem)/1 var(--font-display); letter-spacing: calc(-0.03em * var(--track)); color: var(--ink); }
.define__say { margin-top: var(--space-3); color: var(--ink-muted); }
.define__senses { list-style: none; margin: var(--space-6) 0 0; padding: var(--space-6) 0 0; border-top: 2px solid var(--line); display: grid; gap: var(--space-3); counter-reset: sense; }
.define__senses li { counter-increment: sense; display: grid; grid-template-columns: 1.75em 1fr; font-size: var(--step-lead); }
.define__senses li::before { content: counter(sense) "."; font-weight: 600; color: var(--gold-text); }
.define__eg { margin-top: var(--space-6); padding: var(--space-4); border-radius: 8px; background: var(--brand-tint); }
.define__eg q { display: block; font: 600 var(--step-lead)/1.4 var(--font-display); quotes: none; }
.define__eg span { display: block; margin-top: 4px; color: var(--ink-muted); }

.belief__head { max-width: 860px; }
.belief__head .h-1 { margin-bottom: var(--space-6); }
.belief .principles { row-gap: var(--space-12); }
.belief .principles span { color: var(--ink); }

.sectors { list-style: none; padding: 0; margin: var(--space-12) 0 0; border-top: 2px solid var(--line); }
.sectors li { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); align-items: baseline; padding: var(--space-6) 0; border-bottom: 2px solid var(--line); }
.sectors h3 { grid-column: 1 / span 5; font-size: clamp(1.375rem, 2.2vw, 2rem); }
.sectors p { grid-column: 7 / -1; }

.where { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); row-gap: var(--space-12); align-items: start; }
.where__copy { grid-column: 1 / span 6; }
.where__copy .h-1 { margin-bottom: var(--space-6); }
.where__side { grid-column: 8 / -1; }
.company { margin: var(--space-12) 0 0; display: grid; grid-template-columns: max-content 1fr; gap: var(--space-3) var(--space-8); font-size: 0.9375rem; }
.company dt { font-weight: 600; }
.company dd { margin: 0; color: var(--ink-muted); }
.clocks { padding: 22px; font-size: 0.9375rem; }
.clocks .ui__row { padding: 14px 0; }
.clocks__place b, .clocks__now b { display: block; font-weight: 600; }
.clocks__place b { font-size: 1rem; }
.clocks__now { text-align: right; }
.clocks__now b { font: var(--display-weight) 1.75rem/1 var(--font-display); letter-spacing: -0.01em; color: var(--brand); }
.clocks small { display: block; margin-top: 4px; color: var(--ink-muted); font-size: 0.8125rem; }
.clocks small.ui__ok { display: inline-flex; color: #127A4B; font-weight: 600; }
.clocks__note { margin-top: var(--space-3); }

.paths { list-style: none; padding: 0; margin: var(--space-12) 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
.paths a { display: grid; gap: var(--space-3); align-content: start; height: 100%; padding: var(--space-8); border: 2px solid var(--line); border-radius: var(--radius); color: var(--ink); text-decoration: none; transition: border-color 300ms var(--ease-out), translate 300ms var(--ease-out); }
.paths a::before { content: ""; width: 12px; height: 12px; margin-bottom: var(--space-2); background: var(--gold); border-radius: 2px; transform: rotate(45deg); }
.paths .h-2 { font-size: clamp(1.25rem, 1.8vw, 1.75rem); }
.paths p { color: var(--ink-muted); }
.paths span { margin-top: var(--space-2); font-weight: 600; color: var(--brand); }
.paths a:hover { border-color: var(--brand); translate: 0 -4px; }

@media (max-width: 899px) {
  .sectors li { grid-template-columns: 1fr; row-gap: var(--space-2); }
  .sectors h3, .sectors p { grid-column: 1 / -1; }
  .where__copy, .where__side { grid-column: 1 / -1; }
  .paths { grid-template-columns: 1fr; }
}
@media (max-width: 599px) {
  .company { grid-template-columns: 1fr; gap: 2px; }
  .company dd + dt { margin-top: var(--space-3); }
}

/* ---------- Legal pages: a summary card, an index beside readable text ---------- */

.brief { margin: 0; padding: clamp(24px, 3vw, 40px); border: 2px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.brief .h-2 { margin-top: var(--space-6); font-size: clamp(1.375rem, 2vw, 1.75rem); }
.brief .ticks { grid-template-columns: 1fr; margin-top: var(--space-4); }
.brief a { color: var(--brand); }
.legal__meta { margin-top: var(--space-6); }

.legal { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); align-items: start; }
.legal .caps__index { grid-column: 1 / span 3; }
.legal__body { grid-column: 5 / -1; max-width: 680px; }
.legal__part { scroll-margin-top: 112px; padding-bottom: var(--space-12); }
.legal__part + .legal__part { padding-top: var(--space-12); border-top: 2px solid var(--line); }
.legal__part .h-2 { font-size: clamp(1.5rem, 2.4vw, 2.125rem); margin-bottom: var(--space-4); }
.legal__part h3 { font: 600 var(--step-lead)/1.4 var(--font-text); margin: var(--space-6) 0 var(--space-2); }
.legal__part p + p, .legal__part p + .ticks, .legal__part .ticks + p { margin-top: var(--space-4); }
.legal__part .ticks { grid-template-columns: 1fr; margin-top: var(--space-4); }
.legal__part h3:first-child { margin-top: 0; }
.legal__table + p { margin-top: var(--space-6); }
.legal__part a { color: var(--brand); }
.legal__table { width: 100%; border-collapse: collapse; margin-top: var(--space-6); font-size: 0.9375rem; }
.legal__table th, .legal__table td { text-align: left; vertical-align: top; padding: 12px 16px 12px 0; border-bottom: 2px solid var(--line); }
.legal__table th { font-weight: 600; }
.legal__table code { font: 600 0.875rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ---------- 404: the search that comes up empty ---------- */

.lost .work-index { margin-top: var(--space-12); }
.lost .lattice { width: min(100%, 460px); }

@media (max-width: 899px) {
  .legal__body { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 599px) {
  .legal__table thead { display: none; }
  .legal__table tr { display: block; padding: 12px 0; border-bottom: 2px solid var(--line); }
  .legal__table td { display: grid; grid-template-columns: 7.5em 1fr; gap: 8px; padding: 4px 0; border: 0; }
  .legal__table td::before { content: attr(data-label); font-weight: 600; }
}

/* ---------- Footer (template part: footer) ---------- */

.site-footer { padding-block: var(--space-12) var(--space-8); }
.site-footer__top { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); row-gap: var(--space-6); margin-top: var(--space-12); align-items: start; }
.site-footer__logo { grid-column: 1 / span 3; }
.site-footer__logo img { width: 160px; }
.site-footer__notes { grid-column: 4 / span 6; }
.site-footer__notes p + p { margin-top: var(--space-2); }
.site-footer__top .text-link { grid-column: 11 / -1; justify-self: end; }
.site-footer__mail {
  display: block; margin-block: clamp(56px, 9vw, 120px) clamp(40px, 6vw, 72px);
  font: var(--display-weight) clamp(2.25rem, 8.6vw, 8.25rem)/1 var(--font-display); letter-spacing: calc(-0.04em * var(--track));
  color: var(--brand); text-decoration: none;
}
.site-footer__mail span { transition: color 300ms var(--ease-out); }
.site-footer__mail .at { font-weight: 300; }
.site-footer__mail:hover span { color: var(--brand-strong); }
.site-footer__meta { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); row-gap: var(--space-4); color: var(--ink-muted); }
.site-footer__links { grid-column: 1 / span 6; list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.site-footer__links a { color: var(--ink); text-decoration: none; display: inline-block; padding-block: 6px; }
.site-footer__links a:hover { text-decoration: underline; }
.site-footer__cookies { font: inherit; color: var(--ink); background: none; border: 0; padding: 6px 0; cursor: pointer; }
.site-footer__cookies:hover { text-decoration: underline; }
.site-footer__legal { grid-column: 8 / -1; text-align: right; }

@media (max-width: 899px) {
  .site-footer__logo, .site-footer__notes, .site-footer__links, .site-footer__legal { grid-column: 1 / -1; text-align: left; }
  .site-footer__top .text-link { grid-column: 1 / -1; justify-self: start; }
  .site-footer__mail .at { display: block; }
}

/* ---------- Motion ---------- */

.js [data-reveal] > * { opacity: 0; transform: translateY(24px); }
.js [data-reveal].is-in > * {
  opacity: 1; transform: none;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 80ms);
}

/* Load: the headline's lines rise out of their own mask, then the sentence, the actions and the diamonds. */
@media (prefers-reduced-motion: no-preference) {
  .js .hero [data-line] { transform: translateY(110%); animation: load-line 900ms var(--ease-expo) forwards; animation-delay: calc(120ms + var(--i) * 110ms); }
  .js .hero [data-load] { opacity: 0; transform: translateY(14px); animation: load-rise 600ms var(--ease-out) forwards; animation-delay: var(--d); }
  .js .hero__art .gem, .js .page-hero__art .gem { opacity: 0; scale: 0.6; animation: load-gem 1100ms var(--ease-expo) forwards; animation-delay: calc(500ms + var(--g, 0) * 120ms); }
}
@keyframes load-line { to { transform: none; } }
@keyframes load-rise { to { opacity: 1; transform: none; } }
@keyframes load-gem { to { opacity: 1; scale: 1; } }

/* Signature move: once the lines are up, the diamond drops onto the i of "find". */
.js .found::after { opacity: 0; transform: translateY(-0.9em) scale(0.7); }
.js .is-landed .found::after,
.js .is-in .found::after {
  opacity: 1; transform: none;
  transition: opacity 300ms var(--ease-out) 1050ms, transform 900ms cubic-bezier(0.34, 1.56, 0.64, 1) 1050ms;
}

/* Rolling figures: each digit rolls up to its value once, the columns a beat apart.
   The strip of digits is drawn by CSS, so the page text stays the real figure. The hidden digit
   gives each column the width of the digit it lands on. */
.roll__digits { display: inline-flex; line-height: 1; }
.roll__col { display: inline-block; position: relative; height: 1em; overflow: clip; }
.roll__w { visibility: hidden; }
.roll__strip { position: absolute; left: 50%; top: 0; translate: -50% 0; transform: translateY(calc(var(--d) * -1em)); }
.roll__strip::before { content: "0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9"; white-space: pre; display: block; line-height: 1em; text-align: center; }
/* ---------- Cookie notice (template part: consent) ---------- */

.cookie-notice {
  position: fixed; z-index: 60; right: var(--space-6); bottom: var(--space-6);
  width: min(420px, calc(100vw - 2 * var(--space-6))); padding: var(--space-6);
  background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 20px 48px -28px rgba(15, 23, 42, 0.45);
}
.cookie-notice[hidden] { display: none; }
.cookie-notice .sig-rule { margin-bottom: var(--space-4); }
.cookie-notice__title { font: var(--display-weight) 1.25rem/1.2 var(--font-display); letter-spacing: -0.01em; }
.cookie-notice p { margin-top: var(--space-2); font-size: 0.9375rem; }
.cookie-notice p a { color: var(--brand); }
.cookie-notice__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-4); }
.cookie-notice.is-in { animation: notice-in 500ms var(--ease-out) both; }
@keyframes notice-in { from { opacity: 0; transform: translateY(16px); } }

@media (max-width: 599px) {
  .cookie-notice { left: var(--space-3); right: var(--space-3); bottom: var(--space-3); width: auto; padding: var(--space-4); }
  .cookie-notice .sig-rule { margin-bottom: var(--space-3); }
  .cookie-notice__title { font-size: 1.0625rem; }
  .cookie-notice p { font-size: 0.875rem; }
  .cookie-notice__actions { margin-top: var(--space-3); }
  .cookie-notice .btn { min-height: 44px; padding-inline: 12px; }
}

@media (prefers-reduced-motion: no-preference) {
  .roll:not(.is-in) .roll__strip { transform: none; }
  .roll.is-in .roll__strip { transition: transform 1200ms var(--ease-expo) calc(var(--i) * 90ms); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
  .js [data-reveal] > * { transform: none; }
  .js .found::after { opacity: 1; transform: none; }
  .watermark { rotate: 0deg; }
  .gem { translate: none; }
}