/* qumbaqa.com site styles. Uses tokens from design-tokens.css (loaded first). Mobile-first. */

@font-face { font-family: "Urbanist"; font-weight: 300; font-display: swap; src: url("../shared/fonts/Urbanist-Light.ttf") format("truetype"); }
@font-face { font-family: "Urbanist"; font-weight: 400; font-display: swap; src: url("../shared/fonts/Urbanist-Regular.ttf") format("truetype"); }
@font-face { font-family: "Urbanist"; font-weight: 500; font-display: swap; src: url("../shared/fonts/Urbanist-Medium.ttf") format("truetype"); }
@font-face { font-family: "Urbanist"; font-weight: 600; font-display: swap; src: url("../shared/fonts/Urbanist-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Urbanist"; font-weight: 700; font-display: swap; src: url("../shared/fonts/Urbanist-Bold.ttf") format("truetype"); }
@font-face { font-family: "Urbanist"; font-weight: 800; font-display: swap; src: url("../shared/fonts/Urbanist-ExtraBold.ttf") format("truetype"); }
/* Canaro: Book only, and only for the "qumbaqa" wordmark (.wm). */
/* Merlo Medium Italic: the kingfisher quote only (owner 2026-10-09). The package licence is a desktop licence: webfont licence open, see plans/decisions-needed.md B3. */
@font-face { font-family: "Merlo"; font-weight: 500; font-style: italic; font-display: swap; src: url("../shared/fonts/Merlo-MediumItalic.otf") format("opentype"); }
@font-face { font-family: "Merlo"; font-weight: 500; font-style: normal; font-display: swap; src: url("../shared/fonts/Merlo-Medium.otf") format("opentype"); }
@font-face { font-family: "Canaro"; font-weight: 400; font-display: swap; src: url("../shared/fonts/Canaro-Book.otf") format("opentype"); }

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

html { color-scheme: dark; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); background: var(--color-paper); }

/* Sticky footer: short pages keep the footer at the bottom of the screen, long pages show it after the content. */
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  line-height: 1.6;
  color: var(--color-ink);
  background: transparent; /* the page colour is on <html>; a body background would hide the fixed .bg layer */
  overflow-wrap: break-word;
}
body > main { flex: 1 0 auto; }

img, video, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary); text-underline-offset: 0.18em; }
a:hover { color: var(--color-primary-deep); }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; margin: 0 0 var(--space-4); letter-spacing: var(--h-tracking); text-wrap: balance; }
h1 { font-size: clamp(2rem, 1.2rem + 3.6vw, 3.75rem); font-weight: var(--h-weight); }
h2 { font-size: clamp(1.45rem, 1.1rem + 1.6vw, 2.2rem); }
h3 { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem); }
p { margin: 0 0 var(--space-4); }
ul { padding-left: 1.2em; margin: 0 0 var(--space-4); }
li { margin-bottom: var(--space-2); }
li::marker { color: var(--color-primary); }
strong { font-weight: 700; }
em { font-style: italic; }

/* The wordmark: always Canaro Book (owner rule), also inside bold headings. */
.wm { font-family: var(--font-brand); font-weight: 400; font-style: normal; letter-spacing: 0.01em; font-synthesis: none; }

