/* Layout: dark and full height. One typeface (Hanken Grotesk, light weights for the headings), one accent (brass),
   a hero over a silent film, the use cases beside their drawings, four commitments, the method as a ring over a comparison table and,
   at the foot of the page, a globe on the horizon. */
:root {
  --abyss: #061113;
  --hull: #0b1b1e;
  --hull-2: #10262a;
  --bone: #ece6d7;
  --mist: #a7b8b4;
  --alert: #f0a08a;
  --brass: #c9a15b;
  --brass-hi: #e7c587;
  --rule: rgba(236, 230, 215, .13);
  --rule-strong: rgba(236, 230, 215, .3);
  --f-sans: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(18px, 4.5vw, 64px);
  --maxw: 1280px;
  --nav-h: 76px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 8px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--abyss); color: var(--bone);
  font-family: var(--f-sans); font-size: 1.125rem; line-height: 1.6; font-weight: 400;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
img, svg, canvas { display: block; max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 4px; }
::selection { background: var(--brass); color: var(--abyss); }
p { text-wrap: pretty; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: var(--gutter); top: -100px; z-index: 60; background: var(--brass); color: var(--abyss); padding: .6rem 1rem; font-size: .9rem; text-decoration: none; }
.skip:focus { top: calc(12px + env(safe-area-inset-top, 0px)); }

/* ---------- Type ---------- */
h1, h2, h3, .cases__title { font-weight: 300; letter-spacing: -.025em; text-wrap: balance; }
/* The intro of the examples reads at the size of the section titles. */
h2, .cases__title { font-size: clamp(2rem, 4.4vw, 3.9rem); line-height: 1.06; }
h3 { font-size: 1.3rem; font-weight: 500; letter-spacing: -.01em; line-height: 1.25; }
em { font-style: normal; color: var(--brass-hi); }
.eyebrow { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.4rem; font-size: .85rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--brass); }
.eyebrow::before { content: ""; width: 2.2rem; height: 1px; background: currentColor; }
.lede { font-size: clamp(1.08rem, 1.3vw, 1.22rem); color: color-mix(in srgb, var(--bone) 78%, var(--mist)); max-width: 38rem; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- Controls ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .95rem 1.5rem; border-radius: 999px;
  background: var(--bone); color: var(--abyss); border: 1px solid var(--bone);
  font: inherit; font-size: .95rem; font-weight: 500; line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .15s ease;
}
.btn:hover { background: var(--brass-hi); border-color: var(--brass-hi); }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn--gold { background: var(--brass); border-color: var(--brass); }
.btn--small { padding: .6rem 1.1rem; font-size: .88rem; white-space: nowrap; }
.btn--ghost { background: transparent; color: var(--bone); border-color: var(--rule-strong); }
.btn--ghost:hover { background: transparent; color: var(--brass-hi); border-color: var(--brass); }

