@font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("/assets/fonts/figtree-variable.woff2") format("woff2"); }
/* Layout: grey canvas; one white hero panel with orbit rings and platform nodes; bands alternate canvas and white; two deep plum bands carry the delivery model and the closing form. */
:root {
  /* ---- Neurosuite colour system. Every colour on the site comes from these tokens; components never use literals.
     Brand: Midnight Navy for the logo, the purple accent for actions, deep plum for the dark bands. ---- */
  /* Brand */
  --brand-navy: #0B0F3A;        /* logo, email header */
  --brand-navy-2: #141247;      /* second shade of the wordmark */
  /* Canvas and surfaces */
  --canvas: #F4F3F8;            /* page background */
  --canvas-2: #F8F7FC;          /* preview panels, selected rows, table heads */
  --surface: #FFFFFF;           /* cards, nav, forms */
  --surface-glass: rgba(255,255,255,.9);   /* fixed nav and sticky bars over content */
  --surface-glass-2: rgba(255,255,255,.6); /* widgets on tinted panels */
  --scrim: rgba(19,14,43,.5);   /* behind dialogs */
  /* Text */
  --ink: #15122B;
  --ink-2: #4B4862;
  --ink-3: #6A6781;             /* muted text: AA on white and on the canvas */
  --on-accent: #FFFFFF;         /* text on accent buttons */
  /* Lines */
  --line: #E7E5EF;
  --line-2: #D5D2E2;            /* inputs, dashed guides, separators */
  /* Accent (actions, links, highlights) */
  --accent: #6C3CE9;
  --accent-strong: #5428D4;     /* hover and pill text */
  --accent-soft: #F1ECFF;       /* tinted backgrounds */
  --accent-line: #DCCFFD;       /* tinted borders, chart tracks */
  --accent-ring: rgba(108,60,233,.14); /* focus ring */
  /* Deep plum bands */
  --deep: #130E2B;              /* band background */
  --deep-2: #1D1740;            /* cards on the band */
  --deep-3: #251D4F;            /* preview panels on the band */
  --deep-4: #2D2462;            /* widgets on the band */
  --deep-line: #2E2757;
  --deep-line-2: #3D3478;
  --on-deep: #F6F4FF;           /* body text on the band */
  --on-deep-2: #B9B3D8;         /* muted text on the band */
  --on-deep-strong: #FFFFFF;    /* headings on the band */
  --lavender: #C9B8FF;          /* accent on the band: kickers, checks, icons */
  --lavender-2: #DCD2FF;        /* pill and tag text on the band */
  --lavender-a10: rgba(201,184,255,.13);  /* tinted fills on the band */
  --lavender-a25: rgba(201,184,255,.28);  /* tinted borders on the band */
  /* Status (meaningful colours, kept distinct): all pairs pass WCAG AA */
  --good: #187A3F;
  --good-soft: #E8F7EE;
  --warn: #B45309;
  --warn-soft: #FFF4DE;
  --warn-glow: rgba(180,83,9,.45);
  --bad: #B91C1C;
  --bad-soft: #FDECEC;
  --bad-line: #E8A1A1;
  /* Shadows (ink and plum tinted) */
  --shadow-ink: 21,18,43;
  --shadow-plum: 42,22,110;
  --shadow-sm: 0 1px 2px rgba(var(--shadow-ink),.06), 0 1px 1px rgba(var(--shadow-ink),.04);
  --shadow-md: 0 8px 24px -8px rgba(var(--shadow-ink),.14), 0 2px 6px rgba(var(--shadow-ink),.05);
  --shadow-lg: 0 24px 60px -20px rgba(var(--shadow-plum),.28), 0 4px 12px rgba(var(--shadow-ink),.06);
  --shadow-card: 0 1px 2px rgba(var(--shadow-ink),.03), 0 22px 44px -32px rgba(var(--shadow-plum),.22);
  --shadow-card-hover: 0 1px 2px rgba(var(--shadow-ink),.03), 0 28px 50px -30px rgba(var(--shadow-plum),.3);
  --shadow-widget: 0 8px 18px -14px rgba(var(--shadow-ink),.25);
  --shadow-float: 0 14px 30px -18px rgba(var(--shadow-plum),.35);
  --font: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: var(--font); /* Figtree all through; numbers use tabular figures where they line up */
  --r-xl: 32px; --r-lg: 22px; --r-md: 16px; --r-sm: 10px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: var(--font); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; font-weight: 600; letter-spacing: -0.025em; color: var(--ink); }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.wrap { width: 100%; max-width: 1248px; margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
@media (min-width: 768px) { .wrap { padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); } }
.band { padding-block: 112px; }
.band.white { background: var(--surface); }
@media (max-width: 767px) { .band { padding-block: 72px; } }

.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); font-weight: 500; }
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.on-deep .eyebrow { color: var(--lavender); }
.on-deep .eyebrow::before { background: var(--lavender); }
.h2 { font-size: clamp(32px, 4vw, 46px); line-height: 1.08; letter-spacing: -0.032em; }
.lead { font-size: 18px; color: var(--ink-2); max-width: 60ch; }
.sec-head { display: grid; gap: 20px; margin-bottom: 56px; }
.sec-head.split { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: end; gap: 48px; }
.sec-head .h2 { max-width: 18ch; }
@media (max-width: 900px) { .sec-head.split { grid-template-columns: 1fr; gap: 20px; } .sec-head { margin-bottom: 40px; } }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: 10px; font: 500 15px/1 var(--font); text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background .15s, border-color .15s, transform .15s; white-space: nowrap; }
.btn svg { width: 16px; height: 16px; }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-strong); }
.btn-ink { background: var(--ink); color: var(--on-accent); }
.btn-ink:hover { background: var(--deep-2); }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--accent-line); }
.btn-ghost-deep { background: transparent; color: var(--on-deep); border-color: var(--deep-line); }
.btn-ghost-deep:hover { border-color: var(--on-deep-2); }
.btn-sm { height: 40px; padding: 0 16px; font-size: 14px; }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-weight: 500; font-size: 15px; text-decoration: none; }
.link-arrow svg { width: 15px; height: 15px; transition: transform .15s; }
.link-arrow:hover svg { transform: translateX(3px); }

/* Top bar */
.topbar { font-size: 13px; color: var(--ink-3); }
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 12px; }
.topbar .contact { display: flex; gap: 18px; flex-wrap: wrap; }
.topbar .contact span { font-variant-numeric: tabular-nums; }
.topbar nav { display: flex; gap: 18px; }
.topbar nav a { text-decoration: none; color: var(--ink-2); font-weight: 500; }
.topbar nav a:hover { color: var(--accent); }
@media (max-width: 767px) { .topbar .contact span:not(:first-child) { display: none; } }

/* Hero: open white band, no container */
.hero-outer { background: var(--surface); }
/* Spacing lives inside the panel so the orbit rings run to the screen edges. */
.hero-panel { position: relative; overflow: hidden; padding-top: 8px; padding-left: max(8px, env(safe-area-inset-left, 0px)); padding-right: max(8px, env(safe-area-inset-right, 0px)); }
@media (min-width: 768px) { .hero-panel { padding-top: 16px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); } }
.navbar-row { position: relative; z-index: 5; padding: 16px 16px 0; }
/* Nav: fixed from the start. At the top, and whenever the visitor scrolls up, it is the rounded pill; scrolling down widens it
   into a full-width bar (corners straighten, frosted background fades in). The logo and links keep their place. */
.navbar-row.js-fixed { position: fixed; top: 0; left: 0; right: 0; z-index: 60; padding: var(--nav-y, 32px) var(--nav-x, 32px) 0; border-bottom: 0.5px solid transparent; background-color: transparent; transition: padding .55s cubic-bezier(.2,.8,.2,1), background-color .4s ease, border-color .4s ease; }
.navbar-row.js-fixed .navbar { transition: max-width .55s cubic-bezier(.2,.8,.2,1), padding .55s cubic-bezier(.2,.8,.2,1), border-radius .55s cubic-bezier(.2,.8,.2,1), border-color .35s ease, box-shadow .35s ease, background-color .35s ease; }
.navbar-row.js-fixed.is-stuck { padding: env(safe-area-inset-top, 0px) 0 0; background-color: var(--surface-glass); -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); border-bottom-color: var(--line); }
.navbar-row.js-fixed.is-stuck .navbar { max-width: 100%; border-radius: 0; border-color: transparent; box-shadow: none; background-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; padding-left: max(calc(var(--nav-x, 32px) + 18px), calc((100% - 1120px) / 2 + 18px)); padding-right: max(calc(var(--nav-x, 32px) + 10px), calc((100% - 1120px) / 2 + 10px)); }
.navbar-row.js-fixed .mobile-menu { max-height: calc(100vh - 140px); overflow-y: auto; }
main section[id], #academy { scroll-margin-top: 84px; }
.navbar { max-width: 1120px; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 10px 10px 18px; border: 0.5px solid var(--line); border-radius: 20px; background: var(--surface-glass); backdrop-filter: blur(10px); box-shadow: var(--shadow-sm); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; font-size: 19px; letter-spacing: -0.02em; color: var(--ink); }
.brand .logo-full, .brand .logo-base { display: block; height: 30px; width: auto; flex: none; }
@media (max-width: 767px) { .brand .logo-full, .brand .logo-base { height: 28px; } }
/* Nav logo: the star is a separate layer so it can twinkle (a quarter turn with a small dip in size, every few seconds). */
.brand-logo { position: relative; display: block; flex: none; }
.brand-logo .spark { position: absolute; left: 22.03%; top: 0.221%; width: 9.901%; height: auto; transform-origin: 50% 50%; animation: twinkle 4.8s cubic-bezier(.45,0,.2,1) 1.2s infinite; }
@keyframes twinkle { 0%, 64% { transform: rotate(0deg) scale(1); } 76% { transform: rotate(45deg) scale(.6); } 88%, 100% { transform: rotate(90deg) scale(1); } }
.navlinks { display: flex; align-items: center; gap: 4px; }
.navlinks > a, .navlinks > .dd > button { font: 500 15px/1 var(--font); color: var(--ink-2); text-decoration: none; padding: 10px 12px; border-radius: 10px; background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.navlinks > a:hover, .navlinks > .dd > button:hover { color: var(--ink); background: var(--canvas); }
.dd { position: relative; }
.dd svg { width: 14px; height: 14px; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.dd[data-open="true"] > button svg { transform: rotate(180deg); }
.dd-panel { position: absolute; top: calc(100% + 10px); left: -16px; width: 760px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.dd-panel a { display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; text-decoration: none; }
/* Dropdown motion: the panel unfolds from the button while it fades in, then the items drift into place one after another. Closing is quicker. */
.dd-panel { transform-origin: 12% 0; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px) scale(.985); clip-path: inset(0 0 100% 0 round 16px); transition: opacity .18s ease, transform .3s cubic-bezier(.4,0,.2,1), clip-path .3s cubic-bezier(.4,0,.2,1), visibility 0s linear .3s; }
.dd[data-open="true"] .dd-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: none; clip-path: inset(-40px -40px -70px -40px round 16px); transition: opacity .2s ease, transform .5s cubic-bezier(.16,1,.3,1), clip-path .6s cubic-bezier(.16,1,.3,1), visibility 0s; }
.dd-panel a { opacity: 0; transform: translateY(8px); transition: opacity .15s ease, transform .2s ease, background-color .15s; }
.dd[data-open="true"] .dd-panel a { opacity: 1; transform: none; transition: opacity .35s ease, transform .5s cubic-bezier(.16,1,.3,1), background-color .15s; }
.dd[data-open="true"] .dd-panel a:nth-child(1), .dd[data-open="true"] .dd-panel a:nth-child(2) { transition-delay: .06s, .06s, 0s; }
.dd[data-open="true"] .dd-panel a:nth-child(3), .dd[data-open="true"] .dd-panel a:nth-child(4) { transition-delay: .1s, .1s, 0s; }
.dd[data-open="true"] .dd-panel a:nth-child(5), .dd[data-open="true"] .dd-panel a:nth-child(6) { transition-delay: .14s, .14s, 0s; }
.dd[data-open="true"] .dd-panel a:nth-child(7), .dd[data-open="true"] .dd-panel a:nth-child(8) { transition-delay: .18s, .18s, 0s; }
.dd-ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; border: 0.5px solid var(--line); background: var(--surface); color: var(--accent); transition: border-color .15s; }
.dd-ico img { width: 20px; height: 20px; object-fit: contain; }
.dd-ico img.sap { width: 28px; height: 14px; }
.dd-ico svg { width: 18px; height: 18px; }
.dd-panel a:hover .dd-ico { border-color: var(--accent-line); }
.dd-txt { display: grid; gap: 2px; min-width: 0; }
.dd-panel a:hover { background: var(--canvas); }
.dd-panel strong { font-weight: 500; font-size: 15px; }
.dd-panel .dd-txt > span { font-size: 13px; color: var(--ink-3); line-height: 1.4; }
.nav-cta { display: flex; align-items: center; gap: 8px; }
.menu-btn { display: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); align-items: center; justify-content: center; cursor: pointer; color: var(--ink); }
.menu-btn svg { width: 20px; height: 20px; }
.mobile-menu { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 10px; display: grid; gap: 2px; }
.mobile-menu a { display: block; padding: 12px 8px; text-decoration: none; font-weight: 500; color: var(--ink); border-radius: 10px; }
.mobile-menu a.sub { padding-left: 20px; color: var(--ink-2); font-weight: 400; font-size: 15px; }
/* The menu's link styles must not reach its button: keep it centred, white and full width */
.mobile-menu > a.btn.btn-primary { display: flex; margin-top: 8px; padding: 0 22px; color: var(--on-accent); font-weight: 500; }
@media (max-width: 1080px) { .navlinks, .nav-cta .btn-ink { display: none; } .menu-btn { display: inline-flex; } .navbar { flex-wrap: wrap; } .mobile-menu { flex-basis: 100%; } }