.container { width: 100%; max-width: calc(var(--max-content-width) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.prose { max-width: var(--max-prose-width); }
.skip { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--color-primary); color: var(--color-on-primary); padding: var(--space-3) var(--space-4); border-radius: 0 0 var(--radius-sm) 0; font-weight: 700; }
.skip:focus { left: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Moving backgrounds: A soft colour clouds with a dot grid (Lumo-style), B, C, D WebGL aurora; all drawn by aurora.js, with CSS fallbacks ---------- */
.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: #000; }
.bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.38) 100%); }
.bg__dots { display: none; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M3.5 6h5M6 3.5v5' stroke='%23fff' stroke-opacity='.4' stroke-width='1' fill='none'/%3E%3C/svg%3E"); background-size: 12px 12px; -webkit-mask-image: radial-gradient(ellipse 64% 60% at 50% 50%, #000 24%, transparent 80%); mask-image: radial-gradient(ellipse 64% 60% at 50% 50%, #000 24%, transparent 80%); opacity: 0.75; }
:root:not(.gl-ok)[data-variant="aurora"] .bg__dots { display: block; }
.bg__gl { display: none; position: absolute; inset: 0; width: 100%; height: 100%; }
:root.gl-ok .bg__gl { display: block; }
/* Colour mesh (and for A the CSS dot grid): the CSS-only fallback of all designs when WebGL is unavailable */
.bg__mesh { display: none; position: absolute; inset: 0; overflow: hidden; }
:root:not(.gl-ok)[data-variant="aurora"] .bg__mesh { display: block; }
:root[data-variant="aurora"] .bg__mesh i { width: 80vmax; height: 50vmax; }
:root[data-variant="aurora"] .bg__dots { opacity: 0.9; }
:root[data-variant="aurora"] .bg::after { background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.28) 100%); }
:root[data-variant="aurora"] .hs__stick::after { background: linear-gradient(90deg, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0.12) 46%, transparent 72%); }
/* A: clouds sit in the middle of the screen and drift gently (Lumo-style) */
:root[data-variant="aurora"] .bg__mesh i:nth-child(1) { left: -14vmax; right: auto; top: 14vh; bottom: auto; animation: cloud-1 32s ease-in-out infinite alternate; }
:root[data-variant="aurora"] .bg__mesh i:nth-child(2) { left: 34%; right: auto; top: -12vh; bottom: auto; animation: cloud-2 38s ease-in-out infinite alternate; }
:root[data-variant="aurora"] .bg__mesh i:nth-child(3) { left: 16%; right: auto; top: 30vh; bottom: auto; animation: cloud-3 44s ease-in-out infinite alternate; }
:root[data-variant="aurora"] .bg__mesh i:nth-child(4) { left: auto; right: -18vmax; top: 28vh; bottom: auto; animation: cloud-4 36s ease-in-out infinite alternate; }
@keyframes cloud-1 { to { transform: translate3d(12vmax, 8vmax, 0) scale(1.12) rotate(8deg); } }
@keyframes cloud-2 { to { transform: translate3d(-14vmax, 10vmax, 0) scale(0.92) rotate(-6deg); } }
@keyframes cloud-3 { to { transform: translate3d(10vmax, -8vmax, 0) scale(1.1) rotate(5deg); } }
@keyframes cloud-4 { to { transform: translate3d(-12vmax, -6vmax, 0) scale(1.08) rotate(-8deg); } }
:root:not(.gl-ok)[data-variant="waves"] .bg__mesh { display: block; }
.bg__mesh i { position: absolute; width: 95vmax; height: 95vmax; border-radius: 50%; opacity: var(--mesh-a); will-change: transform; }
.bg__mesh i:nth-child(1) { left: -25vmax; top: -30vmax; background: radial-gradient(closest-side, var(--mesh-1), transparent 72%); animation: mesh-1 34s ease-in-out infinite alternate; }
.bg__mesh i:nth-child(2) { right: -30vmax; top: -5vmax; background: radial-gradient(closest-side, var(--mesh-2), transparent 70%); animation: mesh-2 42s ease-in-out infinite alternate; }
.bg__mesh i:nth-child(3) { left: -10vmax; bottom: -45vmax; background: radial-gradient(closest-side, var(--mesh-3), transparent 70%); animation: mesh-3 50s ease-in-out infinite alternate; }
.bg__mesh i:nth-child(4) { right: -15vmax; bottom: -40vmax; background: radial-gradient(closest-side, var(--mesh-4), transparent 70%); animation: mesh-4 38s ease-in-out infinite alternate; opacity: calc(var(--mesh-a) * 0.8); }
@keyframes mesh-1 { to { transform: translate3d(34vmax, 22vmax, 0) scale(1.2) rotate(40deg); } }
@keyframes mesh-2 { to { transform: translate3d(-40vmax, 18vmax, 0) scale(0.85) rotate(-35deg); } }
@keyframes mesh-3 { to { transform: translate3d(32vmax, -22vmax, 0) scale(1.15) rotate(30deg); } }
@keyframes mesh-4 { to { transform: translate3d(-34vmax, -26vmax, 0) scale(1.25) rotate(-45deg); } }
@keyframes mesh-spin { to { transform: rotate(360deg); } }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(0, 0, 0, 0.55); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid var(--color-line); }
.site-header__bar { display: flex; align-items: center; gap: var(--space-4); min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--color-ink); text-decoration: none; font-size: 1.45rem; margin-right: auto; }
.brand img { width: 2.6rem; height: 2.6rem; }
.brand__text { display: inline-block; line-height: 1; }
/* Registered sign after the wordmark (header, footer): small, Urbanist, raised so its lower edge sits just above the x-height (the top of the "a"). `top` is in the sign's own em (0.34 of the wordmark size). */
.tm { position: relative; top: -1.1em; font-family: var(--font-body); font-size: 0.42em; font-weight: 600; letter-spacing: 0; vertical-align: baseline; line-height: 0; margin-left: 0.2em; color: var(--color-ink); opacity: 0.8; }
.nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm); background: transparent; color: var(--color-ink); cursor: pointer; }
.nav-toggle svg { width: 1.4rem; height: 1.4rem; }
.site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: rgba(0, 0, 0, 0.96); border-bottom: 1px solid var(--color-line); padding: var(--space-4) var(--gutter) var(--space-6); max-height: calc(100vh - var(--header-h)); overflow-y: auto; }
.site-nav[data-open="true"] { display: block; }
html:not(.js) .site-nav { display: block; position: static; }
html:not(.js) .nav-toggle { display: none; }
.site-nav ul { list-style: none; margin: 0; padding: 0; }
.site-nav li { margin: 0; }
.site-nav a { display: block; padding: var(--space-3) 0; color: var(--color-ink); text-decoration: none; font-weight: 600; border-bottom: 1px solid var(--color-line); }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--color-primary); }
.site-nav .sub a { text-transform: lowercase; padding-left: var(--space-4); font-weight: 500; color: var(--color-muted); }
.site-nav .nav-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-top: var(--space-4); }
/* Language switch: a pill like the draft design switcher (solid line instead of dashed), the current language filled */
.lang-pill { display: inline-flex; align-items: center; gap: var(--space-1); padding: 3px; border: 1px solid var(--color-line-strong); border-radius: 999px; }
.lang-pill > *, .site-nav .lang-pill > a { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; height: 2rem; padding: 0 0.7rem; border-radius: 999px; border: 1px solid transparent; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.06em; text-decoration: none; color: var(--color-ink); }
.lang-pill a:hover, .site-nav .lang-pill > a:hover { background: var(--color-surface-hover); border-color: var(--color-line-strong); }
.lang-pill [aria-current="true"] { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
/* The navbar's contact button keeps the primary look inside .site-nav (its link rules would otherwise win) */
.site-nav .nav-actions .btn { display: inline-flex; padding: 0.55rem 1.25rem; border: 1px solid var(--color-primary); border-radius: var(--btn-radius); background: var(--color-primary); color: var(--color-on-primary); font-size: 0.98rem; font-weight: 700; }
.site-nav .nav-actions .btn:hover { background: var(--color-primary-deep); color: var(--color-on-primary); }

@media (min-width: 62rem) {
  .nav-toggle { display: none; }
  .site-nav { display: flex; position: static; background: none; border: 0; padding: 0; max-height: none; overflow: visible; align-items: center; gap: var(--space-2); }
  .site-nav ul.nav-main { display: flex; align-items: center; gap: var(--space-1); }
  .site-nav a { white-space: nowrap; border: 0; padding: var(--space-2) var(--space-3); border-radius: var(--btn-radius); font-size: 0.98rem; }
  .site-nav a:hover { background: var(--color-surface-hover); }
  .site-nav li.has-sub { position: relative; }
  .site-nav .sub { position: absolute; left: -1px; top: 100%; min-width: 12rem; padding: var(--space-2) 0; background: rgba(8, 9, 14, 0.98); border: 1px solid var(--color-line); border-radius: var(--radius-md); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.18s, transform 0.18s, visibility 0.18s; }
  .site-nav li.has-sub:hover > .sub, .site-nav li.has-sub:focus-within > .sub { opacity: 1; visibility: visible; transform: none; }
  .site-nav .sub a { padding: var(--space-2) var(--space-3); color: var(--color-ink); font-weight: 500; }
  .site-nav .nav-actions { margin: 0 0 0 var(--space-3); flex-wrap: nowrap; }
}

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 2.75rem; padding: 0.55rem 1.25rem; border-radius: var(--btn-radius); border: 1px solid var(--color-primary); background: var(--color-primary); color: var(--color-on-primary); font-weight: 700; font-size: 0.98rem; text-decoration: none; cursor: pointer; font-family: inherit; transition: transform 0.15s, background 0.15s, box-shadow 0.15s; }
.btn:hover { background: var(--color-primary-deep); color: var(--color-on-primary); transform: translateY(-1px); box-shadow: 0 6px 28px -8px var(--color-primary); }
.btn--ghost { background: transparent; color: var(--color-ink); border-color: var(--color-line-strong); }
.btn--ghost:hover { background: var(--color-surface-hover); color: var(--color-ink); border-color: var(--color-primary); box-shadow: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
/* Contact rows: filled buttons of equal width (the widest label sets it), stacked on narrow screens */
.cta .btn-row { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: fit-content; max-width: 100%; }
.cta .btn-row .btn { min-width: 12rem; }
@media (max-width: 40rem) { .cta .btn-row { grid-auto-flow: row; width: 100%; } }

/* ---------- Glow boxes: cards, stats, steps, tools. The highlight follows the pointer (owner: must keep) ---------- */
.card, .glow { position: relative; isolation: isolate; border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-surface); -webkit-backdrop-filter: blur(var(--card-blur)); backdrop-filter: blur(var(--card-blur)); overflow: hidden; transition: border-color 0.2s, transform 0.2s, background 0.2s; }
.card::before, .glow::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; background: radial-gradient(28rem circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--color-primary) 24%, transparent), transparent 60%); transition: opacity 0.25s; pointer-events: none; }
.card:hover, .card:focus-within, .glow:hover, .glow:focus-visible, .glow:focus-within { border-color: color-mix(in srgb, var(--color-primary) 72%, transparent); background: var(--color-surface-hover); }
.card:hover::before, .card:focus-within::before, .glow:hover::before, .glow:focus-visible::before, .glow:focus-within::before { opacity: 1; }
@media (hover: hover) { .card:hover, .glow:hover { transform: translateY(-3px); } }

.grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid > * { min-width: 0; }
.card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); }
.card h3 { margin: 0; }
.card p { margin: 0; color: var(--color-muted); }
.card .kicker { color: var(--color-tone); font-family: var(--font-kicker); font-weight: 600; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.06em; margin: 0; }
.card__logo { background: #f4f5f8; border-radius: var(--radius-md); padding: var(--space-3); display: grid; place-items: center; height: 5.5rem; }
.card__logo { overflow: hidden; grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
.card__logo img { width: 100%; height: 100%; object-fit: contain; }
.card__logo--clear { background: transparent; border: 1px solid var(--color-line); transition: background 0.2s, border-color 0.2s; }
.card__logo--clear img { filter: brightness(0) invert(1); opacity: 0.75; transition: filter 0.2s, opacity 0.2s; }
.card__logo--solid img { filter: grayscale(1); }
.card__media { border-radius: var(--radius-md); overflow: hidden; background: #0b0c10; }
.card__media video, .card__media img { width: 100%; }
.card__links { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: auto; padding-top: var(--space-2); font-weight: 600; }
.card a.stretch::after { content: ""; position: absolute; inset: 0; z-index: 1; }

/* ---------- Hero: horizontal sliding panels above the fold ---------- */
.hs { --peek-h: 7.4rem; --box-h: min(36rem, calc(100svh - var(--header-h) - var(--peek-h) - 3rem)); position: relative; overflow-x: clip; display: flex; flex-direction: column; }
.hs__stick { container-type: inline-size; position: relative; flex: none; display: flex; flex-direction: column; min-height: calc(100svh - var(--header-h) - var(--peek-h)); overflow: hidden; }
/* Transparent cut-out of the Oriental Dwarf Kingfisher photo, so the moving background shows through. It sits at the right edge, the text column on the left stays clear of the beak. */
.hs__bg { position: absolute; inset: 0; z-index: 0; background: url("../shared/hero/kingfisher-oriental-dwarf-cutout.webp") no-repeat calc(100% + 2vw) 100% / auto min(98%, 43cqw); opacity: calc(0.98 - min(var(--p, 0) * 9, 1) * 0.98); transform: translate3d(calc(var(--p, 0) * -4vw), 0, 0); }
.hs__stick::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.26) 46%, transparent 72%); }
.hs__track { position: relative; z-index: 1; display: flex; flex: 1; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.hs__track::-webkit-scrollbar { display: none; }
.panel { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; display: flex; align-items: center; padding-block: clamp(1rem, 3vh, 2rem); }
.panel__inner { width: 100%; max-width: calc(var(--max-content-width) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.panel .kicker { color: var(--color-tone); font-family: var(--font-kicker); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.85rem; margin-bottom: var(--space-3); }
/* Hierarchy of every panel: heading (hero h1 / panel h2, same scale) then lead (the payoff, muted or ink) then content. The wordmark is the intro's brand mark above the h1. */
.brand-word { font-size: clamp(3.2rem, 1.2rem + 7vw, 7.2rem); line-height: 0.95; margin: 0 0 clamp(1.5rem, 4vh, 2.75rem); }
.hero-h1, .panel h2 { font-size: clamp(1.6rem, 1.1rem + 1.7vw, 2.5rem); font-weight: 700; line-height: 1.15; letter-spacing: var(--h-tracking); margin: 0 0 clamp(0.6rem, 1.6vh, 1rem); }
/* The intro headline is set in Merlo Medium (owner 2026-10-09); words are glued in templates.mjs so the balanced lines break between phrases */
.hero-h1 { font-family: var(--font-accent); font-weight: 500; letter-spacing: 0; max-width: 26ch; text-wrap: balance; }
.panel h2 { max-width: 28ch; }
/* The line under the headline has the formatting of a kicker (see .panel .kicker and the variant rules below) */
.panel h2.kicker.kicker--lg { font-size: clamp(1.05rem, 0.8rem + 0.9vw, 1.5rem); line-height: 1.2; max-width: none; margin: 0 0 clamp(0.6rem, 1.6vh, 1rem); }
.hero-sub { max-width: 44ch; margin: 0; text-wrap: balance; }
/* Desktop: one line, its font size is fitted by site.js (fitSub) to 120% of the wordmark's width */
@media (min-width: 56rem) { .panel--intro .panel__inner > .hero-sub { max-width: none; white-space: nowrap; } }
.panel--intro .panel__inner { text-align: center; }
.panel--intro .panel__inner > * { text-shadow: 0 2px 20px rgba(0, 0, 0, 0.55); }
/* The centred text column and the bird share the width: on narrower desktops the bird is smaller so only its beak tip comes near the text */
@media (min-width: 56rem) and (max-width: 80rem) { .hs__bg { background-size: auto min(98%, 40cqw); } }
.panel--intro .panel__inner > * { max-width: min(34rem, 100%); margin-inline: auto; }
.panel-lead, .panel-split p, .belief__card p, .step p, .offer__card p { font-size: clamp(0.92rem, 0.55rem + 0.95vh, 1.06rem); }
.panel-lead { color: var(--color-ink); max-width: 56ch; }
.panel-outro { margin: 0; font-weight: 700; color: var(--color-tone); }
.panel .btn-row { margin-top: clamp(0.75rem, 2.4vh, 1.5rem); }
/* Hero tiles sit on moving backgrounds: darker, blurred backing keeps the text readable */
.panel .glow { background: rgba(4, 6, 12, 0.58); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.panel .glow:hover, .panel .glow:focus-within { background: rgba(10, 14, 22, 0.66); }

/* Panel: what I bring (years of experience) */
/* One compact row per number: ">25 years" as one unit on the left, the line on the right. A box with the profile photo sits to the left of the rows (above them on narrow screens). */
.stats-body { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); margin: clamp(0.5rem, 1.6vh, 1rem) 0 0; }
.stats-main { min-width: 0; }
.stat-row { list-style: none; padding: 0; margin: 0 0 clamp(0.5rem, 1.6vh, 1rem); display: grid; gap: var(--space-2); grid-template-columns: minmax(0, 1fr); }
.stat { margin: 0; padding: clamp(0.25rem, 0.7vh, 0.45rem) var(--space-4); display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); column-gap: var(--space-3); align-items: center; }
/* ">25 years" has the kicker style (class `kicker` on the element, see .panel .kicker), a little larger */
.panel .stat-row .stat__n.kicker { white-space: nowrap; margin: 0; font-size: clamp(0.95rem, 0.6rem + 0.9vh, 1.2rem); line-height: 1.2; }
.stat__u { font: inherit; }
.stat p { margin: 0; color: var(--color-muted); font-size: clamp(0.85rem, 0.5rem + 0.8vh, 0.95rem); line-height: 1.4; }
/* Photo box: greyscale for now (low resolution placeholder), cropped to the box; it grows with the height of the rows */
.portrait { margin: 0; display: block; width: min(60%, 11rem); aspect-ratio: 1; }
.portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; filter: grayscale(1) contrast(1.05); }
@media (min-width: 56rem) {
  .stats-body.has-portrait { grid-template-columns: 12rem minmax(0, 1fr); align-items: stretch; }
  .portrait { width: auto; aspect-ratio: auto; }
}

/* Panel: what I do */
.panel-split { display: grid; gap: var(--space-6) var(--space-10); grid-template-columns: minmax(0, 1fr); align-items: start; }
.panel-split p { margin-bottom: var(--space-3); }
.panel-split p:not(.panel-lead) { color: var(--color-muted); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.step { margin: 0; display: flex; gap: var(--space-4); align-items: flex-start; padding: clamp(0.8rem, 2vh, 1.15rem) var(--space-5); }
.step p { margin: 0; color: var(--color-ink); }
.step__n { flex: none; font-weight: 800; font-size: clamp(1.6rem, 1.1rem + 1.2vw, 2.3rem); line-height: 1; color: var(--color-primary); font-variant-numeric: tabular-nums; }
@media (min-width: 62rem) { .panel-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }

/* Panel: what I believe */
.belief { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); }
.belief__card { position: relative; margin: 0; padding: clamp(0.8rem, 2.2vh, 1.5rem) clamp(1rem, 2.4vh, 1.6rem); }
.belief__card p { margin: 0; color: var(--color-ink); line-height: 1.45; }
.belief__n { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); font-family: var(--font-mono); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.14em; color: var(--color-primary); }
.belief__n::after { content: ""; height: 1px; width: 2.5rem; background: color-mix(in srgb, var(--color-primary) 60%, transparent); }
.belief__card--recommend h3 { color: var(--color-tone); }
.belief__card--recommend p + p { margin-top: var(--space-3); }
/* Two columns: the two beliefs stacked on the left, the recommendation as a tall box on the right */
@media (min-width: 62rem) { .belief { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } .belief__card--recommend { grid-column: 2; grid-row: 1 / span 2; } }