/* ---------- Brand + nav ---------- */
.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--bone); }
.brand__mark { width: 28px; height: 28px; flex: none; }
.brand__mark polygon { fill: var(--brass); }
.brand__mark circle { fill: none; stroke: var(--brass); stroke-width: .8; opacity: .6; }
.brand__word { font-size: 1.05rem; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; }
.nav { position: fixed; inset: 0 0 auto; z-index: 30; padding-top: env(safe-area-inset-top, 0px); border-bottom: 1px solid transparent; transition: background-color .35s ease, border-color .35s ease; }
.nav.is-scrolled { background: color-mix(in srgb, var(--abyss) 78%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom-color: var(--rule); }
.nav__in { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: var(--nav-h); }
.nav__links { display: flex; gap: 2rem; margin-left: auto; margin-right: 1.25rem; }
.nav__links a { font-size: .92rem; font-weight: 400; text-decoration: none; color: var(--mist); transition: color .2s ease; }
.nav__links a:hover, .nav__links a[aria-current="true"] { color: var(--bone); }
.nav__links a[aria-current="true"] { box-shadow: 0 1px 0 var(--brass); padding-bottom: 4px; }
/* Below this width the links no longer fit next to the button, which stays on one line. */
@media (max-width: 1140px) { .nav__links { display: none; } }

.nav__end { display: flex; align-items: center; gap: 1.1rem; }
.lang { display: flex; font-size: .8rem; font-weight: 500; letter-spacing: .12em; }
.lang a { padding: .5rem .4rem; text-decoration: none; color: var(--mist); transition: color .2s ease; }
.lang a:hover { color: var(--bone); }
.lang a[aria-current="page"] { color: var(--brass); text-decoration: underline; text-underline-offset: .4em; }
/* On a phone the bar keeps the brand and the language switch; the hero right below carries the same button. */
@media (max-width: 520px) {
  .nav__end { gap: .5rem; }
  .nav__end > .btn { display: none; }
}

/* ---------- Hero ---------- */
/* The copy, centred, over a silent 3:2 film that covers the hero on every screen, under a shade that keeps the copy
   readable. A landscape screen sees nearly the whole picture, a portrait one its centre. --edge is where the content
   of the page ends, on the right as on the left. */
.hero { --edge: max(var(--gutter), (100% - var(--maxw)) / 2 + var(--gutter)); position: relative; isolation: isolate; overflow: hidden; min-height: 100svh; display: grid; place-items: center; text-align: center; padding-block: calc(var(--nav-h) + 2.5rem) 6.5rem; }
.hero__bg { position: absolute; inset: 0; z-index: -2; background:
  radial-gradient(60rem 34rem at 50% 8%, color-mix(in srgb, var(--brass) 14%, transparent), transparent 70%),
  radial-gradient(40rem 30rem at 12% 90%, color-mix(in srgb, var(--hull-2) 90%, transparent), transparent 70%),
  var(--abyss); }
/* A grid of dots that fades downward: it echoes the dots of the globe at the foot of the page. */
.hero__bg::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, color-mix(in srgb, var(--bone) 15%, transparent) 1px, transparent 1.6px); background-size: 30px 30px; -webkit-mask-image: radial-gradient(75% 62% at 50% 0%, #000 0%, transparent 78%); mask-image: radial-gradient(75% 62% at 50% 0%, #000 0%, transparent 78%); }
.hero__video { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.hero__shade { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg,
  color-mix(in srgb, var(--abyss) 82%, transparent) 0%,
  color-mix(in srgb, var(--abyss) 62%, transparent) 35%,
  color-mix(in srgb, var(--abyss) 72%, transparent) 75%,
  var(--abyss) 100%); }
.hero__in { display: grid; justify-items: center; }
.hero__copy { display: grid; justify-items: center; gap: 1.7rem; }
.hero__title { font-size: clamp(2.3rem, 5.5vw, 5.1rem); line-height: 1.04; letter-spacing: -.035em; }
.hero__title .line { display: block; }
.hero__title .line--accent { color: var(--brass-hi); font-weight: 400; }
/* The hero is centred, so its eyebrow drops the rule that leads the left-aligned ones. */
.hero__eyebrow { margin-bottom: 0; }
.hero__eyebrow::before { content: none; }
.hero__sub { display: grid; gap: .9rem; color: color-mix(in srgb, var(--bone) 84%, var(--mist)); font-size: clamp(1.05rem, 1.45vw, 1.28rem); max-width: 46rem; }
.hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem; }
/* A round button at the foot of the hero, in the middle: the arrow to the next section. */
.hero__scroll { position: absolute; bottom: 1.4rem; width: 2.6rem; height: 2.6rem; display: grid; place-items: center; padding: 0; border: 1px solid var(--rule-strong); border-radius: 50%; background: color-mix(in srgb, var(--abyss) 80%, transparent); color: var(--bone); font: inherit; text-decoration: none; cursor: pointer; transition: border-color .25s ease, color .25s ease; }
.hero__scroll:hover { border-color: var(--brass); color: var(--brass-hi); }
.hero__scroll { left: 50%; transform: translateX(-50%); }
.hero__scroll svg { width: 1rem; height: 1rem; animation: nudge 2.4s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }

/* ---------- Examples ---------- */
.cases { border-block: 1px solid var(--rule); background: var(--hull); }
/* The use cases breathe like the sections after them: the same padding, and the list well clear of the intro. */
/* An identity line, then the cases: the label in a narrow column on the left and the intro beside it; the cases well
   below. */
.cases__in { display: grid; gap: clamp(3.5rem, 8vw, 7rem); }
.cases__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: 1.4rem clamp(2rem, 6vw, 6rem); align-items: baseline; }
.cases__title { max-width: 52rem; }
/* The label is an eyebrow like those of the other sections; as a heading it would take the h2 line height, and in
   this row it needs no space below. */