.hero-stage { position: relative; z-index: 1; padding: 112px 16px 56px; }
.orbit { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
/* The rings fade out towards the top nav and the bottom of the hero (a transparency mask on the lines only, no colour gradient). The logos sit in their own layer and stay solid. */
.orbit { -webkit-mask-image: linear-gradient(to bottom, transparent 2%, #000 24%, #000 52%, transparent 94%); mask-image: linear-gradient(to bottom, transparent 2%, #000 24%, #000 52%, transparent 94%); }
.ring { position: absolute; left: 50%; top: 44%; border: 1px solid var(--line); border-radius: 50%; transform: translate(-50%, -50%); }
.ring.r1 { width: 720px; height: 720px; }
.ring.r2 { width: 1000px; height: 1000px; }
.ring.r3 { width: 1300px; height: 1300px; }
.ring.r4 { width: 1600px; height: 1600px; }
/* Logos sit on the rings: offsets are measured from the rings' centre, so they stay on the line at any width. */
.logo-slot { display: block; background: var(--canvas); border: 1px dashed var(--line-2); flex: none; }
@property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.orbit-nodes { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.node { position: absolute; left: calc(50% + var(--dx)); top: calc(44% + var(--dy)); --a: var(--a0); width: 60px; height: 60px; translate: -50% -50%; border-radius: 50%; background: var(--surface); border: 0.5px solid var(--line); box-shadow: 0 6px 16px -8px rgba(var(--shadow-ink),.18); display: grid; place-items: center; pointer-events: auto; transition: border-color .2s, box-shadow .25s; animation: sway var(--dur) ease-in-out var(--delay) infinite alternate, node-in .8s cubic-bezier(.2,.8,.2,1) var(--in) backwards; }
/* Where trig functions are supported, the position comes from the ring radius and an angle, so the drift follows the ring exactly. */
@supports (left: calc(1px * cos(0deg))) { .node { left: calc(50% + cos(var(--a)) * var(--r)); top: calc(44% + sin(var(--a)) * var(--r)); } }
@keyframes sway { from { --a: calc(var(--a0) - 4deg); } to { --a: calc(var(--a0) + 4deg); } }
@keyframes node-in { from { opacity: 0; scale: .6; } }
.node > img { width: 30px; height: 30px; object-fit: contain; transition: scale .25s cubic-bezier(.2,.8,.2,1); }
.node > img.sap { width: 40px; height: 20px; }
.node:hover { border-color: var(--accent-line); box-shadow: 0 14px 30px -14px rgba(var(--shadow-plum),.4); animation-play-state: paused; z-index: 2; }
.node:hover > img { scale: 1.12; }
.tip { position: absolute; top: 50%; width: 248px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); display: grid; gap: 4px; text-align: left; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s, translate .25s cubic-bezier(.2,.8,.2,1), visibility 0s .25s; }
.tip b { font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.tip span { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.n-tl .tip, .n-ml .tip, .n-bl .tip { left: calc(100% + 14px); translate: -8px -50%; }
.n-tr .tip, .n-mr .tip, .n-br .tip { right: calc(100% + 14px); translate: 8px -50%; }
.node:hover .tip { opacity: 1; visibility: visible; translate: 0 -50%; transition: opacity .18s, translate .25s cubic-bezier(.2,.8,.2,1), visibility 0s; }
.n-tl { --dx: -444px; --dy: -230px; --r: 500px; --a0: 207.38deg; --dur: 9s; --delay: -2s; --in: .15s; }
.n-tr { --dx: 444px; --dy: -230px; --r: 500px; --a0: 332.62deg; --dur: 10.5s; --delay: -6s; --in: .25s; }
.n-ml { --dx: -498.4px; --dy: 40px; --r: 500px; --a0: 175.41deg; --dur: 11s; --delay: -8s; --in: .35s; }
.n-mr { --dx: 498.4px; --dy: 40px; --r: 500px; --a0: 4.59deg; --dur: 9.5s; --delay: -3s; --in: .45s; }
.n-bl { --dx: -400px; --dy: 300px; --r: 500px; --a0: 143.13deg; --dur: 10s; --delay: -5s; --in: .55s; }
.n-br { --dx: 400px; --dy: 300px; --r: 500px; --a0: 36.87deg; --dur: 11.5s; --delay: -9s; --in: .65s; }
@media (min-width: 1420px) { .n-ml { --dx: -647.2px; --dy: 60px; --r: 650px; --a0: 174.7deg; } .n-mr { --dx: 647.2px; --dy: 60px; --r: 650px; --a0: 5.3deg; } }
@media (prefers-reduced-motion: reduce) { .node, .brand-logo .spark { animation: none; } .tip, .node > img { transition: none; } }
@media (max-width: 1119px) { .node { display: none; } }
@media (max-width: 767px) { .orbit { display: none; } }
.hero-copy { position: relative; z-index: 2; text-align: center; display: grid; justify-items: center; gap: 20px; max-width: 880px; margin-inline: auto; }
.trust { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 14px; font-size: 15px; color: var(--ink-3); }
.trust b { color: var(--ink); font-weight: 500; }
.trust .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--line-2); }
.h1 { font-size: clamp(40px, 5.6vw, 70px); line-height: 1.04; letter-spacing: -0.042em; font-weight: 600; }
.hero-sub { font-size: 18px; line-height: 1.6; color: var(--ink-2); max-width: 600px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 8px; }
/* Hero platform card (compact version of hero option B): small logo tabs switch the platform; the example requests follow. */
.plat-card { position: relative; z-index: 2; width: min(460px, 100%); margin: 56px auto 0; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lg); padding: 14px 16px 6px; text-align: left; }
.pc-head { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.pc-logo { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 0.5px solid var(--line); flex: none; }
.pc-logo img { width: 22px; height: 22px; object-fit: contain; }
.pc-logo img.sap { width: 30px; height: 15px; }
.pc-title { min-width: 0; flex: 1; }
.pc-title b { display: block; font-size: 15.5px; font-weight: 600; line-height: 1.3; }
.pc-title span { display: block; font-size: 12.5px; color: var(--ink-3); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-tabs { display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--canvas); flex: none; }
.pc-tabs button { position: relative; overflow: hidden; display: grid; place-items: center; width: 30px; height: 28px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; padding: 0; }
.pc-tabs button img { width: 16px; height: 16px; object-fit: contain; filter: grayscale(1); opacity: .55; transition: filter .15s, opacity .15s; }
.pc-tabs button img.sap { width: 22px; height: 11px; }
.pc-tabs button:hover img { opacity: .9; }
.pc-tabs button[aria-selected="true"] { background: var(--surface); box-shadow: var(--shadow-sm); }
.pc-tabs button[aria-selected="true"] img { filter: none; opacity: 1; }
.pc-body { transition: opacity .18s, translate .22s cubic-bezier(.2,.8,.2,1); }
.plat-card.swap .pc-body { opacity: 0; translate: 0 4px; }
.pc-list-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 0 2px; font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.pc-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; background: var(--canvas); font-size: 11px; letter-spacing: .02em; text-transform: none; }
.pc-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.4; }
.pc-row:last-child { border-bottom: 0; }
.pc-row > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; flex: none; }
.pc-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pc-pill.pc-good { background: var(--good-soft); color: var(--good); }
.pc-pill.pc-work { background: var(--warn-soft); color: var(--warn); }
/* Card motion: fades in, steps through the platforms on its own with a progress line under the active tab,
   rows arrive one after another, the "In progress" dot pulses. Pauses on hover, stops once a tab is clicked. */