/* Panel: personal service offering (three boxes, then the services list) */
.offer { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); margin-bottom: clamp(0.75rem, 2.4vh, 1.5rem); }
.offer--two { margin: clamp(0.6rem, 1.6vh, 1rem) 0 0; }
/* Services panel: a tall box on the left, the two cards stacked on the right */
.services-layout { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); align-items: stretch; }
.offer-stack { display: grid; gap: var(--space-3); align-content: start; }
.offer__card { margin: 0; padding: clamp(0.9rem, 2.2vh, 1.3rem) var(--space-5); }
.offer__card h3, .belief__card h3 { margin: 0 0 var(--space-2); font-size: clamp(1.05rem, 0.9rem + 0.5vw, 1.25rem); }
.offer__card p { margin: 0; color: var(--color-muted); line-height: 1.5; }
/* Below the three boxes: the services list as a box (what the contact box used to carry) */
.services { margin: 0; padding: clamp(0.9rem, 2.2vh, 1.3rem) var(--space-5); }
.services__lead { margin: 0 0 var(--space-2); color: var(--color-tone); font-weight: 700; font-size: clamp(0.92rem, 0.55rem + 0.95vh, 1.06rem); }
.services__list { list-style: none; margin: 0; padding: 0; font-size: clamp(0.92rem, 0.55rem + 0.95vh, 1.06rem); }
.services__list li { margin: 0 0 clamp(0.2rem, 0.8vh, 0.45rem); }
.services__list li::before { content: "·"; margin-right: 0.5em; color: var(--color-primary); font-weight: 800; }
@media (min-width: 56rem) { .offer--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .services-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); } }

/* The quote sits centred under the contact box; the space above (the contact section's bottom padding) equals the space below (the quote's own bottom padding, before the footer) */
.section.quote-band { padding-top: 0; }
.quote-band .container { text-align: center; }
.quote-band .quote-big { max-width: 34ch; margin: 0 auto; }
.quote-band + .split { padding-top: 0; }
.quote-big p { margin: 0; }
.quote-big { font-family: var(--font-accent); font-weight: 500; font-style: italic; color: var(--color-tone); font-size: clamp(1.4rem, 1rem + 2.2vw, 2.7rem); line-height: 1.25; max-width: 26ch; margin: 0 0 var(--space-6); }

/* Tab bar under the navbar: same glass bar, line, type size and hover/active states as the navbar links. The first tab's text lines up with the logo's left edge. */

/* Narrow screens: one clean first screen (bird, headline); the other panels stack below it */
@media (max-width: 55.99rem) {
  .hs__stick { display: flex; flex-direction: column; min-height: 0; overflow: visible; }
  .hs__track { display: contents; }
  .panel { position: relative; z-index: 1; order: 2; flex: none; width: 100%; padding-block: var(--space-10) var(--space-4); align-items: flex-start; }
  .hs { --peek-h: 7.4rem; }
  .panel:first-child { order: 0; min-height: calc(100svh - var(--header-h) - var(--peek-h) - 3rem); padding-block: var(--space-8) var(--space-6); }
  .hs__bg { bottom: auto; transform: none; height: calc(100svh - var(--header-h) - var(--peek-h)); background-size: auto 52%; background-position: 100% 96%; animation: none; opacity: 0.9; }
  .hs__stick::after { background: linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, transparent 70%); }
  .panel-lead, .panel-split p, .belief__card p, .step p, .offer__card p { font-size: 1rem; }
}