.cases__label { margin-bottom: 0; line-height: 1.6; }
@media (max-width: 760px) { .cases__head { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Sections ---------- */
.sec, .cases__in { padding-block: clamp(5rem, 10vw, 9rem); }
.sec { position: relative; }
.sec--alt { background: var(--hull); border-block: 1px solid var(--rule); }
.sec__head { display: grid; gap: 1.2rem; max-width: 52rem; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }

/* Use cases: an accordion on the left, one case open at a time, and on the right a 16:9 frame with the drawing of the
   open case, which stays in view while the list scrolls past. The cases are native <details>, so without the script
   they still open and close and the frame shows the first drawing; the script keeps one case open, links the frame
   to it and moves on by itself. */
.usecases { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 2.5rem clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
.uc { position: relative; border-bottom: 1px solid var(--rule-strong); interpolate-size: allow-keywords; }
.uc summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.15rem .9rem; list-style: none; cursor: pointer; color: var(--mist); transition: color .6s ease; }
.uc summary::-webkit-details-marker { display: none; }
.uc summary:hover { color: var(--bone); transition-duration: .25s; }
/* The open case's title turns gold slowly, like the gold words of the headings; under the pointer the colour changes
   at once, and it goes back slowly. */
.uc[open] summary { color: var(--brass-hi); transition-duration: .8s; }
.uc__title { font-size: clamp(.9rem, 1.1vw, 1rem); font-weight: 600; line-height: 1.4; letter-spacing: .18em; text-transform: uppercase; color: inherit; }
.uc__chev { width: 1rem; height: 1rem; flex: none; color: var(--brass); transition: transform .35s var(--ease); }
.uc[open] .uc__chev { transform: rotate(180deg); }
.uc__desc { padding-bottom: 1.2rem; max-width: 48ch; color: var(--mist); font-size: 1rem; }
/* The open case is marked by a brass line along its rule, which fades in as it draws itself. */
.uc::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--brass); opacity: 0; transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease), opacity .8s ease; }
.uc[open]::after { opacity: 1; transform: scaleX(1); }
/* Where the browser can animate to "auto", the description slides open instead of appearing. */
.uc::details-content { block-size: 0; overflow: hidden; transition: block-size .4s var(--ease), content-visibility .4s allow-discrete; }
.uc[open]::details-content { block-size: auto; }
/* An opening case's text surfaces out of a light blur, like the text written live, and a closing case's text blurs
   away while it collapses (::details-content keeps it on screen for the .4s of the collapse; elsewhere the case closes
   at once). Transitions both ways, not an animation: removing an animation as the case closes skips the fade-out.
   @starting-style gives the text a first state to leave from, since a closed case's content is never rendered. */
.uc__desc { opacity: 0; filter: blur(6px); transform: translateY(.4em); transition: opacity .35s ease, filter .35s ease, transform .35s ease; }
.uc[open] .uc__desc { opacity: 1; filter: blur(0); transform: none; transition: opacity .8s var(--ease) .12s, filter .8s var(--ease) .12s, transform .8s var(--ease) .12s; }
@starting-style { .uc[open] .uc__desc { opacity: 0; filter: blur(6px); transform: translateY(.4em); } }

/* The frame sits at the middle of the list's height; on a short screen it stays in view once the scroll reaches it. */
.usecases__media { position: sticky; top: calc(var(--nav-h) + 24px + env(safe-area-inset-top, 0px)); align-self: center; }
.usecases__stage { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--rule); background:
  radial-gradient(60% 70% at 50% 50%, color-mix(in srgb, var(--brass) 12%, transparent), transparent 75%),
  radial-gradient(circle, color-mix(in srgb, var(--bone) 12%, transparent) 1px, transparent 1.6px) 0 0 / 24px 24px,
  var(--abyss); }
/* The drawings: gold lines on the dark ground, the supporting ones dimmer and the ones that carry the point brighter.
   The open case's drawing fades in and draws itself stroke by stroke, then its bright node breathes. */
.uc-art { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .6s ease; fill: none; stroke: var(--brass); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.uc-art.is-active { opacity: 1; }
.uc-art .dim { stroke: color-mix(in srgb, var(--bone) 34%, transparent); }
.uc-art .hi { stroke: var(--brass-hi); }
/* Every line has pathLength="1". The rules select the lines as children of the drawing and not by that attribute:
   Chrome does not restyle elements found only through an attribute selector with capitals when a class changes on
   an ancestor, so the lines without a class of their own stayed undrawn. */
.uc-art > * { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .4s ease; }
/* The drawing is complete within about 1.5s, inside the 2s each case stays open (USECASE_STEP_MS in site.js). */
.uc-art.is-active > * { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s var(--ease) .1s; }
.uc-art.is-active .hi { transition-delay: .4s; }
.uc-art__node { fill: var(--brass-hi); stroke: none; opacity: 0; transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 0 5px rgb(255 206 132 / .8)); }
.uc-art.is-active .uc-art__node { opacity: 1; animation: breathe 3.8s ease-in-out 1s infinite both; }

