/* ==========================================================================
   DevPii · site.css
   DevPii brand palette: logo gold (#C5982C), charcoal and warm greys on white.
   The brand layer at the end adds the motifs of the DevPii banner.
   ========================================================================== */

:root {
  /* DevPii brand palette: logo gold, charcoal and warm greys on white.
     Legacy token names are kept so every component picks up the brand values. */
  --porcelain: #f6f5f2;   /* warm white page */
  --paper: #ffffff;
  --platinum-100: #efeeea;
  --platinum-200: #e4e3de;
  --platinum-300: #d1cfc8;
  --titanium-400: #9b9890;
  --titanium-600: #5f5d57;  /* secondary text, 6.4:1 on white */
  --midnight-700: #34343a;
  --midnight-800: #232328;
  --ink: #1c1c1f;           /* charcoal text */
  --plum-50: #fbf6ea;       /* gold tints */
  --plum-100: #f3e7c8;
  --plum-300: #e0c689;
  --plum-500: #b38a2a;
  --plum-600: #8e6a1b;      /* gold for text and small accents, 5:1 on white */
  --plum-700: #6f5213;
  --aubergine-800: #2a2a2f; /* charcoal surfaces */
  --aubergine-950: #161618;
  --violet-600: #5f5d57;
  --signal-50: #fbf6ea;
  --signal-400: #e2be66;    /* bright gold: glows, beams, lines on dark */
  --signal-600: #c5982c;    /* DevPii gold: buttons, highlights */
  --signal-700: #8e6a1b;    /* gold for links and hover */
  --gold-500: #c5982c;
  --gold-600: #c5982c;
  --charcoal: #1c1c1f;
  --wordmark: #4c4c4c;
  --error: #b23b26;

  --f-display: "Bodoni Moda", "Bodoni 72", Didot, "Times New Roman", serif;
  --f-sans: "Archivo", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  --f-mono: "Fragment Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --gutter: clamp(20px, 4vw, 48px);
  --section: clamp(80px, 9vw, 120px);
  --header-h: 72px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --shadow-raised: 0 1px 2px rgb(28 28 31 / 0.05), 0 24px 48px -28px rgb(28 28 31 / 0.28);
  color-scheme: light;
}


/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html:not(.has-lenis) { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--porcelain);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--f-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, canvas, video { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { margin: 0; font-family: var(--f-display); font-weight: 600; line-height: 1.04; letter-spacing: -0.025em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
a { color: var(--signal-700); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }
em { font-style: italic; color: var(--plum-600); }
button, input, select, textarea { font: inherit; color: inherit; }
code { font-family: var(--f-mono); font-size: 0.82em; }
:focus-visible { outline: 2px solid var(--signal-600); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--plum-600); color: var(--porcelain); }

.skip-link { position: absolute; left: 16px; top: -64px; z-index: 100; padding: 12px 16px; border-radius: 6px; background: var(--ink); color: var(--paper); font-weight: 600; }
.skip-link:focus { top: 16px; color: var(--paper); }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- layout ---------- */
.container { width: 100%; max-width: 1360px; margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: 920px; }
.section { padding-block: var(--section); }
.section + .section { padding-top: 0; }
.section.alt { background: var(--paper); border-block: 1px solid var(--platinum-200); padding-top: var(--section); }
.section.alt + .section { padding-top: var(--section); }
.section-head { display: grid; gap: 18px; max-width: 760px; margin-bottom: clamp(40px, 6vw, 72px); }
.section-head .lede { max-width: 58ch; }
.grid { display: grid; gap: 16px; }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 960px) { .grid-3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) { .grid-2 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- type ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 12px; font: 400 0.72rem/1.3 var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--plum-600); }
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; flex: none; }
.eyebrow--light { color: var(--plum-300); }
.label { font: 400 0.66rem/1.3 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--titanium-600); }
.title-xl { font-size: clamp(2.5rem, 5.4vw, 4.8rem); font-weight: 560; line-height: 1; letter-spacing: -0.032em; }
.title-lg { font-size: clamp(2.1rem, 4.2vw, 3.6rem); font-weight: 560; line-height: 1.02; letter-spacing: -0.03em; }
.title-md { font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -0.02em; }
.lede { font-size: clamp(1.06rem, 1.4vw, 1.2rem); color: var(--titanium-600); max-width: 62ch; }
.muted { color: var(--titanium-600); }
.prose { display: grid; gap: 18px; max-width: 68ch; }
.prose h2 { font-size: clamp(1.6rem, 2.6vw, 2.15rem); margin-top: 24px; }
.prose h3 { font-size: 1.25rem; margin-top: 8px; }
.prose ul { padding-left: 1.2em; display: grid; gap: 10px; }
.prose li::marker { color: var(--plum-600); }

/* ---------- header ---------- */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 50; border-bottom: 1px solid transparent; transition: background-color 0.3s, border-color 0.3s; }
.site-header.is-scrolled, .site-header.is-open {
  background: rgb(245 246 248 / 0.76);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border-bottom-color: var(--platinum-200);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header.is-scrolled, .site-header.is-open { background: var(--porcelain); }
}
.header-inner { height: var(--header-h); display: flex; align-items: center; gap: 24px; }
.brand { display: inline-flex; align-items: center; margin-right: auto; }
.brand img { width: auto; height: 30px; }
.nav ul { list-style: none; display: flex; gap: 2px; }
.nav a { display: block; padding: 8px 12px; border-radius: 6px; color: var(--titanium-600); font-size: 0.93rem; font-weight: 500; text-decoration: none; transition: color 0.2s; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"] { box-shadow: inset 0 -1px 0 var(--plum-600); border-radius: 0; }
.nav .nav-cta { display: none; }
.menu-toggle { display: none; align-items: center; gap: 10px; height: 40px; padding: 0 14px; border: 1px solid var(--platinum-300); border-radius: 7px; background: rgb(255 255 255 / 0.7); font-weight: 600; font-size: 0.9rem; cursor: pointer; }
.menu-toggle .bars { position: relative; width: 16px; height: 10px; }
.menu-toggle .bars::before, .menu-toggle .bars::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform 0.25s var(--ease-out), top 0.25s var(--ease-out); }
.menu-toggle .bars::before { top: 1px; }
.menu-toggle .bars::after { top: 7px; }
.menu-toggle[aria-expanded="true"] .bars::before { top: 4px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .bars::after { top: 4px; transform: rotate(-45deg); }
@media (max-width: 980px) {
  .menu-toggle { display: inline-flex; }
  .header-cta { display: none; }
  .nav { position: absolute; inset: var(--header-h) 0 auto 0; display: none; padding: 8px var(--gutter) 24px; background: var(--porcelain); border-bottom: 1px solid var(--platinum-200); }
  .site-header.is-open .nav { display: block; }
  .nav ul { flex-direction: column; }
  .nav a { padding: 15px 2px; font-size: 1.08rem; border-bottom: 1px solid var(--platinum-200); border-radius: 0; }
  .nav a[aria-current="page"] { box-shadow: none; color: var(--plum-600); }
  .nav .nav-cta { display: block; margin-top: 18px; }
  .nav .nav-cta a { border: 0; border-radius: 8px; background: var(--signal-600); color: var(--paper); text-align: center; font-weight: 600; }
}

/* ---------- buttons and links ---------- */
.btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border: 1px solid transparent; border-radius: 8px; font: 600 0.98rem/1 var(--f-sans); text-decoration: none; cursor: pointer; will-change: transform; transition: background-color 0.25s, border-color 0.25s, color 0.25s; }
.btn-label { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 10px; }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn-signal { background: var(--signal-600); color: var(--paper); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22), 0 1px 2px rgb(142 106 27 / 0.25), 0 16px 32px -16px rgb(197 152 44 / 0.65); }
.btn-signal:hover { background: var(--signal-700); color: var(--paper); }
.btn-outline { min-height: 42px; padding: 0 16px; border-color: var(--platinum-300); background: rgb(255 255 255 / 0.6); color: var(--ink); font-size: 0.88rem; white-space: nowrap; }
.btn-outline:hover { border-color: var(--ink); background: var(--paper); color: var(--ink); }
.btn-ghost-light { border-color: rgb(255 255 255 / 0.28); color: var(--porcelain); background: transparent; }
.btn-ghost-light:hover { border-color: var(--porcelain); color: var(--porcelain); }
.btn[disabled] { opacity: 0.6; cursor: progress; }
.magnet { display: inline-flex; padding: 14px; margin: -14px; }
@property --beam-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.beam::before { content: ""; position: absolute; inset: -1.5px; padding: 1.5px; border-radius: inherit; pointer-events: none; background: conic-gradient(from var(--beam-angle), transparent 0 62%, var(--signal-400) 74%, #ffffff 80%, transparent 90%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.link-quiet { position: relative; display: inline-block; padding-bottom: 4px; color: var(--ink); font-weight: 600; text-decoration: none; }
.link-quiet::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform-origin: left; }
.link-quiet:hover { color: var(--ink); }
.link-arrow { display: inline; color: var(--signal-700); font-weight: 600; text-decoration: none; }
.link-arrow svg { display: inline-block; width: 15px; height: 15px; margin-left: 0.3em; vertical-align: -0.15em; transition: transform 0.25s var(--ease-out); }
.link-arrow:hover { color: var(--ink); }
.link-arrow:hover svg { transform: translateX(3px); }

/* ---------- surfaces ---------- */
.card { --mx: 50%; --my: 0%; position: relative; display: grid; gap: 14px; align-content: start; min-width: 0; padding: clamp(24px, 3vw, 32px); background: radial-gradient(420px circle at var(--mx) var(--my), rgb(197 152 44 / 0.08), transparent 62%) no-repeat, var(--paper); background-size: 0 0, auto; border: 1px solid var(--platinum-200); border-radius: 14px; box-shadow: var(--shadow-raised); transition: border-color 0.25s, transform 0.35s var(--ease-out); }
.card.spot:hover { background-size: 100% 100%, auto; border-color: var(--platinum-300); transform: translateY(-3px); }
.card h3 { font-size: 1.5rem; }
.card p { color: var(--titanium-600); }
.card a.stretched::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card .link-arrow { margin-top: auto; }
.glass { background: rgb(255 255 255 / 0.62); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); border: 1px solid rgb(255 255 255 / 0.75); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.9), 0 1px 2px rgb(28 28 31 / 0.06), 0 22px 44px -22px rgb(28 28 31 / 0.28); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background: rgb(255 255 255 / 0.95); } }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--platinum-200); border-radius: 6px; background: var(--paper); color: var(--ink); font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: border-color 0.2s, background-color 0.2s, color 0.2s; }
.chip:hover { border-color: var(--titanium-400); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--porcelain); }
.chip svg { width: 16px; height: 16px; }
.chip-sm { min-height: 32px; padding: 0 10px; font-size: 0.82rem; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.tag { font: 400 0.72rem/1 var(--f-mono); padding: 6px 9px; border: 1px solid var(--platinum-300); border-radius: 999px; color: var(--titanium-600); }

/* ---------- hero ---------- */
.hero { position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: 100svh; overflow: hidden; background: var(--porcelain); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(42% 46% at 72% 48%, rgb(197 152 44 / 0.13), transparent 70%), radial-gradient(30% 30% at 88% 78%, rgb(197 152 44 / 0.07), transparent 70%); }
.hero-stage { position: absolute; inset: 0; z-index: -1; }
.hero-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s var(--ease-out); }
.hero.is-live .hero-stage canvas { opacity: 1; }
.hero-poster { position: absolute; left: 50%; top: calc(var(--header-h) + 8px); width: min(86vw, 30rem); transform: translateX(-50%); transition: opacity 0.9s var(--ease-out), visibility 0s 0.9s; }
.hero.is-live .hero-poster { opacity: 0; visibility: hidden; }
.hero-inner { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; width: 100%; max-width: 1440px; margin: 0 auto; padding: min(54svh, 112vw) var(--gutter) 36px; pointer-events: none; }
.hero-copy { max-width: 44rem; pointer-events: auto; }
.hero-title { margin-top: 26px; font-size: clamp(2.6rem, 5vw, 6.6rem); font-weight: 560; line-height: 0.95; letter-spacing: -0.035em; font-optical-sizing: auto; }
.hero-line { display: block; will-change: transform; }
.hero-line--end { padding-left: 1.15em; }
.hero-title em { position: relative; display: inline-block; padding-right: 0.06em; font-weight: 480; color: transparent; background: linear-gradient(100deg, var(--plum-600) 0 42%, var(--signal-600) 50%, var(--plum-600) 58% 100%); background-size: 300% 100%; background-position: 0 0; -webkit-background-clip: text; background-clip: text; }
.hero-underline { position: absolute; left: 0.04em; right: 0.14em; bottom: 0.04em; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--signal-600), var(--signal-400)); transform: scaleX(0); transform-origin: left; }
.hero-sub { margin-top: 28px; max-width: 34rem; font-size: clamp(1.05rem, 1.3vw, 1.15rem); color: var(--titanium-600); }
.hero-actions { margin-top: 34px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 34px; }
.hero-note { margin-top: 22px; font: 400 0.7rem/1.4 var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--titanium-600); }
.hero-tip { position: absolute; left: 0; top: 0; z-index: 5; display: flex; align-items: baseline; gap: 10px; padding: 9px 13px; border-radius: 10px; pointer-events: none; opacity: 0; transform: translate3d(calc(var(--x, -999px) + 18px), calc(var(--y, -999px) + 18px), 0); transition: opacity 0.2s; }
.hero-tip.is-on { opacity: 1; }
.hero-tip b { font-size: 0.9rem; }

.hud { position: relative; z-index: 2; display: grid; gap: 14px; width: auto; margin: 0 var(--gutter) 28px; padding: 18px; border-radius: 14px; transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out), visibility 0s; }
.hero:not(.is-live) .hud { opacity: 0; visibility: hidden; transform: translateY(16px); transition: none; }
.hero.is-static .hud { display: none; }
.hud-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.hud-state { font-size: 0.92rem; font-weight: 600; color: var(--titanium-600); }
.hud-state[data-state="on"] { color: var(--signal-700); }
.hud-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 12px; border-top: 1px solid var(--platinum-200); }
.hud-metrics strong { display: block; margin-top: 2px; font: 600 1.9rem/1.05 var(--f-display); font-variant-numeric: tabular-nums; }
.hud-metrics strong span { color: var(--titanium-600); }
.hud-controls { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid var(--platinum-200); }
.hud-controls .scale { display: flex; justify-content: space-between; }
.hud input[type="range"] { width: 100%; margin: 0; accent-color: var(--signal-600); cursor: pointer; }
.hud-play { height: 40px; border: 1px solid var(--platinum-300); border-radius: 8px; background: rgb(255 255 255 / 0.75); color: var(--ink); font: 600 0.85rem/1 var(--f-sans); cursor: pointer; transition: border-color 0.2s, background-color 0.2s; }
.hud-play:hover { border-color: var(--ink); background: var(--paper); }

.marquee { position: relative; z-index: 2; overflow: hidden; padding-block: 20px; border-top: 1px solid rgb(209 207 200 / 0.7); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee ul { display: flex; align-items: center; gap: 56px; width: max-content; padding-right: 56px; list-style: none; will-change: transform; }
.marquee li { white-space: nowrap; font: 500 1.35rem/1 var(--f-display); letter-spacing: -0.01em; color: var(--titanium-600); }
.marquee .label { position: absolute; left: var(--gutter); top: -9px; padding: 0 10px; background: var(--porcelain); }

@media (min-width: 1024px) and (min-aspect-ratio: 1/1) {
  .hero-poster { left: auto; right: 3vw; top: 50%; width: min(48vw, 46rem); transform: translateY(-50%); }
  .hero-inner { justify-content: center; padding: calc(var(--header-h) + 40px) var(--gutter) 120px; }
  .hero-copy { max-width: min(58rem, 55vw); }
  .hud { position: absolute; right: var(--gutter); bottom: 92px; width: 272px; margin: 0; padding: 16px; gap: 12px; }
}

/* ---------- problems ---------- */
.problem { display: grid; gap: 12px; padding-top: 22px; border-top: 1px solid var(--plum-600); }
.problem h3 { font-size: 1.45rem; }
.problem p { color: var(--titanium-600); }
.problem .label { color: var(--plum-600); }

/* ---------- module explorer ---------- */
.explorer { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (max-width: 980px) { .explorer { grid-template-columns: minmax(0, 1fr); } }
.ledger { display: grid; gap: 22px; }
.ledger-group { display: grid; gap: 6px; }
.ledger-group > .label { padding-bottom: 6px; border-bottom: 1px solid var(--platinum-200); }
.ledger-row { display: grid; grid-template-columns: 34px 22px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 1px solid transparent; border-radius: 10px; background: transparent; text-align: left; cursor: pointer; transition: background-color 0.2s, border-color 0.2s; }
.ledger-row:hover { background: var(--paper); border-color: var(--platinum-200); }
.ledger-row .code { font: 400 0.72rem/1 var(--f-mono); color: var(--plum-600); }
.ledger-row svg { width: 20px; height: 20px; color: var(--titanium-600); }
.ledger-row .name { display: grid; gap: 2px; font-weight: 600; }
.ledger-row .tick { width: 22px; height: 22px; border: 1px solid var(--platinum-300); border-radius: 6px; display: grid; place-items: center; transition: background-color 0.2s, border-color 0.2s; }
.ledger-row .tick::after { content: ""; width: 9px; height: 5px; border-left: 2px solid var(--paper); border-bottom: 2px solid var(--paper); transform: translateY(-1px) rotate(-45deg); opacity: 0; }
.ledger-row[aria-pressed="true"] { background: var(--paper); border-color: var(--platinum-200); }
.ledger-row[aria-pressed="true"] svg { color: var(--plum-600); }
.ledger-row[aria-pressed="true"] .tick { background: var(--plum-600); border-color: var(--plum-600); }
.ledger-row[aria-pressed="true"] .tick::after { opacity: 1; }
.ledger-row.is-focus { box-shadow: inset 2px 0 0 var(--signal-600); }
.console { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 22px; }
.map { width: 100%; height: auto; border-radius: 12px; background: radial-gradient(60% 60% at 50% 45%, rgb(197 152 44 / 0.07), transparent 70%), var(--porcelain); border: 1px solid var(--platinum-200); }
.map-edge { fill: none; stroke: var(--platinum-300); stroke-width: 1.2; transition: stroke 0.3s, opacity 0.3s; }
.map-edge.is-related { stroke: var(--plum-300); }
.map-edge.is-live { stroke: var(--signal-600); stroke-width: 1.6; stroke-dasharray: 5 6; }
.map-node { cursor: pointer; }
.map-node rect { fill: var(--paper); stroke: var(--platinum-300); stroke-width: 1.2; transition: fill 0.3s, stroke 0.3s; }
.map-node text { font: 400 9.5px/1 var(--f-mono); fill: var(--titanium-600); paint-order: stroke; stroke: var(--porcelain); stroke-width: 4px; stroke-linejoin: round; }
.map-node.is-selected rect { fill: var(--plum-600); stroke: var(--plum-600); }
.map-node.is-hover rect { stroke: var(--signal-600); stroke-width: 2; }
.map-node.is-focus rect { stroke: var(--signal-400); stroke-width: 3; }
.map-node.is-focus text { fill: var(--ink); }
.console-head { display: flex; align-items: center; gap: 16px; }
.console-head [data-c="glyph"] svg { width: 40px; height: 40px; color: var(--plum-600); }
.console-head h3 { font-size: 2rem; }
.console dl { display: grid; gap: 16px; margin: 0; }
.console dt { margin-bottom: 4px; }
.console dd { margin: 0; }
.stack { display: grid; gap: 12px; padding-top: 18px; border-top: 1px solid var(--platinum-200); }
.stack-figures { display: flex; gap: 28px; }
.stack-figures strong { display: block; font: 600 2rem/1 var(--f-display); font-variant-numeric: tabular-nums; }
.stack ul { list-style: none; display: grid; gap: 8px; font-size: 0.92rem; color: var(--titanium-600); }
.stack li b { color: var(--ink); font-weight: 600; margin-right: 6px; }

/* ---------- services ---------- */
.service .head { display: flex; align-items: center; justify-content: space-between; }
.service .facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding-top: 14px; border-top: 1px solid var(--platinum-200); }
.service .facts dd { margin: 2px 0 0; font-size: 0.92rem; }
.service { display: flex; flex-direction: column; }
.service .facts { margin-top: auto; }
.checklist { list-style: none; display: grid; gap: 9px; }
.checklist li { position: relative; padding-left: 24px; color: var(--ink); font-size: 0.96rem; }
.checklist li::before { content: ""; position: absolute; left: 3px; top: 0.6em; width: 9px; height: 5px; border-left: 1.5px solid var(--signal-600); border-bottom: 1.5px solid var(--signal-600); transform: rotate(-45deg); }
.secondary { margin-top: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--platinum-200); border-radius: 14px; background: var(--paper); }
.secondary > div { display: grid; gap: 6px; align-content: start; padding: 24px 26px; min-width: 0; }
.secondary > div + div { border-left: 1px solid var(--platinum-200); }
.secondary h3 { font-size: 1.2rem; }
.secondary p { color: var(--titanium-600); font-size: 0.95rem; }
@media (max-width: 860px) { .secondary { grid-template-columns: minmax(0, 1fr); } .secondary > div + div { border-left: 0; border-top: 1px solid var(--platinum-200); } }

/* ---------- engagement timeline ---------- */
.process { position: relative; list-style: none; display: grid; counter-reset: step; --progress: 0; }
.process::before, .process::after { content: ""; position: absolute; left: 16px; top: 10px; bottom: 10px; width: 1px; }
.process::before { background: var(--platinum-300); }
.process::after { background: var(--signal-600); transform-origin: top; transform: scaleY(var(--progress)); }
.process li { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) minmax(0, 1fr); gap: 4px 30px; padding-bottom: 40px; counter-increment: step; }
.process li:last-child { padding-bottom: 0; }
.process li::before { content: counter(step, decimal-leading-zero); position: relative; z-index: 1; width: 33px; height: 33px; display: grid; place-items: center; border: 1px solid var(--signal-600); border-radius: 50%; background: var(--porcelain); color: var(--signal-700); font: 400 0.72rem/1 var(--f-mono); }
.section.alt .process li::before { background: var(--paper); }
.process h3 { padding-top: 5px; font-size: 1.35rem; }
.process p { color: var(--titanium-600); }
.process .deliv { padding-top: 6px; color: var(--ink); font-size: 0.95rem; }
.process .deliv .label { display: block; margin-bottom: 2px; }
@media (max-width: 760px) { .process li { grid-template-columns: 34px minmax(0, 1fr); } .process .deliv { grid-column: 2; } }

/* ---------- stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--platinum-200); }
.stats > div { display: grid; gap: 6px; padding: 30px 22px; }
.stats > div + div { border-left: 1px solid var(--platinum-200); }
.stats strong { font: 560 clamp(2.4rem, 4.4vw, 3.6rem)/1 var(--f-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.stats strong span { color: var(--plum-600); }
.stats p { color: var(--titanium-600); font-size: 0.95rem; }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stats > div:nth-child(3) { border-left: 0; } .stats > div:nth-child(n + 3) { border-top: 1px solid var(--platinum-200); } }

/* ---------- testimonials ---------- */
.quote { gap: 20px; }
.quote blockquote { margin: 0; font: 400 clamp(1.15rem, 1.6vw, 1.32rem)/1.45 var(--f-display); letter-spacing: -0.01em; color: var(--ink); }
.quote blockquote::before { content: "\201C"; display: block; height: 0.5em; margin-bottom: 12px; font: 600 3.2rem/1 var(--f-display); color: var(--plum-600); }
.quote figcaption { display: flex; align-items: center; gap: 14px; margin-top: auto; }
.quote figcaption img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 1px solid var(--platinum-200); }
.quote figcaption b { display: block; }
.quote figcaption span { font-size: 0.86rem; color: var(--titanium-600); }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--platinum-200); }
.faq details { border-bottom: 1px solid var(--platinum-200); }
.faq summary { position: relative; padding: 24px 44px 24px 0; list-style: none; cursor: pointer; font: 600 1.25rem/1.3 var(--f-display); letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 10px; height: 10px; border-right: 1.5px solid var(--plum-600); border-bottom: 1.5px solid var(--plum-600); transform: translateY(-70%) rotate(45deg); transition: transform 0.25s var(--ease-out); }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq .answer { display: grid; gap: 10px; max-width: 70ch; padding-bottom: 24px; color: var(--titanium-600); }

/* ---------- dark band ---------- */
.band { position: relative; overflow: hidden; background: var(--aubergine-950); color: var(--porcelain); }
.band::before { content: ""; position: absolute; inset: -10%; pointer-events: none; background: radial-gradient(40% 50% at 85% 18%, rgb(197 152 44 / 0.55), transparent 70%), radial-gradient(35% 45% at 8% 92%, rgb(197 152 44 / 0.26), transparent 70%), radial-gradient(30% 40% at 50% 50%, rgb(95 93 87 / 0.2), transparent 70%); }
.band > * { position: relative; }
.band .title-lg, .band h3, .band h4 { color: var(--porcelain); }
.band .lede { color: var(--plum-100); }
.band .label { color: var(--plum-300); }
.band .field label { color: var(--porcelain); }
.band input[type="text"], .band input[type="email"], .band input[type="tel"], .band textarea { background: rgb(255 255 255 / 0.08); border-color: rgb(255 255 255 / 0.2); color: var(--porcelain); }
.band input::placeholder, .band textarea::placeholder { color: var(--plum-300); }
.band .form-status { color: var(--porcelain); }
.band .hint { color: var(--plum-300); }