/* Desktop: vertical scroll drives the horizontal track (pinned); JS sets --p on .hs */
@media (min-width: 56rem) and (min-height: 34rem) {
  .js .hs--pinned { height: calc(100svh - var(--header-h) + (var(--n) - 1) * 58svh); }
  .js .hs--pinned .hs__stick { position: sticky; top: var(--header-h); height: calc(100svh - var(--header-h) - var(--peek-h)); margin-bottom: var(--peek-h); }
  .js .hs--pinned .hs__peek { position: sticky; bottom: 0; }
  .js .hs--pinned .hs__track { overflow: visible; scroll-snap-type: none; width: calc(var(--n) * 100%); flex: 1 0 auto; transform: translate3d(calc(var(--p, 0) * (var(--n) - 1) / var(--n) * -100%), 0, 0); will-change: transform; }
  .js .hs--pinned .panel { flex: 0 0 calc(100% / var(--n)); }
}

/* ---------- References reel: a quiet, greyed strip at the bottom of the first screen ("Trusted by ...") that invites scrolling ---------- */
/* The strip itself blends with "screen" (a sticky child could not blend through the pinned hero): the black boxes of the white-background logo rasters vanish. */
.hs__peek { position: relative; flex: none; margin-top: auto; height: var(--peek-h); display: flex; flex-direction: column; justify-content: center; gap: var(--space-2); border-top: 1px solid var(--color-line); background: linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.6)); z-index: 3; }
/* A bar of dice. Every die shows a reference on its front and a software logo on the face below; site.js sets --turn on .dice (one step = 90 degrees upwards,
   each die a little later than the one before it, --i) when the hero moves to another panel, or on a timer where the hero is not pinned. The row drifts from left to right.
   Every face is a link with the same glow and light-tile hover as the boxes below the fold (.glow). */
.dice { --dh: 3.6rem; --ws: clamp(5.8rem, 7.2vw, 7.2rem); --gap: 0.5rem; --wl: clamp(9.5rem, 11vw, 11rem); --wr: calc(var(--ns) * (var(--ws) + var(--gap)) / var(--nr) - var(--gap)); --w: var(--ws); flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
/* Software shows one die per logo; references are fewer, so those dice are wider and the surplus dice shrink to nothing: the row keeps the same width in both states */
.dice[data-kind="refs"] { --w: var(--wr); }
.die { position: relative; flex: none; width: var(--w); height: var(--dh); margin-right: var(--gap); perspective: 560px; transition: width 0.9s cubic-bezier(0.55, 0, 0.2, 1) calc(var(--i, 0) * 30ms), margin 0.9s cubic-bezier(0.55, 0, 0.2, 1) calc(var(--i, 0) * 30ms), opacity 0.6s calc(var(--i, 0) * 30ms); }
.dice[data-kind="refs"] .die--extra { width: 0; margin-right: 0; opacity: 0; }
/* a soft shadow under each die gives it weight */
.die::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: -0.35rem; height: 0.7rem; border-radius: 50%; background: rgba(0, 0, 0, 0.55); filter: blur(7px); z-index: -1; }
.die__cube { position: absolute; inset: 0; transform-style: preserve-3d; transform: translateZ(calc(var(--dh) / -2)) rotateX(calc(var(--turn, 0) * 90deg)); transition: transform 0.9s cubic-bezier(0.55, 0, 0.2, 1) calc(var(--i, 0) * 30ms); }
/* the die in the middle that reads "references" / "software": teal like the kicker above the wordmark in the first hero */
.dice[data-kind] .die--title { width: var(--wl); }
.die__face--title { border-color: color-mix(in srgb, var(--color-primary) 55%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 30%, transparent) 0%, color-mix(in srgb, var(--color-primary) 10%, transparent) 50%, rgba(0, 0, 0, 0.3) 100%), #08201f; }
.die__title { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--color-tone); font-family: var(--font-kicker); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.12em; line-height: 1.35; text-transform: uppercase; text-align: center; text-wrap: balance; transition: color 0.2s; }
.die__face--title:hover .die__title, .die__face--title:focus-visible .die__title { color: #0b0c10; }
/* the face keeps its own placement in --ft, so the glow hover can lift the colour without losing its place on the cube */
.die__face { transform: var(--ft); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0.55rem 0.7rem; border-radius: var(--radius-md); backface-visibility: hidden; -webkit-backface-visibility: hidden; text-decoration: none; color: var(--color-muted);
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 45%, rgba(0, 0, 0, 0.3) 100%), #0d1118;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -10px 16px -6px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(0, 0, 0, 0.6);
  transition: background 0.2s, border-color 0.2s, color 0.2s; }