.plat-card { animation: pc-card-in .8s cubic-bezier(.2,.8,.2,1) .35s backwards; }
@keyframes pc-card-in { from { opacity: 0; translate: 0 14px; } }
.pc-prog { position: absolute; left: 6px; right: 6px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left center; opacity: 0; pointer-events: none; }
.plat-card.auto .pc-tabs button[aria-selected="true"] .pc-prog { opacity: 1; animation: pc-prog 4.8s linear forwards; }
.plat-card.auto:hover .pc-tabs button[aria-selected="true"] .pc-prog, .plat-card.auto:focus-within .pc-tabs button[aria-selected="true"] .pc-prog { animation-play-state: paused; }
@keyframes pc-prog { to { transform: scaleX(1); } }
.pc-row.in { animation: pc-row-in .42s cubic-bezier(.2,.8,.2,1) backwards; }
@keyframes pc-row-in { from { opacity: 0; translate: 0 6px; } }
.pc-pill.pc-work::before { animation: pc-pulse 1.6s ease-out infinite; }
@keyframes pc-pulse { 0% { box-shadow: 0 0 0 0 var(--warn-glow); } 100% { box-shadow: 0 0 0 6px transparent; } }
.pc-pill.pc-plan { background: var(--accent-soft); color: var(--accent-strong); }
.platforms { position: relative; z-index: 2; padding: 16px 24px 52px; text-align: center; }
.platforms p { font-size: 14px; color: var(--ink-3); margin-bottom: 24px; }
.wordmarks { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 40px; max-width: 1240px; margin-inline: auto; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 18px; letter-spacing: -0.02em; color: var(--ink-3); white-space: nowrap; }
.wordmark img { height: 22px; width: auto; filter: grayscale(1); opacity: .6; }
.wordmark.sap img { height: 24px; }
.trust .ms { display: inline-flex; align-items: center; gap: 8px; }
.trust .ms img { width: 15px; height: 15px; }
@media (max-width: 767px) { .trust .sep { display: none; } .wordmark img { height: 18px; } .wordmark.sap img { height: 20px; } .hero-stage { padding: 56px 8px 32px; } .hero-sub { font-size: 16.5px; } .trust { font-size: 13.5px; } .hero-actions, .hero-actions .btn { width: 100%; } .pc-tabs { display: none; } .plat-card { margin-top: 40px; } .wordmark { font-size: 16px; } .wordmarks { gap: 10px 22px; } .platforms { padding-bottom: 36px; } }

/* ===== Sections below the hero: card style from Oluwatosin's reference (17 Oct 2026).
   Centred heads; white cards with a hairline edge, a small product-style preview on top, then a short title and one line. ===== */
.icon-chip { width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.icon-chip svg { width: 20px; height: 20px; }
.deep { background: var(--deep); color: var(--on-deep); position: relative; overflow: hidden; overflow: clip; }
.deep > .wrap { position: relative; }
.deep .h2 { color: var(--on-accent); font-weight: 500; }
.deep .lead { color: var(--on-deep-2); }

.n-head { display: grid; justify-items: center; text-align: center; gap: 14px; margin-bottom: 52px; }
.n-kicker { font-size: 14px; font-weight: 500; color: var(--accent); }
.n-head h2 { font-size: clamp(32px, 4.2vw, 52px); line-height: 1.08; font-weight: 500; letter-spacing: -0.035em; max-width: 19ch; color: var(--ink); }
.n-head p { font-size: 17px; color: var(--ink-3); max-width: 52ch; text-wrap: balance; }
.deep .n-kicker { color: var(--lavender); }
.deep .n-head h2 { color: var(--on-deep-strong); }
.deep .n-head p { color: var(--on-deep-2); }

.n-cards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.s2 { grid-column: span 2; } .s3 { grid-column: span 3; } .s4 { grid-column: span 4; } .s6 { grid-column: span 6; }
.n-card { background: var(--surface); border: 0.5px solid var(--line); border-radius: 28px; padding: 18px 18px 26px; display: grid; gap: 20px; align-content: start; min-width: 0; box-shadow: var(--shadow-card); text-decoration: none; color: inherit; }
a.n-card { transition: box-shadow .2s, translate .2s; }
a.n-card:hover { box-shadow: var(--shadow-card-hover); translate: 0 -2px; }
.n-text { padding: 0 8px; display: grid; gap: 6px; justify-items: start; }
.n-text h3 { font-size: 20px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.3; color: var(--ink); }
.n-text p { font-size: 15px; color: var(--ink-3); line-height: 1.5; }
.n-text .link-arrow, .n-text .btn { margin-top: 10px; }
.deep .n-card { background: var(--deep-2); border-color: var(--deep-line); box-shadow: none; }
.deep .n-text h3 { color: var(--on-deep-strong); }
.deep .n-text p { color: var(--on-deep-2); }

/* The preview panel on top of each card, and the small white widgets inside it */
.n-viz { position: relative; height: 200px; border-radius: 20px; background: var(--canvas-2); border: 0.5px solid var(--line); padding: 18px; overflow: hidden; overflow: clip; display: grid; align-content: center; gap: 10px; }
.n-viz.tall { height: 236px; }
.n-viz.short { height: 156px; }
.deep .n-viz { background: var(--deep-3); border-color: var(--deep-line); }
/* Widgets on the deep band: plum instead of white, so they sit in the band */
.deep .n-w { background: var(--deep-4); border-color: var(--deep-line-2); color: var(--on-deep); box-shadow: 0 12px 26px -18px rgba(var(--shadow-ink),.65); }
.deep .n-w small { color: var(--on-deep-2); }
.deep .n-row + .n-row { border-top-color: var(--deep-line-2); }
.deep .n-title { color: var(--on-deep-strong); }
.deep .n-check { color: var(--lavender); }
.deep .n-mi { background: var(--lavender-a10); color: var(--lavender); }
.deep .n-tags span, .deep .n-tags span.on { background: var(--lavender-a10); border-color: var(--lavender-a25); color: var(--lavender-2); }
.deep .n-stats .n-w b { color: var(--on-deep-strong); }
.n-w { background: var(--surface); border: 0.5px solid var(--line); border-radius: 14px; padding: 12px 14px; box-shadow: var(--shadow-widget); font-size: 13.5px; line-height: 1.35; color: var(--ink); min-width: 0; }
.n-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.n-row + .n-row { margin-top: 9px; padding-top: 9px; border-top: 0.5px solid var(--line); }
.n-row > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.n-w b { font-weight: 500; }
.n-w small { display: block; font-size: 12px; color: var(--ink-3); }
.n-mute { color: var(--ink-3); }
.n-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; font-weight: 500; margin-bottom: 10px; }
.n-ex { font-size: 11px; font-weight: 600; color: var(--ink-3); background: var(--canvas); border-radius: 999px; padding: 2px 8px; flex: none; }
.n-pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; flex: none; }
.n-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.n-pill.plain::before { display: none; }
.n-pill.good { background: var(--good-soft); color: var(--good); }
.n-pill.warn { background: var(--warn-soft); color: var(--warn); }
.n-pill.bad { background: var(--bad-soft); color: var(--bad); }
.n-pill.ac { background: var(--accent-soft); color: var(--accent-strong); }
.n-pill.mu { background: var(--canvas); color: var(--ink-2); }
.n-ico { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.n-mi { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); flex: none; }
.n-mi svg { width: 16px; height: 16px; }
.n-lg { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; border: 0.5px solid var(--line); background: var(--surface); flex: none; }
.n-lg img { width: 20px; height: 20px; object-fit: contain; }
.n-lg img.sap { width: 26px; height: 13px; }
.n-back { margin: -4px 16px 0; opacity: .55; box-shadow: none; }
.n-front { position: relative; z-index: 1; box-shadow: var(--shadow-float); }
.n-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.n-tags span { padding: 4px 10px; border-radius: 999px; background: var(--surface); border: 0.5px solid var(--line); font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.n-tags span.on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-strong); }
.n-check { color: var(--accent); width: 15px; height: 15px; flex: none; }
.n-flag { display: flex; flex-direction: column; width: 24px; height: 16px; border-radius: 3px; overflow: hidden; flex: none; box-shadow: 0 0 0 0.5px rgba(var(--shadow-ink),.18); }
.n-flag.ng { flex-direction: row; }
.n-flag i { flex: 1; }

/* Problems previews */
.n-nums { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
.n-nums .n-w b { display: block; font-size: 26px; font-weight: 500; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; margin: 2px 0; }
.n-neq { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--bad-soft); color: var(--bad); font-size: 18px; font-weight: 600; }
.n-ver { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 8px; background: var(--canvas); font-size: 13px; font-weight: 500; white-space: nowrap; }
.n-ver.next { background: transparent; border: 0.5px dashed var(--ink-3); color: var(--ink-3); }
.n-sys { display: grid; grid-template-columns: auto minmax(12px, 1fr) auto minmax(12px, 1fr) auto; align-items: center; gap: 0; }
.n-sys .n-w { padding: 10px 12px; text-align: center; font-weight: 500; }
.n-gap { height: 0; border-top: 1.5px dashed var(--bad-line); position: relative; }
.n-gap::after { content: ""; position: absolute; left: 50%; top: -6px; width: 2px; height: 11px; background: var(--bad); transform: rotate(35deg); }

/* Services previews */
.n-bars { display: flex; align-items: flex-end; gap: 8px; height: 92px; padding-top: 6px; }
.n-bars span { flex: 1; border-radius: 6px 6px 3px 3px; background: var(--accent-line); }
.n-bars span.hi { background: var(--accent); }
.n-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.n-tile { display: flex; align-items: center; justify-content: center; gap: 8px; height: 50px; border-radius: 12px; background: var(--surface); border: 0.5px solid var(--line); font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; min-width: 0; }
.n-tile.wide { grid-column: span 2; }
.n-tile.blank { background: var(--surface-glass-2); }
.n-tile img { width: 22px; height: 22px; object-fit: contain; flex: none; }
.n-tile img.sap { width: 34px; height: 17px; }
.n-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.n-trio .n-w { padding: 12px; }
.n-trio .n-w b { display: block; font-size: 20px; font-weight: 500; letter-spacing: -0.02em; margin: 8px 0 2px; }
.n-also { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 10px; margin-top: 28px; }
.n-also > span { font-size: 14px; color: var(--ink-3); margin-right: 4px; }
.n-also a.n-chip { font-size: 13.5px; padding: 7px 13px; border-radius: 999px; background: var(--surface); border: 0.5px solid var(--line); color: var(--ink-2); text-decoration: none; white-space: nowrap; transition: border-color .15s, color .15s; }
.n-also a.n-chip:hover { border-color: var(--accent-line); color: var(--accent-strong); }