/* ---------- forms ---------- */
.form { display: grid; gap: 16px; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 600px) { .form-row { grid-template-columns: minmax(0, 1fr); } }
.field { display: grid; gap: 6px; }
.field label { font-size: 0.9rem; font-weight: 500; }
.field label .opt { color: var(--titanium-600); font-weight: 400; }
.band .field label .opt { color: var(--plum-300); }
input[type="text"], input[type="email"], input[type="tel"], select, textarea { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--platinum-300); border-radius: 8px; background: var(--paper); color: var(--ink); transition: border-color 0.15s; }
textarea { min-height: 130px; resize: vertical; line-height: 1.55; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 0; border-color: var(--signal-600); }
.field-error { display: none; font-size: 0.84rem; color: var(--error); }
.band .field-error { color: #ffb4a6; }
.field.has-error input, .field.has-error textarea { border-color: var(--error); }
.field.has-error .field-error { display: block; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { display: none; padding: 12px 14px; border-radius: 8px; font-size: 0.94rem; }
.form-status.is-ok { display: block; border: 1px solid var(--signal-600); background: rgb(197 152 44 / 0.08); }
.form-status.is-err { display: block; border: 1px solid var(--error); background: rgb(178 59 38 / 0.06); }
.hint { font-size: 0.82rem; color: var(--titanium-600); }
.form-card { padding: clamp(24px, 3vw, 34px); border: 1px solid var(--platinum-200); border-radius: 16px; background: var(--paper); box-shadow: var(--shadow-raised); }

/* ---------- inner pages ---------- */
.page-hero { position: relative; overflow: hidden; padding: calc(var(--header-h) + clamp(56px, 8vw, 104px)) 0 clamp(48px, 6vw, 80px); border-bottom: 1px solid var(--platinum-200); }
.page-hero::before { content: ""; position: absolute; right: -8%; top: -30%; width: 60%; height: 150%; pointer-events: none; background: radial-gradient(40% 40% at 50% 50%, rgb(197 152 44 / 0.14), transparent 70%), radial-gradient(25% 25% at 70% 70%, rgb(197 152 44 / 0.06), transparent 70%); }
.page-hero .container { position: relative; display: grid; gap: 20px; }
.page-hero h1 { max-width: 18ch; }
.crumbs { font: 400 0.78rem/1.4 var(--f-mono); color: var(--titanium-600); }
.crumbs a { color: var(--titanium-600); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.crumbs span[aria-hidden] { margin-inline: 8px; }
.split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
@media (max-width: 960px) { .split { grid-template-columns: minmax(0, 1fr); } }
.aside { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 16px; }
.aside .facts { display: grid; gap: 12px; margin: 0; }
.aside .facts dd { margin: 2px 0 0; }
.cta-band { display: grid; gap: 22px; justify-items: start; }
.cta-band .title-lg { max-width: 20ch; }

/* ---------- footer ---------- */
.site-footer { position: relative; overflow: hidden; padding-block: 72px 32px; background: var(--aubergine-950); color: var(--plum-100); }
.site-footer::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(40% 60% at 90% 0%, rgb(197 152 44 / 0.45), transparent 70%); }
.site-footer > * { position: relative; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 36px; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } }
.footer-about { display: grid; gap: 18px; align-content: start; }
.footer-about img { height: 34px; width: auto; }
.footer-about p { max-width: 36ch; color: var(--plum-100); }
.footer-grid h2 { margin-bottom: 18px; font: 400 0.7rem/1.2 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--plum-300); }
.footer-grid ul { list-style: none; display: grid; gap: 10px; }
.footer-grid a { color: var(--porcelain); text-decoration: none; }
.footer-grid a:hover { color: var(--signal-400); }
.footer-grid address { display: grid; gap: 10px; font-style: normal; color: var(--plum-100); }
.socials { display: flex; gap: 10px; }
.socials a { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgb(255 255 255 / 0.2); border-radius: 50%; color: var(--plum-100); }
.socials a:hover { border-color: var(--porcelain); color: var(--porcelain); }
.socials svg { width: 17px; height: 17px; fill: currentColor; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 56px; padding-top: 24px; border-top: 1px solid rgb(255 255 255 / 0.12); font-size: 0.86rem; color: var(--plum-300); }
.wa-float { position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 40; width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; background: #25d366; color: #0b3d1e; box-shadow: 0 10px 28px rgb(28 28 31 / 0.28); transition: transform 0.25s var(--ease-out); }
.wa-float:hover { transform: translateY(-2px); color: #0b3d1e; }
.wa-float svg { width: 28px; height: 28px; fill: currentColor; }
.notfound { min-height: 72vh; display: grid; align-content: center; gap: 22px; padding-top: var(--header-h); }

/* ---------- motion ---------- */
[data-reveal] { transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
[data-reveal].is-pending { opacity: 0; transform: translate3d(0, 18px, 0); }
.is-split .kw { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 0.25em 0.14em; margin: 0 -0.25em -0.14em; }
.is-split .kw-i { display: inline-block; transition: transform 1.1s var(--ease-out); transition-delay: calc(var(--w, 0) * 42ms); }
.is-split.is-pending .kw-i { transform: translate3d(0, 112%, 0) rotate(2deg); }

@media (prefers-reduced-motion: no-preference) {
  /* Hero headline: transform only, visible from the first frame, so LCP is never delayed.
     `backwards` fill hands the transform to hero.js once the entrance ends. */
  .hero-line { animation: hero-settle 1.25s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 110ms + 60ms); }
  .hero-title em { animation: ink-sweep 2.8s 0.7s var(--ease-in-out) backwards; }
  .intro { animation: intro-fade 1s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 90ms + 380ms); }
  /* one turn on arrival; nothing loops on its own for longer than five seconds (WCAG 2.2.2) */
  .beam::before { animation: beam-spin 3.6s linear 1; }
  .link-quiet:hover::after { animation: link-sweep 0.75s var(--ease-in-out); }
  .map-edge.is-live { animation: flow 1.2s linear 4; }
}
@keyframes hero-settle { from { transform: translate3d(0, 0.32em, 0) skewY(2.4deg); } }
@keyframes ink-sweep { from { background-position: 100% 0; } }
@keyframes intro-fade { from { opacity: 0; transform: translate3d(0, 14px, 0); } }
@keyframes beam-spin { to { --beam-angle: 360deg; } }
@keyframes flow { to { stroke-dashoffset: -22; } }
@keyframes link-sweep { 0% { transform: scaleX(1); transform-origin: right; } 50% { transform: scaleX(0); transform-origin: right; } 50.1% { transform: scaleX(0); transform-origin: left; } 100% { transform: scaleX(1); transform-origin: left; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  [data-reveal].is-pending, .is-split.is-pending .kw-i { opacity: 1; transform: none; }
  .process { --progress: 1 !important; }
}
@media (forced-colors: active) { .hero-title em { background: none; color: CanvasText; } }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ---------- glyphs ---------- */
.glyph { width: 20px; height: 20px; flex: none; }
.service .head svg { width: 28px; height: 28px; color: var(--plum-600); }

/* ---------- timeline placement (number | step | deliverable) ---------- */
.process li { grid-template-columns: 34px minmax(0, 1.15fr) minmax(0, 1fr); }
.process li::before { grid-row: 1 / span 2; }
.process li > h3, .process li > p:not(.deliv) { grid-column: 2; }
.process li > .deliv { grid-column: 3; grid-row: 1 / span 2; }
@media (max-width: 760px) {
  .process li { grid-template-columns: 34px minmax(0, 1fr); }
  .process li > .deliv { grid-column: 2; grid-row: auto; }
}

/* ---------- mobile-first hero stage: a top block, not the whole hero ---------- */
.hero-stage { inset: 0 0 auto 0; height: min(66svh, 118vw); }
.hero-poster { top: 50%; left: 50%; transform: translate(-50%, -46%); width: min(84vw, 30rem); }
.hero-inner { padding-top: calc(min(66svh, 118vw) - 12px); }
@media (min-width: 1024px) and (min-aspect-ratio: 1/1) {
  .hero-stage { inset: 0; height: auto; }
  .hero-poster { left: auto; right: 3vw; top: 50%; width: min(48vw, 46rem); transform: translateY(-50%); }
  .hero-inner { padding-top: calc(var(--header-h) + 40px); }
}
@media (max-width: 980px) { .site-header .header-cta { display: none; } }

/* ---------- quotes ---------- */
.quote blockquote::before { font-size: 4.6rem; height: 0.42em; margin-bottom: 20px; }

/* ---------- nav current-page marker ---------- */
.nav a { position: relative; }
.nav a[aria-current="page"] { box-shadow: none; }
.nav a[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--plum-600); }
@media (max-width: 980px) { .nav a[aria-current="page"]::after { display: none; } }

/* ---------- compact timeline (no deliverable column) ---------- */
.process--compact li { grid-template-columns: 34px minmax(0, 1fr); padding-bottom: 24px; }
.process--compact h3 { font-size: 1.12rem; }

/* ==========================================================================
   Client dossier: home glimpse + case studies page (generated by the admin)
   ========================================================================== */
:root { --ease-in: cubic-bezier(0.7, 0, 0.84, 0); }

/* ---------- status dots (always paired with text) ---------- */
.dot { position: relative; display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex: none; }
.dot[data-s="progress"] { background: var(--signal-400); }
.dot[data-s="alliance"] { box-shadow: inset 0 0 0 1.5px var(--plum-600); }
.dot[data-s="ongoing"] { background: var(--plum-600); }
.dot[data-s="delivered"] { background: var(--ink); }
.is-offscreen .dot::after { animation-play-state: paused !important; }

/* ---------- the plate: one component behind every client tile ---------- */
.plate { --ar: 1.6; --mark-k: 0.4; --mark-max: 104px; --brand: var(--plum-600); position: relative; isolation: isolate; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; aspect-ratio: var(--ar); border: 1px solid var(--platinum-200); border-radius: 12px; container-type: inline-size; overflow: hidden; color: var(--ink); text-decoration: none; background: radial-gradient(60% 75% at 50% 50%, rgb(197 152 44 / 0.06), transparent 70%), var(--porcelain); }
.plate[data-group="new"] { background: linear-gradient(180deg, var(--plum-50), var(--porcelain)); box-shadow: inset 0 1px 0 var(--plum-300); }
.plate::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 80% at 50% 55%, color-mix(in srgb, var(--brand) 11%, transparent), transparent 72%); opacity: 0; transition: opacity 0.5s var(--ease-out); pointer-events: none; }
@supports not (color: color-mix(in srgb, red 10%, red)) { .plate::after { background: radial-gradient(70% 80% at 50% 55%, rgb(197 152 44 / 0.1), transparent 72%); } }
.plate-mark { grid-area: 1 / 1; display: block; height: min(calc(100cqi / var(--ar) * var(--mark-k)), var(--mark-max)); aspect-ratio: 2.6; max-width: 78cqi; transition: transform 0.6s var(--ease-out), translate 0.6s var(--ease-out); }
@supports not (width: 1cqi) { .plate-mark { height: 84px; } .plate--sm .plate-mark { height: 40px; } }
.plate-mark picture { display: contents; }
.plate-mark img { width: 100%; height: 100%; object-fit: contain; scale: var(--ls, 1); -webkit-user-drag: none; user-select: none; }
.plate-name { grid-area: 1 / 1; display: grid; justify-items: center; gap: 0.6em; max-width: 84cqi; padding-inline: 6cqi; text-align: center; transition: transform 0.6s var(--ease-out), translate 0.6s var(--ease-out); }
.plate-name b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font: 500 clamp(1.25rem, 8cqi, 2.6rem)/1.02 var(--f-display); letter-spacing: -0.028em; color: var(--ink); text-wrap: balance; overflow-wrap: anywhere; }
.plate--lg .plate-name[data-len="s"] b { font-size: clamp(1.4rem, 10cqi, 3rem); }
.plate--lg .plate-name[data-len="l"] b { font-size: clamp(1.1rem, 6.2cqi, 2.1rem); }
.plate-name small { display: grid; justify-items: center; gap: 8px; font: 400 0.6rem/1.2 var(--f-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--plum-600); }
.plate-name small::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.crop { position: absolute; width: 14px; height: 14px; border: 0 solid var(--platinum-300); transition: transform 0.4s var(--ease-out); pointer-events: none; }
.crop.tl { left: 10px; top: 10px; border-width: 1px 0 0 1px; transform-origin: 0 0; }
.crop.tr { right: 10px; top: 10px; border-width: 1px 1px 0 0; transform-origin: 100% 0; }
.crop.bl { left: 10px; bottom: 10px; border-width: 0 0 1px 1px; transform-origin: 0 100%; }
.crop.br { right: 10px; bottom: 10px; border-width: 0 1px 1px 0; transform-origin: 100% 100%; }
.plate--lg .plate-no, .plate--lg .plate-site, .plate--lg .plate-flag { position: absolute; left: 24px; font: 400 0.62rem/1 var(--f-mono); color: var(--titanium-600); }
.plate--lg .plate-no, .plate--lg .plate-flag { top: 20px; letter-spacing: 0.14em; text-transform: uppercase; }
.plate--lg .plate-flag { color: var(--plum-600); }
.plate-no span { color: var(--titanium-600); }
.plate--lg .plate-site { bottom: 20px; letter-spacing: 0.04em; }
.plate--lg .status { position: absolute; right: 18px; top: 14px; display: inline-flex; align-items: center; gap: 8px; min-height: 28px; padding: 0 11px; border-radius: 999px; font: 400 0.62rem/1 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); }
@media (max-width: 420px) { .plate--lg .plate-site { display: none; } }

/* small plate (home roster, page intro sheet) */
.plate--sm { --mark-k: 0.4; --mark-max: 56px; border-radius: 10px; background: var(--porcelain); transition: transform 0.35s var(--ease-out), border-color 0.25s; }
.plate--sm[data-group="new"] { background: linear-gradient(180deg, var(--plum-50), var(--paper)); }
.plate--sm .plate-name { padding-inline: 8cqi; }
.plate--sm .plate-name b { font-size: clamp(0.9rem, 8cqi, 1.3rem); }
.plate--sm .plate-name[data-len="s"] b { font-size: clamp(0.9rem, 9cqi, 1.3rem); }
.plate--sm .plate-name[data-len="l"] b { font-size: clamp(0.9rem, 6.5cqi, 1.3rem); }
.plate--sm .plate-flag { position: absolute; top: 9px; left: 10px; font: 400 0.56rem/1 var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--plum-600); }
.plate--sm > .dot { position: absolute; top: 11px; right: 11px; }
.plate--sm .plate-cap { position: absolute; left: 10px; right: 10px; bottom: 8px; font: 400 0.56rem/1.2 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; text-align: center; color: var(--titanium-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.25s; }
.plate--sm:hover::after, .plate--sm:focus-visible::after { opacity: 1; }
.plate--sm:hover .plate-mark, .plate--sm:focus-visible .plate-mark, .plate--sm:hover .plate-name, .plate--sm:focus-visible .plate-name { transform: scale(1.04); }
.plate--sm:hover .plate-cap, .plate--sm:focus-visible .plate-cap { color: var(--ink); }
.plate--sm:active { scale: 0.98; transition: scale 0.12s; }
.plate--sm:focus-visible { outline: 2px solid var(--signal-600); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .plate--sm:hover { transform: translateY(-3px); border-color: var(--platinum-300); } }
.plate--sm.plate--more .plate-name[data-len] b, .plate--more .plate-name b { font-size: clamp(0.9rem, 7cqi, 1.2rem); }

/* roster: a list of small plates, a rail on phones */
.roster { list-style: none; margin: 0; padding: 0; }
.roster-item { min-width: 0; }
.roster-wrap, .intro-sheet { position: relative; }
.roster-cursor { display: none; }
@media (max-width: 767px) {
  .roster { display: grid; grid-auto-flow: column; grid-auto-columns: 42%; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 10px; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
  .roster::-webkit-scrollbar { display: none; }
  .roster-item { scroll-snap-align: start; }
  .roster .plate--sm { --ar: 1.45; }
}
@media (min-width: 768px) {
  .roster-cursor { display: block; position: absolute; left: 0; top: 0; width: 100px; height: 2px; border-radius: 2px; background: var(--plum-600); transform-origin: 0 0; transform: translate3d(var(--x, 0px), var(--y, 0px), 0) scaleX(var(--w, 1)); opacity: 0; transition: transform 0.55s var(--ease-out), opacity 0.3s; pointer-events: none; }
  .roster-cursor.is-on { opacity: 1; }
}

/* ---------- home: the client glimpse ---------- */
.glimpse-grid { display: grid; grid-template-areas: "title" "intro" "roster" "legend" "foot"; row-gap: 28px; }
.glimpse-title { grid-area: title; display: grid; gap: 18px; }
.glimpse-lede { max-width: 52ch; }
.glimpse-intro { grid-area: intro; display: grid; gap: 14px; align-content: end; }
.glimpse .roster-wrap { grid-area: roster; }
.glimpse-legend { grid-area: legend; display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; }
.glimpse-legend span, .glimpse-feature .label { display: inline-flex; align-items: center; gap: 8px; }
.glimpse-foot { grid-area: foot; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.glimpse-feature { display: grid; gap: 10px; margin: 0; }
.glimpse-feature a { justify-self: start; max-width: 44ch; font: italic 400 clamp(1.15rem, 1.6vw, 1.4rem)/1.35 var(--f-display); color: var(--ink); text-decoration: none; background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px; transition: background-size 0.6s var(--ease-out); }
.glimpse-feature a:hover, .glimpse-feature a:focus-visible { background-size: 100% 1px; color: var(--ink); }
.glimpse-feature b { margin-right: 6px; font: 600 0.95rem var(--f-sans); font-style: normal; }
@media (min-width: 768px) {
  .glimpse .roster { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
  .glimpse .roster-item { flex: 0 0 calc((100% - 24px) / 4); }
}
@media (min-width: 1024px) {
  .glimpse-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "title intro" "roster roster" "legend foot"; column-gap: 56px; row-gap: clamp(36px, 4vw, 56px); }
  .glimpse-title, .glimpse-intro { align-self: end; }
  .glimpse-foot { justify-self: end; }
  .glimpse .roster-item { flex-basis: calc((100% - 40px) / 6); }
}
/* the roster assembles when it scrolls into view (the reveal engine removes .is-pending) */
.roster[data-reveal].is-pending { opacity: 1; transform: none; }
.roster.is-pending .plate { clip-path: inset(100% 0 0 0 round 10px); }
@media (prefers-reduced-motion: no-preference) {
  .roster[data-reveal]:not(.is-pending) .plate { animation: plate-in 0.9s var(--ease-in-out) backwards; animation-delay: calc(min(var(--i, 0), 11) * 40ms); }
  .roster[data-reveal]:not(.is-pending) .plate-mark, .roster[data-reveal]:not(.is-pending) .plate-name { animation: mark-in 1s var(--ease-out) backwards; animation-delay: calc(200ms + min(var(--i, 0), 11) * 40ms); }
  .roster[data-reveal]:not(.is-pending) .plate-flag, .roster[data-reveal]:not(.is-pending) .plate > .dot, .roster[data-reveal]:not(.is-pending) .plate-cap { animation: fade-in 0.5s var(--ease-out) backwards; animation-delay: calc(500ms + min(var(--i, 0), 11) * 40ms); }
  .dot[data-s="progress"]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; animation: dot-ping 2.4s var(--ease-out) infinite; }
}
@keyframes plate-in { from { clip-path: inset(100% 0 0 0 round 12px); } to { clip-path: inset(-8px round 16px); } }
@keyframes mark-in { from { opacity: 0; transform: scale(1.06); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes dot-ping { from { transform: scale(1); opacity: 0.55; } to { transform: scale(3.2); opacity: 0; } }

/* ---------- case studies: cinematic intro ---------- */
.page-hero.dossier-intro { padding-bottom: clamp(48px, 6vw, 88px); }
.dossier-intro .intro-grid { display: grid; grid-template-areas: "copy" "summary" "sheet"; gap: 32px; }
.intro-copy { grid-area: copy; display: grid; gap: 20px; align-content: start; }
.dossier-title { max-width: 14ch; }
.mline { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.mline-i { display: block; }
.dossier-summary { grid-area: summary; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; margin: 0; align-self: end; }
.dossier-summary > div { position: relative; display: grid; gap: 6px; padding-top: 12px; }
.dossier-summary > div::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--platinum-300); transform-origin: left; }
.dossier-summary > div:last-child { grid-column: 1 / -1; }
.dossier-summary dd { margin: 0; font: 500 clamp(1.6rem, 2.4vw, 2.2rem)/1 var(--f-display); font-variant-numeric: tabular-nums; }
.dossier-summary .dd-markets { font-size: 1.15rem; line-height: 1.25; }
.intro-sheet { grid-area: sheet; }
.sheet-tick { display: none; position: absolute; width: 14px; height: 14px; border: 0 solid var(--plum-300); pointer-events: none; }
.sheet-tick.tl { left: -12px; top: -12px; border-width: 1px 0 0 1px; transform-origin: 0 0; }
.sheet-tick.tr { right: -12px; top: -12px; border-width: 1px 1px 0 0; transform-origin: 100% 0; }
.sheet-tick.bl { left: -12px; bottom: -12px; border-width: 0 0 1px 1px; transform-origin: 0 100%; }
.sheet-tick.br { right: -12px; bottom: -12px; border-width: 0 1px 1px 0; transform-origin: 100% 100%; }
@media (max-width: 767px) { .roster--sheet .roster-item { --sx: 0px; } }
@media (min-width: 768px) {
  .dossier-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dossier-summary > div:last-child { grid-column: auto; }
  .roster--sheet { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .sheet-tick { display: block; }
}
@media (min-width: 1024px) {
  .dossier-intro .intro-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); grid-template-areas: "copy sheet" "summary sheet"; column-gap: 48px; }
  .intro-sheet { align-self: center; }
  .roster--sheet { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
}
@media (min-width: 1280px) { .dossier-intro .intro-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 64px; } }
@media (prefers-reduced-motion: no-preference) {
  .intro-in { animation: dossier-rise 0.8s var(--ease-out) backwards; animation-delay: var(--d, 0ms); }
  .dossier-intro .lede.intro-in { animation-duration: 0.9s; }
  .mline-i { animation: mline-rise 1.1s var(--ease-out) backwards; animation-delay: calc(120ms + var(--l, 0) * 120ms); }
  .roster--sheet .roster-item { animation: sheet-assemble 1.2s var(--ease-out) backwards; animation-delay: calc(380ms + min(var(--i, 0), 15) * 45ms); }
  .roster--sheet .plate-mark, .roster--sheet .plate-name { animation: mark-in 0.9s var(--ease-out) backwards; animation-delay: calc(680ms + min(var(--i, 0), 15) * 45ms); }
  .roster--sheet .plate-flag, .roster--sheet .plate > .dot, .roster--sheet .plate-cap { animation: fade-in 0.5s var(--ease-out) backwards; animation-delay: calc(900ms + min(var(--i, 0), 15) * 45ms); }
  .dossier-summary > div { animation: dossier-rise 0.8s var(--ease-out) backwards; animation-delay: calc(640ms + var(--k, 0) * 80ms); }
  .dossier-summary > div::before { animation: rule-draw 0.9s var(--ease-in-out) backwards; animation-delay: calc(640ms + var(--k, 0) * 80ms); }
  .sheet-tick { animation: tick-in 0.6s var(--ease-out) backwards; animation-delay: 1500ms; }
  .sheet-tick.tr { animation-delay: 1560ms; } .sheet-tick.bl { animation-delay: 1620ms; } .sheet-tick.br { animation-delay: 1680ms; }
}
@keyframes dossier-rise { from { opacity: 0; transform: translate3d(0, 12px, 0); } }
@keyframes mline-rise { from { transform: translate3d(0, 105%, 0); } }
@keyframes sheet-assemble { from { opacity: 0; transform: translate3d(var(--sx, 0px), var(--sy, 0px), 0) rotate(var(--sr, 0deg)) scale(0.92); } }
@keyframes rule-draw { from { transform: scaleX(0); } }
@keyframes tick-in { from { transform: scale(0); } }

/* ---------- case studies: the dossier stage ---------- */
.dossier-stage { position: relative; padding-bottom: var(--section); }
.rail-sentinel { position: absolute; left: 0; top: 0; width: 1px; height: 1px; }
.dossier-layout { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: clamp(32px, 3.6vw, 64px); }
.dossier-rail { grid-column: 1 / -1; position: sticky; top: var(--header-h); z-index: 20; align-self: start; display: flex; align-items: center; gap: 12px; margin: 0 calc(var(--gutter) * -1); padding: 10px var(--gutter); background: rgb(245 246 248 / 0.86); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); border-bottom: 1px solid transparent; transition: border-color 0.25s; }
.dossier-rail.is-stuck { border-bottom-color: var(--platinum-200); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .dossier-rail { background: var(--porcelain); } }
.dossier-filters { position: relative; display: flex; gap: 6px; flex: 1; min-width: 0; padding: 2px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.dossier-filters::-webkit-scrollbar { display: none; }
.dossier-filters .chip { flex: none; min-height: 36px; white-space: nowrap; scroll-snap-align: start; }
.chip-n { font: 400 0.66rem/1 var(--f-mono); color: var(--titanium-600); }
.chip[aria-pressed="true"] .chip-n { color: var(--platinum-300); }
.filters-ink { position: absolute; left: 0; top: 0; display: flex; gap: 6px; width: max-content; height: 100%; padding: 2px; pointer-events: none; z-index: 1; clip-path: inset(var(--t, 0px) var(--r, 100%) var(--b, 0px) var(--l, 0px) round 6px); transition: clip-path 0.42s var(--ease-out); }
.filters-ink .chip { flex: none; min-height: 36px; white-space: nowrap; background: var(--ink); border-color: var(--ink); color: var(--porcelain); }
.filters-ink .chip-n { color: var(--platinum-300); }
.dossier-filters:not(.has-ink) .filters-ink { display: none; }
.dossier-filters.has-ink .chip[aria-pressed="true"] { background: var(--paper); border-color: var(--platinum-200); color: var(--ink); }
.dossier-filters.has-ink .chip[aria-pressed="true"] .chip-n { color: var(--titanium-600); }
.dossier-count { display: none; margin: 0; white-space: nowrap; }
.dossier-count b { font-weight: 400; color: var(--ink); }
.dossier-toc { position: static; }
.toc-toggle { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border: 1px solid var(--platinum-300); border-radius: 8px; background: var(--paper); font-weight: 600; font-size: 0.9rem; cursor: pointer; list-style: none; white-space: nowrap; }
.toc-toggle::-webkit-details-marker { display: none; }
.toc-toggle::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid var(--plum-600); border-bottom: 1.5px solid var(--plum-600); transform: translateY(-2px) rotate(45deg); transition: transform 0.25s var(--ease-out); }
.dossier-toc[open] .toc-toggle::after { transform: translateY(2px) rotate(-135deg); }
.toc-toggle .label { display: none; }
.toc-panel { position: absolute; right: var(--gutter); top: calc(100% + 8px); width: min(380px, calc(100vw - 2 * var(--gutter))); max-height: 62svh; overflow: auto; overscroll-behavior: contain; padding: 6px 16px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--platinum-200); box-shadow: 0 22px 44px -22px rgb(28 28 31 / 0.32); }
@media (max-width: 1279px) { .dossier-toc:not(.is-ready) > .toc-panel { display: none; } }
.ix-group { display: flex; justify-content: space-between; margin: 0; padding: 18px 0 8px; border-bottom: 1px solid var(--platinum-300); font: 400 0.64rem/1 var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--plum-600); }
.ix-group:first-child { padding-top: 6px; }
.ix-list { list-style: none; margin: 0; padding: 0; }
.ix-list li[hidden], .chapter[hidden], .chapter-head[hidden] { display: none !important; }
.ix-link { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: 8px; row-gap: 3px; min-height: 52px; padding: 10px 4px 10px 12px; border-bottom: 1px solid var(--platinum-200); color: var(--ink); text-decoration: none; }
.ix-link:hover { color: var(--ink); }
.ix-no { grid-row: 1 / span 2; font: 400 0.7rem/1 var(--f-mono); color: var(--titanium-600); transition: color 0.3s; }
.ix-name { font: 500 1.05rem/1.15 var(--f-display); letter-spacing: -0.01em; opacity: 0.64; transition: opacity 0.35s var(--ease-out), transform 0.6s var(--ease-out); }
.ix-status { grid-column: 2; display: inline-flex; align-items: center; gap: 6px; font: 400 0.6rem/1 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--titanium-600); }
.ix-link[aria-current="true"] { background: var(--porcelain); box-shadow: inset 2px 0 0 var(--plum-600); }
.ix-link[aria-current="true"] .ix-name { opacity: 1; }
.ix-link[aria-current="true"] .ix-no { color: var(--plum-600); }
.ix-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--plum-600); transform: scaleX(0); transform-origin: left; transition: transform 0.7s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .ix-link:hover .ix-name { opacity: 1; transform: translateX(6px); } .ix-link:hover::after { transform: scaleX(1); } }
.ix-cursor { display: none; }
.dossier-chapters { min-width: 0; }
.chapter-head { position: relative; display: grid; gap: 10px; padding-block: clamp(56px, 7vw, 104px) 28px; }
.dossier-chapters > .chapter-head:first-child { padding-top: clamp(40px, 5vw, 64px); }
.ch-numeral { position: absolute; right: 0; top: 24px; font: italic 400 clamp(4rem, 9vw, 8rem)/1 var(--f-display); color: var(--plum-100); pointer-events: none; user-select: none; }
.ch-title { position: relative; font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 560; letter-spacing: -0.03em; }
.ch-lede { position: relative; max-width: 52ch; color: var(--titanium-600); }
.ch-count { position: relative; margin: 0; }
.ch-rule { display: block; height: 1px; margin-top: 18px; background: var(--plum-600); transform-origin: left; }
.chapter { position: relative; display: grid; gap: 20px; padding-block: clamp(40px, 5vw, 72px); border-top: 1px solid var(--platinum-200); scroll-margin-top: calc(var(--header-h) + 76px); }
.chapter-head + .chapter { border-top: 0; }
.chapter:focus { outline: none; }
.chapter:focus-visible { outline: 2px solid var(--signal-600); outline-offset: 12px; border-radius: 16px; }
.chapter-plate .plate { --ar: 1.6; --mark-k: 0.42; border-radius: 14px; box-shadow: var(--shadow-raised); }
.chapter:focus-within .chapter-plate .plate::after { opacity: 1; }
.chapter-body { position: relative; display: grid; gap: 14px; max-width: 62ch; }
.chapter-body::before { content: ""; position: absolute; left: -20px; top: 4px; bottom: 4px; width: 2px; border-radius: 2px; background: var(--plum-600); transform: scaleY(0); transform-origin: top; transition: transform 0.3s var(--ease-in); display: none; }
.chapter.is-current .chapter-body::before { transform: scaleY(1); transition: transform 0.6s var(--ease-out); }
.chapter-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 0; font: 400 0.66rem/1.3 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--titanium-600); }
.ch-no span { color: var(--titanium-600); }
.status-text { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); }
.chapter-kicker { margin: 0; color: var(--plum-600); }
.chapter-name { font: 560 clamp(1.9rem, 3vw, 2.6rem)/1.02 var(--f-display); letter-spacing: -0.03em; }
.chapter-standfirst { margin: 0; max-width: 34ch; font: italic 400 clamp(1.2rem, 1.7vw, 1.45rem)/1.35 var(--f-display); color: var(--ink); }
.brief { display: grid; gap: 18px; margin: 10px 0 0; }
.brief-block { position: relative; display: grid; gap: 6px; padding-top: 14px; }
.brief-block dt b { margin-right: 8px; font-weight: 400; color: var(--plum-600); }
.brief-block dd { margin: 0; font-size: 0.98rem; line-height: 1.6; color: var(--ink); }
.brief-rule { position: absolute; inset: 0 0 auto 0; height: 1px; background: var(--platinum-300); transform-origin: left; transition: transform 0.9s var(--ease-in-out); transition-delay: calc(var(--i, 0) * 90ms + 180ms); }
.brief-block:last-child .brief-rule { background: var(--plum-300); }
.brief-block[data-reveal] { transition-delay: calc(var(--i, 0) * 90ms + 180ms); }
.brief-block.is-pending .brief-rule { transform: scaleX(0); }
.brief[data-open="true"] .brief-block:last-child .brief-rule { right: 38%; }
.brief[data-open="true"] .brief-block:last-child::before { content: ""; position: absolute; left: 62%; right: 0; top: 0; height: 1px; background: repeating-linear-gradient(90deg, var(--platinum-300) 0 4px, transparent 4px 8px); transition: opacity 0.3s 1s; }
.brief-block.is-pending::before { opacity: 0; }
.brief-node { position: absolute; left: 62%; top: -3px; translate: -50% 0; transition: transform 0.4s var(--ease-out) 1.05s; }
.brief-block.is-pending .brief-node { transform: scale(0); }
.chapter-foot { display: grid; gap: 14px; padding-top: 16px; border-top: 1px solid var(--platinum-200); }
.chapter-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin: 0; }
.chapter.is-target::after { content: ""; position: absolute; inset: -12px; border: 1.5px solid var(--plum-600); border-radius: 18px; pointer-events: none; animation: target-ring 1.6s var(--ease-out) both; }
@keyframes target-ring { 0% { opacity: 0; } 20% { opacity: 1; } 60% { opacity: 1; } 100% { opacity: 0; } }
.chapter:has(.chapter-foot a:focus-visible) .chapter-body { outline: 2px solid var(--signal-600); outline-offset: 14px; border-radius: 12px; }
/* inline chapter plate entrance (phones and tablets) */
.chapter-plate[data-reveal].is-pending { opacity: 1; transform: none; }
.chapter-plate .plate { clip-path: inset(-48px round 14px); transition: clip-path 1s var(--ease-in-out); }
.chapter-plate.is-pending .plate { clip-path: inset(100% 0 0 0 round 14px); }
.chapter-plate .plate-mark, .chapter-plate .plate-name { transition: opacity 1.1s var(--ease-out) 0.25s, transform 1.1s var(--ease-out) 0.25s; }
.chapter-plate.is-pending .plate-mark, .chapter-plate.is-pending .plate-name { opacity: 0; transform: scale(1.06); }
.chapter-plate .crop { transition: transform 0.6s var(--ease-out) 0.45s; }
.chapter-plate.is-pending .crop { transform: scale(0); }
.chapter-plate .plate-no, .chapter-plate .status, .chapter-plate .plate-site { transition: opacity 0.5s var(--ease-out) 0.6s; }
.chapter-plate.is-pending .plate-no, .chapter-plate.is-pending .status, .chapter-plate.is-pending .plate-site { opacity: 0; }