.die__face--0 { --ft: translateZ(calc(var(--dh) / 2)); }
.die__face--1 { --ft: rotateX(-90deg) translateZ(calc(var(--dh) / 2)); }
.die__face--2 { --ft: rotateX(-180deg) translateZ(calc(var(--dh) / 2)); }
.die__face--3 { --ft: rotateX(-270deg) translateZ(calc(var(--dh) / 2)); }
@media (hover: hover) { .die__face.glow:hover { transform: var(--ft); } }
.die__face.glow:hover, .die__face.glow:focus-visible { background: #f2f3f6; border-color: var(--color-primary); color: #0b0c10; box-shadow: inset 0 -8px 14px -8px rgba(0, 0, 0, 0.25), 0 0 22px -4px var(--color-primary); }
.die__face.glow:focus-visible { outline-offset: 2px; }
/* The logos are white-background rasters: grayscale + invert makes them light-grey on black (the light tile on hover shows their own colours) */
/* Vertical padding keeps the corners of the turning dice and their shadows inside the clipped box */
.reel { overflow: hidden; padding-block: 1.1rem; margin-block: -1.1rem; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%); }
.reel__track { display: flex; width: max-content; animation: marquee 70s linear infinite reverse; }
.reel:hover .reel__track, .reel:focus-within .reel__track { animation-play-state: paused; }
.reel__set { display: flex; }
.reel__item { display: block; width: 100%; height: 100%; min-width: 0; }
.reel__item img { width: 100%; height: 100%; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.6; transition: filter 0.2s, opacity 0.2s; }
.die__face--solid .reel__item img { filter: grayscale(1); }
.die__face:hover .reel__item img, .die__face:focus-visible .reel__item img { filter: none; opacity: 1; }
.reel__text { display: flex; align-items: center; justify-content: center; height: 100%; font-weight: 700; font-size: 1.05rem; letter-spacing: 0.01em; white-space: nowrap; color: var(--color-ink); opacity: 0.7; transition: color 0.2s, opacity 0.2s; }
.die__face:hover .reel__text, .die__face:focus-visible .reel__text { color: #000; opacity: 1; }
.refs__more { margin: 0; font-size: 0.85rem; color: var(--color-muted); text-decoration: none; white-space: nowrap; }
.refs__more:hover { color: var(--color-primary); text-decoration: underline; }
@keyframes marquee { to { transform: translate3d(-50%, 0, 0); } }
.clients-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); }
/* Transparent logos on dark: a quiet white silhouette at rest, the logo's own colours on a light tile on hover (same inverse as the home page boxes) */
.logo-tile { display: grid; place-items: center; height: clamp(3.4rem, 6vw, 4.4rem); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-surface); overflow: hidden; grid-template: minmax(0, 1fr) / minmax(0, 1fr); transition: background 0.2s, border-color 0.2s; }
.logo-tile img { width: 100%; height: 100%; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.6; transition: filter 0.2s, opacity 0.2s; }
.logo-tile:hover, .card:hover .card__logo--clear { background: #f2f3f6; border-color: var(--color-primary); }
.logo-tile:hover { box-shadow: 0 0 22px -4px var(--color-primary); }
.logo-tile:hover img, .card:hover .card__logo--clear img { filter: none; opacity: 1; }

/* ---------- Below the fold: a 50/50 split. References (left) and software (right) slide in towards the middle; every box is a link ---------- */
.split { overflow-x: clip; }
.section.split { padding-bottom: 0; } /* the contact section below brings its own equal top and bottom padding */
.split__grid { position: relative; display: grid; gap: var(--space-12) var(--space-8); grid-template-columns: minmax(0, 1fr); }
.split__col h2 { margin-bottom: var(--space-2); }
.split__lead { color: var(--color-muted); margin: 0 0 var(--space-6); font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem); }
.lbox-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }
.lbox-grid > li { margin: 0; display: flex; }
.split__col--soft .lbox-grid { grid-template-columns: repeat(auto-fill, minmax(7.4rem, 1fr)); } /* 14 tools: four per row on wide screens */
.lbox { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-4) var(--space-3); text-align: center; text-decoration: none; color: var(--color-ink); font-weight: 600; font-size: 0.9rem; line-height: 1.3; }
/* Inverse hover: at rest a dark box with a quiet white silhouette; on hover the box turns into a light tile and the logo into its own colours */
.lbox { color: var(--color-muted); }
.lbox__logo { display: grid; place-items: center; width: 100%; height: 3.4rem; padding: var(--space-1) var(--space-2); grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
.lbox__logo img { width: 100%; height: 100%; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.6; transition: filter 0.2s, opacity 0.2s; }
/* Solid-block logos (a coloured box with a dark inside) would turn into a white block as a silhouette: show them in muted greyscale instead */
.lbox--solid .lbox__logo img, .reel__item--solid img { filter: grayscale(1); }
.lbox__abbr { color: var(--color-ink); opacity: 0.6; font-weight: 800; font-size: 1.4rem; letter-spacing: -0.02em; transition: color 0.2s, opacity 0.2s; }
.lbox--support { opacity: 0.85; }
.lbox.glow { transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s; }
.lbox.glow:hover, .lbox.glow:focus-visible { background: #f2f3f6; border-color: var(--color-primary); color: #0b0c10; }
.lbox:hover .lbox__logo img, .lbox:focus-visible .lbox__logo img { filter: none; opacity: 1; }
.lbox:hover .lbox__abbr, .lbox:focus-visible .lbox__abbr { color: #000; opacity: 1; }
.split__more { margin: var(--space-4) 0 0; font-size: 0.9rem; }
.split__more a { color: var(--color-muted); text-decoration: none; }
.split__more a:hover { color: var(--color-primary); text-decoration: underline; }
@media (min-width: 56rem) {
  .split__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2.5rem, 6vw, 6rem); }
  .split__grid::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, transparent, var(--color-line-strong) 15%, var(--color-line-strong) 85%, transparent); }
}
/* Slide-in, driven by the scroll position: site.js sets --s from 0 (section just below the screen) to 1 (in place). Each box starts a little later than the one before (--i).
   References travel in from the left, software from the right. Without JS or with reduced motion --s stays 1 and the boxes are simply in place. */
.split { --s: 1; }
.split__col--refs { --dir: -1; }
.split__col--soft { --dir: 1; }
.split__item { --e: clamp(0, calc(var(--s) * 2 - var(--i, 0) * 0.07), 1); opacity: var(--e); transform: translate3d(calc((1 - var(--e)) * var(--dir) * 60vw), 0, 0); }
/* Symmetry: the references column is aligned to the middle line, like the software column on the other side */
@media (min-width: 56rem) { .split__col--refs { text-align: right; } }

/* ---------- Sections ---------- */
.section { padding-block: clamp(3rem, 8vw, 6rem); }
.section > .container > h2 { margin-bottom: var(--space-6); }