/* On a narrow screen the frame comes first, over the list, and no longer stays in view. */
@media (max-width: 900px) {
  .usecases { grid-template-columns: minmax(0, 1fr); }
  .usecases__media { position: relative; top: auto; order: -1; }
}

/* Short entries side by side, each under a rule: the skills of the team. */
.entries { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(1.2rem, 3vw, 3rem); }
.entry { padding-top: 1.4rem; border-top: 1px solid var(--rule-strong); display: grid; gap: .6rem; align-content: start; }
.entry h3 { font-size: clamp(1.35rem, 2vw, 1.8rem); font-weight: 300; color: var(--brass-hi); }
.entry p { color: var(--mist); font-size: 1rem; }
/* Text written in front of the reader (data-generate, in site.js): each word rises out of a light blur, one after
   the other at a steady pace, once the paragraph comes into view. */
.gen__w { display: inline-block; transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease); transition-delay: calc(var(--d, 0s) + .2s + var(--i, 0) * 60ms); }
.is-pending .gen__w { opacity: 0; transform: translateY(.3em); filter: blur(6px); }
@media (max-width: 960px) { .entries { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.4rem clamp(1.5rem, 4vw, 3rem); } }
@media (max-width: 520px) { .entries { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Visuals ---------- */
/* Minimal renders on a pure black ground: "screen" blending drops the black and leaves only the gold lines on
   whatever colour is behind. isolation ties the blend to the container's own background, whatever its ancestors do. */
@property --wave { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
@property --sweep { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.visual { position: relative; isolation: isolate; overflow: hidden; margin: 0; display: flex; justify-content: center; background: var(--visual-bg, var(--abyss)); transition: background-color .35s ease; }
/* The stage has the proportions of the image, so the node coordinates (percentages) also hold for the animated layers. */
.visual__stage { position: relative; flex: none; aspect-ratio: 1; mix-blend-mode: screen; transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) scale(var(--zoom, 1)); transition: transform .45s var(--ease); }
.visual__stage img { width: 100%; height: 100%; }
/* Animated layers, added by the script only where the browser supports them: a pulse masked by the luminance of the
   render (so it shows only on the gold lines), a blurred copy of it as a glow, the breathing of the bright node and a
   slight float. The blur sits on an outer element because a filter on the same element would act before the mask. */
.pulse, .pulse__wave, .bloom, .glow { position: absolute; pointer-events: none; }
.pulse { inset: 0; overflow: hidden; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; mask-mode: luminance; mix-blend-mode: screen; mix-blend-mode: plus-lighter; }
.bloom { inset: 0; filter: blur(.45rem); mix-blend-mode: screen; mix-blend-mode: plus-lighter; }
.pulse__wave { inset: 0; background: radial-gradient(circle at var(--ox) var(--oy), transparent calc(var(--wave) - 22%), rgb(255 241 208 / .95) calc(var(--wave) - 2%), transparent var(--wave)); animation: wave var(--wave-s, 6s) linear infinite; animation-delay: var(--wave-delay, 0s); }
.pulse--orbit .pulse__wave { inset: auto; left: var(--ox); top: var(--oy); width: calc(var(--ra) * 2.5); aspect-ratio: 1; translate: -50% -50%; transform: scaleY(var(--squash)); background: conic-gradient(from var(--sweep), transparent 0turn, transparent .7turn, rgb(255 241 208 / .95) .99turn, transparent 1turn); animation-name: sweep; }
.glow { left: var(--gx); top: var(--gy); width: 15%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, rgb(255 206 132 / .5), transparent 70%); mix-blend-mode: screen; animation: breathe 3.8s ease-in-out infinite; animation-delay: var(--wave-delay, 0s); }
.visual__stage.is-animated { animation: float var(--float-s, 9s) ease-in-out infinite; animation-delay: var(--float-delay, 0s); }
.visual__stage.is-idle, .visual__stage.is-idle .pulse__wave, .visual__stage.is-idle .glow { animation-play-state: paused; }
@keyframes wave { 0% { --wave: 0%; } 46%, 100% { --wave: 92%; } }
@keyframes sweep { to { --sweep: 360deg; } }
@keyframes breathe { 0%, 100% { opacity: .2; scale: .8; } 50% { opacity: 1; scale: 1.2; } }
@keyframes float { 0%, 100% { translate: 0 calc(var(--float-y, 1.6%) * -1); rotate: -.7deg; } 50% { translate: 0 var(--float-y, 1.6%); rotate: .7deg; } }

/* Per render: where the pulse starts (--ox, --oy), where the bright node is (--gx, --gy) and the timings, kept out of
   step with one another. Percentages of the image. "orbit" turns around a ring seen at an angle: --ox/--oy are its
   centre, --ra its semi-major axis (of the width) and --squash the ratio between its axes. */
.visual__stage--agenti { --ox: 45.3%; --oy: 44.9%; --gx: 45.3%; --gy: 44.9%; --wave-s: 6.6s; --wave-delay: -1.1s; --float-s: 8.5s; --float-delay: -5s; }
.visual__stage--approccio { --ox: 46.2%; --oy: 37.6%; --gx: 46.2%; --gy: 37.6%; --wave-s: 7.6s; --wave-delay: -1.5s; --float-s: 11s; --float-delay: -4s; }
.visual__stage--dati { --ox: 50%; --oy: 31.8%; --gx: 50%; --gy: 31.8%; --wave-s: 7.2s; --wave-delay: -3.6s; --float-s: 9.5s; --float-delay: -2s; }
.visual__stage--governance { --ox: 49.8%; --oy: 49.1%; --gx: 49.8%; --gy: 49.1%; --wave-s: 7s; --wave-delay: -2.2s; --float-s: 10s; --float-delay: -3s; }
.visual__stage--metodo { --ox: 50%; --oy: 46.55%; --ra: 25.7%; --squash: .37; --gx: 64.8%; --gy: 57.8%; --wave-s: 10s; --wave-delay: 0s; --float-s: 12s; --float-delay: 0s; }
.visual__stage--persone { --ox: 49.8%; --oy: 47.6%; --gx: 49.8%; --gy: 47.6%; --wave-s: 6s; --wave-delay: -4.4s; --float-s: 10.5s; --float-delay: -6s; }
.visual__stage--strategia { --ox: 28.1%; --oy: 57.8%; --gx: 72.7%; --gy: 36.9%; --wave-s: 6.4s; --wave-delay: 0s; --float-s: 9s; --float-delay: 0s; }

/* ---------- Approach ---------- */
.approach { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 3rem clamp(2.5rem, 6vw, 6rem); align-items: start; }
.approach__visual { --zoom: 1.6; position: sticky; top: calc(var(--nav-h) + 24px + env(safe-area-inset-top, 0px)); aspect-ratio: 1; }
.pillars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(2rem, 5vw, 5rem); }
.pillar { padding-block: 1.8rem 2.2rem; border-top: 1px solid var(--rule-strong); display: grid; gap: .7rem; align-content: start; }
.pillar h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 300; color: var(--brass-hi); }
.pillar p { color: var(--mist); max-width: 30rem; }
.step__n { font-size: .85rem; font-weight: 500; letter-spacing: .14em; color: var(--brass); font-variant-numeric: tabular-nums; }
@media (max-width: 1000px) {
  .approach { grid-template-columns: minmax(0, 1fr); }
  .approach__visual { position: relative; top: auto; order: -1; width: min(100%, 20rem); justify-self: center; }
}
@media (max-width: 760px) { .pillars { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Method ---------- */
/* The band is shorter than the image: the stage takes the full width and overflows above and below, centred. */
.method__visual { --visual-bg: var(--hull); --float-y: .4%; aspect-ratio: 24 / 7; align-items: center; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.method__visual .visual__stage { width: 100%; aspect-ratio: 3 / 2; }
@media (max-width: 760px) { .method__visual { --zoom: 1.6; aspect-ratio: 16 / 9; } }

/* ---------- Comparison ---------- */
/* The traditional approach struck through on the left, ours on the right. The middle column draws a brass spine with
   one dot per row; each cell paints its own stretch of line, so the spine runs unbroken from the first row to the last. */
.sec__head--center { margin-inline: auto; justify-items: center; text-align: center; }
.sec__head--center .lede { text-wrap: balance; }
.sec__head--center .eyebrow::after { content: ""; width: 2.2rem; height: 1px; background: currentColor; }
.vs { width: 100%; max-width: 60rem; margin-inline: auto; border-collapse: collapse; table-layout: fixed; }
.vs th, .vs td { padding: 1.5rem 0; vertical-align: middle; }
.vs thead th { padding-block: 0 1.6rem; font-size: clamp(1.1rem, 2vw, 1.55rem); font-weight: 400; letter-spacing: .1em; line-height: 1.2; text-transform: uppercase; }
.vs__old { text-align: left; }
.vs__new { text-align: right; }
.vs__mid { width: clamp(3.5rem, 9vw, 6rem); position: relative; text-align: center; }
.vs thead .vs__old { color: var(--alert); }
.vs thead .vs__new { color: var(--brass-hi); }
.vs tbody td { border-top: 1px solid var(--rule); }
.vs tbody tr:last-child td { border-bottom: 1px solid var(--rule); }
.vs tbody .vs__old { border-color: color-mix(in srgb, var(--alert) 22%, transparent); font-size: 1rem; color: color-mix(in srgb, var(--alert) 72%, var(--mist)); }
.vs tbody .vs__new { border-color: color-mix(in srgb, var(--brass) 28%, transparent); font-size: clamp(1rem, 1.3vw, 1.15rem); font-weight: 500; color: var(--bone); }
.vs s { text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, var(--alert) 85%, transparent); }
.vs tbody .vs__mid::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; translate: -50% 0; background: color-mix(in srgb, var(--brass) 45%, transparent); }
.vs tbody .vs__mid::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; translate: -50% -50%; border-radius: 50%; background: var(--brass-hi); box-shadow: 0 0 10px rgb(231 197 135 / .55); }
.vs__badge { display: inline-grid; place-items: center; width: 3rem; aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--rule-strong); background: var(--abyss); box-shadow: 0 0 24px rgb(201 161 91 / .35); font-size: .78rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--brass); }
@media (max-width: 560px) {
  .vs th, .vs td { padding-block: 1.1rem; }
  .vs thead th { font-size: .95rem; letter-spacing: .06em; }
  .vs tbody .vs__old, .vs tbody .vs__new { font-size: .92rem; }
  .vs__mid { width: 2.6rem; }
  .vs__badge { width: 2.3rem; font-size: .68rem; }
}