/* sticky viewer */
.dossier-viewer { display: none; }
.viewer-frame { --var: 1.333; display: grid; gap: 0; padding: 10px; border-radius: 18px; }
.viewer-frame.spot:hover { transform: none; }
.viewer-stack { position: relative; display: grid; }
.vitem { grid-area: 1 / 1; display: grid; min-width: 0; visibility: hidden; }
.vitem.is-active, .vitem.is-leaving { visibility: visible; }
.vitem.is-active { z-index: 2; }
.vitem.is-leaving { z-index: 1; }
.viewer-frame .plate { --ar: var(--var); }
.viewer-marks { position: absolute; left: 0; right: 0; top: 0; aspect-ratio: var(--var); z-index: 3; pointer-events: none; }
.plate-scan { position: absolute; inset: 0; opacity: 0; }
.plate-scan::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--plum-500) 30% 70%, transparent); box-shadow: 0 0 18px 2px rgb(197 152 44 / 0.25); }
.vmeta { display: grid; gap: 6px; height: 64px; padding: 16px 10px 4px; }
.vmeta p { margin: 0; overflow: hidden; }
.vmeta span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vmeta-name { font: 600 1rem/1.3 var(--f-sans); }
.viewer-bar { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 10px 6px; border-top: 1px solid var(--platinum-200); }
.vcount { display: inline-flex; align-items: baseline; gap: 4px; font: 400 0.7rem/1 var(--f-mono); letter-spacing: 0.14em; color: var(--titanium-600); }
.roll { display: inline-grid; overflow: hidden; height: 1.1em; line-height: 1.1; color: var(--ink); }
.roll > span { grid-area: 1 / 1; }
.vprogress { flex: 1; height: 1px; background: var(--platinum-200); overflow: hidden; }
.vprogress i { display: block; height: 100%; background: var(--plum-600); transform-origin: left; transform: scaleX(0); }
.viewer-step { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--ink); cursor: pointer; transition: opacity 0.3s var(--ease-out), transform 0.2s var(--ease-out); }
.viewer-step svg { width: 16px; height: 16px; }
.viewer-step:active { transform: scale(0.94); }
.viewer-step[aria-disabled="true"] { opacity: 0.35; cursor: default; }
@media (hover: hover) and (pointer: fine) { .viewer-step { opacity: 0.45; } .viewer-step[aria-disabled="true"] { opacity: 0.2; } .viewer-frame:hover .viewer-step, .viewer-frame:focus-within .viewer-step { opacity: 1; } .viewer-frame:hover .viewer-step[aria-disabled="true"], .viewer-frame:focus-within .viewer-step[aria-disabled="true"] { opacity: 0.35; } }
.viewer-frame:hover .vitem.is-active .plate::after, .viewer-frame:focus-within .vitem.is-active .plate::after { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .viewer-frame:hover .crop { transform: scale(1.45); } }
.vitem.is-active .plate-mark, .vitem.is-active .plate-name { translate: calc(var(--px, 0) * 6px) calc(var(--py, 0) * 4px); }
.dossier-viewer.is-pending .vitem.is-active .plate { clip-path: inset(100% 0 0 0 round 12px); }
.dossier-viewer.is-pending .vitem.is-active .plate-mark, .dossier-viewer.is-pending .vitem.is-active .plate-name { opacity: 0; }
.dossier-viewer.is-pending .crop { transform: scale(0); }