/* Industries previews */
.n-route { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; margin-top: 4px; }
.n-stop { display: grid; justify-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); }
.n-stop i { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.n-stop.next i { background: var(--surface); border: 2px solid var(--accent); }
.n-line { height: 2px; background: var(--accent); margin: 0 8px 20px; }
.n-line.dash { background: transparent; border-top: 2px dashed var(--accent-line); height: 0; }
.n-bom .n-row span:first-child { font-size: 13px; }
.n-bom .in1 { padding-left: 14px; color: var(--ink-2); }
.n-hbar { height: 8px; border-radius: 99px; background: var(--canvas); overflow: hidden; margin-top: 6px; }
.n-hbar i { display: block; height: 100%; border-radius: 99px; background: var(--accent); }
.n-hbar i.lo { background: var(--lavender); }
.n-logos { display: flex; justify-content: center; align-items: center; gap: 10px; }
.n-logos .n-lg { width: 52px; height: 52px; border-radius: 14px; }
.n-logos .n-lg img { width: 26px; height: 26px; }
.n-logos .n-lg img.sap { width: 36px; height: 18px; }
.n-plus { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; border: 0.5px dashed var(--accent); color: var(--accent); }
.n-plus svg { width: 18px; height: 18px; }
.n-card.soft { background: var(--accent-soft); border-color: var(--accent-line); }
.n-card.soft .n-viz { background: var(--surface-glass-2); border-color: var(--accent-line); }

/* Delivery model previews (deep band) */
.n-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.n-stats .n-w { padding: 16px; }
.n-stats .n-w b { display: block; font-size: 26px; font-weight: 500; letter-spacing: -0.03em; margin-bottom: 4px; }
.n-stats.two { grid-template-columns: 1fr 1fr; gap: 8px; }
.n-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.n-card .n-actions { padding: 0 8px; }

.n-need { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 0 8px; }
.n-need p { font-size: 15px; color: var(--ink-2); max-width: 62ch; }
.n-need b { color: var(--ink); font-weight: 500; }

/* How we work: the steps on the left, a preview of what each step produces on the right.
   It moves on by itself (progress line under the active step) once in view, pauses on hover, stops when a step is clicked. */
.how-grid { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 18px; align-items: stretch; }
.how-list { list-style: none; margin: 0; padding: 4px 0; display: grid; gap: 2px; align-content: start; }
.how-list button { position: relative; overflow: hidden; width: 100%; display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 14px; align-items: start; text-align: left; padding: 12px 14px 14px; border: 0; border-radius: 16px; background: transparent; cursor: pointer; color: inherit; font: inherit; transition: background .2s; }
.how-list button:hover { background: var(--canvas); }
.how-list .num { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 0.5px solid var(--line); background: var(--surface); font-size: 13px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; transition: background .2s, color .2s, border-color .2s; }
.how-list b { display: block; font-size: 17px; font-weight: 500; line-height: 32px; color: var(--ink-3); transition: color .2s; }
.how-list small { display: none; font-size: 14.5px; line-height: 1.45; color: var(--ink-3); padding-bottom: 4px; }
.how-list [aria-selected="true"] { background: var(--canvas-2); box-shadow: inset 0 0 0 0.5px var(--line); }
.how-list [aria-selected="true"] .num { background: var(--accent); border-color: var(--accent); color: var(--on-deep-strong); }
.how-list [aria-selected="true"] b { color: var(--ink); }
.how-list [aria-selected="true"] small { display: block; grid-column: 2; }
.how-prog { position: absolute; left: 60px; right: 18px; bottom: 7px; height: 2px; border-radius: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left center; opacity: 0; pointer-events: none; }
.n-how.auto .how-list [aria-selected="true"] .how-prog { opacity: 1; animation: pc-prog 5s linear forwards; }
.n-how.auto:hover .how-list [aria-selected="true"] .how-prog { animation-play-state: paused; }
.how-viz { height: auto; min-height: 400px; align-content: center; justify-items: stretch; padding: 28px; }
.how-step { position: absolute; top: 16px; left: 18px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); background: var(--surface); border: 0.5px solid var(--line); border-radius: 999px; padding: 4px 10px; font-variant-numeric: tabular-nums; }
.how-pane { display: grid; gap: 10px; width: 100%; max-width: 420px; margin-inline: auto; animation: how-in .4s cubic-bezier(.2,.8,.2,1); }
.how-pane .n-w { padding: 16px 18px; font-size: 14px; }
.how-pane .n-row + .n-row { margin-top: 11px; padding-top: 11px; }
.how-pane .n-row > span:last-child { text-align: right; }
.how-note { font-size: 13px; color: var(--ink-3); text-align: center; }
@keyframes how-in { from { opacity: 0; translate: 0 10px; } }
@media (max-width: 860px) {
  .how-grid { grid-template-columns: 1fr; }
  .how-viz { order: -1; min-height: 300px; padding: 52px 16px 18px; }
}

/* Pricing */
.n-plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.n-plan { padding: 26px; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 14px; }
.n-plan h3 { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; }
.n-plan > p { font-size: 15px; color: var(--ink-3); line-height: 1.5; }
.n-plan ul { display: grid; gap: 9px; align-content: start; font-size: 14.5px; color: var(--ink-2); }
.n-plan li { display: flex; gap: 10px; align-items: start; }
.n-plan li .n-check { margin-top: 3px; }
.n-plan .n-pill { justify-self: start; }
.n-plan .btn { width: 100%; }
.n-plan.featured { background: var(--deep); border-color: var(--deep); }
.n-plan.featured h3 { color: var(--on-deep-strong); }
.n-plan.featured > p, .n-plan.featured ul { color: var(--on-deep-2); }
.n-plan.featured .n-check { color: var(--lavender); }
.n-plan.featured .n-pill { background: var(--lavender-a10); color: var(--lavender-2); }
.n-foot { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 18px; margin-top: 26px; font-size: 14.5px; color: var(--ink-3); text-align: center; }

/* Leadership */
.n-team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.n-photo { display: block; height: 260px; padding: 0; }
.n-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; filter: grayscale(1); display: block; }

/* FAQ */
.n-faq { max-width: 860px; margin-inline: auto; background: var(--surface); border: 0.5px solid var(--line); border-radius: 28px; padding: 6px 28px; box-shadow: var(--shadow-card); }
.n-faq details + details { border-top: 0.5px solid var(--line); }
.n-faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; font-size: 17px; font-weight: 500; cursor: pointer; }
.n-faq summary::-webkit-details-marker { display: none; }
.n-faq .pm { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--canvas); color: var(--ink-2); flex: none; transition: transform .2s, background .2s, color .2s; }
.n-faq .pm svg { width: 15px; height: 15px; }
.n-faq details[open] .pm { transform: rotate(45deg); background: var(--accent-soft); color: var(--accent); }
.n-faq .ans { padding: 0 44px 20px 0; color: var(--ink-2); font-size: 15.5px; line-height: 1.6; }
.n-center { display: flex; justify-content: center; margin-top: 28px; }

/* Closing bar under the problems */
.n-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-top: 16px; padding: 22px 26px; border-radius: 24px; background: var(--deep); color: var(--on-deep-2); }
.n-bar p { font-size: 16px; max-width: 60ch; }
.n-bar b { color: var(--on-accent); font-weight: 500; }