/* ---------- Inner pages ---------- */
.page-hero { padding-block: clamp(2.5rem, 7vw, 5rem) var(--space-6); }
.breadcrumb { margin-bottom: var(--space-4); font-size: 0.9rem; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); list-style: none; margin: 0; padding: 0; color: var(--color-muted); }
.breadcrumb li { margin: 0; }
.breadcrumb li + li::before { content: "/"; margin-right: var(--space-2); color: var(--color-line-strong); }
.breadcrumb a { color: var(--color-muted); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb a:hover { color: var(--color-primary); }
.page-hero .lead { font-size: clamp(1.1rem, 1rem + 0.6vw, 1.45rem); color: var(--color-muted); max-width: 40rem; margin: 0; }
.page-body { padding-bottom: clamp(3rem, 8vw, 6rem); }
.page-body > .container > * + * { margin-top: var(--space-6); }
.page-body h2 { margin-top: var(--space-12); }
.page-body .prose-block { max-width: var(--max-prose-width); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin: 0 0 var(--space-4); }
.chip { margin: 0; padding: 0.35rem 0.9rem; border: 1px solid var(--color-line-strong); border-radius: var(--btn-radius); font-weight: 600; font-size: 0.95rem; background: var(--color-surface); }
.chip a { color: inherit; text-decoration: none; }
.chip:has(a) { padding: 0; }
.chip a { display: block; padding: 0.35rem 0.9rem; border-radius: var(--btn-radius); }
.chip a:hover { color: var(--color-primary); background: var(--color-surface-hover); }
.chips--muted .chip { color: var(--color-muted); border-color: var(--color-line); font-weight: 500; }
.link-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.link-list a { font-weight: 600; overflow-wrap: anywhere; }
.figure { margin: 0; max-width: 46rem; }
.figure img, .figure video { width: 100%; border-radius: var(--radius-md); border: 1px solid var(--color-line); background: #0b0c10; }
.figure figcaption { color: var(--color-muted); font-size: 0.9rem; margin-top: var(--space-2); }
.quote { margin: 0; padding: var(--space-6); border-left: 3px solid var(--color-primary); background: var(--color-surface); border-radius: 0 var(--radius-md) var(--radius-md) 0; max-width: var(--max-prose-width); }
.quote p { font-size: clamp(1.1rem, 1rem + 0.7vw, 1.45rem); line-height: 1.4; margin-bottom: var(--space-3); }
.quote cite { color: var(--color-muted); font-style: normal; font-size: 0.95rem; }
.quote-split { display: grid; gap: var(--space-6); align-items: center; grid-template-columns: minmax(0, 1fr); }
.quote-split img { border-radius: var(--radius-md); max-width: 18rem; }
@media (min-width: 48rem) { .quote-split.has-img { grid-template-columns: minmax(0, 1fr) 18rem; } }
.toolnav { border-top: 1px solid var(--color-line); padding-top: var(--space-8); }
.toolnav h2 { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem); margin-top: 0; color: var(--color-muted); font-family: var(--font-body); font-weight: 600; }
.tool-tiles { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); max-width: 40rem; }
/* Same tile as a die face on the home page: a quiet white silhouette at rest, the logo's own colours on a light tile (with the teal glow) on hover */
.tool-tiles a { display: grid; place-items: center; height: 5rem; padding: var(--space-3); border-radius: var(--radius-md); overflow: hidden; grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
.tool-tiles a.glow { border-radius: var(--radius-md); }
.tool-tiles a.glow:hover, .tool-tiles a.glow:focus-visible { background: #f2f3f6; border-color: var(--color-primary); box-shadow: 0 0 22px -4px var(--color-primary); }
.tool-tiles img { width: 100%; height: 100%; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.6; transition: filter 0.2s, opacity 0.2s; }
.tool-tiles a:hover img, .tool-tiles a:focus-visible img { filter: none; opacity: 1; }

/* ---------- Contact / CTA ---------- */
.cta { display: grid; gap: var(--space-6); padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid var(--color-line-strong); border-radius: var(--radius-lg); background: radial-gradient(60rem circle at 100% 0%, color-mix(in srgb, var(--color-primary) 14%, transparent), transparent 60%), var(--color-surface); -webkit-backdrop-filter: blur(var(--card-blur)); backdrop-filter: blur(var(--card-blur)); }
.cta h2 { margin: 0 0 var(--space-3); }
.cta ul { columns: 2 14rem; column-gap: var(--space-8); }
.cta .btn-row { margin-top: var(--space-2); }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--color-line); color: var(--color-muted); font-size: 0.95rem; background: rgba(0, 0, 0, 0.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
/* Double footer: top row (brand | company numbers | contact and LinkedIn), bottom row (copyright | legal links | made-in line). Three columns with a centred middle on wide screens. */
.footer-top, .footer-bottom { display: grid; gap: var(--space-4) var(--space-6); grid-template-columns: minmax(0, 1fr); align-items: center; justify-items: start; }
.footer-top { padding-block: var(--space-6); }
.site-footer__bottom { border-top: 1px solid var(--color-line); }
.footer-bottom { padding-block: var(--space-4); font-size: 0.85rem; }
.footer-brand { display: inline-flex; align-items: center; gap: 0.8rem; color: var(--color-ink); text-decoration: none; font-size: 2.1rem; }
.footer-brand:hover { color: var(--color-primary); }
.footer-brand img { width: 3.5rem; height: 3.5rem; }
.footer-legal { display: grid; gap: 0.15rem; font-size: 0.9rem; }
.footer-cta { display: flex; align-items: center; gap: var(--space-4); }
/* The LinkedIn logo sits in a button: same height as the .btn beside it, outlined like the ghost buttons */
.icon-link { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--color-line-strong); border-radius: var(--btn-radius); color: var(--color-ink); transition: background 0.15s, border-color 0.15s, color 0.15s; }
.icon-link svg { width: 1.3rem; height: 1.3rem; }
.site-footer a.icon-link { color: var(--color-ink); }
.site-footer a.icon-link:hover { color: var(--color-primary); text-decoration: none; background: var(--color-surface-hover); border-color: var(--color-primary); }
.site-footer ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin: 0; padding: 0; }
.site-footer li { margin: 0; }
.site-footer a, .link-btn { color: var(--color-muted); text-decoration: none; }
.site-footer a:hover, .link-btn:hover { color: var(--color-ink); text-decoration: underline; }
.site-footer a.footer-brand { color: var(--color-ink); font-size: 2.1rem; }
.site-footer a.footer-brand:hover { color: var(--color-primary); text-decoration: none; }
.site-footer a.btn { color: var(--color-on-primary); text-decoration: none; }
.site-footer a.btn:hover { color: var(--color-on-primary); text-decoration: none; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.site-footer p { margin: 0; }
@media (max-width: 61.99rem) { .site-footer__bottom { padding-bottom: 3.5rem; } } /* room for the floating call button */
@media (min-width: 56rem) {
  .footer-top, .footer-bottom { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .footer-legal, .footer-links ul { justify-self: center; text-align: center; justify-content: center; }
  .footer-cta, .footer-made { justify-self: end; }
}

/* Floating call button (replaces the Cal.com floating widget) */
.fab { position: fixed; right: max(var(--space-4), env(safe-area-inset-right)); bottom: max(var(--space-4), env(safe-area-inset-bottom)); z-index: 40; border-radius: var(--btn-radius); box-shadow: 0 10px 40px -10px #000, 0 0 0 1px var(--color-line-strong); }
@media (min-width: 62rem) { .fab { display: none; } }
.fab .btn { min-height: 3rem; }
@media (max-width: 40rem) { .fab .btn span.long { display: none; } }

/* ---------- Cookie consent: bottom right, as tall as the footer (--footer-h, measured by consent.js); a full-width sheet on narrow screens ---------- */
.consent { position: fixed; z-index: 60; right: 0; bottom: 0; width: min(100%, clamp(30rem, 42vw, 40rem)); min-height: var(--footer-h, 9rem); display: flex; align-items: center; padding: var(--space-4) var(--space-5); background: rgba(5, 6, 10, 0.9); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-top: 1px solid var(--color-line-strong); border-left: 1px solid var(--color-line-strong); transform: translateY(100%); transition: transform 0.35s ease; font-size: 0.88rem; line-height: 1.45; }
.consent[hidden] { display: none; }
.consent__inner { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-5); align-items: center; }
.consent__inner > p { grid-column: 1; margin: 0; color: var(--color-muted); }
.consent .consent__title { color: var(--color-ink); font-weight: 800; font-size: 1.1rem; }
.consent a { color: var(--color-primary); }
.consent__btns { grid-column: 2; grid-row: 1 / span 3; display: grid; gap: var(--space-2); }
.consent__btns .btn { width: 100%; }
html.consent-open .consent { transform: none; }
html.consent-open body { padding-bottom: var(--consent-h, 0px); }
@media (max-width: 61.99rem) {
  .consent { left: 0; width: auto; min-height: 0; border-left: 0; padding: var(--space-4) var(--gutter); }
  html.consent-open .fab { display: none; }
}
@media (max-width: 30rem) {
  .consent__inner { grid-template-columns: minmax(0, 1fr); }
  .consent__btns { grid-column: 1; grid-row: auto; grid-template-columns: 1fr 1fr; margin-top: var(--space-2); }
}

/* Contact button in the ticker bar (it replaced the one in the header): sits at the right end over the dice row; site.js fades it out (.hs--past) as soon as the pinned hero is scrolled past */
.peek__cta { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; pointer-events: none; transition: opacity 0.2s, visibility 0.2s; }
.peek__cta .container { display: flex; justify-content: flex-end; }
/* The ticker (the dice row) ends before the button: its right edge, with the fade-out, stays one gap left of it */
.hs__peek { --cta-w: 6.6rem; }
.hs__peek .dice > .container { padding-right: calc(var(--gutter) + var(--cta-w) + 1rem); transition: padding-right 0.3s; }
.hs--past .hs__peek .dice > .container { padding-right: var(--gutter); }
.peek__cta .btn { pointer-events: auto; }
.hs--past .peek__cta { opacity: 0; visibility: hidden; }
#contact .cta { max-width: 46rem; margin-inline: auto; }

/* Hover explanation for the two header pills (desktop with a mouse; the pills carry the same text as aria-label) */
@media (hover: hover) and (min-width: 62rem) {
  .has-tip { position: relative; }
  .has-tip::after { content: attr(data-tip); position: absolute; top: calc(100% + 0.6rem); left: 50%; transform: translate(-50%, -3px); white-space: nowrap; padding: 0.35rem 0.75rem; border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm); background: rgba(8, 9, 14, 0.98); color: var(--color-ink); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.15s, transform 0.15s, visibility 0.15s; z-index: 60; }
  .has-tip:hover::after, .has-tip:has(:focus-visible)::after { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0.25s; }
}

.has-tip.tip-off::after { opacity: 0; visibility: hidden; transition-delay: 0s; }

/* Draft-only design switch (lives in the header nav actions): a .lang-pill with one icon per design */
.variant-switcher button { background: transparent; font-family: inherit; cursor: pointer; }
.variant-switcher button svg { width: 1.1rem; height: 1.1rem; }
.variant-switcher button:hover { background: var(--color-surface-hover); border-color: var(--color-line-strong); }
.variant-switcher button[aria-pressed="true"] { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }

/* ---------- Variant details beyond the tokens ---------- */
/* A Clouds: technical, mono kickers in capitals */
:root[data-variant="aurora"] .kicker, :root[data-variant="aurora"] .refs__title { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; }
/* B Midnight: periwinkle tone on headings' small print, glass surfaces (via tokens) */
:root[data-variant="waves"] .kicker, :root[data-variant="waves"] .refs__title { letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.8rem; }
/* C Lilac: gradient headline text */

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bg__mesh i, .bg__mesh::before, .hs__bg { animation: none !important; }
  .reel { -webkit-mask-image: none; mask-image: none; overflow-x: auto; }
  .reel__track { animation: none; }
  .reel__set[aria-hidden="true"] { display: none; }
  .die__cube { transition: none; }
  .card, .glow, .btn, .consent { transition: none; }
  .js .hs--pinned { height: auto; }
  .js .hs--pinned .hs__stick { position: relative; top: 0; height: auto; min-height: calc(100svh - var(--header-h)); }
  .js .hs--pinned .hs__track { overflow-x: auto; scroll-snap-type: x mandatory; width: auto; transform: none; }
  .js .hs--pinned .panel { flex: 0 0 100%; }
}