/* ---------- Services ---------- */
/* A hairline grid: the 1px gap lets the container's colour show between one card and the next. */
.svc-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.svc { --visual-bg: var(--abyss); grid-column: span 2; display: grid; grid-template-rows: auto 1fr; background: var(--visual-bg); transition: background-color .35s ease; }
.svc:nth-child(-n+2) { grid-column: span 3; }
.svc:hover { --visual-bg: #0a1a1b; }
.svc__visual { --zoom: 1.5; aspect-ratio: 16 / 10; }
.svc:nth-child(-n+2) .svc__visual { aspect-ratio: 16 / 8; }
.svc__text { display: grid; gap: .7rem; align-content: start; padding: 0 clamp(1.2rem, 2.2vw, 2rem) 2rem; }
.svc__title { font-size: clamp(1.45rem, 2.1vw, 2rem); font-weight: 300; line-height: 1.12; transition: color .3s ease; }
.svc:hover .svc__title { color: var(--brass-hi); }
.svc__desc { color: var(--mist); font-size: 1rem; }
@media (max-width: 960px) {
  .svc, .svc:nth-child(-n+2) { grid-column: span 3; }
  .svc:last-child { grid-column: span 6; }
  .svc:nth-child(-n+2) .svc__visual { aspect-ratio: 16 / 10; }
}
@media (max-width: 600px) { .svc, .svc:nth-child(-n+2), .svc:last-child { grid-column: span 6; } }

/* ---------- Marquee ---------- */
/* Full-width strip of the organisations the team has worked in. Without the script, or with reduced motion, the list
   stays still, centred and wrapped; the script repeats it inside a strip that scrolls without a break. */
.marquee { display: grid; gap: 1.8rem; margin-top: clamp(3.5rem, 7vw, 6rem); }
.marquee__label { padding-inline: var(--gutter); text-align: center; font-size: .78rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--mist); }
.marquee__viewport { overflow: hidden; }
.marquee__list { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.2rem clamp(2.5rem, 5vw, 4.5rem); padding-inline: var(--gutter); }
.marquee__list li { font-size: clamp(1.15rem, 1.7vw, 1.5rem); font-weight: 500; letter-spacing: .01em; white-space: nowrap; color: color-mix(in srgb, var(--bone) 62%, var(--mist)); }
.marquee.is-running .marquee__viewport { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee__track { display: flex; width: max-content; animation: marquee var(--marquee-s, 40s) linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
/* In the strip each copy of the list ends with the same space that separates its items, so the seam does not show. */
.marquee.is-running .marquee__list { flex: none; flex-wrap: nowrap; padding-inline: 0 clamp(2.5rem, 5vw, 4.5rem); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Offices ---------- */
/* The offices on the dotted world map that tools/build-map.sh draws. The map covers 180°W to 180°E and, from the top,
   --map-lat-span degrees down from --map-lat-top: the values that script prints. A pin sits at its city from its
   longitude and latitude. Rome is the headquarters; the other offices are white. */
.offices { --map-lat-top: 80; --map-lat-span: 137.4545; }
.offices__head { display: grid; justify-items: center; gap: 1rem; text-align: center; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.offices__label { font-size: .85rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--brass); }
.offices__title { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.offices__map { position: relative; max-width: 68rem; margin-inline: auto; }
.offices__map img { display: block; width: 100%; height: auto; }
.offices__pins { list-style: none; margin: 0; padding: 0; }
.pin { position: absolute; left: calc((var(--lon) + 180) / 360 * 100%); top: calc((var(--map-lat-top) - var(--lat)) / var(--map-lat-span) * 100%); width: clamp(.55rem, 1vw, .8rem); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: var(--bone); box-shadow: 0 0 0 3px var(--abyss); }
.pin--hq { width: clamp(.8rem, 1.5vw, 1.15rem); background: var(--brass); }
/* A ring that widens and fades around each pin, the headquarters first. */
.pin::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid currentColor; color: var(--bone); animation: pin-pulse 2.8s var(--ease) infinite; }
.pin--hq::after { color: var(--brass); }
.pin--berlin::after { animation-delay: .9s; }
.pin--dubai::after { animation-delay: 1.8s; }
@keyframes pin-pulse { from { transform: scale(1); opacity: .9; } to { transform: scale(3.4); opacity: 0; } }
.pin__label { position: absolute; left: 50%; top: calc(100% + .45rem); transform: translateX(-50%); font-size: clamp(.68rem, 1.1vw, .85rem); font-weight: 600; letter-spacing: .04em; white-space: nowrap; color: var(--bone); }
/* Berlin sits just north of Rome, so its name goes above its pin. */
.pin--berlin .pin__label { top: auto; bottom: calc(100% + .45rem); }
.pin--rome { --lon: 12.4964; --lat: 41.9028; }
.pin--berlin { --lon: 13.405; --lat: 52.52; }
.pin--dubai { --lon: 55.2708; --lat: 25.2048; }
.offices__legend { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .4rem 1.4rem; margin-top: 1.2rem; font-size: .85rem; color: var(--mist); }
.offices__key { display: inline-flex; align-items: center; gap: .5rem; }
.offices__key::before { content: ""; width: .55rem; aspect-ratio: 1; border-radius: 50%; background: var(--bone); }
.offices__key--hq::before { background: var(--brass); }

/* ---------- Closing + contact ---------- */
/* The last section ends on the dotted globe: it rises from the bottom edge, and only its cap, --cap high, shows under
   the form. */
.close { --g: min(1900px, 170vw); --cap: clamp(150px, 22vh, 250px); position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(5rem, 10vw, 9rem) calc(var(--cap) + clamp(6rem, 12vw, 11rem)); border-top: 1px solid var(--rule); }
.globe { position: absolute; left: 50%; bottom: calc(var(--cap) - var(--g) * .895); width: var(--g); aspect-ratio: 1; transform: translateX(-50%); z-index: -1; opacity: 0; transition: opacity 1.4s ease; pointer-events: none; }
.globe.is-ready { opacity: 1; }
.globe canvas { width: 100%; height: 100%; }
.close::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(52rem 30rem at 85% 0%, color-mix(in srgb, var(--brass) 13%, transparent), transparent 70%),
  radial-gradient(40rem 26rem at 0% 100%, color-mix(in srgb, var(--hull-2) 95%, transparent), transparent 70%); }
.close__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 34rem); gap: 3rem clamp(2.5rem, 6vw, 6rem); align-items: start; }
.close__copy { display: grid; gap: 1.6rem; align-content: start; min-width: 0; }
.close__title { font-size: clamp(2.1rem, 4.2vw, 3.9rem); line-height: 1.06; letter-spacing: -.03em; }
@media (max-width: 980px) { .close__grid { grid-template-columns: minmax(0, 1fr); } }