@media (max-width: 1000px) {
  .n-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s2, .s3 { grid-column: span 1; } .s4, .s6 { grid-column: span 2; }
  .n-plans, .n-team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .n-head { margin-bottom: 36px; }
  .n-head p { font-size: 16px; }
  .n-cards, .n-plans { grid-template-columns: 1fr; }
  .s2, .s3, .s4, .s6 { grid-column: auto; }
  .n-team { gap: 10px; }
  .n-photo { height: 200px; }
  .n-viz { height: auto; min-height: 176px; }
  .n-viz.tall { height: auto; min-height: 200px; }
  .n-tile.wide span { display: none; }
  .n-tile.wide { grid-column: span 1; }
  .n-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .n-tile.blank { display: none; }
  .n-stats, .n-stats.two { grid-template-columns: 1fr; }
  .n-viz.short { height: auto; }
  .n-trio { grid-template-columns: 1fr; }
  .n-trio .n-w { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .n-trio .n-w b { margin: 0; font-size: 16px; }
  .n-trio .n-w small:last-child { display: none; }
  .n-faq { padding: 4px 20px; border-radius: 22px; }
  .n-faq summary { font-size: 16px; }
  .n-faq .ans { padding-right: 0; }
  .n-bar { padding: 20px; }
  .n-bar .btn { width: 100%; }
}
.n-also .n-chip-static { font-size: 13.5px; padding: 7px 13px; border-radius: 999px; background: var(--canvas); border: 0.5px solid var(--line); color: var(--ink-2); white-space: nowrap; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 56px; align-items: start; }
.contact-copy { display: grid; gap: 24px; }
.contact-list { display: grid; gap: 16px; margin-top: 8px; }
.contact-list li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; }
.contact-list .icon-chip { width: 40px; height: 40px; background: var(--deep-2); color: var(--lavender); border: 1px solid var(--deep-line); }
.contact-list b { display: block; font-weight: 500; color: var(--on-deep-strong); font-size: 15px; }
.contact-list li > span:last-child > span { display: block; color: var(--on-deep-2); font-size: 14.5px; line-height: 1.5; user-select: all; }
.form-card { background: var(--surface); color: var(--ink); border-radius: var(--r-xl); padding: 36px; box-shadow: 0 40px 80px -30px rgba(var(--shadow-ink),.5); }
.form-card h3 { font-size: 22px; letter-spacing: -0.02em; }
.form-card > p { color: var(--ink-3); font-size: 14.5px; margin-top: 6px; }
form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 14px; font-weight: 500; color: var(--ink); }
.field label .opt { color: var(--ink-3); font-weight: 400; }
.field input, .field select, .field textarea { width: 100%; font: 400 15px/1.4 var(--font); color: var(--ink); background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px; padding: 12px 14px; transition: border-color .15s, box-shadow .15s; }
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring); }
.field[data-invalid="true"] input, .field[data-invalid="true"] select, .field[data-invalid="true"] textarea { border-color: var(--bad); }
.err { font-size: 13px; color: var(--bad); min-height: 0; }
.err:empty { display: none; }
.consent { grid-column: 1 / -1; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.consent input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); }
.form-actions { grid-column: 1 / -1; display: grid; gap: 12px; }
.form-actions .btn { width: 100%; height: 52px; }
.route-links { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; color: var(--ink-3); border-top: 1px solid var(--line); padding-top: 16px; }
.route-links a { color: var(--accent); text-decoration: none; font-weight: 500; }
.success { display: grid; gap: 12px; justify-items: start; padding: 8px 0; }
.success .icon-chip { background: var(--good-soft); color: var(--good); }
.success h3 { font-size: 22px; }
.success p { color: var(--ink-2); }
.proto-note { font: 500 11px/1.4 var(--mono); letter-spacing: .04em; color: var(--warn); background: var(--warn-soft); padding: 6px 9px; border-radius: 8px; }
@media (max-width: 1000px) { .contact-grid { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 600px) { form { grid-template-columns: 1fr; } .form-card { padding: 24px; border-radius: var(--r-lg); } }

/* Footer */
footer { background: var(--surface); border-top: 1px solid var(--line); padding-block: 72px 32px; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.foot-brand { display: grid; gap: 18px; align-content: start; max-width: 340px; }
.foot-brand p { font-size: 15px; color: var(--ink-2); }
.fcol h3 { font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 16px; }
.fcol ul { display: grid; gap: 10px; }
.fcol a { text-decoration: none; font-size: 15px; color: var(--ink-2); }
.fcol a:hover { color: var(--accent); }
.addr { margin-top: 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding-top: 32px; border-top: 1px solid var(--line); }
.addr div { display: grid; gap: 4px; font-size: 14.5px; color: var(--ink-2); line-height: 1.55; }
.addr b { font: 500 12px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.foot-bottom { margin-top: 40px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; font-size: 13.5px; color: var(--ink-3); }
.foot-bottom nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.foot-bottom a { color: var(--ink-3); text-decoration: none; }
.foot-bottom a:hover { color: var(--ink); }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } .addr { grid-template-columns: 1fr; } }
@media (max-width: 600px) { footer { padding-bottom: 104px; } }

/* Mobile sticky CTA */
.sticky-cta { display: none; }
@media (max-width: 767px) {
  .sticky-cta { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; gap: 10px; padding: 12px max(16px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); background: var(--surface-glass); backdrop-filter: blur(10px); border-top: 1px solid var(--line); }
  .sticky-cta .btn { flex: 1; }
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }



/* Odometer numbers (problems, reports card): each digit is a column of 0-9 x3 that rolls to its value; lower digits
   spin more loops so it reads like a counter. Final value is the default state, so no-JS and reduced motion show it. */
.odo, .n-nums .n-w b.odo { display: flex; width: max-content; align-items: flex-start; height: 1.15em; line-height: 1.15em; overflow: hidden; overflow: clip; }
.od { display: inline-block; height: 1.15em; overflow: hidden; overflow: clip; }
.od-r { display: flex; flex-direction: column; transform: translateY(calc(var(--i) * -1.15em)); transition: transform 1.9s cubic-bezier(.16,1,.3,1) var(--od-delay, 0s); }
.od-r > span, .od-s { display: block; height: 1.15em; }
.n-nums > .n-w:last-child { --od-delay: .18s; }
.odo.is-reset .od-r { transform: translateY(0); transition: none; }
/* Live chart (services, Power BI card): bar heights morph between example months; the highlight follows the peak. */
.n-bars span { transition: height .9s cubic-bezier(.65,0,.35,1) calc(var(--i, 0) * 45ms), background-color .5s ease .25s; }
/* Ticket queue (problems, first card): three tickets in a stack. Every 2.5s the front one lifts away, the one behind
   glides forward, and the next rises from the back. Without animation it shows the same still stack. */
.n-stack { position: relative; height: 132px; }
.n-stack .tq { position: absolute; left: 0; right: 0; top: 0; transform-origin: 50% 0; animation: tq 7.5s cubic-bezier(.65,0,.35,1) infinite; }
.n-stack .tq-0 { z-index: 3; box-shadow: var(--shadow-float); }
.n-stack .tq-1 { z-index: 1; translate: 0 112px; scale: .82; opacity: 0; box-shadow: none; animation-delay: -2.5s; }
.n-stack .tq-2 { z-index: 2; translate: 0 66px; scale: .9; opacity: .55; box-shadow: none; animation-delay: -5s; }
@keyframes tq {
  0%, 26% { translate: 0 0; scale: 1; opacity: 1; z-index: 3; box-shadow: var(--shadow-float); }
  33% { translate: 0 -16px; scale: .97; opacity: 0; z-index: 3; box-shadow: 0 14px 30px -18px transparent; }
  33.01%, 60% { translate: 0 112px; scale: .82; opacity: 0; z-index: 1; box-shadow: none; }
  67%, 93% { translate: 0 66px; scale: .9; opacity: .55; z-index: 2; box-shadow: none; }
  100% { translate: 0 0; scale: 1; opacity: 1; z-index: 3; box-shadow: var(--shadow-float); }
}
/* ===== Motion (17 Oct 2026): smooth scrolling (Lenis) and scroll-linked reveals.
   Reveals follow the scroll position through the browser's scroll timeline. Without support, or with reduced motion, everything simply shows. ===== */
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; }
@keyframes rv-up { from { opacity: 0; transform: translateY(28px); } }
@keyframes rv-card { from { opacity: 0; transform: translateY(60px) scale(.965); } }
@keyframes rv-ui { from { opacity: 0; transform: translateY(22px) scale(.97); } }
@keyframes rv-row { from { opacity: 0; transform: translateX(-10px); } }
@keyframes rv-pop { from { opacity: 0; transform: scale(.8); } }
@keyframes rv-grow-y { from { transform: scaleY(.1); } }
@keyframes rv-grow-x { from { transform: scaleX(0); } }
@keyframes rv-photo { from { transform: scale(1.14); } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* section heads, line by line */
    .n-head > *, .contact-copy > * { animation: rv-up linear both; animation-timeline: view(); animation-range: entry 0px entry 220px; }
    .n-head > :nth-child(2), .contact-copy > :nth-child(2) { animation-range: entry 30px entry 250px; }
    .n-head > :nth-child(3), .contact-copy > :nth-child(3) { animation-range: entry 60px entry 280px; }
    .contact-copy > :nth-child(n+4) { animation-range: entry 90px entry 310px; }
    /* cards, staggered across a row */
    .n-card, .n-faq, .n-bar, .form-card { animation: rv-card linear both; animation-timeline: view(); animation-range: entry 0px entry 340px; }
    .n-cards > .n-card:nth-child(3n+2), .n-plans > .n-card:nth-child(4n+2), .n-team > .n-card:nth-child(4n+2) { animation-range: entry 40px entry 380px; }
    .n-cards > .n-card:nth-child(3n+3), .n-plans > .n-card:nth-child(4n+3), .n-team > .n-card:nth-child(4n+3) { animation-range: entry 80px entry 420px; }
    .n-plans > .n-card:nth-child(4n+4), .n-team > .n-card:nth-child(4n+4) { animation-range: entry 120px entry 460px; }
    .n-also, .n-foot, .n-center { animation: rv-up linear both; animation-timeline: view(); animation-range: entry 0px entry 160px; }
    /* the mini UIs inside each preview rise a beat after their card */
    .n-viz:not(.how-viz):not(.n-photo) > :not(.n-nums):not(.n-sys):not(.n-logos):not(.n-stats):not(.n-grid):not(.n-tags) { animation: rv-ui linear both; animation-timeline: view(); animation-range: entry 110px entry 400px; }
    .n-viz > .n-back { animation-range: entry 150px entry 440px; }
    .n-viz > :is(.n-nums, .n-sys, .n-logos, .n-stats) > * { animation: rv-ui linear both; animation-timeline: view(); animation-range: entry 110px entry 380px; }
    .n-viz > :is(.n-nums, .n-sys, .n-logos, .n-stats) > :nth-child(2) { animation-range: entry 140px entry 410px; }
    .n-viz > :is(.n-nums, .n-sys, .n-logos, .n-stats) > :nth-child(3) { animation-range: entry 170px entry 440px; }
    .n-viz > :is(.n-nums, .n-sys, .n-logos, .n-stats) > :nth-child(n+4) { animation-range: entry 200px entry 470px; }
    .n-viz .n-w > .n-row { animation: rv-row linear both; animation-timeline: view(); animation-range: entry 170px entry 420px; }
    .n-viz .n-w > .n-row:nth-child(3) { animation-range: entry 200px entry 450px; }
    .n-viz .n-w > .n-row:nth-child(4) { animation-range: entry 230px entry 480px; }
    .n-viz .n-w > .n-row:nth-child(n+5) { animation-range: entry 260px entry 510px; }
    .n-tile, .n-tags span { animation: rv-pop linear both; animation-timeline: view(); animation-range: entry 120px entry 360px; }
    .n-tile:nth-child(3n+2), .n-tags span:nth-child(3n+2) { animation-range: entry 150px entry 390px; }
    .n-tile:nth-child(3n+3), .n-tags span:nth-child(3n+3) { animation-range: entry 180px entry 420px; }
    .n-bars span { transform-origin: 50% 100%; animation: rv-grow-y linear both; animation-timeline: view(); animation-range: entry 120px entry 380px; }
    .n-bars span:nth-child(2) { animation-range: entry 140px entry 400px; } .n-bars span:nth-child(3) { animation-range: entry 160px entry 420px; }
    .n-bars span:nth-child(4) { animation-range: entry 180px entry 440px; } .n-bars span:nth-child(5) { animation-range: entry 200px entry 460px; }
    .n-bars span:nth-child(6) { animation-range: entry 220px entry 480px; } .n-bars span:nth-child(7) { animation-range: entry 240px entry 500px; }
    .n-hbar i, .n-line { transform-origin: 0 50%; animation: rv-grow-x linear both; animation-timeline: view(); animation-range: entry 160px entry 460px; }
    .n-photo img { animation: rv-photo linear both; animation-timeline: view(); animation-range: entry 0% cover 55%; }
  }
}
/* a little life on hover (pointer devices only) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .n-card { transition: box-shadow .45s ease, border-color .45s ease; }
  .n-card:hover { box-shadow: var(--shadow-card-hover); }
  .n-viz > .n-w, .n-viz > :is(.n-nums, .n-stats, .n-sys) > .n-w { transition: translate .55s cubic-bezier(.2,.8,.2,1), box-shadow .55s ease; }
  .n-card:hover .n-viz > .n-w, .n-card:hover .n-viz > :is(.n-nums, .n-stats, .n-sys) > .n-w { translate: 0 -4px; box-shadow: 0 22px 36px -22px rgba(var(--shadow-plum),.4); }
  .n-photo img { transition: scale .9s cubic-bezier(.2,.8,.2,1); }
  .n-card:hover .n-photo img { scale: 1.04; }
  .n-bars span { transition: height .9s cubic-bezier(.65,0,.35,1) calc(var(--i, 0) * 45ms), background-color .5s ease .25s; }
  .n-card:hover .n-bars span.hi { background: var(--accent-strong); }
}
/* the "waiting" dots pulse softly */
.n-viz .n-pill.warn:not(.plain)::before { animation: pc-pulse 1.8s ease-out infinite; }