@media (min-width: 768px) {
  .dossier-count { display: block; }
  .toc-toggle .label { display: inline; }
  .chapter { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; align-items: start; }
  .chapter-plate { position: sticky; top: calc(var(--header-h) + 84px); }
  .chapter-plate .plate { --ar: 1.333; --mark-k: 0.4; }
}
@media (min-width: 1024px) {
  .dossier-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .dossier-chapters { grid-column: 1; grid-row: 2; }
  .dossier-viewer { display: block; grid-column: 2; grid-row: 2; position: sticky; top: calc(var(--header-h) + 88px); align-self: start; padding-top: clamp(40px, 5vw, 64px); }
  .chapter { grid-template-columns: minmax(0, 1fr); }
  .chapter-plate { display: none; }
  .chapter-body::before { display: block; }
  .brief-block { grid-template-columns: 132px minmax(0, 1fr); column-gap: 18px; }
}
@media (min-width: 1024px) and (max-height: 760px) { .viewer-frame { --var: 1.6; } }
@media (min-width: 1024px) and (max-height: 600px) { .dossier-viewer { position: relative; top: auto; } }
@media (min-width: 1280px) {
  .dossier-layout { grid-template-columns: minmax(0, 2.6fr) minmax(0, 5.2fr) minmax(0, 4.2fr); align-items: start; }
  .dossier-rail { grid-column: 1; grid-row: 1; position: sticky; top: calc(var(--header-h) + 32px); display: grid; gap: 18px; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; max-height: calc(100svh - var(--header-h) - 64px); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .dossier-filters { flex-wrap: wrap; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .filters-ink { flex-wrap: wrap; width: 100%; }
  .toc-toggle { display: none; }
  .toc-panel { position: relative; right: auto; top: auto; width: auto; max-height: none; overflow: visible; padding: 0; border: 0; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
  .ix-link { grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-rows: auto; min-height: 44px; padding: 8px 4px 8px 14px; }
  .ix-no { grid-row: auto; }
  .ix-status { grid-column: auto; }
  .ix-status > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ix-link[aria-current="true"] { background: none; box-shadow: none; }
  .ix-link[aria-current="true"] .ix-name { transform: translateX(6px); }
  .ix-cursor { display: block; position: absolute; left: 0; top: 0; width: 2px; height: 100px; background: var(--plum-600); transform-origin: 0 0; transform: translate3d(0, var(--cy, 0px), 0) scaleY(var(--ch, 0.44)); transition: transform 0.65s var(--ease-out); pointer-events: none; }
  .dossier-chapters { grid-column: 2; grid-row: 1; }
  .dossier-viewer { grid-column: 3; grid-row: 1; top: calc(var(--header-h) + 32px); }
  .chapter { scroll-margin-top: calc(var(--header-h) + 32px); }
  .brief-block { grid-template-columns: minmax(0, 1fr); }
}

/* chapter heads: scroll-driven where supported, otherwise a one-time reveal */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .ch-title { animation: ch-wipe linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
    .ch-rule { animation: rule-draw-tl linear both; animation-timeline: view(); animation-range: entry 10% cover 45%; }
    .ch-numeral { animation: ch-parallax linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  }
  .chapter-head.is-armed .ch-title { clip-path: inset(-0.2em 100% -0.2em -0.2em); transition: clip-path 1s var(--ease-in-out); }
  .chapter-head.is-armed .ch-rule { transform: scaleX(0); transition: transform 0.9s var(--ease-in-out) 0.15s; }
  .chapter-head.is-armed.is-in .ch-title { clip-path: inset(-0.2em -0.2em -0.2em -0.2em); }
  .chapter-head.is-armed.is-in .ch-rule { transform: none; }
}
@keyframes ch-wipe { from { clip-path: inset(-0.2em 100% -0.2em -0.2em); } to { clip-path: inset(-0.2em -0.2em -0.2em -0.2em); } }
@keyframes rule-draw-tl { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ch-parallax { from { transform: translate3d(0, 28px, 0); } to { transform: translate3d(0, -28px, 0); } }

/* filtering with View Transitions */
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-group(*) { animation-duration: 0.6s; animation-timing-function: var(--ease-out); }
::view-transition-old(*) { animation: vt-out 0.22s var(--ease-in) both; }
::view-transition-new(*) { animation: vt-in 0.36s var(--ease-out) 0.12s both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }

/* closing call to action */
.dossier-cta .title-lg em { color: var(--plum-300); }

/* capability, contrast and print fallbacks */
.dossier--static .dossier-viewer, .dossier--static .ix-cursor { display: none !important; }
.dossier--static .chapter-plate { display: block !important; }
@media (prefers-contrast: more) { .ix-no, .ch-no span, .plate-no span { color: var(--ink); } .ix-name { opacity: 1; } .plate--sm .plate-cap, .chapter-meta { color: var(--ink); } .plate { border-color: var(--platinum-300); } }
@media (forced-colors: active) {
  .dot, .ix-cursor, .roster-cursor, .vprogress i { forced-color-adjust: none; background: Highlight; }
  .plate { border-color: CanvasText; }
  .filters-ink { display: none !important; }
  .chip[aria-pressed="true"] { outline: 2px solid Highlight; }
}
@media print {
  .dossier-viewer, .dossier-rail, .intro-sheet, .dossier-cta, .roster-cursor { display: none !important; }
  .chapter { break-inside: avoid; grid-template-columns: minmax(0, 1fr) !important; }
  .chapter-plate { display: block !important; position: static !important; }
  .chapter-links a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}

/* small plates: the per-logo optical boost applies, within the admin's 0.7-1.4 range */
.plate--sm { padding: 16px 0 18px; }
.plate--sm .plate-mark { height: min(calc(100cqi / var(--ar) * 0.42), 54px); }
.plate--sm .plate-mark img { scale: min(var(--ls, 1), 1.4); }
@media (max-width: 767px) { .plate--sm .plate-cap { left: 6px; right: 6px; font-size: 0.52rem; letter-spacing: 0.06em; } }

/* ==========================================================================
   DevPii brand layer: logo gold, charcoal and warm greys, with the motifs of
   the DevPii banner: charcoal panels with gold edges, dot textures, gold orbit
   arcs, and a gold underline with a dot under section titles.
   ========================================================================== */

/* ---------- type and accents ---------- */
em { color: #9c761d; }
.eyebrow::before { height: 2px; background: var(--gold-600); }
.label { color: var(--titanium-600); }
:focus-visible { outline-color: var(--ink); }
.section-head .title-lg::after, .glimpse-title .title-lg::after, .cta-band .title-lg::after, .page-hero h1::after {
  content: ""; display: block; width: 96px; height: 8px; margin-top: 22px;
  background: radial-gradient(circle, var(--gold-600) 0 3px, transparent 3.5px) 50% 50% / 8px 8px no-repeat, linear-gradient(var(--gold-600), var(--gold-600)) 0 50% / 100% 1.5px no-repeat;
}
.cta-band .title-lg::after { margin-inline: 0; }

/* ---------- buttons ---------- */
.btn-signal { background: linear-gradient(180deg, #d5aa45, var(--gold-600)); color: var(--ink); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35), 0 1px 2px rgb(28 28 31 / 0.18), 0 18px 34px -16px rgb(197 152 44 / 0.8); }
.btn-signal:hover { background: var(--ink); color: var(--signal-400); }
.site-header .header-cta { border-color: var(--ink); background: var(--ink); color: #fff; }
.site-header .header-cta:hover { border-color: var(--gold-600); background: var(--gold-600); color: var(--ink); }
.nav a[aria-current="page"]::after { background: var(--gold-600); }
.nav .nav-cta a { background: var(--gold-600); color: var(--ink); }
.link-arrow { color: var(--plum-600); }
.link-arrow:hover { color: var(--ink); }
.btn-ghost-light { border-color: rgb(255 255 255 / 0.3); }
.btn-ghost-light:hover { border-color: var(--signal-400); color: var(--signal-400); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---------- section surfaces ---------- */
.section.tex-dots, .section.tex-grid, .section.deco-arcs, .section.surface-warm, .section.stats-band, .section.glimpse--dark, .promise-band { position: relative; isolation: isolate; }
.section.surface-warm, .section.stats-band, .section.glimpse--dark { padding-top: var(--section); }
.section.surface-warm + .section, .section.stats-band + .section, .section.glimpse--dark + .section, .promise-band + .section { padding-top: var(--section); }
/* fine dot grid, fading from one corner (the banner's texture) */
.tex-dots::before, .page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(rgb(28 28 31 / 0.16) 1px, transparent 1.5px) 0 0 / 20px 20px; -webkit-mask-image: radial-gradient(55% 75% at 100% 0%, #000, transparent 72%); mask-image: radial-gradient(55% 75% at 100% 0%, #000, transparent 72%); }
/* blueprint grid for the delivery timeline */
.tex-grid::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(rgb(28 28 31 / 0.05) 1px, transparent 1px) 0 0 / 56px 56px, linear-gradient(90deg, rgb(28 28 31 / 0.05) 1px, transparent 1px) 0 0 / 56px 56px; -webkit-mask-image: radial-gradient(70% 60% at 20% 40%, #000, transparent 75%); mask-image: radial-gradient(70% 60% at 20% 40%, #000, transparent 75%); }
/* warm grey band with a large faint DevPii mark */
.section.surface-warm { background: linear-gradient(180deg, #f1f0ec, #ebe9e4); border-block: 1px solid var(--platinum-200); overflow: hidden; overflow: clip; }
.mark-right::after, .mark-left::after { content: ""; position: absolute; z-index: -1; top: 6%; width: min(34vw, 460px); aspect-ratio: 124 / 151; background: url("../brand/devpii-mark.svg") no-repeat center / contain; opacity: 0.07; pointer-events: none; }
.mark-right::after { right: -5vw; }
.mark-left::after { left: -6vw; top: auto; bottom: -8%; }
/* gold orbit arcs (services) */
.section.deco-arcs { overflow: hidden; overflow: clip; }
.deco-arcs::before { content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.deco-arcs::before { width: 820px; height: 820px; right: -360px; top: -260px; border: 1px solid rgb(197 152 44 / 0.4); box-shadow: inset 0 0 0 70px rgb(197 152 44 / 0.025); }
/* below 1200px the heading spans the arc area, so the arc would run through the text */
@media (max-width: 1199px) { .deco-arcs::before { display: none; } }

/* ---------- hero: warm studio, charcoal client band with a gold edge ---------- */
.hero { background: #f4f3ef; }
.hero::before { background: radial-gradient(42% 46% at 72% 48%, rgb(197 152 44 / 0.12), transparent 70%), radial-gradient(30% 30% at 90% 80%, rgb(28 28 31 / 0.05), transparent 70%); }
.hero .marquee { -webkit-mask-image: none; mask-image: none; border-top: 0; padding-block: 18px; background: linear-gradient(90deg, #121214, #26262b 60%, #1c1c1f); box-shadow: inset 0 2px 0 var(--gold-600); }
.hero .marquee::before, .hero .marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 1; pointer-events: none; }
.hero .marquee::before { left: 0; background: linear-gradient(90deg, #121214, transparent); }
.hero .marquee::after { right: 0; background: linear-gradient(270deg, #1c1c1f, transparent); }
.hero .marquee li { display: inline-flex; align-items: center; gap: 56px; color: rgb(255 255 255 / 0.86); }
.hero .marquee li::after { content: ""; width: 6px; height: 6px; transform: rotate(45deg); background: var(--gold-600); }
.hero .marquee ul { gap: 56px; }
.hud-state[data-state="on"] { color: var(--plum-600); }
.hud input[type="range"] { accent-color: var(--gold-600); }

/* ---------- brand promises (from the DevPii banner) ---------- */
.promise-band { padding-block: clamp(36px, 5vw, 56px); background: var(--paper); border-bottom: 1px solid var(--platinum-200); }
.promise-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.promise { display: flex; align-items: flex-start; gap: 16px; padding: 6px 28px; }
.promise + .promise { border-left: 1px solid var(--platinum-200); }
.promise:first-child { padding-left: 0; }
.promise-icon { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 12px; background: var(--ink); color: var(--signal-400); box-shadow: 0 10px 22px -12px rgb(28 28 31 / 0.6); }
.promise-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.promise p { display: grid; gap: 4px; }
.promise b { font: 600 1.02rem/1.25 var(--f-sans); }
.promise span { font-size: 0.92rem; color: var(--titanium-600); }
@media (max-width: 860px) { .promise-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; } .promise { padding: 0; } .promise + .promise { border-left: 0; } }

/* ---------- cards: a gold edge that draws in on hover ---------- */
.card.spot::before { content: ""; position: absolute; left: 22px; right: 22px; top: -1px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--gold-600), var(--signal-400)); transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--ease-out); }
.card.spot:hover::before { transform: scaleX(1); }
.service .head svg { box-sizing: content-box; width: 24px; height: 24px; padding: 11px; border-radius: 12px; background: var(--ink); color: var(--signal-400); }
.problem { border-top: 2px solid var(--gold-600); }
.quote blockquote::before { color: var(--gold-600); }
.stats strong span { color: #9c761d; }
.secondary { background: var(--paper); }

/* ---------- numbers band: gold ---------- */
.section.stats-band { padding-block: clamp(56px, 7vw, 96px); background: linear-gradient(115deg, #fbf4e1 0%, #f1e1b6 100%); border-block: 1px solid #e8d49d; overflow: hidden; overflow: clip; }
.stats-band::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(rgb(142 106 27 / 0.22) 1px, transparent 1.5px) 0 0 / 18px 18px; -webkit-mask-image: linear-gradient(90deg, transparent 40%, #000); mask-image: linear-gradient(90deg, transparent 40%, #000); }
.stats-band .stats { border-block: 0; }
.stats-band .stats > div + div { border-left-color: rgb(142 106 27 / 0.25); }
.stats-band .stats p { color: #5a4a26; }
@media (max-width: 760px) { .stats-band .stats > div:nth-child(n + 3) { border-top-color: rgb(142 106 27 / 0.25); } }

/* ---------- home client glimpse: a dark stage where the logos shine ---------- */
.section.glimpse--dark { background: radial-gradient(55% 80% at 88% 0%, rgb(197 152 44 / 0.18), transparent 70%), radial-gradient(40% 60% at 0% 100%, rgb(197 152 44 / 0.08), transparent 70%), linear-gradient(180deg, #1b1b1e, #111113); border-block: 0; color: #fff; overflow: hidden; overflow: clip; }
.glimpse--dark::before { content: ""; position: absolute; width: 900px; height: 900px; right: -420px; top: -460px; z-index: -1; border-radius: 50%; border: 1px solid rgb(226 190 102 / 0.28); box-shadow: 0 0 0 90px rgb(226 190 102 / 0.03); pointer-events: none; }
.glimpse--dark .eyebrow { color: var(--signal-400); }
.glimpse--dark .title-lg { color: #fff; }
.glimpse--dark em { color: var(--signal-400); }
.glimpse--dark .lede, .glimpse--dark .glimpse-feature a span { color: rgb(255 255 255 / 0.78); }
.glimpse--dark .glimpse-feature a { color: #fff; }
.glimpse--dark .glimpse-feature a:hover, .glimpse--dark .glimpse-feature a:focus-visible { color: #fff; }
.glimpse--dark .label { color: rgb(255 255 255 / 0.62); }
.glimpse--dark .plate--sm { border-color: rgb(255 255 255 / 0.08); box-shadow: 0 18px 36px -24px rgb(0 0 0 / 0.9); }
.glimpse--dark .plate--sm .plate-cap { color: var(--titanium-600); }
.glimpse--dark .link-quiet { color: #fff; }
.glimpse--dark .roster-cursor { background: var(--signal-400); }
.glimpse--dark :focus-visible { outline-color: var(--signal-400); }
.glimpse--dark .glimpse-legend .dot[data-s="alliance"], .glimpse--dark .glimpse-feature .dot[data-s="alliance"] { box-shadow: inset 0 0 0 1.5px var(--signal-400); }
.glimpse--dark .glimpse-legend .dot[data-s="ongoing"], .glimpse--dark .glimpse-feature .dot[data-s="ongoing"] { background: #fff; }
.glimpse--dark .glimpse-legend .dot[data-s="delivered"], .glimpse--dark .glimpse-feature .dot[data-s="delivered"] { background: rgb(255 255 255 / 0.4); }

/* ---------- dark bands and footer: charcoal with gold light ---------- */
.band::before { background: radial-gradient(40% 50% at 85% 18%, rgb(197 152 44 / 0.22), transparent 70%), radial-gradient(35% 45% at 8% 92%, rgb(197 152 44 / 0.1), transparent 70%); }
.band { background: linear-gradient(180deg, #1b1b1e, #121214); }
.site-footer { background: linear-gradient(180deg, #19191c, #0f0f11); border-top: 2px solid var(--gold-600); }
.site-footer::before { background: radial-gradient(40% 60% at 90% 0%, rgb(197 152 44 / 0.16), transparent 70%); }
.footer-lockup { width: min(260px, 100%); height: auto; }
.footer-about .footer-lockup { height: auto; }
.footer-tagline { font: italic 400 1.12rem/1.4 var(--f-display); color: #fff; }
.footer-tagline b { font-weight: 500; color: var(--signal-400); }
.footer-grid a:hover { color: var(--signal-400); }

/* ---------- inner page heroes: the banner's charcoal panel with a gold edge ---------- */
.page-hero { background: linear-gradient(115deg, #fbfaf7 0%, #efeee9 100%); border-bottom: 1px solid var(--platinum-200); isolation: isolate; }
.page-hero::before { width: auto; height: auto; -webkit-mask-image: radial-gradient(45% 80% at 0% 0%, #000, transparent 72%); mask-image: radial-gradient(45% 80% at 0% 0%, #000, transparent 72%); }
.page-hero::after { content: ""; position: absolute; top: var(--header-h); right: 0; bottom: 0; width: min(38vw, 560px); z-index: -1; pointer-events: none; background: url("../brand/devpii-mark.svg") no-repeat 64% 52% / 34% auto, radial-gradient(70% 60% at 70% 40%, rgb(197 152 44 / 0.16), transparent 70%), linear-gradient(160deg, #2a2a2f, #121214); clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%); }
.page-hero .container { z-index: 1; }
@media (max-width: 1023px) { .page-hero::after { width: 44vw; bottom: auto; height: 46%; background-size: 30% auto, auto, auto; clip-path: polygon(40% 0, 100% 0, 100% 100%, 0 0); opacity: 0.95; } }
@media (max-width: 600px) { .page-hero::after { width: 38vw; height: 30%; background-image: linear-gradient(160deg, #2a2a2f, #121214); } }
/* the case studies intro sheet sits on the dark panel */
.dossier-intro.page-hero::after { width: min(48vw, 700px); background-image: radial-gradient(60% 60% at 60% 45%, rgb(197 152 44 / 0.18), transparent 70%), linear-gradient(160deg, #2a2a2f, #121214); clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%); }
@media (max-width: 1023px) { .dossier-intro.page-hero::after { width: 44vw; height: 34%; clip-path: polygon(40% 0, 100% 0, 100% 100%, 0 0); } }
.intro-sheet .plate--sm { box-shadow: 0 16px 34px -22px rgb(0 0 0 / 0.75); }
@media (min-width: 1024px) { .sheet-tick { border-color: var(--signal-400); } }

/* ---------- dossier status dots and index on the brand palette ---------- */
.dot[data-s="progress"] { background: var(--gold-600); }
.ix-link[aria-current="true"] { box-shadow: inset 2px 0 0 var(--gold-600); }
.ix-cursor, .dossier-cursor, .vprogress i, .ch-rule, .chapter-body::before { background: var(--gold-600); }
.ch-numeral { color: #efe2bf; }
.dossier-cta .title-lg em { color: var(--signal-400); }
.dossier-rail { justify-content: flex-end; }
@media (min-width: 1280px) { .dossier-rail { padding-top: 0; } .ix-link { min-height: 40px; padding-block: 6px; } }
@media (min-width: 1280px) and (max-height: 860px) { .ix-link { min-height: 34px; padding-block: 4px; } }
.stats-band .stats strong { color: var(--gold-600); }
.stats-band .stats strong span { color: var(--ink); }
.promise-icon { width: 52px; height: 52px; background: linear-gradient(160deg, #2a2a2f, #121214); }
.promise-icon svg { width: 26px; height: 26px; stroke-width: 1.8; color: var(--signal-400); }
/* Phones: the dark panel becomes a corner wedge with a gold edge, clear of the headline. */
@media (max-width: 600px) {
  .page-hero::after, .dossier-intro.page-hero::after { width: 36vw; height: 132px; bottom: auto; clip-path: none; opacity: 1; background: linear-gradient(to bottom left, #232327 0 49.2%, var(--gold-600) 49.2% 50.4%, transparent 50.4%); }
}

/* ---------- review fixes ---------- */
/* Status is never colour alone: ring = announced, disc = in progress (pulses) or ongoing (haloed), square = delivered. */
.dot[data-s="ongoing"] { box-shadow: 0 0 0 2px rgb(142 106 27 / 0.22); }
.dot[data-s="delivered"] { border-radius: 1.5px; }
@media (forced-colors: active) { .dot { border: 1px solid CanvasText; } }
/* Contact-sheet nameplates: the plates are small, so the name gets the room (the dot and the flag carry the status), whole words only. */
.roster--sheet .plate-cap { display: none; }
.roster--sheet .plate-name { padding-inline: 6cqi; }
.roster--sheet .plate--sm:has(.plate-name) { padding: 22px 0 10px; }
.roster--sheet .plate-name b, .roster--sheet .plate-name[data-len] b { font-size: clamp(0.72rem, 11.5cqi, 1.1rem); line-height: 1.08; overflow-wrap: normal; word-break: normal; }
/* Short desktop viewports: the viewer scrolls with the page, aligned with its columns. */
@media (min-width: 1280px) and (max-height: 600px) { .dossier-viewer { top: auto; } }
/* Script fallback: the index sits in the page flow, the viewer's column goes to the files. */
.dossier--static .toc-toggle { display: none !important; }
.dossier--static .dossier-rail { position: static; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.dossier--static .dossier-toc > .toc-panel { display: block; position: static; width: auto; max-height: none; overflow: visible; box-shadow: none; background: none; border: 0; }
@media (min-width: 1024px) and (max-width: 1279px) { .dossier--static .dossier-layout { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1280px) { .dossier--static .dossier-layout { grid-template-columns: minmax(0, 2.6fr) minmax(0, 9.4fr); } }
/* Print: anything still waiting to be revealed prints in its final state. */
@media print {
  [data-reveal].is-pending, .is-split.is-pending .kw-i,
  .chapter-plate.is-pending .plate-mark, .chapter-plate.is-pending .plate-name,
  .chapter-plate.is-pending .plate-no, .chapter-plate.is-pending .status, .chapter-plate.is-pending .plate-site,
  .brief-block.is-pending::before { opacity: 1 !important; transform: none !important; transition: none !important; }
  .chapter-plate.is-pending .plate, .roster.is-pending .plate { clip-path: none !important; transition: none !important; }
  .brief-block.is-pending .brief-rule, .brief-block.is-pending .brief-node, .chapter-plate.is-pending .crop { transform: none !important; transition: none !important; }
  .marquee-toggle { display: none !important; }
}
/* Client strip pause control */
.marquee-toggle { position: absolute; right: max(12px, calc(var(--gutter) - 22px)); top: 50%; z-index: 3; width: 34px; height: 34px; display: grid; place-items: center; margin-top: -17px; border-radius: 50%; border: 1px solid rgb(197 152 44 / 0.55); background: rgb(18 18 20 / 0.86); color: var(--signal-400); cursor: pointer; transition: border-color 0.2s, transform 0.2s var(--ease-out); }
.marquee-toggle:hover { border-color: var(--signal-400); }
.marquee-toggle:active { transform: scale(0.94); }
.marquee-toggle:focus-visible { outline: 2px solid var(--signal-400); outline-offset: 3px; }
.marquee-toggle svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.marquee-toggle .i-play { display: none; fill: currentColor; stroke-width: 1.4; }
.marquee-toggle[aria-pressed="true"] .i-play { display: inline; }
.marquee-toggle[aria-pressed="true"] .i-pause { display: none; }
.marquee:not(.hero .marquee) .marquee-toggle { background: var(--paper, #fff); }

/* @@v23-parts:start (generated from assets/css/parts, do not edit here) */

/* --- 00-shell.css --- */
/* ==========================================================================
   v2.3 · shell: navigation with the Services menu, footer, Odoo partner badge
   ========================================================================== */

/* ---------- primary navigation ---------- */
.nav-list { list-style: none; display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; }
.nav-drop { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 0; border-radius: 6px; background: none; color: var(--titanium-600); font-family: var(--f-sans); font-size: 0.93rem; font-weight: 500; line-height: inherit; cursor: pointer; transition: color 0.2s; }
.nav-drop:hover, .nav-drop[aria-expanded="true"], .nav-drop.is-current { color: var(--ink); }
/* the site's ink focus ring: gold measured 2.4:1 on the porcelain header */
.nav-drop:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.nav-drop .chev { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.3s var(--ease-out); }
.nav-drop[aria-expanded="true"] .chev { transform: rotate(180deg); }
.nav-drop.is-current::after { content: ""; position: absolute; left: 12px; right: 30px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--gold-600); }

/* links inside the Services menu use their own styling, not the top-level link style */
.nav .mega a { padding: 0; border: 0; border-radius: 0; font-size: inherit; font-weight: inherit; color: inherit; }
.nav .mega a[aria-current="page"]::after { display: none; }
/* the Odoo partner badge keeps its capsule inside the Services menu (.nav a and .nav .mega a would otherwise flatten it to a bare white block) */
.nav .mega a.odoo-badge { display: inline-flex; align-items: center; justify-self: start; gap: 10px; width: max-content; max-width: 100%; padding: 8px 10px 8px 12px; border: 1px solid var(--platinum-200); border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgb(28 28 31 / 0.06); transition: border-color 0.25s, transform 0.25s var(--ease-out), box-shadow 0.25s; }
.nav .mega a.odoo-badge:hover, .nav .mega a.odoo-badge:focus-visible { border-color: #21b799; transform: translateY(-1px); box-shadow: 0 12px 24px -16px rgb(33 183 153 / 0.6); }

.nav .mega-list { list-style: none; display: grid; gap: 4px; margin: 0; padding: 0; }
.mega-item { position: relative; display: grid; border-radius: 12px; transition: background-color 0.2s; }
.mega-item:hover, .mega-item:focus-within { background: linear-gradient(120deg, var(--plum-50), rgb(255 255 255 / 0)); }
.nav .mega .mega-link { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px; border-radius: 12px; color: var(--ink); text-decoration: none; }
.mega-link:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.mega-ico { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 11px; background: linear-gradient(160deg, #2c2c31, #121214); color: var(--signal-400); box-shadow: inset 0 0 0 1px rgb(197 152 44 / 0.35), 0 10px 20px -12px rgb(28 28 31 / 0.6); transition: transform 0.35s var(--ease-out), box-shadow 0.35s; }
.mega-item:hover .mega-ico { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgb(226 190 102 / 0.7), 0 14px 24px -12px rgb(197 152 44 / 0.55); }
.mega-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mega-txt { display: grid; gap: 3px; min-width: 0; }
.mega-txt b { font-weight: 650; font-size: 0.97rem; line-height: 1.25; }
/* the description line is the direct child span; a span inside the title <b> (e.g. a no-wrap service name) keeps the title style */
.mega-txt > span { color: var(--titanium-600); font-size: 0.86rem; line-height: 1.4; }
.mega-link[aria-current="page"] .mega-txt b { color: var(--plum-600); }
.mega-sub { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -6px; padding: 0 14px 12px 72px; }
.nav .mega .mega-sub a { padding: 4px 10px; border: 1px solid var(--platinum-300); border-radius: 999px; color: var(--titanium-600); font-size: 0.78rem; text-decoration: none; transition: border-color 0.2s, color 0.2s; }
.nav .mega .mega-sub a:hover, .nav .mega .mega-sub a[aria-current="page"] { border-color: var(--gold-600); color: var(--ink); }
.mega-aside { display: grid; align-content: start; gap: 14px; padding: 22px; border: 1px solid var(--platinum-200); border-radius: 12px; background: radial-gradient(120% 80% at 100% 0%, rgb(197 152 44 / 0.16), transparent 60%), linear-gradient(160deg, #fff, var(--plum-50)); }
.mega-aside p { color: var(--titanium-600); font-size: 0.9rem; line-height: 1.5; }
.nav .mega .mega-aside .link-arrow { display: inline-flex; align-items: center; gap: 8px; color: var(--plum-600); font-weight: 600; font-size: 0.92rem; }
.nav .mega .mega-aside .link-arrow svg { margin-left: 0; vertical-align: baseline; }
.nav .mega .mega-aside .link-arrow:hover { color: var(--ink); }

@media (min-width: 981px) {
  .mega { position: absolute; left: 0; right: 0; top: calc(var(--header-h) - 1px); padding-inline: var(--gutter); visibility: hidden; opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity 0.22s var(--ease-out), transform 0.35s var(--ease-out), visibility 0s linear 0.35s; }
  .has-mega.is-open .mega { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition: opacity 0.22s var(--ease-out), transform 0.35s var(--ease-out), visibility 0s; }
  .mega-inner { max-width: 1264px; margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 10px; padding: 12px; border: 1px solid var(--platinum-200); border-top: 2px solid var(--gold-600); border-radius: 0 0 18px 18px; background: linear-gradient(180deg, #fff, #faf9f6); box-shadow: 0 48px 90px -44px rgb(28 28 31 / 0.5); }
  .nav .mega-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .has-mega.is-open .mega-item { animation: mega-in 0.45s var(--ease-out) backwards; }
  .has-mega.is-open .mega-item:nth-child(2) { animation-delay: 30ms; }
  .has-mega.is-open .mega-item:nth-child(3) { animation-delay: 60ms; }
  .has-mega.is-open .mega-item:nth-child(4) { animation-delay: 90ms; }
  .has-mega.is-open .mega-item:nth-child(5) { animation-delay: 120ms; }
  .has-mega.is-open .mega-item:nth-child(6) { animation-delay: 150ms; }
}
@keyframes mega-in { from { opacity: 0; transform: translateY(6px); } }
@media (min-width: 981px) and (max-width: 1180px) { .nav-list > li > a, .nav-drop { padding-inline: 9px; } .mega-inner { grid-template-columns: minmax(0, 1fr) 250px; } }

@media (max-width: 980px) {
  .nav { max-height: calc(100dvh - var(--header-h)); overflow-y: auto; overscroll-behavior: contain; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-drop { width: 100%; justify-content: space-between; padding: 15px 2px; border-bottom: 1px solid var(--platinum-200); border-radius: 0; font-size: 1.08rem; color: var(--ink); }
  .nav-drop.is-current { color: var(--plum-600); }
  .nav-drop.is-current::after { display: none; }
  .mega { display: none; padding: 8px 0 14px; border-bottom: 1px solid var(--platinum-200); }
  .has-mega.is-open .mega { display: block; animation: mega-in 0.35s var(--ease-out); }
  .mega-inner { display: grid; gap: 12px; }
  .nav .mega .mega-link { padding: 10px 4px; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; }
  .mega-ico { width: 38px; height: 38px; border-radius: 10px; }
  .mega-ico svg { width: 19px; height: 19px; }
  .mega-txt > span { font-size: 0.82rem; }
  .mega-sub { padding: 0 4px 8px 54px; }
  .mega-aside { padding: 16px; }
  .mega-aside p { display: none; }
  /* the menu already ends with the big "Start a project" button */
  .nav .mega .mega-aside .link-arrow[href="discovery.html"] { display: none; }
  /* the open menu is a full-height sheet, so the page never shows half-visible under it */
  .site-header.is-open .nav { min-height: calc(100dvh - var(--header-h)); box-shadow: 0 24px 48px -24px rgb(28 28 31 / 0.35); }
}
/* the floating WhatsApp button steps aside while the menu is open */
body:has(.site-header.is-open) .wa-float { opacity: 0; visibility: hidden; pointer-events: none; }

/* ---------- Odoo partner badge ---------- */
.odoo-badge { display: inline-flex; align-items: center; gap: 10px; width: max-content; max-width: 100%; padding: 8px 10px 8px 12px; border: 1px solid var(--platinum-200); border-radius: 10px; background: #fff; text-decoration: none; box-shadow: 0 1px 2px rgb(28 28 31 / 0.06); transition: border-color 0.25s, transform 0.25s var(--ease-out), box-shadow 0.25s; }
a.odoo-badge:hover { border-color: #21b799; transform: translateY(-1px); box-shadow: 0 12px 24px -16px rgb(33 183 153 / 0.6); }
.odoo-badge img { display: block; width: auto; height: 22px; }
/* Odoo's own deep teal: white text on it is 4.9:1 (the brighter #21b799 gave 2.5:1) */
.odoo-badge-pill { padding: 5px 9px; border-radius: 5px; background: #017e84; color: #fff; font: 600 0.74rem/1 var(--f-sans); letter-spacing: 0.01em; white-space: nowrap; }
.odoo-badge--dark { border-color: rgb(255 255 255 / 0.16); background: rgb(255 255 255 / 0.05); box-shadow: none; }
.odoo-badge--lg { gap: 14px; padding: 12px 14px 12px 16px; border-radius: 12px; }
.odoo-badge--lg img { height: 34px; }
.odoo-badge--lg .odoo-badge-pill { padding: 7px 12px; font-size: 0.88rem; }
.footer-about .odoo-badge img { height: 20px; }
/* the DevPii (Pvt) Ltd. lockup has one fixed size at every width; .footer-about img (0,1,1) would otherwise let it grow to the image's 900px */
.footer-about .footer-lockup { width: min(240px, 100%); max-width: 100%; height: auto; justify-self: start; }

/* ---------- footer: five columns ---------- */
.footer-grid { grid-template-columns: minmax(0, 1.55fr) repeat(4, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 1180px) { .footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .footer-about { grid-column: 1 / -1; } .footer-about p { max-width: 60ch; } }
/* tablets: two link columns, so long service names and the address are not squeezed into four */
@media (max-width: 1023px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } }
.footer-grid ul a { line-height: 1.35; }

/* --- 01-service-page.css --- */
/* ==========================================================================
   v2.3 · service page template (odoo-erp, resource-augmentation, custom-software,
   ui-ux-design, ai-automation, digital-marketing) and shared service visuals
   ========================================================================== */

/* ---------- hero: copy + "at a glance" card ---------- */
.svc-hero .container { display: block; }
.svc-hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4.4fr); gap: clamp(32px, 5vw, 72px); align-items: end; }
.svc-hero-copy { display: grid; gap: 20px; justify-items: start; }
.svc-hero-copy h1 { max-width: 16ch; }
.svc-hero-copy .hero-actions { margin-top: 6px; }
.svc-glance { position: relative; display: grid; gap: 18px; padding: clamp(22px, 2.6vw, 30px); border: 1px solid rgb(197 152 44 / 0.35); border-radius: 18px; background: radial-gradient(120% 90% at 100% 0%, rgb(197 152 44 / 0.22), transparent 55%), linear-gradient(160deg, #26262b, #121214); color: var(--plum-100); box-shadow: 0 40px 70px -40px rgb(28 28 31 / 0.7); }
.svc-glance .label { color: var(--signal-400); }
.svc-glance dl { display: grid; gap: 14px; margin: 0; }
.svc-glance dl > div { display: grid; gap: 4px; padding-top: 14px; border-top: 1px solid rgb(255 255 255 / 0.1); }
.svc-glance dl > div:first-child { padding-top: 0; border-top: 0; }
.svc-glance dt { font: 400 0.66rem/1.3 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--plum-300); }
.svc-glance dd { margin: 0; color: #fff; font-size: 0.98rem; line-height: 1.45; text-wrap: pretty; }
.svc-glance .odoo-badge { margin-top: 4px; }
@media (max-width: 960px) { .svc-hero-grid { grid-template-columns: minmax(0, 1fr); align-items: start; } }
/* phones: the breadcrumb already names the service, so the eyebrow does not repeat it underneath */
@media (max-width: 600px) { .svc-hero .svc-hero-copy > .eyebrow { display: none; } }

/* service heroes: the dark "at a glance" card is the hero's dark element, so the slanted charcoal panel
   (whose diagonal edge showed above and below the card) is not drawn behind it; a soft gold glow stays */
.svc-hero.page-hero::after { display: none; }
@media (min-width: 961px) { .svc-hero-grid > .svc-glance { box-shadow: 0 40px 70px -40px rgb(28 28 31 / 0.7), 0 0 0 1px rgb(197 152 44 / 0.08), 0 0 120px -30px rgb(197 152 44 / 0.35); } }

/* ---------- feature cards ---------- */
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1080px) { .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .feature-grid { grid-template-columns: minmax(0, 1fr); } }
.feature h3 { font-size: 1.3rem; line-height: 1.2; }
.f-ico { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(160deg, #2c2c31, #121214); color: var(--signal-400); box-shadow: inset 0 0 0 1px rgb(197 152 44 / 0.35), 0 12px 22px -14px rgb(28 28 31 / 0.6); transition: transform 0.4s var(--ease-out); }
.card.spot:hover .f-ico { transform: translateY(-2px) rotate(-3deg); }
.f-ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.feature ul { display: grid; gap: 8px; margin: 2px 0 0; padding-left: 1.1em; color: var(--titanium-600); font-size: 0.95rem; }
.feature li::marker { color: var(--gold-600); }
/* desktop: the cards in a row share icon / title / text / list rows, so a two-line title never pushes its row's text out of line */
@media (min-width: 1081px) { .feature-grid:not(.about-services):not(.aug-roles) > .feature { grid-row: span 4; grid-template-rows: subgrid; } }

/* ---------- how this service runs: four numbered steps on a gold rail ---------- */
.svc-steps { --n: 4; list-style: none; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; counter-reset: step; }
.svc-steps li { position: relative; display: grid; gap: 10px; align-content: start; padding: 34px clamp(16px, 2vw, 28px) 0 0; }
.svc-steps li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--gold-600), rgb(197 152 44 / 0.25)); }
.svc-steps li::after { content: ""; position: absolute; left: 0; top: -5px; width: 12px; height: 12px; border-radius: 50%; background: var(--gold-600); box-shadow: 0 0 0 5px rgb(197 152 44 / 0.18); }
.svc-step-no { font: 400 0.72rem/1 var(--f-mono); letter-spacing: 0.14em; color: var(--plum-600); }
.svc-steps h3 { font-size: 1.22rem; line-height: 1.2; }
.svc-steps p { color: var(--titanium-600); font-size: 0.97rem; }
@media (max-width: 900px) {
  .svc-steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .svc-steps li { padding: 0 0 28px 30px; }
  .svc-steps li::before { left: 5px; right: auto; top: 6px; bottom: 0; width: 2px; height: auto; background: linear-gradient(180deg, var(--gold-600), rgb(197 152 44 / 0.2)); }
  .svc-steps li::after { left: 0; top: 2px; }
  .svc-steps li:last-child::before { display: none; }
}

/* ---------- engagement models: three side-by-side options ---------- */
.engage-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 960px) { .engage-grid { grid-template-columns: minmax(0, 1fr); } }
.engage { border-top: 2px solid var(--gold-600); }
.engage .label { color: var(--plum-600); }
.engage h3 { font-size: 1.35rem; }
.engage .fit { padding-top: 12px; border-top: 1px dashed var(--platinum-300); font-size: 0.92rem; }
.engage .fit b { color: var(--ink); font-weight: 600; }

/* ---------- proof: real client work behind this service ---------- */
.proof-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.proof { display: grid; gap: 8px; align-content: start; padding: 22px 24px; border: 1px solid var(--platinum-200); border-left: 3px solid var(--gold-600); border-radius: 4px 14px 14px 4px; background: #fff; color: var(--ink); text-decoration: none; transition: transform 0.3s var(--ease-out), box-shadow 0.3s, border-color 0.3s; }
.proof:hover { transform: translateY(-2px); border-color: var(--platinum-300); border-left-color: var(--gold-600); box-shadow: var(--shadow-raised); }
.proof .label { color: var(--plum-600); }
/* one link cue on every case card, site-wide: an arrow at the end of the client name */
.proof b { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font: 600 1.2rem/1.2 var(--f-display); letter-spacing: -0.01em; }
a.proof b::after { content: "\2192"; content: "\2192" / ""; flex: none; font: 400 1rem/1 var(--f-sans); color: var(--plum-600); }
@media (prefers-reduced-motion: no-preference) {
  a.proof b::after { transition: transform 0.3s var(--ease-out); }
  a.proof:hover b::after { transform: translateX(3px); }
}
.proof > span:last-child { color: var(--titanium-600); font-size: 0.94rem; }

/* ---------- one dark testimonial card for the service pages (custom-software, ui-ux-design) ---------- */
.svc-quote { margin: 0; grid-template-rows: auto 1fr auto; gap: 22px; padding: clamp(28px, 3.4vw, 44px); border-color: rgb(197 152 44 / 0.35); background: radial-gradient(110% 80% at 100% 0%, rgb(197 152 44 / 0.2), transparent 55%), linear-gradient(160deg, #26262b, #121214); color: #fff; box-shadow: 0 28px 50px -36px rgb(28 28 31 / 0.55); }
.svc-quote > .label { color: var(--signal-400); }
.svc-quote blockquote { color: #fff; font-size: clamp(1.3rem, 2vw, 1.62rem); line-height: 1.4; }
.svc-quote blockquote::before { color: var(--signal-400); }
.svc-quote figcaption { margin-top: 0; padding-top: 20px; border-top: 1px solid rgb(255 255 255 / 0.12); }
.svc-quote figcaption img { border-color: rgb(197 152 44 / 0.55); }
.svc-quote figcaption b { color: #fff; }
.svc-quote figcaption span { color: var(--plum-300); }

/* ---------- tools and technologies ---------- */
.tech-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.tech-list li { padding: 8px 12px; border: 1px solid var(--platinum-300); border-radius: 999px; background: #fff; font: 400 0.78rem/1 var(--f-mono); color: var(--titanium-600); }
/* phones: two or three chips per row instead of a tall column of pills */
@media (max-width: 600px) { .tech-list { gap: 6px; } .tech-list li { padding: 6px 10px; font-size: 0.72rem; letter-spacing: 0; } }

/* ---------- related services ---------- */
.xsell { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.xsell a { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px 16px; border: 1px solid var(--platinum-200); border-radius: 12px; background: #fff; color: var(--ink); text-decoration: none; font-weight: 600; line-height: 1.3; transition: border-color 0.25s, transform 0.25s var(--ease-out); }
.xsell a:hover { border-color: var(--gold-600); transform: translateY(-2px); }
.xsell .mega-ico { width: 40px; height: 40px; border-radius: 10px; }
.xsell .mega-ico svg { width: 20px; height: 20px; }
/* one format on every service page: the service name and one short line */
.xsell .mega-txt b { font-size: 1rem; }
.xsell .mega-txt > span { font-weight: 400; }
@media (max-width: 900px) { [aria-labelledby="xsell-title"] .xsell { grid-template-columns: minmax(0, 1fr); } }

/* ---------- "built around your Odoo" connector panel ---------- */
.odoo-link { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(18px, 3vw, 40px); align-items: center; padding: clamp(22px, 3vw, 34px); border: 1px solid var(--platinum-200); border-radius: 18px; background: radial-gradient(70% 140% at 0% 0%, rgb(33 183 153 / 0.08), transparent 60%), linear-gradient(120deg, #fff, var(--plum-50)); }
.odoo-link h2, .odoo-link h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1.2; }
.odoo-link p { color: var(--titanium-600); max-width: 60ch; }
@media (max-width: 860px) { .odoo-link { grid-template-columns: minmax(0, 1fr); } }

/* ---------- closing call to action ---------- */
.cta-final .container { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: end; }
.cta-final .title-lg { max-width: 18ch; }
.cta-final .lede { margin-top: 14px; }
.cta-final .hero-actions { margin: 0; }
@media (max-width: 860px) { .cta-final .container { grid-template-columns: minmax(0, 1fr); align-items: start; } }

/* --- 02-shared-fixes.css --- */
/* ==========================================================================
   v2.3 · shared fixes found while building the new pages (apply site-wide)
   ========================================================================== */

/* a dark band after a plain section keeps its own top padding */
.section + .section.band, .section + .band { padding-top: var(--section); }

/* the italic accent word reads as bright gold on every dark surface */
.band .title-lg em, .band .title-xl em, .cta-final .title-lg em, .glimpse--dark .title-lg em { color: var(--signal-400); }
.cta-final .eyebrow { margin-bottom: 18px; }

/* keyboard focus stays visible on dark surfaces */
.band :focus-visible, .site-footer :focus-visible, .svc-glance :focus-visible, .glimpse--dark :focus-visible { outline-color: var(--signal-400); }

/* quote cards: no browser figure margin */
figure.quote, .card.quote { margin: 0; }

/* small gold text on the warm surface needs the deeper gold for contrast */
.surface-warm .eyebrow, .surface-warm .svc-step-no, .surface-warm .engage .label, .surface-warm .ledger-row .code { color: var(--plum-700); }

/* the "built around your Odoo" panel: space between its heading and text */
.odoo-link > div { display: grid; gap: 10px; }
/* its heading is below the large-text size under 1200px; the #9c761d accent gave 3.9-4.2:1 on the panel tint */
.odoo-link :is(h2, h3) em { color: var(--plum-600); }

/* breadcrumbs wrap cleanly and stay clear of the dark corner panel */
.crumbs { display: flex; flex-wrap: wrap; align-items: baseline; row-gap: 8px; }
/* taller tap targets without changing the layout (WCAG 2.5.8 when the crumbs wrap) */
.crumbs a { padding-block: 4px; margin-block: -4px; }
/* the eyebrow sits at or below the corner wedge, so it only keeps a small reserve */
@media (max-width: 600px) { .page-hero .crumbs { max-width: calc(100% - 38vw); } .page-hero .eyebrow { max-width: calc(100% - 12vw); } }
@media (min-width: 601px) and (max-width: 1023px) {
  .page-hero::after, .dossier-intro.page-hero::after { width: 30vw; height: clamp(150px, 24vw, 230px); }
  .page-hero .crumbs { max-width: calc(100% - 32vw); }
}

/* text utilities: a phrase that must not break (service names, a link's last word and its arrow, NS-2),
   and a hyphen drawn in the sans face where Bodoni's italic hyphen is a near-invisible hairline */
.nb { white-space: nowrap; }
.hy { font-family: var(--f-sans); font-style: normal; font-weight: 500; }

/* FAQ questions: no single orphan word on the last line */
.faq summary { text-wrap: balance; }

/* client case files: statuses are no longer shown, so the brief's end node is simply gold */
.brief-node { background: var(--gold-600); box-shadow: 0 0 0 4px rgb(197 152 44 / 0.18); }
.glimpse-feature .label { color: var(--signal-400); }

/* --- 20-methodology.css --- */
/* ==========================================================================
   v2.3.5 · implementation methodology: the delivery cycle
   Ten stages on a dial in four phases, sign-off gates between the phases, a gold
   arc and comet that travel to the next stage on their own, and a dark centre that
   shows one stage at a time: number, name, one line, the deliverable.
   Without the script the section is a compact list of the ten stages.
   ========================================================================== */

.cyc-sec { position: relative; isolation: isolate; overflow: hidden; overflow: clip; }
.cyc-sec::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(40% 55% at 78% 52%, rgb(197 152 44 / 0.1), transparent 70%), radial-gradient(28% 40% at 4% 8%, rgb(197 152 44 / 0.06), transparent 70%); }

/* ---------- layout: copy on the left, the dial on the right (stacked below 1100px) ---------- */
.cyc-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "stage" "phases" "foot"; row-gap: clamp(30px, 5vw, 48px); }
.cyc-head { grid-area: head; margin-bottom: 0; }
.cyc-stage { grid-area: stage; }
.cyc-phases { grid-area: phases; }
.cyc-foot { grid-area: foot; }
@media (min-width: 1100px) {
  .cyc-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: 1fr auto auto auto 1fr; grid-template-areas: ". stage" "head stage" "phases stage" "foot stage" ". stage"; column-gap: clamp(56px, 6vw, 104px); row-gap: 36px; }
}

/* ---------- the four phases ---------- */
.cyc-phases { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 22px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 1100px) { .cyc-phases { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 470px; gap: 22px 28px; } }
@media (max-width: 639px) { .cyc-phases { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }
.cyc-ph { display: grid; gap: 7px; align-content: start; min-width: 0; }
.cyc-ph-bar { display: block; height: 3px; overflow: hidden; border-radius: 3px; background: var(--platinum-200); }
.cyc-ph-bar i { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--plum-300), var(--gold-600)); transform: scaleX(var(--f, 1)); transform-origin: left; transition: transform 0.6s var(--ease-out); }
.cyc-sec:not(.is-live) .cyc-ph-bar i { opacity: 0.5; }
.cyc-ph-name { font: 600 1rem/1.2 var(--f-sans); color: var(--ink); }
.cyc-ph-range { margin-left: 4px; font: 400 0.68rem/1 var(--f-mono); letter-spacing: 0.08em; color: var(--plum-600); }
.cyc-ph-note { font-size: 0.86rem; line-height: 1.4; color: var(--titanium-600); }
.cyc-sec.is-live .cyc-ph-name { color: var(--titanium-600); transition: color 0.4s; }
.cyc-sec.is-live .cyc-ph.is-current .cyc-ph-name { color: var(--ink); }

.cyc-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }

/* ---------- the dial ---------- */
.cyc-stage { position: relative; width: 100%; max-width: 600px; margin-inline: auto; container-type: inline-size; }
.cyc-sec:not(.is-live) .cyc-stage { max-width: none; }
.cyc-sec.is-live .cyc-stage::before { content: ""; position: absolute; left: 50%; top: 0; z-index: -1; width: 116%; aspect-ratio: 1; translate: -50% -7%; border-radius: 50%; background: radial-gradient(closest-side, rgb(197 152 44 / 0.15), rgb(197 152 44 / 0.05) 62%, transparent); pointer-events: none; }
.cyc-dial { position: relative; display: none; aspect-ratio: 1; }
.cyc-sec.is-live .cyc-dial { display: block; }
.cyc-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cyc-halo { fill: none; stroke: rgb(197 152 44 / 0.22); stroke-width: 1; stroke-dasharray: 2 7; }
/* the face shadow is an SVG filter (cyc-shadow), which Safari also draws */
.cyc-face-edge { fill: none; stroke: rgb(226 190 102 / 0.4); stroke-width: 1; }
.cyc-pharc { fill: none; stroke: var(--platinum-300); stroke-width: 8; stroke-dasharray: 1.4 9.4; transition: stroke 0.5s; }
.cyc-pharc.is-done { stroke: var(--plum-300); }
.cyc-pharc.is-current { stroke: var(--gold-600); }
.cyc-track { fill: none; stroke: var(--platinum-300); stroke-width: 1.5; }
.cyc-progress { fill: none; stroke: url(#cyc-gold); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: 100; }
.cyc-gate { fill: #fff; stroke: var(--titanium-400); stroke-width: 1.5; transition: fill 0.4s, stroke 0.4s; }
.cyc-gate.is-passed { fill: var(--gold-600); stroke: var(--gold-600); }
.cyc-comet { opacity: 0; transform-box: view-box; transform-origin: 50% 50%; }
.cyc-sec.is-auto .cyc-comet { opacity: 1; }
.cyc-comet-dot { fill: #fff; stroke: var(--gold-600); stroke-width: 2; }
.cyc-sec.is-loop .cyc-progress, .cyc-sec.is-loop .cyc-comet { opacity: 0; }

/* stage buttons around the ring, with their numbers outside it */
.cyc-nodes { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.cyc-node-wrap { display: contents; }
.cyc-node { --s: clamp(36px, 9cqi, 54px); position: absolute; left: var(--x); top: var(--y); z-index: 1; display: grid; place-items: center; width: var(--s); height: var(--s); padding: 0; translate: -50% -50%; border: 1px solid var(--platinum-300); border-radius: 50%; background: #fff; color: var(--titanium-600); box-shadow: 0 1px 2px rgb(28 28 31 / 0.06), 0 12px 24px -16px rgb(28 28 31 / 0.45); cursor: pointer; transition: scale 0.5s var(--ease-out), background-color 0.4s, border-color 0.4s, color 0.4s, box-shadow 0.4s; }
.cyc-node svg { width: 46%; height: 46%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cyc-node:hover { border-color: var(--gold-600); color: var(--plum-600); }
.cyc-node:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.cyc-node-wrap.is-done .cyc-node { border-color: rgb(197 152 44 / 0.55); background: var(--plum-50); color: var(--plum-600); }
.cyc-node-wrap.is-active .cyc-node { scale: 1.16; border-color: transparent; background: linear-gradient(145deg, #f0d48c, #c5982c 55%, #8e6a1b) border-box; color: #fff; box-shadow: 0 0 0 6px rgb(197 152 44 / 0.14), 0 16px 30px -12px rgb(142 106 27 / 0.7); }
.cyc-node-no { position: absolute; left: var(--lx); top: var(--ly); translate: -50% -50%; font: 500 clamp(0.6rem, 1.9cqi, 0.74rem)/1 var(--f-mono); letter-spacing: 0.06em; color: var(--titanium-600); pointer-events: none; transition: color 0.4s; }
.cyc-node-wrap.is-active .cyc-node-no { color: var(--plum-600); font-weight: 600; }

/* ---------- the centre: one stage at a time ---------- */
.cyc-center { --cyc-focus: var(--signal-400); --cyc-phase: var(--signal-400); --cyc-of: rgb(255 255 255 / 0.56); --cyc-name: #fff; --cyc-line: rgb(255 255 255 / 0.76); --cyc-chip-bd: rgb(226 190 102 / 0.42); --cyc-chip-bg: rgb(197 152 44 / 0.12); --cyc-chip: var(--plum-100); --cyc-key: var(--signal-400); }
.cyc-sec.is-live .cyc-center { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 100%; aspect-ratio: 1; pointer-events: none; }
.cyc-panels { display: grid; width: 100%; }
.cyc-sec.is-live .cyc-panels { width: 54%; }
.cyc-sec.is-live .cyc-panel { grid-area: 1 / 1; display: grid; justify-items: center; align-content: center; gap: clamp(4px, 1.2cqi, 8px); text-align: center; opacity: 0; visibility: hidden; transform: translateY(12px) scale(0.98); filter: blur(6px); transition: opacity 0.35s ease, transform 0.6s var(--ease-out), filter 0.4s ease, visibility 0s 0.6s; }
.cyc-sec.is-live .cyc-panel.is-active { opacity: 1; visibility: visible; transform: none; filter: none; pointer-events: auto; transition: opacity 0.55s ease 0.1s, transform 0.75s var(--ease-out) 0.1s, filter 0.55s ease 0.1s, visibility 0s; }
.cyc-panel:focus-visible { outline: 2px solid var(--cyc-focus); outline-offset: 6px; border-radius: 12px; }
/* on the round face the focus mark is a ring inside the circle (the rectangle stays as the fallback) */
@media (min-width: 640px) {
  @supports selector(:has(*)) {
    .cyc-sec.is-live .cyc-panel:focus-visible { outline: 0; }
    .cyc-sec.is-live .cyc-center:has(.cyc-panel:focus-visible)::after { content: ""; position: absolute; inset: calc(18.333% + 6px); border: 2px solid var(--cyc-focus); border-radius: 50%; pointer-events: none; }
  }
}
.cyc-no { font: 600 clamp(2.3rem, 10cqi, 3.9rem)/0.9 var(--f-display); letter-spacing: -0.03em; background: linear-gradient(165deg, #f6e4b0 10%, #e2be66 45%, #b38a2a 92%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cyc-phase { margin: 0; font: 500 clamp(0.6rem, 1.75cqi, 0.7rem)/1.3 var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyc-phase); }
.cyc-of { color: var(--cyc-of); }
.cyc-name { margin: 2px 0 0; max-width: 16ch; font: 600 clamp(1.08rem, 4cqi, 1.56rem)/1.12 var(--f-display); letter-spacing: -0.015em; color: var(--cyc-name); text-wrap: balance; }
.cyc-line { margin: 0; max-width: 24ch; font-size: clamp(0.8rem, 2.5cqi, 0.96rem); line-height: 1.45; color: var(--cyc-line); text-wrap: balance; }
.cyc-get { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 8px; margin: clamp(2px, 1cqi, 6px) 0 0; padding: 6px 13px; border: 1px solid var(--cyc-chip-bd); border-radius: 999px; background: var(--cyc-chip-bg); font: 500 clamp(0.74rem, 2.2cqi, 0.84rem)/1.2 var(--f-sans); color: var(--cyc-chip); }
.cyc-get-k { font: 500 0.58rem/1 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyc-key); }
.cyc-gatenote { margin: 0; font: 500 0.6rem/1.3 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyc-key); }

/* the number in the dial on phones (the stage text sits under the dial there) */
.cyc-hub { display: none; }
.cyc-hub-no { font: 600 22cqi/0.9 var(--f-display); letter-spacing: -0.03em; background: linear-gradient(165deg, #f6e4b0 10%, #e2be66 45%, #b38a2a 92%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cyc-hub-ph { font: 500 0.62rem/1.2 var(--f-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--signal-400); }

@media (max-width: 639px) {
  .cyc-sec.is-live .cyc-hub { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; pointer-events: none; text-align: center; }
  .cyc-sec.is-live .cyc-center { position: static; display: block; width: auto; aspect-ratio: auto; margin-top: 22px; pointer-events: auto; }
  .cyc-sec.is-live .cyc-panels { width: 100%; }
  .cyc-sec.is-live .cyc-panel { gap: 8px; }
  .cyc-sec.is-live .cyc-panel .cyc-no { display: none; }
  .cyc-node-wrap.is-active .cyc-node-no { opacity: 0; }
  /* the circles scale with the dial and the numbers sit a little further out, so they never touch */
  .cyc-node { --s: clamp(32px, 10cqi, 54px); }
  .cyc-node-no { left: calc(50% + (var(--lx) - 50%) * 1.03); top: calc(50% + (var(--ly) - 50%) * 1.03); }
  .cyc-node-wrap.is-active .cyc-node { box-shadow: 0 0 0 4px rgb(197 152 44 / 0.14), 0 12px 24px -12px rgb(142 106 27 / 0.7); }
  .cyc-sec .cyc-center { --cyc-focus: var(--ink); --cyc-phase: var(--plum-600); --cyc-of: var(--titanium-600); --cyc-name: var(--ink); --cyc-line: var(--titanium-600); --cyc-chip-bd: rgb(197 152 44 / 0.4); --cyc-chip-bg: var(--plum-50); --cyc-chip: var(--plum-700); --cyc-key: var(--plum-600); }
  .cyc-name { max-width: 22ch; font-size: 1.42rem; }
  .cyc-line { max-width: 32ch; font-size: 0.98rem; }
}

/* ---------- controls: previous, pause / play, next ---------- */
.cyc-controls { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: clamp(16px, 3cqi, 24px); }
.cyc-controls[hidden], .cyc-sec:not(.is-live) .cyc-controls { display: none; }
.cyc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid var(--platinum-300); border-radius: 999px; background: #fff; color: var(--titanium-600); font: 500 0.8rem/1 var(--f-sans); cursor: pointer; transition: border-color 0.2s, color 0.2s; }
.cyc-btn:hover { border-color: var(--gold-600); color: var(--ink); }
.cyc-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.cyc-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cyc-play { min-width: 96px; padding-inline: 14px 16px; }
.cyc-play[hidden] { display: none; }
.cyc-play .i-play { display: none; fill: currentColor; stroke: none; }
.cyc-sec.is-paused .cyc-play .i-play { display: inline; }
.cyc-sec.is-paused .cyc-play .i-pause { display: none; }

/* ---------- without the script: the ten stages as a compact list ---------- */
.cyc-sec:not(.is-live) .cyc-center { --cyc-focus: var(--ink); --cyc-phase: var(--plum-600); --cyc-of: var(--titanium-600); --cyc-name: var(--ink); --cyc-line: var(--titanium-600); --cyc-chip-bd: rgb(197 152 44 / 0.4); --cyc-chip-bg: var(--plum-50); --cyc-chip: var(--plum-700); --cyc-key: var(--plum-600); }
.cyc-sec:not(.is-live) .cyc-panels { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 12px; }
.cyc-sec:not(.is-live) .cyc-panel { display: grid; gap: 6px; align-content: start; justify-items: start; padding: 18px 20px; border: 1px solid var(--platinum-200); border-radius: 14px; background: #fff; }
.cyc-sec:not(.is-live) .cyc-no { font-size: 1.5rem; background: none; color: var(--plum-600); }
.cyc-sec:not(.is-live) .cyc-name { font-size: 1.2rem; }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .cyc-node-wrap.is-active .cyc-node::after { content: ""; position: absolute; inset: -1px; border: 1px solid rgb(197 152 44 / 0.7); border-radius: 50%; pointer-events: none; animation: cyc-pulse 2.2s var(--ease-out) infinite; }
  .cyc-sec.is-off .cyc-node::after { animation-play-state: paused; }
  /* the dial assembles the first time it scrolls into view */
  .cyc-sec.is-armed:not(.is-in) .cyc-svg, .cyc-sec.is-armed:not(.is-in) .cyc-node, .cyc-sec.is-armed:not(.is-in) .cyc-node-no, .cyc-sec.is-armed:not(.is-in) .cyc-center { opacity: 0; }
  .cyc-sec.is-armed.is-in .cyc-svg { animation: cyc-dial-in 1s var(--ease-out) backwards; }
  .cyc-sec.is-armed.is-in .cyc-node, .cyc-sec.is-armed.is-in .cyc-node-no { animation: cyc-node-in 0.6s var(--ease-out) calc(160ms + var(--i, 0) * 50ms) backwards; }
  .cyc-sec.is-armed.is-in .cyc-center { animation: cyc-fade-in 0.8s ease 0.5s backwards; }
  .cyc-hub.is-swap > * { animation: cyc-hub-in 0.6s var(--ease-out) backwards; }
  .cyc-hub.is-swap .cyc-hub-ph { animation-delay: 0.08s; }
}
@keyframes cyc-pulse { from { transform: scale(1); opacity: 0.9; } to { transform: scale(1.75); opacity: 0; } }
@keyframes cyc-dial-in { from { opacity: 0; transform: scale(0.94) rotate(-8deg); } }
@keyframes cyc-node-in { from { opacity: 0; scale: 0.4; } }
@keyframes cyc-fade-in { from { opacity: 0; } }
@keyframes cyc-hub-in { from { opacity: 0; transform: translateY(10px); } }
.cyc-svg { transform-origin: 50% 50%; }

@media (prefers-reduced-motion: reduce) {
  .cyc-progress, .cyc-comet, .cyc-node, .cyc-ph-bar i { transition: none !important; }
  /* an instant swap: the site-wide 0.01ms rule would otherwise keep the new panel hidden for a moment, so it could not take focus */
  .cyc-sec.is-live .cyc-panel, .cyc-sec.is-live .cyc-panel.is-active { filter: none; transform: none; transition: none !important; }
}
@media (forced-colors: active) {
  .cyc-node-wrap.is-active .cyc-node { border: 3px solid Highlight; }
  .cyc-node-wrap.is-active .cyc-node:focus-visible { outline: 2px solid CanvasText; outline-offset: 4px; }
  .cyc-no, .cyc-hub-no { background: none; color: CanvasText; }
}
@media print {
  .cyc-dial, .cyc-controls, .cyc-stage::before { display: none !important; }
  /* on paper: every stage as a dark-on-white list */
  .cyc-sec .cyc-center { --cyc-phase: var(--plum-600); --cyc-of: var(--titanium-600); --cyc-name: var(--ink); --cyc-line: var(--titanium-600); --cyc-chip-bd: rgb(197 152 44 / 0.4); --cyc-chip-bg: transparent; --cyc-chip: var(--plum-700); --cyc-key: var(--plum-600); }
  .cyc-sec.is-live .cyc-center { position: static; display: block; width: auto; aspect-ratio: auto; }
  .cyc-sec.is-live .cyc-panels { width: 100%; gap: 14px; }
  .cyc-sec.is-live .cyc-panel { grid-area: auto; justify-items: start; text-align: left; opacity: 1; visibility: visible; transform: none; filter: none; break-inside: avoid; }
  .cyc-no { background: none; color: var(--plum-600); font-size: 1.4rem; }
  .cyc-sec.is-live .cyc-panel .cyc-no { display: block; }
}

/* --- 30-start.css --- */
/* ==========================================================================
   v2.3 · Start a project: discovery.html (one form in three visible steps with
   a live summary beside it) and the "Start a project" band on the home page
   ========================================================================== */

/* hidden parts of the flow stay hidden even where a component sets display */
[data-start] [hidden] { display: none !important; }

/* ---------- hero ---------- */
.start-hero { padding-top: calc(var(--header-h) + clamp(44px, 6.4vw, 88px)); padding-bottom: clamp(40px, 5vw, 64px); }
.start-hero .lede { max-width: 60ch; }
.start-facts { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 30px; margin: 6px 0 0; padding: 0; }
.start-facts li { display: inline-flex; align-items: baseline; gap: 8px; color: var(--titanium-600); font-size: 0.92rem; }
.start-facts li:first-child { align-items: center; }
.start-facts b { font: 600 1.35rem/1 var(--f-display); letter-spacing: -0.01em; color: var(--ink); }

/* ---------- layout: the form, with the summary beside it ---------- */
.section.start-section { position: relative; isolation: isolate; padding-top: clamp(40px, 5vw, 72px); }
.start-section::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(48% 40% at 0% 0%, rgb(197 152 44 / 0.08), transparent 70%), radial-gradient(36% 30% at 100% 100%, rgb(28 28 31 / 0.04), transparent 70%); }
.start-layout { display: grid; grid-template-columns: minmax(0, 7.4fr) minmax(0, 4fr); gap: clamp(24px, 3.4vw, 48px); align-items: start; }
@media (max-width: 1023px) { .start-layout { grid-template-columns: minmax(0, 1fr); } }

.start-card { position: relative; min-width: 0; padding: clamp(22px, 3.6vw, 44px); border: 1px solid var(--platinum-200); border-radius: 20px; background: linear-gradient(180deg, #fff 0%, #fdfcf9 100%); box-shadow: var(--shadow-raised); }
.start-card::before { content: ""; position: absolute; left: 28px; right: 28px; top: -1px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--gold-600), rgb(226 190 102 / 0.5) 60%, transparent); pointer-events: none; }
.start-card .form { gap: 0; }

/* ---------- the three steps ---------- */
.start-step { position: relative; min-width: 0; margin: 0; padding: 0 0 clamp(30px, 3.6vw, 44px) 64px; border: 0; }
.start-step::before { content: ""; position: absolute; left: 21px; top: 52px; bottom: 8px; width: 1px; background: linear-gradient(180deg, rgb(197 152 44 / 0.55), var(--platinum-200)); }
.start-step[data-step="3"] { padding-bottom: 0; }
.start-step[data-step="3"]::before { display: none; }
/* a floated legend behaves like a normal block in every browser */
.start-step-head { float: left; width: 100%; margin: 0; padding: 0; }
.start-step-no { position: absolute; left: 0; top: -6px; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgb(197 152 44 / 0.6); border-radius: 50%; background: #fff; color: var(--plum-600); font: 400 0.74rem/1 var(--f-mono); letter-spacing: 0.06em; box-shadow: 0 0 0 6px rgb(197 152 44 / 0.08); transition: background-color 0.35s, border-color 0.35s, color 0.35s; }
.start-step.is-done .start-step-no { border-color: var(--gold-600); background: linear-gradient(160deg, #2c2c31, #121214); color: var(--signal-400); }
.start-step-title { display: block; font: 560 clamp(1.4rem, 2.2vw, 1.8rem)/1.15 var(--f-display); letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
.start-step-body { clear: both; display: grid; gap: 18px; padding-top: 10px; min-width: 0; container-type: inline-size; }
.start-step-hint { color: var(--titanium-600); font-size: 0.95rem; }

/* step 1: service cards (real checkboxes, visually replaced by the card) */
.start-services { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; }
.start-services li { display: grid; min-width: 0; }
.start-opt { position: relative; display: grid; cursor: pointer; }
.start-opt input, .start-chip input { position: absolute; top: 50%; left: 50%; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
/* a tile: icon and tick on top, then the name and a one-line summary */
.start-opt-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ico tick" "txt txt"; gap: 14px 12px; align-items: start; align-content: start; height: 100%; padding: 18px; border: 1px solid var(--platinum-200); border-radius: 14px; background: #fff; transition: border-color 0.25s, background-color 0.25s, box-shadow 0.3s, transform 0.35s var(--ease-out); }
.start-opt-body .mega-ico { grid-area: ico; }
.start-opt-body .start-tick { grid-area: tick; }
.start-opt-body .start-opt-txt { grid-area: txt; }
.start-opt:hover .start-opt-body { border-color: var(--titanium-400); }
.start-opt input:focus-visible + .start-opt-body { outline: 2px solid var(--ink); outline-offset: 2px; }
.start-opt input:checked + .start-opt-body { border-color: var(--gold-600); background: linear-gradient(140deg, #fffdf8, var(--plum-50)); box-shadow: inset 0 0 0 1px var(--gold-600), 0 18px 32px -24px rgb(142 106 27 / 0.6); }
.start-opt .mega-ico { width: 44px; height: 44px; border-radius: 11px; }
.start-opt .mega-ico svg { width: 22px; height: 22px; }
.start-opt input:checked + .start-opt-body .mega-ico { box-shadow: inset 0 0 0 1px rgb(226 190 102 / 0.8), 0 12px 22px -12px rgb(197 152 44 / 0.65); }
.start-opt-txt { display: grid; gap: 3px; min-width: 0; padding-top: 1px; }
.start-opt-txt b { font-size: 0.98rem; font-weight: 650; line-height: 1.28; color: var(--ink); }
.start-opt-txt > span { font-size: 0.86rem; line-height: 1.42; color: var(--titanium-600); }
.start-tick { width: 22px; height: 22px; display: grid; place-items: center; margin-top: 1px; border: 1.5px solid var(--platinum-300); border-radius: 6px; background: #fff; color: var(--ink); transition: background-color 0.25s, border-color 0.25s; }
.start-tick svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 22; stroke-dashoffset: 22; }
.start-opt input:checked + .start-opt-body .start-tick { border-color: var(--gold-600); background: var(--gold-600); }
.start-opt input:checked + .start-opt-body .start-tick svg { stroke-dashoffset: 0; }

/* a narrow column (tablet-width desktop windows, phones): one service per row */
@container (max-width: 479px) {
  .start-services { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .start-opt-body { grid-template-columns: 40px minmax(0, 1fr) 22px; grid-template-areas: "ico txt tick"; gap: 12px; padding: 14px; }
  .start-opt .mega-ico { width: 40px; height: 40px; border-radius: 10px; }
  .start-opt .mega-ico svg { width: 20px; height: 20px; }
}

/* step 2: two radio groups as chips */
.start-choice { min-width: 0; margin: 0; padding: 0; border: 0; }
.start-choice legend { float: left; width: 100%; margin: 0 0 12px; padding: 0; font: 400 0.7rem/1.3 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--titanium-600); }
.start-chips { clear: both; display: flex; flex-wrap: wrap; gap: 8px; }
.start-choice + .start-choice { padding-top: 6px; }
.start-chip { position: relative; display: inline-flex; cursor: pointer; }
.start-chip span { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px 0 14px; border: 1px solid var(--platinum-300); border-radius: 999px; background: #fff; color: var(--ink); font-size: 0.93rem; font-weight: 500; line-height: 1.2; transition: border-color 0.2s, background-color 0.2s, color 0.2s; }
.start-chip span::before { content: ""; flex: none; width: 14px; height: 14px; border: 1.5px solid var(--platinum-300); border-radius: 50%; background: #fff; transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s; }
.start-chip:hover span { border-color: var(--titanium-400); }
.start-chip input:checked + span { border-color: var(--ink); background: var(--ink); color: #fff; }
.start-chip input:checked + span::before { border-color: var(--gold-600); background: var(--gold-600); box-shadow: inset 0 0 0 3px var(--ink); }
.start-chip input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }

/* step 3: contact fields use the site's form styles */
.start-step .form-row, .start-step .field { min-width: 0; }

/* send */
.start-submit { display: grid; gap: 16px; margin-top: clamp(26px, 3vw, 36px); padding: clamp(22px, 2.6vw, 28px) 0 0 64px; border-top: 1px solid var(--platinum-200); }
.start-submit-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; }
.start-submit-row .hint { max-width: 32ch; }

/* ---------- confirmation ---------- */
.start-done { display: grid; gap: 18px; justify-items: start; }
.start-done:focus { outline: none; }
.start-done-mark { width: 60px; height: 60px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f0d48a, var(--gold-600) 60%, #9c761d); color: var(--ink); box-shadow: 0 0 0 8px rgb(197 152 44 / 0.12), 0 16px 30px -14px rgb(142 106 27 / 0.7); }
.start-done-mark svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 22; }
.start-done .title-lg { font-size: clamp(2rem, 3.6vw, 3rem); max-width: 16ch; }
.start-done .lede { max-width: 46ch; }
.start-done .start-steps { width: 100%; max-width: 560px; margin-top: 4px; }
.start-done-alt { color: var(--titanium-600); font-size: 0.95rem; }
.start-done .btn { margin-top: 6px; }

/* ---------- summary and next steps ---------- */
.start-aside { display: grid; gap: 14px; align-content: start; min-width: 0; }
/* start.js adds is-sticky only while the whole column fits in the viewport */
@media (min-width: 1024px) { .start-aside.is-sticky { position: sticky; top: calc(var(--header-h) + 24px); } }
/* below the desktop layout the aside sits under the form: a live recap after the Send button adds nothing (the form itself shows what was picked) */
@media (max-width: 1023px) { .start-aside > .start-summary { display: none; } }
/* tablets: one full-width "What happens next" card, the steps on the left and the direct contact on the right */
@media (min-width: 700px) and (max-width: 1023px) {
  .start-aside > .start-next { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px 36px; align-items: start; }
  .start-aside > .start-next > h3 { grid-column: 1 / -1; }
  .start-next > .start-alt { padding-top: 0; padding-left: 28px; border-top: 0; border-left: 1px solid var(--platinum-200); }
}
/* step 03 has no hint line, so its first field keeps the same distance from the heading as steps 01 and 02 */
.start-step[data-step="3"] .start-step-body { padding-top: 22px; }

.start-summary { position: relative; overflow: hidden; display: grid; gap: 4px; padding: clamp(20px, 2.2vw, 26px); border: 1px solid rgb(197 152 44 / 0.35); border-radius: 18px; background: radial-gradient(120% 90% at 100% 0%, rgb(197 152 44 / 0.22), transparent 55%), linear-gradient(160deg, #26262b, #121214); color: var(--plum-100); box-shadow: 0 40px 70px -40px rgb(28 28 31 / 0.7); }
.start-summary-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding-bottom: 8px; }
.start-summary h2 { font-size: 1.55rem; line-height: 1.1; letter-spacing: -0.02em; color: #fff; }
.start-progress { display: inline-flex; align-items: center; gap: 10px; font: 400 0.66rem/1 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--plum-300); }
.start-progress-bar { display: inline-flex; gap: 4px; }
.start-progress-bar i { width: 18px; height: 3px; border-radius: 3px; background: rgb(255 255 255 / 0.18); transition: background-color 0.4s; }
.start-progress-bar i.is-on { background: var(--signal-400); }
.start-summary dl { display: grid; margin: 0; }
.start-summary dl > div { display: grid; gap: 4px; padding-block: 12px; border-top: 1px solid rgb(255 255 255 / 0.1); }
.start-summary dl > div:last-child { padding-bottom: 0; }
.start-summary dt { font: 400 0.66rem/1.3 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--plum-300); }
.start-summary dd { margin: 0; color: #fff; font-size: 0.98rem; line-height: 1.45; overflow-wrap: anywhere; }
.start-empty { color: rgb(255 255 255 / 0.62); }
.start-sum-list { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; }
.start-sum-list li { display: flex; align-items: flex-start; gap: 10px; }
.start-sum-list svg { flex: none; width: 18px; height: 18px; margin-top: 2px; fill: none; stroke: var(--signal-400); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.start-next { display: grid; gap: 16px; padding: clamp(20px, 2.2vw, 26px); border: 1px solid var(--platinum-200); border-radius: 18px; background: #fff; box-shadow: var(--shadow-raised); }
.start-next h3 { font-size: 1.25rem; line-height: 1.15; letter-spacing: -0.015em; }

/* numbered "what happens next" list (aside and confirmation) */
.start-steps { list-style: none; display: grid; gap: 14px; margin: 0; padding: 0; counter-reset: start-next; }
.start-steps li { position: relative; display: grid; gap: 1px; padding-left: 42px; counter-increment: start-next; }
.start-steps li::before { content: counter(start-next, decimal-leading-zero); position: absolute; left: 0; top: -1px; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid rgb(197 152 44 / 0.55); border-radius: 50%; background: var(--plum-50); color: var(--plum-600); font: 400 0.64rem/1 var(--f-mono); }
.start-steps li:not(:last-child)::after { content: ""; position: absolute; left: 13.5px; top: 31px; bottom: -12px; width: 1px; background: rgb(197 152 44 / 0.35); }
.start-steps b { font-size: 0.97rem; font-weight: 600; line-height: 1.35; color: var(--ink); }
.start-steps span { font-size: 0.89rem; line-height: 1.5; color: var(--titanium-600); }
.start-steps--done li:first-child::before { border-color: var(--gold-600); background: var(--gold-600); color: var(--ink); }

.start-alt { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--platinum-200); }
.start-alt p { font-size: 0.88rem; color: var(--titanium-600); }
.start-alt-links { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.start-alt a { display: inline-flex; align-items: center; gap: 9px; min-height: 32px; max-width: 100%; color: var(--ink); font-size: 0.95rem; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.start-alt a:hover { color: var(--plum-600); }
.start-alt svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--plum-600); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- small screens ---------- */
@media (max-width: 640px) {
  .start-card { padding: 22px 16px; border-radius: 16px; }
  .start-card::before { left: 18px; right: 18px; }
  .start-services { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .start-opt-body { grid-template-columns: 40px minmax(0, 1fr) 22px; grid-template-areas: "ico txt tick"; gap: 12px; padding: 14px; }
  .start-opt .mega-ico { width: 40px; height: 40px; border-radius: 10px; }
  .start-opt .mega-ico svg { width: 20px; height: 20px; }
  .start-step { padding-left: 0; }
  .start-step::before { display: none; }
  .start-step-head { display: flex; align-items: center; gap: 14px; }
  .start-step-no { position: static; flex: none; width: 36px; height: 36px; font-size: 0.68rem; box-shadow: 0 0 0 4px rgb(197 152 44 / 0.08); }
  .start-step + .start-step { padding-top: 28px; border-top: 1px solid var(--platinum-200); }
  .start-submit { padding-left: 0; }
  .start-submit-row .magnet, .start-submit-row .btn { width: 100%; }
  .start-chip span { padding-right: 16px; font-size: 0.9rem; }
}

/* ---------- motion (transform and opacity only, never under reduced motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .start-opt:hover .start-opt-body { transform: translateY(-2px); }
  .start-tick svg { transition: stroke-dashoffset 0.35s var(--ease-out) 0.05s; }
  .start-sum-list li.is-new { animation: start-in 0.45s var(--ease-out) backwards; }
  .start-done:not([hidden]) > * { animation: start-in 0.55s var(--ease-out) backwards; }
  .start-done:not([hidden]) > :nth-child(2) { animation-delay: 60ms; }
  .start-done:not([hidden]) > :nth-child(3) { animation-delay: 110ms; }
  .start-done:not([hidden]) > :nth-child(4) { animation-delay: 160ms; }
  .start-done:not([hidden]) > :nth-child(n + 5) { animation-delay: 210ms; }
  .start-done:not([hidden]) .start-done-mark svg { animation: start-draw 0.5s var(--ease-out) 0.2s backwards; }
}
@keyframes start-in { from { opacity: 0; transform: translate3d(0, 8px, 0); } }
@keyframes start-draw { from { stroke-dashoffset: 22; } }

@media (forced-colors: active) {
  .start-opt input:checked + .start-opt-body, .start-chip input:checked + span { outline: 3px solid Highlight; outline-offset: -3px; }
  .start-tick, .start-chip span::before { border-color: CanvasText; }
  .start-progress-bar i { border: 1px solid CanvasText; }
  .start-progress-bar i.is-on { background: Highlight; }
}

/* ==========================================================================
   Home: "Start a project" band (index.html#start)
   ========================================================================== */
.section.band.start-home { padding-block: var(--section); isolation: isolate; }
.start-home::after { content: ""; position: absolute; z-index: 0; left: -340px; bottom: -460px; width: 820px; height: 820px; border-radius: 50%; border: 1px solid rgb(226 190 102 / 0.2); box-shadow: inset 0 0 0 80px rgb(226 190 102 / 0.02); pointer-events: none; }
.start-home > .container { z-index: 1; }
.start-home-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.start-home .section-head { margin-bottom: 0; }
.start-home .title-lg { max-width: 15ch; }
.start-home .title-lg em { color: var(--signal-400); }
.start-home .hero-actions { margin-top: 34px; }
.start-home-contact { margin-top: 22px; color: rgb(255 255 255 / 0.74); font-size: 0.95rem; }
.start-home-contact a { color: #fff; font-weight: 600; text-decoration: underline; text-decoration-color: rgb(226 190 102 / 0.7); text-underline-offset: 4px; }
.start-home-contact a:hover { color: var(--signal-400); }
.start-home :focus-visible { outline-color: var(--signal-400); }

.start-picks-wrap { display: grid; gap: 14px; min-width: 0; }
.start-picks { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; }
.start-picks li { display: grid; min-width: 0; }
.start-pick { display: grid; grid-template-columns: 44px minmax(0, 1fr) 16px; gap: 14px; align-items: center; min-height: 78px; padding: 14px 16px; border: 1px solid rgb(255 255 255 / 0.12); border-radius: 14px; background: linear-gradient(160deg, rgb(255 255 255 / 0.07), rgb(255 255 255 / 0.02)); color: #fff; font-size: 0.97rem; font-weight: 600; line-height: 1.3; text-decoration: none; transition: border-color 0.25s, background-color 0.25s, transform 0.35s var(--ease-out); }
.start-pick:hover { border-color: rgb(226 190 102 / 0.65); background-color: rgb(255 255 255 / 0.04); color: #fff; }
.start-pick .mega-ico { width: 44px; height: 44px; border-radius: 11px; }
.start-pick .mega-ico svg { width: 22px; height: 22px; }
.start-pick-arrow { width: 16px; height: 16px; color: var(--signal-400); transition: transform 0.25s var(--ease-out); }
.start-pick:hover .start-pick-arrow { transform: translateX(3px); }

.start-home-next { margin-top: clamp(56px, 7vw, 96px); }
.start-home-next > .label { display: block; margin-bottom: 30px; }
.start-home-steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; }
.start-home-steps li { position: relative; display: grid; gap: 10px; align-content: start; padding: 32px clamp(16px, 2.4vw, 36px) 0 0; }
.start-home-steps li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, rgb(226 190 102 / 0.75), rgb(226 190 102 / 0.12)); }
.start-home-steps li::after { content: ""; position: absolute; left: 0; top: -5px; width: 11px; height: 11px; border-radius: 50%; background: var(--signal-400); box-shadow: 0 0 0 5px rgb(226 190 102 / 0.14); }
.start-home-no { font: 400 0.72rem/1 var(--f-mono); letter-spacing: 0.14em; color: var(--signal-400); }
.start-home-steps h3 { font-size: 1.3rem; line-height: 1.2; color: #fff; }
.start-home-steps p { max-width: 34ch; color: rgb(255 255 255 / 0.74); font-size: 0.97rem; }

@media (max-width: 960px) { .start-home-grid { grid-template-columns: minmax(0, 1fr); align-items: start; } }
@media (max-width: 860px) {
  .start-home-steps { grid-template-columns: minmax(0, 1fr); }
  .start-home-steps li { padding: 0 0 28px 30px; }
  .start-home-steps li::before { left: 5px; right: auto; top: 6px; bottom: 0; width: 1px; height: auto; background: linear-gradient(180deg, rgb(226 190 102 / 0.75), rgb(226 190 102 / 0.12)); }
  .start-home-steps li::after { top: 0; }
  .start-home-steps li:last-child { padding-bottom: 0; }
  .start-home-steps li:last-child::before { display: none; }
}
@media (max-width: 600px) {
  .start-picks { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .start-pick { min-height: 64px; grid-template-columns: 40px minmax(0, 1fr) 16px; padding: 12px 14px; }
  .start-pick .mega-ico { width: 40px; height: 40px; border-radius: 10px; }
  .start-pick .mega-ico svg { width: 20px; height: 20px; }
}
@media (prefers-reduced-motion: no-preference) {
  .start-pick:hover { transform: translateY(-2px); }
}

/* --- 40-services.css --- */
/* ==========================================================================
   v2.3 · services hub (services.html) and the home "what we do" bento
   (.bento grid, the charcoal Odoo feature tile, the orbit diagram,
   the proof-and-process panel)
   ========================================================================== */

/* ---------- bento grid: 1 column on phones, 2 on tablets, featured tile spanning on desktop ---------- */
.bento { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 700px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento-feature { grid-column: 1 / -1; }
}
@media (min-width: 1081px) {
  .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bento-feature { grid-column: span 2; grid-row: span 2; }
  .bento-cta { grid-column: 1 / -1; }
}

/* entrance: a short stagger on the reveal; the hover lift uses `translate` so it is never delayed */
.bento > [data-reveal] { transition: opacity 0.6s var(--ease-out) var(--d, 0ms), transform 0.6s var(--ease-out) var(--d, 0ms), translate 0.45s var(--ease-out), border-color 0.3s, box-shadow 0.45s var(--ease-out); }
.bento > :nth-child(2) { --d: 70ms; }
.bento > :nth-child(3) { --d: 140ms; }
.bento > :nth-child(4) { --d: 210ms; }
.bento > :nth-child(5) { --d: 280ms; }
.bento > :nth-child(6) { --d: 350ms; }
.bento > :nth-child(7) { --d: 420ms; }

/* ---------- light service tile ---------- */
.bento-tile { display: flex; flex-direction: column; gap: 14px; background: radial-gradient(420px circle at var(--mx) var(--my), rgb(197 152 44 / 0.09), transparent 62%) no-repeat, linear-gradient(180deg, #fff 52%, #fbfaf6); }
.bento-tile.card.spot:hover { transform: none; translate: 0 -4px; border-color: rgb(197 152 44 / 0.5); box-shadow: 0 1px 2px rgb(28 28 31 / 0.05), 0 34px 60px -32px rgb(28 28 31 / 0.42); }
.bento-tile .f-ico { flex: none; }
.bento-tile:hover .f-ico { transform: translateY(-2px) rotate(-6deg); }
.bento-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.bento-tile .label { color: var(--plum-600); }
.bento-tile h3 { font-size: clamp(1.3rem, 1.7vw, 1.5rem); line-height: 1.16; letter-spacing: -0.015em; }
.bento-promise { font-size: 1rem; line-height: 1.55; }
.bento-list { list-style: none; display: grid; gap: 8px; margin: 2px 0 0; padding: 14px 0 0; border-top: 1px solid var(--platinum-200); }
.bento-list li { position: relative; padding-left: 18px; color: var(--midnight-700); font-size: 0.94rem; line-height: 1.45; }
.bento-list li::before { content: ""; position: absolute; left: 1px; top: 0.56em; width: 6px; height: 6px; background: var(--gold-600); transform: rotate(45deg); }
.bento-tile .link-arrow { margin-top: auto; align-self: flex-start; padding-top: 4px; }
/* the stretched link makes the whole tile clickable; its focus ring follows the tile */
.bento-tile a.stretched:focus-visible { outline: none; }
.bento-tile a.stretched::after { border-radius: 14px; }
.bento-tile a.stretched:focus-visible::after { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ---------- featured tile: Odoo ERP Solutions, charcoal with gold light ---------- */
.bento-feature { --mx: 72%; --my: 0%; isolation: isolate; gap: 22px; border-color: rgb(197 152 44 / 0.42); color: #fff; box-shadow: 0 1px 2px rgb(28 28 31 / 0.2), 0 40px 80px -42px rgb(28 28 31 / 0.75);
  background:
    radial-gradient(520px circle at var(--mx) var(--my), rgb(226 190 102 / 0.15), transparent 62%) no-repeat,
    radial-gradient(80% 60% at 100% 0%, rgb(197 152 44 / 0.26), transparent 62%),
    radial-gradient(60% 50% at 0% 100%, rgb(197 152 44 / 0.1), transparent 70%),
    linear-gradient(155deg, #2b2b30 0%, #19191c 55%, #111113 100%);
  background-size: 0 0, auto, auto, auto; }
.bento-feature.card.spot:hover { background-size: 100% 100%, auto, auto, auto; border-color: rgb(226 190 102 / 0.75); box-shadow: 0 1px 2px rgb(28 28 31 / 0.2), 0 46px 90px -40px rgb(28 28 31 / 0.85); }
.bento-feature-main, .bento-feature-more { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.bento-feature .label { color: var(--signal-400); }
.bento-feature h3 { font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: 1.02; letter-spacing: -0.028em; color: #fff; }
.bento-feature .bento-promise { max-width: 44ch; color: rgb(255 255 255 / 0.8); font-size: clamp(1.02rem, 1.3vw, 1.14rem); }
.bento-feature .bento-list { border-top-color: rgb(255 255 255 / 0.12); }
.bento-feature .bento-list li { color: var(--plum-100); }
.bento-feature .bento-list li::before { background: var(--signal-400); }
.bento-feature .f-ico { background: linear-gradient(160deg, rgb(255 255 255 / 0.12), rgb(255 255 255 / 0.03)); box-shadow: inset 0 0 0 1px rgb(226 190 102 / 0.55), 0 14px 26px -16px rgb(0 0 0 / 0.8); }
.bento-feature .link-arrow { color: var(--signal-400); }
.bento-feature .link-arrow:hover { color: #fff; }
.bento-feature :focus-visible, .bento-feature a.stretched:focus-visible::after { outline-color: var(--signal-400); }
.bento-apps { display: grid; gap: 10px; }
.bento-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.bento-tags li { padding: 6px 10px; border: 1px solid rgb(255 255 255 / 0.14); border-radius: 999px; background: rgb(255 255 255 / 0.04); color: rgb(255 255 255 / 0.84); font: 400 0.74rem/1 var(--f-mono); }
@media (max-width: 480px) { .bento-tags { gap: 5px; } .bento-tags li { padding: 5px 8px; font-size: 0.68rem; } }
.bento-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.bento-sub ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.bento-sub a { position: relative; z-index: 2; display: inline-flex; align-items: center; min-height: 34px; padding: 0 13px; border: 1px solid rgb(255 255 255 / 0.22); border-radius: 999px; color: #fff; font-size: 0.86rem; font-weight: 500; text-decoration: none; transition: border-color 0.25s, background-color 0.25s; }
.bento-sub a:hover { border-color: var(--signal-400); background: rgb(226 190 102 / 0.12); color: #fff; }
/* the large line motif (the Odoo service icon, drawn big): desktop only, where the tile has room */
.bento-motif { display: none; }
@media (min-width: 1081px) {
  .bento-feature .bento-feature-more { flex: 1; max-width: calc(100% - min(34%, 280px) - 48px); }
  .bento-feature .bento-sub { margin-top: auto; padding-top: 8px; }
  .bento-feature .link-arrow { margin-top: 0; }
  .bento-motif { display: block; position: absolute; z-index: -1; right: clamp(24px, 3vw, 40px); bottom: clamp(24px, 3vw, 40px); width: min(34%, 280px); height: auto; color: var(--signal-400); opacity: 0.55; pointer-events: none; transition: opacity 0.5s var(--ease-out); }
  .bento-motif-plus { transform-box: fill-box; transform-origin: center; transition: transform 0.6s var(--ease-out); }
  .bento-feature:hover .bento-motif { opacity: 0.8; }
  .bento-feature:hover .bento-motif-plus { transform: rotate(90deg); }
}
/* tablets: the featured tile reads in two columns */
@media (min-width: 700px) and (max-width: 1080px) {
  .bento-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px clamp(24px, 4vw, 40px); align-items: start; }
  .bento-feature .bento-list { padding-top: 0; border-top: 0; }
}

/* ---------- the call-to-action tile that closes the grid ---------- */
.bento-cta { display: flex; flex-direction: column; justify-content: center; gap: 16px; min-width: 0; padding: clamp(22px, 2.6vw, 30px); border: 1px solid #ead9a8; border-radius: 14px; background: radial-gradient(70% 120% at 100% 0%, rgb(197 152 44 / 0.16), transparent 60%), linear-gradient(120deg, #fff, var(--plum-50)); }
.bento-cta p { max-width: 62ch; color: var(--titanium-600); }
.bento-cta p b { display: block; margin-bottom: 4px; color: var(--ink); font: 600 1.32rem/1.2 var(--f-display); letter-spacing: -0.012em; }
.bento-cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
@media (min-width: 1081px) { .bento-cta { flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; padding-inline: clamp(28px, 3vw, 40px); } .bento-cta-actions { flex: none; } }

/* ---------- condensed version for the home page ---------- */
.svc-home { background: radial-gradient(50% 40% at 0% 100%, rgb(197 152 44 / 0.07), transparent 70%), linear-gradient(180deg, var(--porcelain) 0%, #fbfaf7 100%); }
.bento--compact .bento-tile { gap: 12px; padding: clamp(20px, 2.4vw, 26px); }
.bento--compact .bento-tile:not(.bento-feature) .f-ico { width: 44px; height: 44px; border-radius: 11px; }
.bento--compact .bento-tile:not(.bento-feature) .f-ico svg { width: 22px; height: 22px; }
.bento--compact .bento-tile h3 a { color: inherit; text-decoration: none; }
.bento--compact .bento-feature { gap: 18px; padding: clamp(24px, 3vw, 34px); }
.bento--compact .bento-feature h3 { font-size: clamp(1.9rem, 3.2vw, 2.7rem); }
.bento-go { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--platinum-300); border-radius: 50%; color: var(--plum-600); transition: transform 0.4s var(--ease-out), border-color 0.3s, background-color 0.3s, color 0.3s; }
.bento-go svg { width: 15px; height: 15px; }
.bento-tile:hover .bento-go { transform: translateX(3px); border-color: var(--gold-600); background: var(--gold-600); color: var(--ink); }
@media (min-width: 700px) and (max-width: 1080px) { .bento--compact .bento-feature .bento-feature-more { align-self: stretch; justify-content: flex-end; } }

/* ---------- how the services connect: the orbit diagram and its text equivalent ---------- */
.hub-connect { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(36px, 5vw, 56px); }
.hub-connect .section-head { margin-bottom: 0; }
@media (min-width: 961px) {
  .hub-connect { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-areas: "orbit head" "orbit list"; column-gap: clamp(40px, 6vw, 96px); row-gap: 36px; align-items: center; }
  .hub-connect .section-head { grid-area: head; align-self: end; }
  .hub-connect .orbit { grid-area: orbit; }
  .hub-connect .connect-list { grid-area: list; align-self: start; }
}
.orbit { --ico: 58px; position: relative; width: 100%; max-width: 520px; aspect-ratio: 1; margin: 0 auto 8px; }
.orbit-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.orbit-ring { fill: none; stroke: rgb(142 106 27 / 0.42); stroke-width: 0.3; }
.orbit-ring--outer { stroke: rgb(28 28 31 / 0.14); stroke-width: 0.25; stroke-dasharray: 0.6 1.4; }
.orbit-ring--inner { stroke: rgb(197 152 44 / 0.5); stroke-width: 0.25; }
.orbit-spoke { fill: none; stroke: rgb(142 106 27 / 0.55); stroke-width: 0.35; stroke-dasharray: 1 1.1; stroke-linecap: round; }
.orbit-spoke--odoo { stroke: var(--gold-600); stroke-width: 0.6; stroke-dasharray: none; }
.orbit-dot { fill: var(--gold-600); }
.orbit-core { position: absolute; left: 50%; top: 50%; width: 34%; aspect-ratio: 1; translate: -50% -50%; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 8%; border-radius: 50%; text-align: center; color: #fff; background: radial-gradient(80% 80% at 30% 20%, rgb(226 190 102 / 0.3), transparent 60%), linear-gradient(160deg, #2c2c31, #121214); box-shadow: 0 0 0 1px rgb(197 152 44 / 0.6), 0 0 0 10px rgb(197 152 44 / 0.08), 0 30px 50px -24px rgb(28 28 31 / 0.7); }
.orbit-core b { font: 560 clamp(1.05rem, 2.3vw, 1.55rem)/1.05 var(--f-display); letter-spacing: -0.02em; }
.orbit-core span { font: 400 clamp(0.52rem, 1vw, 0.64rem)/1.3 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--plum-300); }
.orbit-node { position: absolute; left: var(--x); top: var(--y); translate: -50% calc(var(--ico) / -2); display: grid; justify-items: center; gap: 8px; width: 8rem; text-align: center; }
.orbit-ico { width: var(--ico); height: var(--ico); display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--plum-600); box-shadow: inset 0 0 0 1px var(--platinum-300), 0 14px 28px -16px rgb(28 28 31 / 0.45); }
.orbit-ico svg { width: 44%; height: 44%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.orbit-node.is-odoo .orbit-ico { background: linear-gradient(160deg, #d5aa45, var(--gold-600)); color: var(--ink); box-shadow: 0 0 0 6px rgb(197 152 44 / 0.18), 0 16px 30px -14px rgb(142 106 27 / 0.7); }
.orbit-name { padding: 2px 7px; border-radius: 4px; background: rgb(241 240 236 / 0.9); color: var(--midnight-700); font: 400 0.68rem/1.3 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
@media (max-width: 600px) { .orbit { --ico: 44px; } .orbit-node { gap: 6px; } .orbit-name { font-size: 0.69rem; letter-spacing: 0.05em; padding-inline: 5px; } .orbit-core span { font-size: 0.64rem; letter-spacing: 0.06em; } }
@media (prefers-reduced-motion: no-preference) {
  .orbit-node, .orbit-core { transition: opacity 0.5s var(--ease-out), scale 0.5s var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms + 240ms); }
  .orbit-core { transition-delay: 120ms; }
  .orbit.is-pending .orbit-node { opacity: 0; scale: 0.7; }
  .orbit.is-pending .orbit-core { scale: 0.9; }
}
.connect-list { list-style: none; display: grid; border-top: 1px solid var(--platinum-300); }
.connect-list li { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 4px 28px; padding: 16px 0; border-bottom: 1px solid var(--platinum-300); }
.connect-list a { align-self: start; color: var(--ink); font-weight: 600; line-height: 1.35; text-decoration: underline; text-decoration-color: rgb(197 152 44 / 0.55); text-underline-offset: 4px; transition: color 0.2s, text-decoration-color 0.2s; }
.connect-list a:hover { color: var(--plum-600); text-decoration-color: currentColor; }
.connect-list li > span { color: var(--titanium-600); font-size: 0.97rem; line-height: 1.5; }
@media (max-width: 1180px) { .connect-list li { grid-template-columns: minmax(0, 1fr); } }

/* ---------- ways to work with us ---------- */
.hub-engage { display: flex; flex-direction: column; gap: 14px; }
.hub-engage-head { display: flex; align-items: center; gap: 14px; }
.hub-engage h3 { margin-top: 4px; font-size: clamp(1.4rem, 1.8vw, 1.6rem); }
.hub-engage .bento-list { margin: 0; }
.hub-engage .fit { color: var(--titanium-600); }
.hub-engage .link-arrow { align-self: flex-start; padding-top: 4px; }

/* ---------- proof and process: methodology and case studies ---------- */
.hub-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding: clamp(24px, 4vw, 52px); border: 1px solid var(--platinum-200); border-radius: 20px; background: radial-gradient(60% 90% at 100% 0%, rgb(197 152 44 / 0.14), transparent 60%), radial-gradient(50% 70% at 0% 100%, rgb(28 28 31 / 0.04), transparent 70%), linear-gradient(120deg, #fff, var(--plum-50)); box-shadow: var(--shadow-raised); }
@media (min-width: 961px) {
  .hub-panel { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 5vw, 72px); align-items: center; }
  .hub-panel-copy { grid-row: span 2; }
  .hub-cases { grid-column: 2; }
}
.hub-panel-copy { display: grid; gap: 16px; justify-items: start; }
.hub-panel-copy h2 { font-size: clamp(1.75rem, 2.8vw, 2.4rem); line-height: 1.08; }
.hub-panel-copy p:not(.eyebrow) { max-width: 44ch; color: var(--titanium-600); }
.hub-links { list-style: none; display: grid; gap: 12px; }
.hub-link { display: grid; grid-template-columns: 48px minmax(0, 1fr) 18px; align-items: center; gap: 16px; padding: 16px 20px 16px 16px; border: 1px solid var(--platinum-200); border-radius: 14px; background: #fff; color: var(--ink); text-decoration: none; transition: translate 0.4s var(--ease-out), border-color 0.3s, box-shadow 0.4s var(--ease-out); }
.hub-link:hover { translate: 0 -2px; border-color: rgb(197 152 44 / 0.55); color: var(--ink); box-shadow: 0 24px 40px -28px rgb(28 28 31 / 0.4); }
.hub-link:hover .f-ico { transform: translateY(-2px) rotate(-6deg); }
.hub-link-txt b { display: block; font: 600 1.18rem/1.25 var(--f-display); letter-spacing: -0.01em; }
.hub-link-txt span { display: block; margin-top: 3px; color: var(--titanium-600); font-size: 0.93rem; line-height: 1.45; }
.hub-link-arrow { width: 18px; height: 18px; color: var(--plum-600); transition: translate 0.3s var(--ease-out); }
.hub-link:hover .hub-link-arrow { translate: 3px 0; }
.hub-cases { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.hub-cases ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.hub-cases a { display: inline-flex; align-items: center; min-height: 34px; padding: 0 13px; border: 1px solid var(--platinum-300); border-radius: 999px; background: rgb(255 255 255 / 0.75); color: var(--midnight-700); font-size: 0.86rem; font-weight: 500; text-decoration: none; transition: border-color 0.25s, color 0.25s; }
.hub-cases a:hover { border-color: var(--gold-600); color: var(--ink); }
@media (max-width: 480px) { .hub-link { grid-template-columns: 44px minmax(0, 1fr); padding: 14px; } .hub-link .f-ico { width: 44px; height: 44px; } .hub-link-arrow { display: none; } }

/* ---------- hub hero: the badge link on the dark glance card needs a light focus ring ---------- */
.hub-hero .svc-glance :focus-visible { outline-color: var(--signal-400); }

/* ---------- closing band on the hub ---------- */
.hub-cta.band { padding-top: var(--section); }
.hub-cta em { color: var(--signal-400); }
.hub-cta :focus-visible { outline-color: var(--signal-400); }

/* ---------- reduced motion: no lifts or tilts, no stagger ---------- */
@media (prefers-reduced-motion: reduce) {
  .bento > * { --d: 0ms; }
  .bento-tile.card.spot:hover, .hub-link:hover { translate: none; }
  .bento-tile:hover .f-ico, .hub-link:hover .f-ico, .bento-tile:hover .bento-go, .bento-feature:hover .bento-motif-plus { transform: none; }
  .hub-link:hover .hub-link-arrow { translate: none; }
}

/* --- 50-odoo-erp.css --- */
/* ==========================================================================
   v2.3 · Odoo ERP Solutions hub (odoo-erp.html)
   ========================================================================== */

/* ---------- hero: the partner badge leads the dark glance card ---------- */
.odoo-glance { overflow: hidden; isolation: isolate; }
.odoo-glance::before { content: ""; position: absolute; z-index: -1; right: -180px; top: -190px; width: 360px; height: 360px; border-radius: 50%; border: 1px solid rgb(226 190 102 / 0.26); box-shadow: 0 0 0 48px rgb(226 190 102 / 0.03); pointer-events: none; }
.odoo-glance-badge { display: grid; gap: 14px; justify-items: start; padding-bottom: 20px; border-bottom: 1px solid rgb(255 255 255 / 0.12); }
.svc-glance .odoo-glance-badge .odoo-badge { margin-top: 0; }
/* narrow glance cards (small phones, and the two-column hero just above 960px): the large badge steps down so it never overflows */
@media (max-width: 400px), (min-width: 961px) and (max-width: 1010px) {
  .odoo-glance .odoo-badge--lg { gap: 8px; padding: 9px 8px 9px 10px; }
  .odoo-glance .odoo-badge--lg img { height: 26px; }
  .odoo-glance .odoo-badge--lg .odoo-badge-pill { padding: 6px 9px; font-size: 0.78rem; }
}
.odoo-glance-badge p { max-width: 34ch; color: rgb(255 255 255 / 0.8); font-size: 0.95rem; line-height: 1.5; }
@media (prefers-reduced-motion: no-preference) {
  .odoo-glance { animation: odoo-rise 0.6s var(--ease-out) 0.12s backwards; }
}
/* transform only, so the card is never hidden if animations are paused */
@keyframes odoo-rise { from { transform: translateY(16px); } }

/* ---------- Odoo services: three core cards and a wide "connect" card ---------- */
.odoo-svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.odoo-svc { display: flex; flex-direction: column; }
.odoo-svc-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 4px; }
.odoo-svc-head .label { color: var(--plum-600); }
.odoo-svc > .link-arrow { margin-top: auto; padding-top: 6px; }
.odoo-svc--wide { background: radial-gradient(420px circle at var(--mx) var(--my), rgb(197 152 44 / 0.08), transparent 62%) no-repeat, radial-gradient(60% 120% at 100% 0%, rgb(197 152 44 / 0.12), transparent 60%), linear-gradient(120deg, #fff 35%, var(--plum-50)); background-size: 0 0, auto, auto; }
.odoo-svc--wide.card.spot:hover { background-size: 100% 100%, auto, auto; }
.odoo-svc-main, .odoo-svc-side { display: grid; gap: 14px; align-content: start; justify-items: start; }
.odoo-svc-main p { max-width: 64ch; }
.odoo-svc-side { gap: 20px; margin-top: auto; }
.odoo-svc-side > .tech-list { display: flex; justify-self: stretch; margin: 0; padding: 0; }
@media (min-width: 1081px) {
  .odoo-svc--wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; column-gap: clamp(32px, 5vw, 80px); }
  .odoo-svc--wide .odoo-svc-side { margin-top: 0; padding-left: clamp(24px, 3vw, 44px); border-left: 1px solid var(--platinum-200); }
}
@media (max-width: 1080px) { .odoo-svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .odoo-svc-grid { grid-template-columns: minmax(0, 1fr); } }
/* as a normal grid card, the "connect" card puts its label on the right like cards 01-03 */
@media (max-width: 1080px) { .odoo-svc-main > .odoo-svc-head { justify-self: stretch; } }
/* no single orphan word at the end of a bullet or the hero card values */
.odoo-svc li, .odoo-svc p, .odoo-glance dd { text-wrap: pretty; }

/* ---------- proof: six case files, 3 + 3 (2 + 2 + 2 on tablets) ---------- */
.odoo-proof-grid > .proof { min-width: 0; }
@media (min-width: 1081px) { .odoo-proof-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 641px) and (max-width: 1080px) { .odoo-proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .odoo-proof-grid { grid-template-columns: minmax(0, 1fr); } }

/* client voices under the case files */
.odoo-voices { display: grid; gap: 22px; justify-items: start; margin-top: clamp(48px, 6vw, 80px); }
.odoo-voices > .grid { width: 100%; }
/* figure keeps the browser's 40px side margin otherwise, which insets the quotes from the case grid */
.odoo-voices .quote { margin: 0; }


/* ---------- section rhythm: the closing dark band keeps its top padding after a plain section ---------- */
.section.band.odoo-cta { padding-top: var(--section); }
/* small phones: wrap the breadcrumb before it reaches the hero's dark corner wedge */
@media (max-width: 400px) { .odoo-hero .crumbs { max-width: 15.5rem; } }

/* ---------- module explorer on phones and tablets: a sticky summary under the app list ----------
   The details sit below all twelve apps there, so each tap is confirmed where the visitor is.
   It rides just above the WhatsApp button in the bottom-right corner. */
.explorer-summary { display: none; }
@media (max-width: 980px) {
  .explorer .console { position: static; }
  .explorer-summary { position: sticky; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 3; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; margin: 16px 0 0; padding: 12px 16px; border: 1px solid var(--platinum-200); border-radius: 12px; background: #fff; box-shadow: 0 12px 28px -14px rgb(28 28 31 / 0.45); }
  .explorer-summary-text { display: grid; gap: 3px; min-width: 0; }
  .explorer-summary b { font-size: 1rem; line-height: 1.2; }
  .explorer-summary .link-arrow { white-space: nowrap; }
}

/* module explorer CTA on phones: full width, the label on one line from 360px, a balanced centred wrap below that */
@media (max-width: 480px) {
  .explorer .stack .btn { width: 100%; padding-inline: 16px; font-size: 0.92rem; line-height: 1.25; text-align: center; }
  .explorer .stack .btn-label { text-wrap: balance; }
}

/* module map on phones: it uses most of the card padding and the labels grow from 9.5 to 12.5 units (about 10.5px at 375) */
@media (max-width: 600px) {
  .explorer .console .map { width: calc(100% + 32px); max-width: none; margin-inline: -16px; }
  .map-node text { font-size: 12.5px; }
}

/* client voices: a company logo (not a photo) sits in a white chip, so it is never squeezed into a circle */
.quote figcaption picture { display: contents; }
.quote figcaption img.quote-logo { flex: none; width: 76px; height: 46px; padding: 6px 8px; border-radius: 10px; background: #fff; object-fit: contain; }

/* "Odoo can run your whole business. Getting there is the hard part." breaks after "business." on desktop */
#challenges .section-head { max-width: 980px; }

/* --- 51-augmentation.css --- */
/* ==========================================================================
   v2.3 · resource-augmentation.html: the two offers, sub-headings for roles
   and steps, and the closing band
   ========================================================================== */

/* ---------- hero: keep the long breadcrumb and the lede clear of the dark corner panel ----------
   With the glance card stacked (<= 960px) the hero is tall, so the panel's 46% height reached the lede. */
.aug-nb { white-space: nowrap; }
@media (max-width: 960px) { .aug-hero .crumbs { max-width: 60vw; } }
@media (min-width: 601px) and (max-width: 960px) { .aug-hero.page-hero::after { height: clamp(180px, 28vw, 260px); } }

/* ---------- two offers: inside your team (light) and under your brand (dark) ---------- */
.aug-offers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 860px) { .aug-offers { grid-template-columns: minmax(0, 1fr); } }
/* side by side, both panels share one row grid so the labels, headings and lists line up */
@media (min-width: 861px) { .aug-offer { grid-row: span 5; grid-template-rows: subgrid; } }
.aug-offer { position: relative; display: grid; gap: 16px; align-content: start; min-width: 0; padding: clamp(26px, 3.4vw, 44px); border: 1px solid var(--platinum-200); border-radius: 18px; background: radial-gradient(90% 70% at 100% 0%, rgb(197 152 44 / 0.1), transparent 60%), linear-gradient(160deg, #fff, var(--plum-50)); box-shadow: var(--shadow-raised); overflow: hidden; }
.aug-offer--dark { border-color: rgb(197 152 44 / 0.35); background: radial-gradient(110% 80% at 100% 0%, rgb(197 152 44 / 0.22), transparent 55%), linear-gradient(160deg, #26262b, #121214); color: var(--plum-100); box-shadow: 0 40px 70px -40px rgb(28 28 31 / 0.7); }
.aug-offer .label { color: var(--plum-600); }
.aug-offer--dark .label { color: var(--signal-400); }
.aug-offer h3 { font-size: clamp(1.7rem, 2.6vw, 2.25rem); line-height: 1.08; }
.aug-offer--dark h3 { color: #fff; }
.aug-offer > p { max-width: 54ch; color: var(--titanium-600); }
.aug-offer--dark > p { color: rgb(255 255 255 / 0.8); }
.aug-offer ul { list-style: none; display: grid; gap: 10px; margin: 4px 0 0; padding: 16px 0 0; border-top: 1px solid var(--platinum-200); }
.aug-offer--dark ul { border-top-color: rgb(255 255 255 / 0.12); }
.aug-offer li { position: relative; padding-left: 26px; font-size: 0.97rem; line-height: 1.5; }
.aug-offer li::before { content: ""; position: absolute; left: 2px; top: 0.38em; width: 11px; height: 6px; border-left: 1.6px solid var(--gold-600); border-bottom: 1.6px solid var(--gold-600); transform: rotate(-45deg); }
.aug-offer--dark li { color: #fff; }
.aug-offer--dark li::before { border-color: var(--signal-400); }

/* small line drawings at the top of each offer (decorative) */
.aug-viz { width: min(232px, 100%); height: auto; margin-bottom: 6px; overflow: visible; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.aug-viz .viz-base { stroke: var(--platinum-300); }
.aug-viz .viz-team, .aug-viz .viz-plus { stroke: var(--titanium-400); }
.aug-viz .viz-add { stroke: var(--gold-600); }
.aug-viz .viz-add .viz-head { fill: rgb(197 152 44 / 0.14); }
.aug-viz .viz-ring { stroke-dasharray: 3 5; opacity: 0.7; }
.aug-viz .viz-back { stroke: rgb(255 255 255 / 0.32); stroke-dasharray: 4 5; }
.aug-viz .viz-front rect { fill: #1f1f23; stroke: var(--signal-400); }
.aug-viz .viz-front circle { fill: rgb(226 190 102 / 0.18); stroke: var(--signal-400); }
.aug-viz .viz-front path { stroke: rgb(255 255 255 / 0.55); }
.aug-viz .viz-lock { stroke: var(--plum-300); }
@media (prefers-reduced-motion: no-preference) {
  .aug-offer:not(.is-pending) .viz-add { animation: aug-join 0.6s 0.25s var(--ease-out) backwards; }
  .aug-offer:not(.is-pending) .viz-front { animation: aug-layer 0.6s 0.25s var(--ease-out) backwards; }
}
@keyframes aug-join { from { opacity: 0; transform: translate3d(-14px, 0, 0); } }
@keyframes aug-layer { from { opacity: 0; transform: translate3d(10px, -8px, 0); } }

/* ---------- sub-headings inside a section (roles, how it starts) ---------- */
.aug-sub { display: grid; gap: 10px; max-width: 760px; margin: clamp(56px, 7vw, 96px) 0 clamp(26px, 3vw, 38px); }
.aug-sub h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.1; letter-spacing: -0.02em; }
.aug-sub p { max-width: 60ch; color: var(--titanium-600); }
.aug-roles h4 { font-size: 1.3rem; line-height: 1.2; }
.aug-steps { margin-top: 8px; }
.aug-steps h4 { font-size: 1.22rem; line-height: 1.2; }
/* three models side by side: the "Best for" lines share one baseline */
@media (min-width: 961px) { .aug-how .engage { grid-template-rows: auto auto 1fr auto; } }
/* small gold text on the warm surface: #8e6a1b is only ~4.1:1 on #ebe9e4, the darker gold is ~6:1 */
.aug-how .section-head .eyebrow, .aug-how .svc-step-no { color: var(--plum-700); }

/* ---------- proof and the Odoo panel ---------- */
.aug-more { margin-top: 24px; }
/* four cases: 2 x 2 until there is room for one row of four (never 3 + 1) */
@media (min-width: 640px) { .aug-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* one row of four: the cards share label / heading / body rows, so the headings keep one baseline even when a label wraps */
@media (min-width: 1180px) {
  .aug-proof { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; }
  .aug-proof > .proof { grid-row: span 3; grid-template-rows: subgrid; }
}
.aug-odoo { margin-top: clamp(40px, 5vw, 64px); }
.aug-odoo > div { display: grid; gap: 10px; }
/* mid widths: the link drops under the copy so the copy keeps a readable measure */
@media (min-width: 861px) and (max-width: 1180px) {
  .aug-odoo { grid-template-columns: auto minmax(0, 1fr); row-gap: 14px; }
  .aug-odoo > .link-arrow { grid-column: 2; justify-self: start; }
}
@media (max-width: 860px) { .aug-odoo > .link-arrow { justify-self: start; } }

/* ---------- closing band: its own top spacing and a gold accent that reads on charcoal ---------- */
.section.cta-final.aug-cta { padding-top: var(--section); }
.aug-cta .eyebrow { margin-bottom: 18px; }
.aug-cta .title-lg em { color: var(--signal-400); }

/* --- 52-software.css --- */
/* ==========================================================================
   v2.3 · Custom Software Solutions page (custom-software.html)
   Every selector is scoped to an sw- class used only on that page.
   ========================================================================== */

/* ---------- feature cards: the stack line sits on the bottom edge ---------- */
.sw-features .feature { grid-template-rows: auto auto 1fr auto; }
.feature .sw-stack { padding-top: 14px; border-top: 1px dashed var(--platinum-300); color: var(--plum-600); font-size: 0.7rem; }

/* ---------- steps on the warm surface ---------- */
/* the standard gold (#8e6a1b) measures 4.1-4.3:1 on the warm gradient; the deeper gold keeps small text above 4.5:1 */
.sw-how .eyebrow, .sw-how .svc-step-no, .sw-note .link-arrow { color: var(--plum-700); }
.sw-note .link-arrow:hover { color: var(--ink); }

/* ---------- steps: a quiet line pointing to the dedicated-developer route ---------- */
.sw-note { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; margin-top: clamp(32px, 4vw, 48px); padding-top: 22px; border-top: 1px solid rgb(28 28 31 / 0.1); color: var(--titanium-600); }

/* ---------- proof: three case cards beside a dark testimonial (3-up or stacked on tablets) ----------
   the link arrow and the testimonial card are the shared .proof and .svc-quote components (01-service-page.css) */
.sw-proof { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px; }
.sw-proof .proof-grid { grid-template-columns: minmax(0, 1fr); }
.sw-proof .proof { padding: clamp(22px, 2.6vw, 30px); }
.sw-proof .proof .label { margin-bottom: 2px; }
.sw-proof .proof b { font-size: 1.4rem; }
@media (max-width: 960px) { .sw-proof { grid-template-columns: minmax(0, 1fr); } }
/* never 2 + 1: three across where they fit, otherwise one column */
@media (min-width: 821px) and (max-width: 960px) { .sw-proof .proof-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- tools row and the Odoo panel ---------- */
/* the label sits above the chips, so all eleven fit on one row at desktop widths */
.sw-tech { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: clamp(48px, 6vw, 80px); padding-top: clamp(24px, 3vw, 32px); border-top: 1px solid var(--platinum-200); }
.sw-tech h3 { color: var(--plum-600); }
.sw-odoo { margin-top: clamp(32px, 4vw, 48px); }
/* the panel heading otherwise sits directly on its paragraph */
.sw-odoo > div { display: grid; gap: 8px; }
/* mid widths: three columns squeeze the copy to about 340px, so the link moves under it */
@media (min-width: 861px) and (max-width: 1180px) {
  .sw-odoo { grid-template-columns: auto minmax(0, 1fr); row-gap: 14px; }
  .sw-odoo .odoo-badge { grid-row: 1 / span 2; }
  .sw-odoo > .link-arrow { grid-column: 2; justify-self: start; }
}
/* stacked: the link keeps its own width instead of stretching across the panel */
@media (max-width: 860px) { .sw-odoo > .link-arrow { justify-self: start; } }
/* small phones: the large badge steps down to the standard size so it fits the panel */
@media (max-width: 420px) {
  .sw-odoo .odoo-badge--lg { gap: 10px; padding: 8px 10px 8px 12px; border-radius: 10px; }
  .sw-odoo .odoo-badge--lg img { height: 22px; }
  .sw-odoo .odoo-badge--lg .odoo-badge-pill { padding: 5px 9px; font-size: 0.74rem; }
}

/* ---------- closing band: full padding after a plain section, bright gold accent ---------- */
.section.band.sw-cta { padding-block: var(--section); }
.sw-cta .title-lg em { color: var(--signal-400); }
/* the eyebrow otherwise sits about 3px above the headline; match the .section-head rhythm */
.sw-cta .eyebrow { margin-bottom: 18px; }
/* the site's charcoal focus ring disappears on the dark band */
.sw-cta :focus-visible { outline-color: var(--signal-400); }

/* ---------- hero: on phones the breadcrumb wraps before the dark corner wedge ---------- */
@media (max-width: 600px) { .sw-hero .crumbs { max-width: 66vw; } }
/* small tablets: the lede stays on the light side of the corner wedge */
@media (min-width: 601px) and (max-width: 860px) { .sw-hero .lede { max-width: min(62ch, 72vw); } }

/* --- 53-design.css --- */
/* ==========================================================================
   v2.3 · ui-ux-design.html: page-specific touches (every selector uses a dz- class)
   ========================================================================== */

/* ---------- breadcrumb: on phones, wrap before the hero's dark corner wedge ---------- */
.dz-here { white-space: nowrap; }
@media (max-width: 600px) { .dz-crumbs { max-width: 62vw; } }
/* 601-1023px: the wedge is taller, and the lede's first lines ran under its diagonal at 601-690px */
@media (min-width: 601px) and (max-width: 1023px) { .dz-lede { max-width: min(62ch, 74vw); } }

/* ---------- hero "at a glance" card: label plus a small brand-palette swatch row ---------- */
.dz-glance-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.dz-swatches { display: inline-flex; padding-left: 6px; }
.dz-swatches i { width: 18px; height: 18px; margin-left: -6px; border: 2px solid #1f1f23; border-radius: 50%; box-shadow: 0 4px 10px -4px rgb(0 0 0 / 0.7); transition: transform 0.45s var(--ease-out); }
.dz-swatches i:nth-child(1) { background: var(--gold-600); }
.dz-swatches i:nth-child(2) { background: var(--signal-400); }
.dz-swatches i:nth-child(3) { background: var(--titanium-400); }
.dz-swatches i:nth-child(4) { background: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .dz-swatches i { animation: dz-swatch-in 0.55s var(--ease-out) 0.35s backwards; }
  .dz-swatches i:nth-child(2) { animation-delay: 0.42s; }
  .dz-swatches i:nth-child(3) { animation-delay: 0.49s; }
  .dz-swatches i:nth-child(4) { animation-delay: 0.56s; }
  .svc-glance:hover .dz-swatches i:nth-child(2) { transform: translateX(3px); }
  .svc-glance:hover .dz-swatches i:nth-child(3) { transform: translateX(6px); }
  .svc-glance:hover .dz-swatches i:nth-child(4) { transform: translateX(9px); }
}
@keyframes dz-swatch-in { from { opacity: 0; transform: translateX(-10px); } }

/* ---------- proof: case card and tools on the left, client quote on the right ----------
   source order is case, quote, tools, so phones read it in that order without reordering */
.dz-proof { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 16px; align-items: stretch; }
.dz-proof .proof-grid { grid-column: 1; grid-row: 1; grid-template-columns: minmax(0, 1fr); }
.dz-proof .dz-quote { grid-column: 2; grid-row: 1 / span 2; }
.dz-proof .dz-tools { grid-column: 1; grid-row: 2; }
.dz-tools { display: grid; gap: 16px; align-content: start; padding: clamp(22px, 2.6vw, 30px); border: 1px solid var(--platinum-200); border-radius: 14px; background: linear-gradient(160deg, #fff 35%, var(--plum-50)); }
/* the same mono label as the other service pages' tools lists */
.dz-tools .label { color: var(--plum-600); }

/* the quote card itself is the shared .svc-quote component (01-service-page.css) */
/* one column: case, then the client's words, then the tools list */
@media (max-width: 960px) {
  .dz-proof { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .dz-proof > .proof-grid, .dz-proof > .dz-quote, .dz-proof > .dz-tools { grid-column: auto; grid-row: auto; }
  .dz-quote { margin-bottom: 8px; }
}

/* room between the dark card's shadow and the Odoo panel */
.dz-proof + .odoo-link { margin-top: clamp(56px, 6vw, 88px); }

/* ---------- closing band ---------- */
/* .section + .section removes the top padding; the dark band needs it back */
.section + .section.dz-cta { padding-top: var(--section); }
.dz-cta .title-lg em { color: var(--signal-400); }
/* the eyebrow otherwise sits about 2px above the headline; match the .section-head rhythm */
.dz-cta .eyebrow { margin-bottom: 18px; }
/* the site's charcoal focus ring disappears on the dark band */
.dz-cta :focus-visible { outline-color: var(--signal-400); }

/* --- 54-ai.css --- */
/* ==========================================================================
   v2.3 · ai-automation.html: page-specific touches (all selectors prefixed ai-)
   ========================================================================== */

/* ---------- hero: keep the breadcrumb and lede clear of the dark corner panel ---------- */
@media (max-width: 600px) { .ai-hero .crumbs { max-width: 68vw; } }
@media (min-width: 601px) and (max-width: 1023px) { .ai-hero .crumbs { max-width: 54vw; } .ai-hero .lede { max-width: min(62ch, 78vw); } }

/* ---------- approach: small gold text needs the deeper gold on the warm grey (plum-600 is about 4.1-4.4:1 there; plum-700 is above 6:1) ---------- */
.ai-how .eyebrow, .ai-steps .svc-step-no { color: var(--plum-700); }

/* ---------- approach: the gold rail draws in, step by step, as it scrolls into view ---------- */
@media (prefers-reduced-motion: no-preference) {
  .ai-steps li::before { transform-origin: left center; transition: transform 0.6s var(--ease-out); }
  .ai-steps li::after { transition: transform 0.45s var(--ease-out); }
  .ai-steps li:nth-child(2)::before, .ai-steps li:nth-child(2)::after { transition-delay: 0.12s; }
  .ai-steps li:nth-child(3)::before, .ai-steps li:nth-child(3)::after { transition-delay: 0.24s; }
  .ai-steps li:nth-child(4)::before, .ai-steps li:nth-child(4)::after { transition-delay: 0.36s; }
  .ai-steps.is-pending li::before { transform: scaleX(0); }
  .ai-steps.is-pending li::after { transform: scale(0.4); }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 900px) {
  .ai-steps li::before { transform-origin: center top; }
  .ai-steps.is-pending li::before { transform: scaleY(0); }
}

/* ---------- responsible by design: a calm white panel under the steps ---------- */
.ai-guard { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 9fr); gap: clamp(24px, 4vw, 56px); margin-top: clamp(48px, 6vw, 80px); padding: clamp(24px, 3.2vw, 40px); border: 1px solid var(--platinum-200); border-radius: 18px; background: radial-gradient(80% 120% at 100% 100%, rgb(197 152 44 / 0.1), transparent 60%), linear-gradient(135deg, #fff 0%, #fff 55%, var(--plum-50) 100%); box-shadow: var(--shadow-raised); }
.ai-guard-head { display: grid; gap: 12px; align-content: start; }
.ai-guard-head .label { color: var(--plum-600); }
.ai-guard-head h3 { font-size: clamp(1.5rem, 2.3vw, 2rem); line-height: 1.1; }
.ai-guard-head p { color: var(--titanium-600); }
.ai-guard-list { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); margin: 0; padding: 0; }
.ai-guard-list li { display: grid; gap: 8px; align-content: start; padding-top: 18px; border-top: 1px solid var(--platinum-300); }
.ai-guard-list b { font-weight: 600; line-height: 1.3; }
.ai-guard-list li > span:last-child { color: var(--titanium-600); font-size: 0.95rem; }
.ai-guard-ico { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 4px; border: 1px solid var(--plum-100); border-radius: 10px; background: var(--plum-50); color: var(--plum-600); }
.ai-guard-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 1080px) { .ai-guard { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .ai-guard-list { grid-template-columns: minmax(0, 1fr); } }

/* ---------- proof: case cards beside the tools we use ---------- */
.ai-proof { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 16px; align-items: stretch; margin-bottom: clamp(32px, 4vw, 48px); }
.ai-proof .proof { display: flex; flex-direction: column; gap: 8px; height: 100%; }
/* the same solid tools card as ui-ux-design (.dz-tools) */
.ai-tools { display: grid; gap: 14px; align-content: start; padding: clamp(22px, 2.6vw, 30px); border: 1px solid var(--platinum-200); border-radius: 14px; background: linear-gradient(160deg, #fff 35%, var(--plum-50)); }
.ai-tools .label { color: var(--plum-600); }
.ai-tools p { color: var(--titanium-600); font-size: 0.92rem; }
@media (max-width: 1080px) { .ai-proof { grid-template-columns: minmax(0, 1fr); } }
.ai-odoo > div { display: grid; gap: 8px; }

/* ---------- related services as a list ---------- */
.ai-xsell { list-style: none; margin: 0; padding: 0; }
.ai-xsell li { display: grid; }

/* ---------- closing band: the section above leaves no top padding, and the accent reads brighter on charcoal ---------- */
.section.band.ai-cta { padding-top: var(--section); }
.ai-cta .title-lg em { color: var(--signal-400); }

/* --- 55-marketing.css --- */
/* ==========================================================================
   v2.3 · Digital Marketing page (digital-marketing.html)
   Page-specific touches only; every selector is prefixed .mk-
   ========================================================================== */

/* ---------- monthly report: what every report covers ---------- */
.card.mk-report { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(22px, 4vw, 56px); margin-top: clamp(44px, 6vw, 72px); border-top: 2px solid var(--gold-600); border-radius: 6px 6px 16px 16px; background: linear-gradient(180deg, #fff 0%, #fcfbf8 100%); }
.mk-report-head { display: grid; gap: 12px; align-content: start; }
.mk-report-head .label { color: var(--plum-600); }
.mk-report-head h3 { font-size: clamp(1.35rem, 2vw, 1.6rem); line-height: 1.15; }
.mk-report-list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin: 0; padding: 0; }
.mk-report-list li { position: relative; display: grid; gap: 2px; align-content: start; padding: 14px 0 14px 22px; border-top: 1px dashed var(--platinum-300); }
.mk-report-list li::before { content: ""; position: absolute; left: 1px; top: 22px; width: 7px; height: 7px; background: var(--gold-600); transform: rotate(45deg); }
.mk-report-list b { font-weight: 600; color: var(--ink); }
.mk-report-list span { color: var(--titanium-600); font-size: 0.94rem; line-height: 1.5; }
@media (max-width: 960px) { .card.mk-report { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .mk-report-list { grid-template-columns: minmax(0, 1fr); } }

/* ---------- lead path: from first click to the CRM (dark panel) ---------- */
.mk-flow { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: clamp(28px, 4vw, 44px); padding: clamp(24px, 4vw, 48px); border: 1px solid rgb(197 152 44 / 0.35); border-radius: 20px; background: radial-gradient(60% 120% at 100% 0%, rgb(197 152 44 / 0.2), transparent 60%), radial-gradient(50% 90% at 0% 100%, rgb(197 152 44 / 0.08), transparent 65%), linear-gradient(160deg, #26262b, #121214); color: var(--plum-100); box-shadow: 0 30px 50px -36px rgb(28 28 31 / 0.6); }
.mk-flow::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(rgb(255 255 255 / 0.1) 1px, transparent 1.5px) 0 0 / 20px 20px; -webkit-mask-image: radial-gradient(55% 80% at 100% 0%, #000, transparent 72%); mask-image: radial-gradient(55% 80% at 100% 0%, #000, transparent 72%); }
.mk-flow-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; padding-bottom: clamp(18px, 2.4vw, 26px); border-bottom: 1px solid rgb(255 255 255 / 0.1); }
.mk-flow-head .label { color: var(--signal-400); }
.mk-flow-head p { max-width: 52ch; color: rgb(255 255 255 / 0.74); font-size: 0.95rem; }

.mk-path { --node: 52px; --gap: clamp(18px, 2.6vw, 36px); list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); margin: 0; padding: 0; }
.mk-path li { position: relative; display: grid; gap: 10px; align-content: start; min-width: 0; }
.mk-path li::after { content: ""; position: absolute; top: calc(var(--node) / 2); left: calc(var(--node) + 12px); right: calc(12px - var(--gap)); height: 1px; background: repeating-linear-gradient(90deg, rgb(226 190 102 / 0.75) 0 6px, transparent 6px 11px); transform-origin: left center; }
.mk-path li:last-child::after { display: none; }
.mk-node { width: var(--node); height: var(--node); display: grid; place-items: center; border: 1px solid rgb(226 190 102 / 0.55); border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgb(226 190 102 / 0.2), rgb(255 255 255 / 0.02) 70%); color: var(--signal-400); box-shadow: 0 0 0 6px rgb(197 152 44 / 0.07); }
.mk-node svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mk-path li:last-child .mk-node { border-color: transparent; background: linear-gradient(180deg, #d5aa45, var(--gold-600)); color: var(--ink); box-shadow: 0 0 0 6px rgb(197 152 44 / 0.16), 0 14px 28px -12px rgb(197 152 44 / 0.7); }
.mk-step { margin-top: 6px; font: 400 0.66rem/1.3 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--plum-300); }
.mk-path h3 { font-size: 1.18rem; line-height: 1.22; color: #fff; }
.mk-path p { color: rgb(255 255 255 / 0.74); font-size: 0.94rem; line-height: 1.55; }
.mk-flow :focus-visible { outline-color: var(--signal-400); }

/* below 900px the path runs down the page: node on the left, text on the right */
@media (max-width: 900px) {
  .mk-path { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .mk-path li { grid-template-columns: var(--node) minmax(0, 1fr); column-gap: 18px; row-gap: 6px; padding-bottom: 28px; }
  .mk-path li:last-child { padding-bottom: 0; }
  .mk-node { grid-row: 1 / span 3; }
  .mk-step { margin-top: 2px; }
  .mk-path li::after { top: calc(var(--node) + 8px); bottom: 8px; left: calc(var(--node) / 2); right: auto; width: 1px; height: auto; background: repeating-linear-gradient(180deg, rgb(226 190 102 / 0.75) 0 6px, transparent 6px 11px); transform-origin: center top; }
}

/* the path draws itself once, when the panel scrolls into view */
@media (prefers-reduced-motion: no-preference) {
  .mk-flow.is-pending .mk-path li { opacity: 0; transform: translate3d(0, 12px, 0); }
  .mk-flow.is-pending .mk-path li::after { transform: scaleX(0); }
  /* only the reveal animates; entering the pending state is instant */
  .mk-flow:not(.is-pending) .mk-path li { transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out); transition-delay: calc(var(--i, 0) * 110ms + 160ms); }
  .mk-flow:not(.is-pending) .mk-path li::after { transition: transform 0.6s var(--ease-out); transition-delay: calc(var(--i, 0) * 110ms + 320ms); }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 900px) {
  .mk-flow.is-pending .mk-path li::after { transform: scaleY(0); }
}

/* ---------- client words + platforms ---------- */
.mk-proof { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px; margin-block: clamp(32px, 4vw, 48px) clamp(40px, 5vw, 64px); }
@media (max-width: 960px) { .mk-proof { grid-template-columns: minmax(0, 1fr); } }
.mk-quote { margin: 0; grid-template-rows: auto auto 1fr; }
.mk-quote figcaption { align-self: end; }
.mk-quote > .label, .mk-tools > .label { color: var(--plum-600); }
.mk-tools { gap: 18px; }
.mk-own { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; margin-top: auto; padding-top: 16px; border-top: 1px dashed var(--platinum-300); font-size: 0.94rem; }
.mk-own svg { width: 20px; height: 20px; margin-top: 2px; fill: none; stroke: var(--plum-600); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Odoo panel: give the copy column its own rhythm ---------- */
.mk-odoo > div { display: grid; gap: 10px; }
.mk-odoo .link-arrow { white-space: nowrap; }
/* mid widths: three columns squeeze the copy, so the link moves under it */
@media (min-width: 861px) and (max-width: 1140px) {
  .mk-odoo { grid-template-columns: auto minmax(0, 1fr); row-gap: 14px; }
  .mk-odoo .odoo-badge { grid-row: 1 / span 2; }
  .mk-odoo .link-arrow { grid-column: 2; justify-self: start; }
}
@media (max-width: 860px) { .mk-odoo .link-arrow { white-space: normal; } }

/* ---------- closing band: room above it, and a gold that reads on charcoal ---------- */
.section.mk-cta { padding-top: var(--section); }
.mk-cta .title-lg em { color: var(--signal-400); }

/* ---------- client work: the case file under the lead path ---------- */
/* room between the dark panel's shadow and the case strip, and between the case strip and the Paynet quote (different clients) */
.mk-cases { margin-top: clamp(24px, 3vw, 36px); }

/* --- 60-pages.css --- */
/* ==========================================================================
   v2.3 · secondary pages: Odoo sub-pages (implementation, customization, support)
   ========================================================================== */

/* The four-level breadcrumb and the headline wrap clear of the hero's dark corner wedge. */
@media (max-width: 600px) {
  .odoo-sub-hero .crumbs { max-width: calc(64vw - var(--gutter) + 1.5rem); }
}
@media (min-width: 601px) and (max-width: 1023px) {
  .odoo-sub-hero .crumbs { max-width: calc(56vw - var(--gutter) + 2.5rem); }
  .odoo-sub-hero h1 { max-width: min(18ch, calc(56vw - var(--gutter) + 6rem)); }
}

/* related case files with more than one link */
.card-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; }

/* "See the whole Odoo picture" panel: heading and text stacked */
.odoo-link-copy { display: grid; gap: 8px; }

/* About: the six service cards keep their links aligned along the bottom of each row */
.about-services .feature { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.about-services .feature .link-arrow { margin-top: auto; }

/* ---------- case studies ---------- */
/* sticky viewer: a long service line wraps to a second line instead of being cut off */
.vmeta { height: auto; min-height: 64px; }
.vmeta-kicker span { white-space: normal; text-wrap: balance; }

/* the intro sheet's plates sit partly on the light hero and partly on the dark panel:
   a two-tone focus ring (ink band, bright gold ring) reads on both */
.intro-sheet .plate--sm:focus-visible { outline: 2px solid var(--signal-400); outline-offset: 3px; box-shadow: 0 0 0 3px var(--ink), 0 16px 34px -22px rgb(0 0 0 / 0.75); }
/* phones: the sheet is a scrolling rail; room for the ring at its top edge */
@media (max-width: 767px) { .roster--sheet { padding-top: 6px; } }

/* 1024-1279px: the dark panel's slanted edge follows the gap between the two columns,
   so the whole contact sheet sits on the panel */
@media (min-width: 1024px) and (max-width: 1279px) {
  .dossier-intro.page-hero::after { width: calc(50% + 14px); clip-path: polygon(24px 0, 100% 0, 100% 100%, 0 100%); }
}

/* stacked page + aside (Odoo sub-pages, about): both columns keep the same reading measure, so their right edges line up */
@media (max-width: 960px) { .split > .prose, .split > .aside { max-width: 68ch; } }

/* ---------- 404: the shared inner-page hero (light side, charcoal brand panel on the right) ---------- */
.notfound-hero .notfound { min-height: calc(72vh - var(--header-h)); padding-top: 0; }
.notfound h1 { max-width: 16ch; }
.notfound-actions { margin-top: 0; }
.notfound-links { display: grid; gap: 14px; max-width: 760px; margin-top: 12px; }
/* desktop: the copy stays on the light side of the panel */
@media (min-width: 1024px) { .notfound > * { max-width: min(700px, calc(100vw - min(38vw, 560px) - 2 * var(--gutter) - 24px)); } }
/* phones: the three text links sit on one row under the main button, no orphan */
@media (max-width: 600px) {
  .notfound-actions { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 14px 20px; }
  .notfound-actions .magnet { grid-column: 1 / -1; }
}

/* --- 70-home.css --- */
/* ==========================================================================
   v2.3 · home page
   ========================================================================== */

/* hero: the partner badge sits beside the reassurance line */
.hero-note.hero-trust { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; font: inherit; letter-spacing: normal; text-transform: none; }
.hero-trust > span { font: 400 0.7rem/1.4 var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--titanium-600); }
.hero-trust .odoo-badge { padding: 6px 8px 6px 10px; background: rgb(255 255 255 / 0.85); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hero-trust .odoo-badge img { height: 18px; }
.hero-trust .odoo-badge-pill { padding: 4px 7px; font-size: 0.68rem; }

/* hero tooltip: app name and its business area (no technical model names) */
.hero-tip span { font: 400 0.68rem/1.2 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--plum-700); }

/* hero kicker: the deeper gold (#8e6a1b measured 4.47:1 on the #f4f3ef hero and less on its glow) */
.hero .eyebrow { color: var(--plum-700); }

/* the hero copy uses the same 1360px measure as the header and every section, so it lines up with the logo on wide screens */
.hero-inner { max-width: 1360px; }

/* the client strip's pause control sits at the start of the band, clear of the fixed WhatsApp button in the bottom-right corner */
.hero .marquee-toggle { right: auto; left: max(12px, calc(var(--gutter) - 22px)); }

/* hero panel: a pause button beside Play stops the 3D scene (WCAG 2.2.2) */
.hud-buttons { display: grid; grid-template-columns: minmax(0, 1fr) 40px; gap: 8px; }
.hud-pause { height: 40px; display: grid; place-items: center; border: 1px solid var(--platinum-300); border-radius: 8px; background: rgb(255 255 255 / 0.75); color: var(--ink); cursor: pointer; transition: border-color 0.2s, background-color 0.2s; }
.hud-pause:hover { border-color: var(--ink); background: var(--paper); }
.hud-pause svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hud-pause .i-play { display: none; fill: currentColor; stroke-width: 1.4; }
.hud-pause[aria-pressed="true"] .i-play { display: inline; }
.hud-pause[aria-pressed="true"] .i-pause { display: none; }

/* phones and tablets: the hero visual gives way so the primary call to action is on the first screen */
.hero-stage { height: clamp(260px, calc(100svh - 490px), min(66svh, 118vw)); }
.hero-inner { padding-top: calc(clamp(260px, calc(100svh - 490px), min(66svh, 118vw)) - 12px); }
.hero-poster { top: calc(50% + var(--header-h) / 2); width: min(84vw, 30rem, calc(clamp(260px, calc(100svh - 490px), min(66svh, 118vw)) - var(--header-h) - 12px)); }
@media (min-width: 1024px) and (min-aspect-ratio: 1/1) {
  .hero-stage { height: auto; }
  .hero-inner { padding-top: calc(var(--header-h) + 40px); }
  .hero-poster { top: 50%; width: min(48vw, 46rem); }
}

/* numbers band: the two verified figures and the six service lines */
.stats-band .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) {
  .stats-band .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-band .stats > div:nth-child(3) { grid-column: 1 / -1; }
}
/* the "+" carries meaning (200+): the deeper gold reads on the gold band (gold-600 gave 2.0-2.4:1) */
.stats-band .stats strong { color: var(--plum-700); }

/* client strip with reduced motion: it does not move, so every name must be reachable */
@media (prefers-reduced-motion: reduce) {
  .hero .marquee { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: rgb(197 152 44 / 0.6) transparent; }
  .hero .marquee::before, .hero .marquee::after { display: none; }
  .hero .marquee ul { padding-inline: var(--gutter); }
  .hero .marquee li[aria-hidden="true"] { display: none; }
  .hero .marquee li:nth-last-child(1 of :not([aria-hidden]))::after { display: none; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 1024px) {
  .hero .marquee { overflow: hidden; }
  .hero .marquee ul { width: auto; flex-wrap: wrap; justify-content: center; gap: 12px 40px; }
  .hero .marquee li { gap: 40px; }
}

/* phones: "From scattered tools" stays on its first line (it is a forced line), so "From" never stands alone */
@media (max-width: 420px) { .hero-title { font-size: clamp(1.9rem, 9.8vw, 2.6rem); } }

/* --- 75-clientele.css --- */
/* ==========================================================================
   v2.3 · home clientele: a calm, straight logo band (light), two rows moving
   slowly in opposite directions (never a countable grid), uniform tiles, a hover
   caption, a labelled Pause / Play button. Reduced motion: a still logo wall.
   ========================================================================== */

/* ---------- section ---------- */
.section.clients-band { position: relative; isolation: isolate; overflow: hidden; overflow: clip; padding-block: var(--section); background: radial-gradient(60% 90% at 100% 0%, rgb(197 152 44 / 0.1), transparent 60%), linear-gradient(180deg, #fbfaf7 0%, #f3f1ec 100%); border-block: 1px solid var(--platinum-200); }
.section.clients-band + .section { padding-top: var(--section); }
.clients-band .glimpse-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "intro" "roster"; row-gap: 28px; }
@media (min-width: 1024px) {
  .clients-band .glimpse-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "title intro" "roster roster"; row-gap: clamp(44px, 5vw, 64px); }
  .clients-band .glimpse-intro { justify-self: end; align-self: end; }
}
.clients-band .glimpse-title .lede { max-width: 54ch; }
.clients-band .glimpse-intro { display: flex; align-items: center; }

/* ---------- lanes ---------- */
.glimpse .lanes { grid-area: roster; min-width: 0; }
.lanes { position: relative; display: flex; flex-direction: column; align-items: flex-start; margin-inline: calc(var(--gutter) * -1); }
.lanes-rows { order: -1; align-self: stretch; display: grid; gap: 16px; padding-block: 10px 14px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); }
.lane-track { display: flex; gap: 16px; width: max-content; margin: 0; padding: 0; list-style: none; }
.lane-item { flex: none; }

.lane-plate { position: relative; display: grid; place-items: center; width: clamp(168px, 15vw, 214px); height: clamp(88px, 8vw, 108px); padding: 18px 26px; overflow: hidden; border: 1px solid var(--platinum-200); border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgb(28 28 31 / 0.04), 0 14px 30px -24px rgb(28 28 31 / 0.35); color: var(--ink); text-decoration: none; transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out), border-color 0.3s; }
.lane-plate .plate-mark { display: block; width: 100%; height: 100%; }
.lane-plate .plate-mark picture { display: contents; }
.lane-plate .plate-mark img { display: block; width: 100%; height: 100%; object-fit: contain; scale: min(var(--ls, 1), 1.2); transition: transform 0.5s var(--ease-out), opacity 0.3s; }
.lane-plate .plate-name b { font: 600 1rem/1.15 var(--f-display); text-align: center; }

/* hover or keyboard focus: the tile lifts, gains a gold edge and names the client and the work */
.lane-cap { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 2px; padding: 9px 14px 10px; background: linear-gradient(180deg, rgb(255 255 255 / 0.9), #fff 40%); border-top: 1px solid var(--platinum-200); text-align: left; transform: translateY(101%); transition: transform 0.4s var(--ease-out); }
.lane-cap b { overflow: hidden; font: 600 0.82rem/1.2 var(--f-sans); white-space: nowrap; text-overflow: ellipsis; }
.lane-cap span { overflow: hidden; font: 400 0.6rem/1.3 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--plum-700); white-space: nowrap; text-overflow: ellipsis; }
.lane-plate:hover, .lane-plate:focus-visible { transform: translateY(-4px); border-color: rgb(197 152 44 / 0.65); box-shadow: 0 0 0 1px rgb(197 152 44 / 0.35), 0 22px 40px -22px rgb(142 106 27 / 0.45); }
.lane-plate:focus-visible { outline: 2px solid var(--gold-600); outline-offset: 3px; }
.lane-plate:hover .lane-cap, .lane-plate:focus-visible .lane-cap { transform: none; }
.lane-plate:hover .plate-mark img, .lane-plate:focus-visible .plate-mark img { transform: translateY(-14px) scale(0.86); }

/* ---------- pause control (WCAG 2.2.2), shown once the script runs ---------- */
.lanes-toggle { display: none; align-items: center; gap: 8px; margin: 18px 0 0 var(--gutter); padding: 7px 14px 7px 11px; border: 1px solid var(--platinum-300); border-radius: 999px; background: #fff; color: var(--titanium-600); font: 500 0.78rem/1 var(--f-sans); cursor: pointer; transition: border-color 0.2s, color 0.2s; }
.lanes.is-live .lanes-toggle { display: inline-flex; }
.lanes-toggle:hover { border-color: var(--gold-600); color: var(--ink); }
.lanes-toggle:focus-visible { outline: 2px solid var(--gold-600); outline-offset: 3px; }
.lanes-toggle svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.lanes-toggle .i-play { display: none; fill: currentColor; stroke-width: 1.4; }
.lanes.is-paused .lanes-toggle .i-play { display: inline; }
.lanes.is-paused .lanes-toggle .i-pause { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .lane-track { animation: lane-left var(--dur, 70s) linear infinite; }
  .lane[data-dir="right"] .lane-track { animation-name: lane-right; }
  .lane:hover .lane-track, .lane:focus-within .lane-track, .lanes.is-paused .lane-track, .lanes.is-off .lane-track { animation-play-state: paused; }
}
/* one copy plus one gap: the loop has no visible seam */
@keyframes lane-left { to { transform: translate3d(calc(-50% - 8px), 0, 0); } }
@keyframes lane-right { from { transform: translate3d(calc(-50% - 8px), 0, 0); } to { transform: none; } }

/* visitors who prefer less motion see each client once, in a calm wall */
@media (prefers-reduced-motion: reduce) {
  .lane-track { flex-wrap: wrap; justify-content: center; width: auto; padding-inline: var(--gutter); }
  .lane-item[aria-hidden="true"] { display: none; }
  .lanes-rows { -webkit-mask-image: none; mask-image: none; }
  .lanes.is-live .lanes-toggle { display: none; }
}
@media (max-width: 760px) {
  .lanes-rows, .lane-track { gap: 12px; }
  @keyframes lane-left { to { transform: translate3d(calc(-50% - 6px), 0, 0); } }
  @keyframes lane-right { from { transform: translate3d(calc(-50% - 6px), 0, 0); } to { transform: none; } }
  .lane-plate { width: 148px; height: 82px; padding: 14px 18px; border-radius: 12px; }
  .lanes-rows { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%); }
}
@media print { .lane-item[aria-hidden="true"], .lanes-toggle { display: none !important; } .lane-track { flex-wrap: wrap; width: auto; animation: none; } }

/* --- 77-impact-leaders.css --- */
/* ==========================================================================
   v2.3 · home: the impact band (numbers) and the client leadership wall
   ========================================================================== */

/* ---------- impact band ---------- */
.section.impact { position: relative; isolation: isolate; overflow: hidden; overflow: clip; padding-block: clamp(76px, 9vw, 132px); background: radial-gradient(55% 80% at 88% 0%, rgb(197 152 44 / 0.24), transparent 62%), radial-gradient(45% 70% at 4% 100%, rgb(197 152 44 / 0.12), transparent 60%), linear-gradient(160deg, #1f1f23 0%, #121214 70%); color: #fff; }
.section.impact + .section { padding-top: var(--section); }
.impact::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(rgb(255 255 255 / 0.09) 1px, transparent 1.5px) 0 0 / 22px 22px; -webkit-mask-image: radial-gradient(60% 70% at 80% 20%, #000, transparent 75%); mask-image: radial-gradient(60% 70% at 80% 20%, #000, transparent 75%); }
.impact::after { content: ""; position: absolute; right: -12%; top: -38%; z-index: -1; width: min(70vw, 860px); aspect-ratio: 1; border: 1px solid rgb(197 152 44 / 0.22); border-radius: 50%; box-shadow: 0 0 0 70px rgb(197 152 44 / 0.035), 0 0 0 150px rgb(197 152 44 / 0.025); pointer-events: none; }
.impact-head { display: grid; gap: 18px; max-width: 44rem; margin-bottom: clamp(40px, 5vw, 68px); }
.impact .title-lg { color: #fff; }
.impact .title-lg::after { background: var(--signal-400); }

.impact-grid { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; }
@media (max-width: 1040px) { .impact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .impact-grid { grid-template-columns: minmax(0, 1fr); } }
.impact-card { position: relative; display: grid; justify-items: start; align-content: start; gap: 14px; padding: clamp(24px, 2.6vw, 32px); overflow: hidden; border: 1px solid rgb(255 255 255 / 0.1); border-radius: 20px; background: linear-gradient(165deg, rgb(255 255 255 / 0.08), rgb(255 255 255 / 0.015) 60%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08); transition: transform 0.5s var(--ease-out), border-color 0.45s, box-shadow 0.5s var(--ease-out); }
/* a soft gold sheen crosses the card on hover */
.impact-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgb(243 220 159 / 0.16) 50%, transparent 70%); transform: translateX(-120%); transition: transform 0.9s var(--ease-out); }
.impact-card:hover { transform: translateY(-6px); border-color: rgb(197 152 44 / 0.6); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.1), 0 34px 70px -34px rgb(197 152 44 / 0.55); }
.impact-card:hover::after { transform: translateX(120%); }
.impact-ico { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px; background: linear-gradient(160deg, rgb(197 152 44 / 0.22), rgb(197 152 44 / 0.06)); box-shadow: inset 0 0 0 1px rgb(226 190 102 / 0.4); color: var(--signal-400); }
.impact-ico svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.impact-card strong { display: block; margin-top: 6px; font: 560 clamp(3rem, 5.6vw, 4.6rem)/0.95 var(--f-display); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; color: #f3dc9f; background: linear-gradient(180deg, #ffffff 0%, #f6e3ad 45%, var(--gold-600) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.impact-rule { display: block; width: 44px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--gold-600), var(--signal-400)); transform-origin: left; }
.impact-card p { max-width: 22ch; color: rgb(255 255 255 / 0.78); font-size: 0.98rem; line-height: 1.45; }
/* the "+" is a hairline in Bodoni with the gradient fill, so it reads as "10", "100", "150": draw it in the sans face, raised, in solid gold */
.impact-plus { margin-left: 0.04em; font-family: var(--f-sans); font-size: 0.55em; font-weight: 300; letter-spacing: 0; vertical-align: 0.62em; -webkit-text-fill-color: var(--signal-400); color: var(--signal-400); }
@media (forced-colors: active) { .impact-card strong, .impact-plus { -webkit-text-fill-color: CanvasText; background: none; } }
@media (prefers-reduced-motion: no-preference) {
  .impact-grid[data-reveal] .impact-card { transition: transform 0.5s var(--ease-out), border-color 0.45s, box-shadow 0.5s var(--ease-out), opacity 0.8s var(--ease-out) calc(var(--i) * 90ms); }
  .impact-grid[data-reveal].is-pending { opacity: 1; transform: none; }
  .impact-grid[data-reveal].is-pending .impact-card { opacity: 0; transform: translate3d(0, 22px, 0); }
  .impact-grid[data-reveal].is-pending .impact-rule { transform: scaleX(0); }
  .impact-rule { transition: transform 0.9s var(--ease-out) calc(300ms + var(--i) * 90ms); }
}

/* ---------- client leadership wall ---------- */
.leader-grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; }
@media (max-width: 960px) { .leader-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .leader-grid { grid-template-columns: minmax(0, 1fr); } }
.leader-card { position: relative; display: grid; align-content: start; gap: 6px; height: 100%; margin: 0; padding: 24px 24px 22px; overflow: hidden; border: 1px solid var(--platinum-200); border-radius: 18px; background: linear-gradient(165deg, #ffffff, #faf8f2); box-shadow: 0 1px 2px rgb(28 28 31 / 0.05); color: var(--ink); text-decoration: none; transition: transform 0.45s var(--ease-out), border-color 0.35s, box-shadow 0.45s var(--ease-out); }
.leader-card::before { content: ""; position: absolute; left: 24px; right: 24px; top: -1px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--gold-600), var(--signal-400)); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease-out); }
.leader-card:hover, .leader-card:focus-visible, .leader-card:focus-within { transform: translateY(-5px); border-color: var(--platinum-300); box-shadow: var(--shadow-raised); }
.leader-card:hover::before, .leader-card:focus-visible::before, .leader-card:focus-within::before { transform: scaleX(1); }
.leader-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.leader-mono { width: 52px; height: 52px; display: grid; place-items: center; flex: none; border-radius: 50%; background: radial-gradient(circle at 32% 26%, #3d3d43, #161618 72%); box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px rgb(197 152 44 / 0.7), 0 12px 22px -12px rgb(28 28 31 / 0.6); color: var(--signal-400); font: 600 1.05rem/1 var(--f-display); letter-spacing: 0.02em; transition: transform 0.45s var(--ease-out); }
.leader-card:hover .leader-mono { transform: rotate(-6deg) scale(1.06); }
.leader-logo { display: grid; place-items: center; width: 112px; height: 52px; padding: 6px 10px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--platinum-200); }
.leader-logo picture { display: contents; }
.leader-logo img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; transition: transform 0.45s var(--ease-out); }
.leader-card:hover .leader-logo img { transform: scale(1.06); }
.leader-name { font: 600 1.32rem/1.2 var(--f-display); letter-spacing: -0.01em; }
.leader-role { color: var(--titanium-600); font-size: 0.93rem; line-height: 1.45; }
.leader-more { margin-top: 12px; font: 400 0.68rem/1.2 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--plum-700); opacity: 0; transform: translateY(6px); transition: opacity 0.35s, transform 0.45s var(--ease-out); }
.leader-card:hover .leader-more, .leader-card:focus-visible .leader-more, .leader-card:focus-within .leader-more { opacity: 1; transform: none; }
@media (hover: none) { .leader-more { opacity: 1; transform: none; } }
/* the closing card */
.leader--more .leader-card { align-content: center; justify-items: start; min-height: 100%; border-style: dashed; border-color: rgb(197 152 44 / 0.5); background: radial-gradient(120% 90% at 100% 0%, rgb(197 152 44 / 0.16), transparent 60%), linear-gradient(165deg, #fffdf8, var(--plum-50)); }
.leader--more .leader-name { font-size: 1.6rem; }
.leader--more .leader-name em { color: var(--plum-600); }
@media (prefers-reduced-motion: no-preference) {
  .leader { transition: opacity 0.7s var(--ease-out) calc(var(--i) * 70ms), transform 0.7s var(--ease-out) calc(var(--i) * 70ms); }
  .leader-grid[data-reveal].is-pending { opacity: 1; transform: none; }
  .leader-grid[data-reveal].is-pending .leader { opacity: 0; transform: translate3d(0, 18px, 0); }
}

/* ---------- footer: the WhatsApp button never covers the footer text ----------
   The button is cleared vertically (room under the bottom row), so the motto stays flush with the container edge. */
.site-footer { padding-bottom: 96px; }
.footer-motto { font: italic 400 1rem/1.4 var(--f-display); color: var(--signal-400); }

/* approved client quotes */
.leader-card figcaption { display: grid; gap: 4px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--platinum-200); }
.leader-quote { position: relative; margin: 0 0 6px; padding-top: 30px; }
.leader-quote p { font: italic 400 1.06rem/1.55 var(--f-display); color: var(--ink); }
/* the whole card opens the case file; the link text appears on hover and focus */
a.leader-more { color: var(--plum-700); text-decoration: none; }
a.leader-more::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
a.leader-more:focus-visible { outline: 2px solid var(--gold-600); outline-offset: 4px; }

/* --- 78-testimonials.css --- */
/* ==========================================================================
   v2.3 · testimonials: an even grid of equal-height cards (8 quotes + the closing
   card = 3 x 3 on desktop), a clean gold quotation mark above the text, the name
   pinned to the bottom so names line up along each row, logos that always fit
   their box, and one swipeable row on phones
   ========================================================================== */
.leader-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; columns: auto; }
@media (max-width: 960px) {
  .leader-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .leader--more { grid-column: 1 / -1; }
}
.leader { display: flex; min-width: 0; margin: 0; }
.leader-card { display: flex; flex-direction: column; width: 100%; height: auto; padding: 26px 26px 22px; }
.leader--more .leader-card { justify-content: center; align-items: flex-start; min-height: 0; padding-block: 36px; }

.leader-top { margin-bottom: 16px; }
.leader-logo { width: 132px; height: 62px; padding: 7px 12px; overflow: hidden; }
.leader-logo img { max-width: 108px; max-height: 48px; }

.leader-quote { margin: 0 0 18px; padding: 0; }
.leader-quote::before { content: "\201C"; display: block; height: 0.42em; margin: 0 0 14px -3px; font: 600 3.4rem/1 var(--f-display); color: var(--gold-600); }
.leader-quote p { font: italic 400 1.07rem/1.6 var(--f-display); color: var(--ink); }
.leader-card figcaption { margin-top: auto; }

/* phones: one row of cards to swipe through (the next card peeks in), instead of a 4,000px column */
@media (max-width: 560px) {
  .leader-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 86%; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); margin-inline: calc(var(--gutter) * -1); padding: 6px var(--gutter) 22px; scrollbar-width: none; }
  .leader-grid::-webkit-scrollbar { display: none; }
  .leader { scroll-snap-align: start; }
  .leader--more { grid-column: auto; }
  /* one card is on screen at a time, so each card is as tall as its own quote */
  .leader-grid { align-items: start; }
  .leader-card figcaption { margin-top: 0; }
}

/* --- 79-fx.css --- */
/* ==========================================================================
   v2.3.5 · pointer effects (mouse and trackpad only)
   Cards: a gold light runs along the edge nearest the pointer, and the card tilts
   gently towards it (fx.js). Cursor: a thin gold ring and a small dot trail the
   system cursor, the ring grows over links and buttons. Touch screens and visitors
   who prefer less motion see none of the motion. The case-study viewer is left as it was.
   ========================================================================== */

/* the tilt angles change every frame: registered and not inherited, so only the card restyles */
@property --fx-rx { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --fx-ry { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
/* the hover lift is a registered length, so it eases in and out while the tilt runs */
@property --fx-y { syntax: "<length>"; inherits: false; initial-value: 0px; }

@media (hover: hover) and (pointer: fine) {
  /* the edge light follows --mx / --my, which site.js sets on every .spot card */
  .card.spot:not(.viewer-frame)::after { content: ""; position: absolute; inset: -1px; z-index: 2; padding: 1px; border-radius: inherit; background: radial-gradient(240px circle at var(--mx) var(--my), rgb(240 212 140 / 0.95), rgb(197 152 44 / 0.4) 42%, transparent 72%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: 0; pointer-events: none; transition: opacity 0.35s ease; }
  .card.spot:not(.viewer-frame):hover::after { opacity: 1; }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  /* the same lift each card already had on hover (bento tiles lift with translate instead) */
  .card.spot { --fx-lift: -3px; }
  .bento-tile.card.spot { --fx-lift: 0px; }
  /* the lift starts with the tilt (fx.js adds is-up), so it eases in instead of jumping */
  .card.spot.is-up { --fx-y: var(--fx-lift); }
  .card.spot.is-fx:not(.is-pending), .card.spot.is-fx:not(.is-pending):hover { transform: perspective(1100px) rotateX(var(--fx-rx, 0deg)) rotateY(var(--fx-ry, 0deg)) translateY(var(--fx-y, 0px)); transition: border-color 0.3s, box-shadow 0.45s var(--ease-out), translate 0.45s var(--ease-out), opacity 0.6s var(--ease-out), --fx-y 0.35s var(--ease-out); }

  /* cursor companion */
  .fx-cursor { position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; }
  .fx-cursor.is-on { opacity: 1; }
  .fx-ring, .fx-dot { position: fixed; left: 0; top: 0; will-change: transform; }
  .fx-ring i, .fx-dot i { position: absolute; display: block; border-radius: 50%; }
  .fx-ring i { left: -18px; top: -18px; width: 36px; height: 36px; border: 1px solid rgb(197 152 44 / 0.75); box-shadow: 0 0 0 1px rgb(255 255 255 / 0.18), 0 6px 18px -8px rgb(142 106 27 / 0.45); transition: transform 0.4s var(--ease-out), background-color 0.3s, border-color 0.3s, opacity 0.3s; }
  .fx-dot i { left: -3px; top: -3px; width: 6px; height: 6px; background: var(--gold-600); box-shadow: 0 0 10px rgb(226 190 102 / 0.8); transition: transform 0.3s var(--ease-out), opacity 0.2s; }
  .fx-cursor.is-hot .fx-ring i { transform: scale(1.6); border-color: rgb(197 152 44 / 0.55); background: rgb(197 152 44 / 0.1); }
  .fx-cursor.is-hot .fx-dot i { transform: scale(0.6); }
  .fx-cursor.is-down .fx-ring i { transform: scale(0.82); }
  .fx-cursor.is-hot.is-down .fx-ring i { transform: scale(1.35); }
  .fx-cursor.is-text .fx-ring i { transform: scale(0.4); opacity: 0; }
  .fx-cursor.is-text .fx-dot i { opacity: 0; }
}
@media (forced-colors: active) { .fx-cursor { display: none; } }
@media print { .fx-cursor { display: none !important; } }

/* --- 80-qa-fixes.css --- */
/* ==========================================================================
   v2.3 · QA fixes that cut across pages
   ========================================================================== */

/* two bordered light sections in a row share one 1px seam, not two */
.section:is(.alt, .surface-warm, .stats-band):not(.glimpse--dark) + .section:is(.alt, .surface-warm, .stats-band) { border-top: 0; }

/* a chip list inside prose stays a row of pills (.prose ul would make it a one-column grid) */
.prose ul.chips { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 0; list-style: none; }

/* ---------- inner-page heroes below 1024px ----------
   The charcoal corner panel shrank to a clipped triangle there: it cut the DevPii mark in half at
   601-1023px and was an empty wedge under the Menu button on phones. Small-screen heroes stay light,
   and the breadcrumb, eyebrow and headline use the full width again. Desktop is unchanged. */
@media (max-width: 1023px) {
  .page-hero::after, .dossier-intro.page-hero::after { display: none; }
  .page-hero .crumbs, .page-hero .eyebrow { max-width: none; }
  .odoo-sub-hero h1 { max-width: 18ch; }
}

/* ---------- DevPii watermark: only in negative space, never behind headings or the step rail ---------- */
.mark-right::after { top: 0; right: -4vw; width: min(24vw, 340px); }
/* services "How it fits together": the right column is full, so it sits in the empty area under the orbit diagram */
#connected.mark-right::after { right: auto; left: -4vw; top: auto; bottom: -48px; }
/* below 1200px the section header spans the full width and there is no empty corner */
@media (max-width: 1199px) { .mark-right::after, .mark-left::after { display: none; } }

/* ---------- floating WhatsApp button ----------
   site.js tucks it away while an enquiry form field or a hero summary card passes under it
   (both pages with a form list WhatsApp in their own contact details, and the footer links it everywhere) */
.wa-float { transition: transform 0.25s var(--ease-out), opacity 0.2s ease, visibility 0.2s; }
.wa-float.is-tucked { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(12px); }
/* @@v23-parts:end */