.contact, .contact-done { display: grid; gap: 1.1rem; min-width: 0; padding: clamp(1.25rem, 3vw, 2rem); background: color-mix(in srgb, var(--hull) 88%, transparent); border: 1px solid var(--rule); border-top: 2px solid var(--brass); }
.contact__head, .contact-done h3 { font-size: 1.5rem; font-weight: 300; line-height: 1.15; }
.field { display: grid; gap: .4rem; min-width: 0; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1rem; }
@media (max-width: 520px) { .field-row { grid-template-columns: minmax(0, 1fr); } }
.field label { font-size: .94rem; font-weight: 500; color: var(--bone); }
.field input, .field textarea { width: 100%; min-width: 0; padding: .75rem .85rem; background: color-mix(in srgb, var(--bone) 4%, var(--abyss)); color: var(--bone); border: 1px solid var(--rule-strong); border-radius: 10px; font: inherit; font-size: 1rem; line-height: 1.5; transition: border-color .2s ease, box-shadow .2s ease; }
.field textarea { resize: vertical; min-height: 8.5rem; }
.field ::placeholder { color: color-mix(in srgb, var(--mist) 75%, transparent); opacity: 1; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--brass); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brass) 28%, transparent); }
.field [aria-invalid="true"] { border-color: var(--alert); }
.field__err { font-size: .88rem; color: var(--alert); }
.field__err:empty { display: none; }
.field__meta { display: flex; align-items: baseline; gap: 1rem; }
.field__count { margin-left: auto; font-size: .8rem; color: var(--mist); font-variant-numeric: tabular-nums; }
/* Out of sight, still read by screen readers: the form's honeypot and text that only a listener needs. */
.trap, .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.consent { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .35rem .7rem; align-items: start; font-size: .93rem; color: color-mix(in srgb, var(--bone) 82%, var(--mist)); }
.consent input { width: 1.1rem; height: 1.1rem; margin: .22rem 0 0; accent-color: var(--brass); }
.consent input[aria-invalid="true"] { outline: 2px solid var(--alert); outline-offset: 2px; }
.consent .field__err { grid-column: 2; }
.contact__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; }
.contact__status { font-size: .93rem; color: var(--mist); }
.contact__status[data-tone="error"] { color: var(--alert); }
.contact-done p { color: color-mix(in srgb, var(--bone) 84%, var(--mist)); }