/* ===== Pages (21 Oct 2026). Each nav item is its own page (#/services, #/about ...). Inner pages get a compact intro
   under the nav instead of the home hero; numbered photo slots mark where real people go. ===== */
[hidden] { display: none !important; }
[tabindex="-1"]:focus { outline: none; }
.page:not([hidden]) { animation: page-in .6s cubic-bezier(.16,1,.3,1) backwards; }
[data-home-only]:not([hidden]) { animation: page-in .6s cubic-bezier(.16,1,.3,1) backwards; }
@keyframes page-in { from { opacity: 0; translate: 0 14px; } }
.n-card[id] { scroll-margin-top: 96px; }

/* Page intro: centred like the home hero, smaller headline, photo underneath */
.page-intro { position: relative; z-index: 1; padding: 96px 16px 88px; }
.page-intro.has-photo { padding-bottom: 64px; }
.pi-copy { display: grid; justify-items: center; text-align: center; gap: 18px; max-width: 820px; margin-inline: auto; }
.pi-h1 { font-size: clamp(36px, 4.8vw, 60px); line-height: 1.06; letter-spacing: -0.04em; font-weight: 600; color: var(--ink); text-wrap: balance; }
.pi-sub { font-size: 18px; line-height: 1.6; color: var(--ink-2); max-width: 600px; text-wrap: balance; }
.pi-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; }
.pi-photo { max-width: 1120px; margin: 56px auto 0; }
.page-intro:not([hidden]) .pi-copy > *, .page-intro:not([hidden]) .pi-photo { animation: pi-in .8s cubic-bezier(.16,1,.3,1) backwards; }
.page-intro .pi-copy > :nth-child(2) { animation-delay: .05s; }
.page-intro .pi-copy > :nth-child(3) { animation-delay: .1s; }
.page-intro .pi-copy > :nth-child(4) { animation-delay: .15s; }
.page-intro .pi-photo { animation-delay: .2s; }
@keyframes pi-in { from { opacity: 0; translate: 0 18px; } }
html[data-route]:not([data-route="home"]) .ring { top: 250px; }

/* Photo slot: a calm lavender panel with the slot number, what the photo should show and its shape.
   When the real photo arrives it goes in as an <img> that covers the panel. */
.ph { position: relative; margin: 0; aspect-ratio: var(--ar, 4 / 3); border-radius: 28px; overflow: hidden; overflow: clip; background: var(--accent-soft); border: 1px dashed var(--accent-line); display: grid; place-items: center; }
.ph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph-in { display: grid; justify-items: center; gap: 8px; padding: 24px; text-align: center; max-width: 36ch; }
.ph-ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--surface); border: 0.5px solid var(--line); color: var(--accent); margin-bottom: 4px; box-shadow: var(--shadow-widget); }
.ph-ico svg { width: 22px; height: 22px; }
.ph-num { font-size: 12.5px; font-weight: 600; color: var(--accent-strong); background: var(--accent-soft); border: 0.5px solid var(--accent-line); border-radius: 999px; padding: 3px 10px; }
.ph-what { font-size: 16px; font-weight: 500; line-height: 1.4; color: var(--ink); }
.ph-spec { font-size: 13px; color: var(--ink-3); }
.pi-photo .ph { --ar: 21 / 9; }
.n-viz.ph-viz { padding: 0; display: block; height: 236px; border: 0; }
.ph-viz .ph { height: 100%; aspect-ratio: auto; border-radius: inherit; }
.ph-viz .ph-ico { display: none; }
.ph-chip { position: absolute; top: 14px; left: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; line-height: 1; padding: 8px 12px; border-radius: 999px; background: var(--surface); border: 0.5px solid var(--line); color: var(--ink); box-shadow: var(--shadow-widget); }
.ph-chip svg { width: 14px; height: 14px; color: var(--accent); }

/* Home: services overview as quiet link tiles */
.svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.svc { display: grid; grid-template-columns: 44px minmax(0, 1fr) 18px; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 20px; background: var(--surface); border: 0.5px solid var(--line); color: var(--ink); text-decoration: none; box-shadow: var(--shadow-card); transition: border-color .25s, box-shadow .25s, translate .25s cubic-bezier(.2,.8,.2,1); }
.svc .dd-ico { width: 44px; height: 44px; border-radius: 12px; }
.svc b { display: block; font-size: 16px; font-weight: 500; line-height: 1.35; }
.svc small { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.4; color: var(--ink-3); }
.svc > svg { width: 18px; height: 18px; color: var(--ink-3); transition: color .25s, translate .25s cubic-bezier(.2,.8,.2,1); }
.svc:hover { border-color: var(--accent-line); translate: 0 -2px; box-shadow: var(--shadow-card-hover); }
.svc:hover > svg { color: var(--accent); translate: 3px 0; }

/* Home: the two-location story, photo first */
.split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: 64px; }
.split-copy { display: grid; justify-items: start; gap: 18px; }
.split-copy h2 { font-size: clamp(32px, 4vw, 48px); line-height: 1.08; letter-spacing: -0.035em; font-weight: 500; color: var(--ink); max-width: 16ch; }
.split-copy > p { font-size: 17px; color: var(--ink-3); max-width: 46ch; }
.split-points { width: 100%; list-style: none; border-top: 0.5px solid var(--line); margin-top: 4px; }
.split-points li { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 0.5px solid var(--line); font-size: 15px; }
.split-points b { font-weight: 500; }
.split-points span { color: var(--ink-3); }

/* Closing call to action, the same on every page except Contact */
.cta-card { position: relative; overflow: hidden; overflow: clip; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; gap: 32px 48px; padding: 56px; border-radius: 32px; background: var(--deep); color: var(--on-deep-2); }
.cta-card::before, .cta-card::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid var(--lavender-a10); pointer-events: none; }
.cta-card::before { width: 560px; height: 560px; right: -180px; top: -240px; }
.cta-card::after { width: 820px; height: 820px; right: -310px; top: -370px; }
.cta-copy, .cta-actions { position: relative; z-index: 1; }
.cta-copy { display: grid; gap: 14px; }
.cta-copy .n-kicker { color: var(--lavender); }
.cta-copy h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.08; letter-spacing: -0.035em; font-weight: 500; color: var(--on-deep-strong); max-width: 17ch; }
.cta-copy p { font-size: 17px; max-width: 46ch; }
.cta-actions { display: grid; justify-items: start; gap: 14px; justify-self: end; }
.cta-actions > span { font-size: 14.5px; }
.cta-actions a:not(.btn) { color: var(--lavender-2); }

/* Current page in the nav */
.navlinks > a[aria-current="page"], .navlinks > .dd > button[data-current="true"] { color: var(--ink); background: var(--canvas); }
.mobile-menu > a[aria-current="page"] { color: var(--accent); }
html[data-route="contact"] .sticky-cta { display: none; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .svc, .split > *, .cta-card { animation: rv-card linear both; animation-timeline: view(); animation-range: entry 0px entry 320px; }
    .svc:nth-child(3n+2) { animation-range: entry 30px entry 350px; }
    .svc:nth-child(3n+3) { animation-range: entry 60px entry 380px; }
    .split > :nth-child(2) { animation-range: entry 60px entry 380px; }
  }
}

@media (max-width: 1000px) {
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 36px; }
  .cta-card { grid-template-columns: 1fr; padding: 40px 32px; }
  .cta-actions { justify-self: stretch; }
}
@media (max-width: 767px) {
  .page-intro { padding: 48px 8px 56px; }
  .page-intro.has-photo { padding-bottom: 40px; }
  .pi-sub { font-size: 16.5px; }
  .pi-actions, .pi-actions .btn { width: 100%; }
  .pi-actions .btn-ghost { display: none; }
  .pi-photo { margin-top: 36px; }
  .pi-photo .ph { --ar: 4 / 3; border-radius: 22px; }
}
@media (max-width: 680px) {
  .svc-grid { grid-template-columns: 1fr; gap: 10px; }
  .svc { padding: 14px 16px; }
  .svc small { display: none; }
  .ph-spec { display: none; }
  .ph { border-radius: 22px; }
  .n-viz.ph-viz { height: 220px; min-height: 0; }
  .split-points li { grid-template-columns: 1fr; gap: 2px; }
  .cta-card { padding: 32px 22px; border-radius: 24px; }
  .cta-actions .btn { width: 100%; }
}

/* Photo 7 sits on the dark contact band; hidden on phones so the form stays close */
.deep .ph { background: var(--deep-3); border-color: var(--lavender-a25); }
.deep .ph-ico { background: var(--deep-4); border-color: var(--deep-line-2); color: var(--lavender); box-shadow: none; }
.deep .ph-num { background: var(--lavender-a10); border-color: var(--lavender-a25); color: var(--lavender-2); }
.deep .ph-what { color: var(--on-deep-strong); }
.deep .ph-spec { color: var(--on-deep-2); }
.contact-photo { margin-top: 8px; }
.ph-in { max-width: 42ch; }
.ph-what { text-wrap: balance; }
@media (max-width: 1000px) { .contact-photo { display: none; } }

/* Pricing: three plans. Academy: one wide card, photo beside the text (21 Oct 2026, resourcing offers removed) */
.n-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.foot-grid { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); }
.n-card.n-wide { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: 20px 40px; padding: 18px; max-width: 1040px; margin-inline: auto; width: 100%; }
.n-card.n-wide .n-viz.ph-viz { height: 300px; }
.n-card.n-wide .n-text { padding: 8px 16px 8px 0; }
.n-card.n-wide .n-text h3 { font-size: 24px; }
@media (max-width: 1000px) { .n-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .n-plans { grid-template-columns: 1fr; }
  .n-card.n-wide { grid-template-columns: 1fr; padding: 18px 18px 26px; }
  .n-card.n-wide .n-text { padding: 0 8px; }
}
@media (max-width: 680px) { .n-card.n-wide .n-viz.ph-viz { height: 220px; } .n-card.n-wide .n-text h3 { font-size: 20px; } }

/* Hero image (21 Oct 2026): spans the page margins; the platform card sits in its top-right corner, 24px in.
   The rings keep their old height so they still circle the headline; the two lower logos would sit behind the image. */
.hero-media { position: relative; z-index: 4; max-width: calc(1184px + 32px); margin: 0 auto; padding: 0 16px; }
.hero-ph { --ar: 2 / 1; place-items: end start; border-radius: 28px; }
.hero-ph .ph-in { justify-items: start; text-align: left; padding: 32px; max-width: 46ch; }
.hero-media .plat-card { position: absolute; top: 24px; right: 40px; margin: 0; width: min(460px, calc(100% - 80px)); }
.hero-media + .platforms { padding-top: 48px; }
.hero-stage { padding-bottom: 56px; }
.orbit-nodes { bottom: auto; height: 1030px; }
html[data-route="home"] .orbit { bottom: auto; height: 1030px; }
.node.n-bl, .node.n-br { display: none; }
@media (max-width: 1000px) { .hero-ph { --ar: 16 / 10; } }
@media (max-width: 767px) {
  .hero-media { padding: 0 8px; }
  .hero-ph { --ar: 4 / 3; place-items: center; border-radius: 22px; }
  .hero-ph .ph-in { justify-items: center; text-align: center; padding: 24px; }
  .hero-media .plat-card { position: relative; top: auto; right: auto; width: 100%; margin-top: 12px; }
  .hero-stage { padding-bottom: 32px; }
}