/* Keep the desktop nav inside 1024 px */
@media (min-width: 62rem) and (max-width: 82rem) {
  .variant-switcher > *, .lang-pill > * { min-width: 1.9rem; padding-inline: 0.45rem; }
  .site-nav .nav-actions { margin-left: var(--space-1); }
  .site-nav a { padding-inline: var(--space-2); font-size: 0.9rem; }
}

/* ---------- Hero panels with boxes: one outer rectangle ----------
   Every panel except the intro has an inner area of the same height (--box-h, centred in the stage) with the title at its top. Below the title there is a band of the
   height of the "who am I" lead line (--lead-h; the other panels leave it empty) and then the boxes of the panel, which together fill the same rectangle in every panel:
   same top, same bottom, same left edge. Only the width of that rectangle differs per panel (the widths below suit each panel's text). */
.panel-text { margin: 0; padding: clamp(0.9rem, 2.2vh, 1.4rem) var(--space-5); }
.panel-text p { margin: 0 0 var(--space-3); }
.panel-text p:last-child { margin-bottom: 0; }
@media (min-width: 56rem) {
  .hs { --lead-h: 4.25rem; }
  .panel:not(.panel--intro) .panel__inner { display: flex; flex-direction: column; min-height: var(--box-h); }
  .panel:not(.panel--intro) h2.kicker--lg { flex: none; }
  .panel:not(.panel--intro) .panel__inner > .btn-row { flex: none; }
  .services-layout, .belief, .panel-split { flex: 1; margin-top: var(--lead-h); align-items: stretch; }
  .panel--stats .panel-lead { flex: none; height: var(--lead-h); margin: 0; display: flex; align-items: center; }
  /* who am I: the photo and the five rows (the rows stretch), then vision and approach */
  .stats-body { flex: 1; max-width: 56rem; margin-top: 0; align-items: stretch; }
  .stats-main { display: flex; flex-direction: column; }
  .stats-main .stat-row { flex: 1; margin-bottom: var(--space-2); }
  .panel--stats .offer--two { flex: none; max-width: 56rem; margin-top: var(--space-3); margin-bottom: 0; }
  .step { align-items: center; }
}
@media (min-width: 62rem) {
  /* services: the list box on the left, two cards of equal height on the right */
  .services-layout { grid-template-columns: minmax(15rem, 19rem) minmax(0, 26rem); justify-content: start; }
  .services { display: flex; flex-direction: column; }
  .offer-stack { grid-template-rows: 1fr 1fr; align-content: stretch; }
  .offer__card { display: flex; flex-direction: column; justify-content: center; }
  /* what I believe: two beliefs stacked on the left, the recommendation as a box of the same total height on the right */
  .belief { max-width: 70rem; grid-template-columns: 4fr 3fr; grid-template-rows: 1fr 1fr; }
  .belief__card { display: flex; flex-direction: column; justify-content: center; }
  /* what I do: the text box and the three steps, both over the full height */
  .panel-split { grid-template-columns: minmax(0, 30rem) minmax(0, 32rem); justify-content: start; gap: var(--space-3); }
  .panel-text { display: flex; flex-direction: column; justify-content: center; }
  .steps { align-content: stretch; }
}

/* Short screens (about 768 px high and less): the text of the boxes is set a little tighter so the same outer rectangle still holds it */
@media (min-width: 56rem) and (max-height: 800px) {
  .hs { --lead-h: 3rem; --box-h: min(36rem, calc(100svh - var(--header-h) - var(--peek-h) - 2rem)); }
  .belief__card p, .panel-text p, .recommend p { line-height: 1.35; }
  .belief__card { padding-block: 0.7rem; }
  .panel-text { padding-block: 0.8rem; }
  .belief__n { margin-bottom: 0.3rem; }
}

.brand { flex: none; }