/* ---------- Owner inbox (artifact viewer only) ---------- */
.inbox { padding-block: 3.5rem; border-top: 1px solid var(--rule); }
.inbox__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .6rem 2rem; margin-bottom: 1.2rem; }
.inbox__head h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.inbox__note, .inbox__status { color: var(--mist); font-size: .95rem; }
.inbox__list { margin: 1.2rem 0 0; border-bottom: 1px solid var(--rule); }
.inbox__list:empty { display: none; }
.msg { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: .8rem 2.5rem; padding-block: 1.3rem; border-top: 1px solid var(--rule); }
.msg__who { display: grid; gap: .2rem; align-content: start; min-width: 0; }
.msg__date { font-size: .8rem; color: var(--brass); font-variant-numeric: tabular-nums; }
.msg__name { font-weight: 500; }
.msg__meta { font-size: .9rem; color: var(--mist); overflow-wrap: anywhere; }
.msg__content { display: grid; gap: .6rem; min-width: 0; }
.msg__body { white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 700px) { .msg { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Footer ---------- */
.foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2.5rem; padding-block: 2.4rem 3rem; border-top: 1px solid var(--rule); color: var(--mist); font-size: .95rem; }
.foot__tag { flex: 1 1 20rem; }

/* ---------- Reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .9s var(--ease); transition-delay: var(--d, 0s); }
.js .reveal.is-in { opacity: 1; transform: none; }
/* Neighbours enter one after the other. */
.pillar:nth-child(even) { --d: .08s; }
.entry:nth-child(2) { --d: .07s; }
.entry:nth-child(3) { --d: .14s; }
.entry:nth-child(4) { --d: .21s; }
.close__grid > .reveal + .reveal { --d: .1s; }
@media print { .js .reveal { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .visual__stage { transition: none; }
  .visual__stage, .pulse__wave, .glow { animation: none; }
  .marquee__track { animation: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .uc-art, .uc-art > *, .uc::after, .uc::details-content, .uc__chev, .uc summary, .uc__desc { transition: none; }
  .uc-art.is-active .uc-art__node { animation: none; }
  .hero__scroll svg { animation: none; }
  .pin::after { animation: none; opacity: 0; }
}