/* Slots with a real photo: no dashed edge, the photo covers the frame */
.ph.has-img { border: 0; background: var(--line); }
.hero-ph.has-img > img { object-position: 50% 32%; }

.ph-split.has-img > img { object-position: 52% 40%; }

.ph.has-img[data-ph="2"] > img { object-position: 50% 30%; }
.ph.has-img[data-ph="3"] > img { object-position: 50% 30%; }

/* Article cards: date and reading time under the title */
.n-text .n-meta { font-size: 13.5px; color: var(--ink-3); margin-top: 2px; }
.n-faq .ans a, .consent a { color: var(--accent); }

.ph.has-img[data-ph="4"] > img { object-position: 50% 35%; }

/* Leadership photos: same height on phones whatever the photo's shape */
@media (max-width: 680px) { .n-viz.n-photo { height: 180px; min-height: 0; } }

/* ===== Additions (22 Oct 2026): the transformation site. Same tokens, radii, hairlines and type scale as above. ===== */
/* Services dropdown: ten items, so the item stagger continues past the eighth */
.dd[data-open="true"] .dd-panel a:nth-child(9), .dd[data-open="true"] .dd-panel a:nth-child(10) { transition-delay: .22s, .22s, 0s; }
.dd[data-open="true"] .dd-panel a:nth-child(11), .dd[data-open="true"] .dd-panel a:nth-child(12) { transition-delay: .26s, .26s, 0s; }

/* Capability lists inside cards */
.n-points { display: grid; gap: 7px; margin-top: 8px; width: 100%; }
.n-points li { display: flex; gap: 9px; align-items: start; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.n-points li .n-check { margin-top: 3px; }
.n-points b { font-weight: 500; color: var(--ink); }
.deep .n-points li { color: var(--on-deep-2); }
.deep .n-points b { color: var(--on-deep-strong); }
.n-text .n-tags { margin-top: 10px; }
.n-text .n-pill { margin-bottom: 2px; }
.n-outcome { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: var(--canvas); font-size: 14px; line-height: 1.45; color: var(--ink-2); width: 100%; }
.n-outcome svg { width: 16px; height: 16px; color: var(--accent); margin-top: 2px; }
.n-outcome b { font-weight: 500; color: var(--ink); }
.deep .n-outcome { background: var(--lavender-a10); color: var(--on-deep-2); }
.deep .n-outcome b { color: var(--on-deep-strong); }

/* Lifecycle stages: three cards that read as one line */
.stage-num { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: var(--on-deep-strong); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.n-title .stage-num { width: 26px; height: 26px; font-size: 12px; }

/* Four engagement models on the pricing page */
.n-plans.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .n-plans.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .n-plans.four { grid-template-columns: 1fr; } }

/* Photo strip (industries) */
.ph-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.ph-strip .ph { --ar: 4 / 3; }
.ph-strip figcaption, .ph-cap { display: block; margin-top: 10px; font-size: 14px; color: var(--ink-3); text-align: center; }
@media (max-width: 900px) { .ph-strip { grid-template-columns: 1fr; } }
.ph.has-img.ph-split-2 > img { object-position: 50% 45%; }

/* Office cards */
.office { display: grid; gap: 4px; font-size: 14.5px; color: var(--ink-2); line-height: 1.55; }
.office b { font-weight: 500; color: var(--ink); }
.office a { color: var(--accent); text-decoration: none; }
.office .n-flag { margin-bottom: 6px; }

/* Article and legal prose */
.prose { max-width: 780px; margin-inline: auto; font-size: 17px; line-height: 1.7; color: var(--ink-2); }
.prose > :first-child { margin-top: 0; }
.prose h2 { font-size: 26px; font-weight: 500; letter-spacing: -0.025em; color: var(--ink); margin: 44px 0 14px; scroll-margin-top: 96px; }
.prose h3 { font-size: 19px; font-weight: 500; letter-spacing: -0.015em; color: var(--ink); margin: 28px 0 8px; }
.prose p { margin: 0 0 16px; }
.prose p.lead-in { font-size: 19px; color: var(--ink); }
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 22px; display: grid; gap: 8px; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li::marker { color: var(--accent); }
.prose a { color: var(--accent); }
.prose strong { font-weight: 500; color: var(--ink); }
.prose .callout { background: var(--surface); border: 0.5px solid var(--line); border-radius: 22px; padding: 22px 26px; margin: 24px 0; box-shadow: var(--shadow-card); }
.prose .callout h3 { margin-top: 0; }
.prose .callout > :last-child { margin-bottom: 0; }
.prose .table-wrap { overflow-x: auto; margin: 0 0 20px; border: 0.5px solid var(--line); border-radius: 16px; background: var(--surface); }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.prose th, .prose td { text-align: left; padding: 12px 14px; border-bottom: 0.5px solid var(--line); vertical-align: top; }
.prose th { font-weight: 500; color: var(--ink); background: var(--canvas-2); }
.prose tr:last-child td { border-bottom: 0; }
.prose .updated { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-3); margin-bottom: 8px; }
.prose code { font-size: .92em; background: var(--canvas); padding: 2px 6px; border-radius: 6px; }
.legal-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: -16px 0 48px; }
.legal-nav a { font-size: 14px; padding: 8px 14px; border-radius: 999px; background: var(--surface); border: 0.5px solid var(--line); color: var(--ink-2); text-decoration: none; }
.legal-nav a:hover { border-color: var(--accent-line); color: var(--accent-strong); }
.legal-section + .legal-section { margin-top: 72px; padding-top: 72px; border-top: 0.5px solid var(--line); }
.legal-section > h2.h2 { font-size: clamp(28px, 3.4vw, 40px); margin-bottom: 8px; }
.pi-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; font-size: 14.5px; color: var(--ink-3); }
.pi-meta b { font-weight: 500; color: var(--ink-2); }
.art-foot { max-width: 780px; margin: 48px auto 0; padding-top: 28px; border-top: 0.5px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; align-items: center; font-size: 15px; color: var(--ink-2); }
@media (max-width: 680px) { .prose { font-size: 16px; } .prose h2 { font-size: 23px; margin-top: 36px; } .prose .callout { padding: 18px; border-radius: 18px; } }

/* Contact form details */
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.send-err { grid-column: 1 / -1; font-size: 14px; color: var(--bad); background: var(--bad-soft); border-radius: 10px; padding: 10px 12px; }
.send-err:empty { display: none; }
.send-err a { color: inherit; }
.btn[aria-busy="true"] { opacity: .7; pointer-events: none; }
.contact-copy .contact-list + .n-kicker { margin-top: 8px; }

/* Academy facts */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.facts .n-w { padding: 16px; }
.facts .n-w b { display: block; font-size: 18px; font-weight: 500; letter-spacing: -0.02em; margin-bottom: 4px; }
@media (max-width: 680px) { .facts { grid-template-columns: 1fr; } }

/* Values and other icon tiles reuse .svc without a link */
.svc.static { cursor: default; }
.svc.static:hover { translate: none; border-color: var(--line); box-shadow: var(--shadow-card); }
.svc.static > svg { display: none; }
.svc.static { grid-template-columns: 44px minmax(0, 1fr); }
@media (max-width: 680px) { .svc.static small { display: block; } }

/* Home: industry tiles sit on a white band, so they get the canvas edge */
.band.white .svc { background: var(--canvas); box-shadow: none; }
.band.white .svc:hover { background: var(--surface); }

/* Two photos side by side (about page) */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 760px) { .duo { grid-template-columns: 1fr; } }

/* Footer: brand column plus services, industries and company */
.foot-grid { grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .foot-grid { grid-template-columns: 1fr; } }
.ph.has-img[data-ph="17"] > img { object-position: 50% 42%; }
.ph.has-img[data-ph="15"] > img { object-position: 50% 50%; }
.ph.has-img[data-ph="16"] > img { object-position: 100% 45%; }

/* ===== Additions (3 Nov 2026): full-name logo, bilingual site, cookie consent, case studies, independent offices. Same tokens as above. ===== */
/* Logo: "Neurosuite" lockup (mark as the N, 665 x 120); the star keeps its own layer for the twinkle. Percentages come from the logo geometry. */
.brand .logo-full, .brand .logo-base { height: 30px; width: auto; }
.brand-logo .spark { left: 14.286%; top: 0.833%; width: 6.165%; }
.brand-logo .logo-base { display: block; }
@media (max-width: 767px) { .brand .logo-full, .brand .logo-base { height: 26px; } }
/* Skip link */
.sr.skip { position: absolute; left: 8px; top: 8px; z-index: 100; background: var(--surface); color: var(--ink); padding: 8px 12px; border-radius: 8px; clip: auto; width: auto; height: auto; transform: translateY(-200%); text-decoration: none; font-weight: 500; }
.sr.skip:focus { transform: none; }
/* Nav: language switch and the second (Insights) dropdown */
.lang-switch { display: inline-flex; align-items: center; border: 0.5px solid var(--line); border-radius: 999px; padding: 2px; background: var(--surface); }
.lang-switch a { display: inline-flex; align-items: center; justify-content: center; height: 30px; padding: 0 11px; border-radius: 999px; font: 600 12.5px/1 var(--font); letter-spacing: .04em; color: var(--ink-3); text-decoration: none; transition: background .15s, color .15s; }
.lang-switch a:hover { color: var(--ink); }
.lang-switch a[aria-current="true"] { background: var(--ink); color: var(--on-accent); }
.nav-cta { gap: 10px; }
.dd.dd-narrow .dd-panel { width: 420px; grid-template-columns: 1fr; left: -8px; }
.navlinks > .dd > button[data-current="true"] { color: var(--ink); background: var(--canvas); }
.mobile-lang { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 8px 6px; border-top: 1px solid var(--line); margin-top: 6px; font-size: 14px; color: var(--ink-3); }
.mobile-lang span { margin-right: 4px; }
.mobile-menu .mobile-lang a { display: inline-flex; padding: 7px 12px; border-radius: 999px; border: 0.5px solid var(--line); font-size: 14px; color: var(--ink-2); }
.mobile-menu .mobile-lang a[aria-current="true"] { background: var(--ink); color: var(--on-accent); border-color: var(--ink); }
@media (max-width: 1140px) { .navlinks, .nav-cta .btn-ink, .nav-cta .lang-switch { display: none; } .menu-btn { display: inline-flex; } .navbar { flex-wrap: wrap; } .mobile-menu { flex-basis: 100%; } }
@media (min-width: 1141px) { .menu-btn { display: none; } }
/* Footer: social link, cookie settings button, language */
.foot-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.social { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 500; color: var(--ink-2); text-decoration: none; }
.social svg { width: 18px; height: 18px; color: var(--accent); }
.social:hover { color: var(--accent); }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: none; }
.foot-bottom .linklike { color: var(--ink-3); }
.foot-bottom .linklike:hover { color: var(--ink); }
.foot-lang { color: var(--ink-3); }
.foot-lang a[aria-current="true"] { color: var(--ink); font-weight: 500; }
.addr a { color: inherit; text-decoration: none; }
.addr a:hover { color: var(--accent); }
.n-flag.ae { flex-direction: row; }
.n-flag.ae i:first-child { flex: 1.6; }
/* Bottom stack: the language suggestion (when the detected country does not match the page language) and the cookie
   consent pill are docked at the bottom edge, one above the other, centred. Compact pills on desktop, two rows on
   smaller screens, full width on phones above the sticky call-to-action. They cover no content. */
.bottom-stack { position: fixed; left: max(16px, env(safe-area-inset-left, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(14px, env(safe-area-inset-bottom, 0px)); z-index: 80; display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; }
.consent-root { display: flex; justify-content: center; width: 100%; pointer-events: none; }
.consent-card { pointer-events: auto; width: max-content; max-width: 100%; display: flex; align-items: center; gap: 14px; padding: 9px 10px 9px 16px; background: var(--surface); border: 0.5px solid var(--line); border-radius: 999px; box-shadow: var(--shadow-lg); animation: consent-in .5s cubic-bezier(.16,1,.3,1) both; }
@keyframes consent-in { from { opacity: 0; translate: 0 12px; } }
.consent-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); flex: none; }
.consent-ico svg { width: 16px; height: 16px; }
.consent-card p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.consent-card p a, .consent-panel a { color: var(--accent); }
.consent-panel h2 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.consent-panel p { font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.consent-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.consent-card .consent-actions { flex-wrap: nowrap; gap: 8px 12px; }
.consent-panel .consent-actions { margin-top: 14px; }
.consent-actions .btn { height: 38px; padding: 0 14px; font-size: 13.5px; white-space: nowrap; }
.consent-panel .consent-actions .btn { height: 42px; padding: 0 16px; font-size: 14px; }
.consent-actions .linklike { font-size: 13.5px; font-weight: 500; color: var(--accent); white-space: nowrap; padding: 0 4px; }
@media (max-width: 1100px) {
  .consent-card { flex-wrap: wrap; justify-content: center; width: min(560px, 100%); padding: 14px 16px; border-radius: 18px; gap: 10px 12px; }
  .consent-card p { flex: 1 1 100%; text-align: left; }
  .consent-ico { display: none; }
}
.consent-modal { pointer-events: auto; position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: var(--scrim); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); overflow-y: auto; }
.consent-panel { width: min(640px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; background: var(--surface); border-radius: 24px; padding: 28px 28px 24px; box-shadow: var(--shadow-lg); animation: consent-in .4s cubic-bezier(.16,1,.3,1) both; }
.consent-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.consent-panel-head h2 { font-size: 22px; }
.consent-close { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 0.5px solid var(--line); background: var(--surface); color: var(--ink-2); cursor: pointer; }
.consent-close svg { width: 16px; height: 16px; }
.consent-cats { margin: 18px 0 6px; border-top: 0.5px solid var(--line); }
.consent-cats li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 0.5px solid var(--line); }
.consent-cat-text { display: grid; gap: 3px; }
.consent-cat-text b { font-weight: 600; font-size: 15px; }
.consent-cat-text span { font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }
.consent-always { font-size: 12.5px; font-weight: 600; color: var(--good); background: var(--good-soft); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-ui { width: 44px; height: 26px; border-radius: 999px; background: var(--line-2); position: relative; transition: background .2s; }
.switch-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 3px rgba(var(--shadow-ink),.3); transition: translate .2s cubic-bezier(.2,.8,.2,1); }
.switch input:checked + .switch-ui { background: var(--accent); }
.switch input:checked + .switch-ui::after { translate: 18px 0; }
.switch input:focus-visible + .switch-ui { outline: 2px solid var(--accent); outline-offset: 3px; }
.consent-foot { margin-top: 14px; font-size: 13px !important; color: var(--ink-3) !important; }
@media (max-width: 767px) { .bottom-stack { left: 8px; right: 8px; bottom: calc(74px + env(safe-area-inset-bottom, 0px)); gap: 8px; } html[data-route="contact"] .bottom-stack { bottom: calc(8px + env(safe-area-inset-bottom, 0px)); } .consent-card, .lang-suggest { width: 100%; padding: 12px 14px; } .consent-card .consent-actions, .lang-suggest-actions { flex-wrap: wrap; width: 100%; } .consent-card .consent-actions .btn, .lang-suggest-actions .btn { flex: 1 1 auto; } .consent-panel { padding: 22px 18px; border-radius: 20px; } }
/* Language suggestion: a dark pill above the consent pill, shown once per visit until the visitor chooses */
.lang-suggest { pointer-events: auto; width: max-content; max-width: 100%; display: flex; align-items: center; gap: 14px; padding: 9px 10px 9px 18px; background: var(--deep); color: var(--on-deep); border-radius: 999px; box-shadow: var(--shadow-lg); font-size: 14px; animation: consent-in .4s ease both; }
.lang-suggest p { margin: 0; }
.lang-suggest-actions { display: flex; align-items: center; gap: 8px; }
.lang-suggest .btn-sm { height: 38px; padding: 0 14px; font-size: 13.5px; white-space: nowrap; }
.lang-suggest .btn-ghost { background: transparent; color: var(--on-deep-strong); border-color: var(--deep-line-2); }
.lang-suggest .btn-ghost:hover { border-color: var(--on-deep-2); }
@media (max-width: 1100px) { .lang-suggest { flex-wrap: wrap; justify-content: center; width: min(560px, 100%); padding: 14px 16px; border-radius: 18px; gap: 10px 12px; } .lang-suggest p { flex: 1 1 100%; } }
/* Industries strip with four photos */
.ph-strip.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .ph-strip.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ph-strip.four { grid-template-columns: 1fr; } }
/* Office cards with two addresses */
.office + .office { padding-top: 10px; border-top: 0.5px solid var(--line); }
/* Contact lead link on the deep band */
.contact-copy .lead a { color: var(--on-deep-strong); }
/* Card previews that hold a photo (home and about case-study teasers) */
.n-viz.ph-viz .ph { height: 100%; aspect-ratio: auto; border-radius: inherit; }
a.n-card .link-arrow { margin-top: 10px; }
/* Pages: no hidden state any more (one page per URL); keep the arrival animation */
.page { animation: page-in .6s cubic-bezier(.16,1,.3,1) backwards; }
.page-intro .pi-copy > *, .page-intro .pi-photo { animation: pi-in .8s cubic-bezier(.16,1,.3,1) backwards; }
html[data-route="home"] .hero-stage, html[data-route="home"] .hero-media, html[data-route="home"] .platforms { animation: page-in .6s cubic-bezier(.16,1,.3,1) backwards; }
/* Picture elements inside photo frames */
.ph > picture { display: contents; }
.ph > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Dutch headlines run longer: let section heads breathe */
html[lang="nl"] .n-head h2 { max-width: 22ch; }
html[lang="nl"] .h1 { font-size: clamp(36px, 5.2vw, 66px); }
/* No-JS: the mobile menu and consent stay usable */
.no-js .mobile-menu[hidden] { display: grid !important; }
/* Links on the deep bands use the lavender token instead of inline colours */
.deep .link-arrow, .contact-list a { color: var(--lavender-2); }
.deep .link-arrow:hover, .contact-list a:hover { color: var(--on-deep-strong); }
/* Long chip labels (Dutch) may wrap on narrow screens instead of overflowing */
@media (max-width: 600px) { .n-also .n-chip-static, .n-also a.n-chip { white-space: normal; text-align: center; max-width: 100%; } }
@media (max-width: 420px) { .n-logos { flex-wrap: wrap; gap: 8px; } .n-logos .n-lg { width: 44px; height: 44px; border-radius: 12px; } .n-card.n-wide { min-width: 0; } .n-card.n-wide .n-viz { min-width: 0; } }
/* Footer address columns: rows keep their natural spacing instead of stretching to the tallest column */
.addr div { align-content: start; }

/* Hero slideshow: the office photo first, then the workplaces our clients run. Crossfade, caption chip bottom-left,
   dots bottom-right. Slides after the first are fetched only when they are about to show. */
.hero-slides .slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; }
.hero-slides .slide.is-active { opacity: 1; z-index: 1; }
.hero-slides .slide > picture { display: contents; }
.hero-slides .slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
.hero-slides .slide[data-cap-title="Azure cloud"] img, .hero-slides .slide[data-cap-title="Azure-cloud"] img { object-position: 50% 50%; }
.slide-caption { position: absolute; left: 16px; bottom: 16px; z-index: 3; display: inline-flex; align-items: baseline; gap: 6px; max-width: min(560px, calc(100% - 120px)); margin: 0; padding: 8px 14px; border-radius: 999px; background: var(--surface-glass); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: var(--shadow-widget); font-size: 13.5px; line-height: 1.4; color: var(--ink); }
.slide-caption b { font-weight: 600; white-space: nowrap; }
.slide-caption span { color: var(--ink-2); }
.slide-caption span::before { content: "\00b7\00a0"; color: var(--ink-3); }
.slide-dots { position: absolute; right: 14px; bottom: 14px; z-index: 3; display: flex; gap: 2px; margin: 0; padding: 4px; list-style: none; border-radius: 999px; background: rgba(var(--shadow-ink), .28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.slide-dots button { width: 22px; height: 22px; padding: 0; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; border-radius: 50%; }
.slide-dots button::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--surface-glass-2); transition: transform .2s, background .2s; }
.slide-dots button[aria-current="true"]::before { background: var(--surface); transform: scale(1.35); }
.slide-dots button:hover::before { background: var(--surface); }
.slide-dots button:focus-visible { outline: 2px solid var(--surface); outline-offset: 1px; }
@media (max-width: 767px) {
  .slide-caption { left: 10px; bottom: 10px; max-width: calc(100% - 20px); font-size: 12.5px; padding: 7px 12px; }
  .slide-caption span { display: none; }
  .slide-dots { right: 10px; bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) { .hero-slides .slide { transition: none; } }