/* ameliebeerens.com: the inner pages in the Nuance layout.
   Loaded after assets/nuance.css by src/layout.html, for About, Work with
   me, Listen and watch, The Nerve, Brazen, Contact, Legal, Privacy, Terms,
   Thank you and 404 (7 Oct 2026, when the Nuance layout became the only
   shell and the Consultium page styles went to archive/consultium-2026).

   Everything here is the Nuance idiom: hairlines, square corners, content
   120px in (--nu-inset), the serif headlines of nuance.css. A page head is
   a ruled band like the hero's text column; with a picture it takes the
   hero's two first columns. Prose sits in one 680px column. Two-column
   sections hold their heading on the left and the matter on the right. */

/* ------------------------------------------------------------- page head -- */
.pg-head { position: relative; border-bottom: 1px solid var(--nu-rule); }
.pg-head__in { max-width: var(--nu-page); margin-inline: auto; padding: 96px var(--nu-inset) 88px; }
.pg-head h1 { margin-top: 10px; max-width: 12em; font: 500 60px/1.2 var(--font-serif); letter-spacing: -0.04em; color: var(--text); text-wrap: balance; }
.pg-head h1 em { font-style: italic; font-weight: 400; color: inherit; }   /* an H1 keeps its colour (the rule in nuance.css) */
.pg-head__lead { margin-top: 20px; max-width: 32em; font: 400 20px/32px var(--font-sans); color: color-mix(in srgb, var(--text) 80%, var(--surface)); }
.pg-head__note { margin-top: var(--space-3); max-width: 32em; font: 400 17px/28px var(--font-sans); color: var(--text-muted); }
.pg-head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); margin-top: 28px; }
/* With a picture: the hero's proportions, text left, picture right, ruled. */
.pg-head--media .pg-head__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0; padding-block: 0; }
.pg-head__text { align-self: center; padding: 96px 48px 88px 0; }
.pg-head__media { position: relative; min-height: 560px; border-inline: 1px solid var(--nu-rule); }
.pg-head__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
/* Consulting (Amélie, 8 Oct 2026): the homepage's hero (nuance.css, .nu-hero),
   but shorter, so the next section shows from the start: no 90vh, the
   three figures 150px each, the glow lower, the picture cropped higher. */
.nu-hero--consulting { min-height: 0; }
.nu-hero--consulting .nu-hero__text { padding-block: 48px; }
.nu-hero--consulting .nu-proof li { min-height: 150px; }
.nu-hero--consulting > .nu-glow { height: 140px; }
/* Centred (Amélie, 8 Oct 2026: more of her, less of the mesh above). */
.nu-hero--consulting .nu-hero__media img { object-position: 50% 50%; }

/* ----------------------------------------------------------------- prose -- */
.pg-prose { max-width: 680px; }
.pg-prose p, .pg-prose li { font: 400 18px/30px var(--font-sans); color: var(--text); }
.pg-prose p + p { margin-top: var(--space-3); }
.pg-prose ul { margin-top: var(--space-3); padding-left: 1.25em; list-style: disc; }
.pg-prose li + li { margin-top: var(--space-2); }
.pg-prose h2 { margin-top: var(--space-6); font: 500 30px/36px var(--font-serif); letter-spacing: -0.01em; color: var(--text); }
.pg-prose h2:first-child { margin-top: 0; }
.pg-prose h2 + p { margin-top: var(--space-3); }
.pg-prose a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.pg-prose a:hover { text-decoration-thickness: 2px; }
.pg-back { margin-top: var(--space-6); }

/* A single text link in the Nuance manner: underlined in red, an arrow after. */
.pg-link { display: inline-flex; align-items: center; gap: 4px; padding-bottom: 4px; font: 500 16px/24px var(--font-sans); color: var(--text); text-decoration: none; background: linear-gradient(var(--accent), var(--accent)) left bottom / 100% 2px no-repeat; }
.pg-link::after { content: ""; flex: none; width: 20px; height: 20px; background: var(--arrow) 0 0 / 20px 20px no-repeat; }
.pg-link:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; }
.pg-links { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); margin-top: var(--space-4); }

/* --------------------------------------------------------- two columns -- */
/* The heading holds on the left while the matter passes on the right. */
.pg-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-7); align-items: start; }
.pg-split__head { position: sticky; top: calc(var(--nu-bar) + var(--space-5)); }
.pg-split__head h2 { max-width: 10em; color: var(--text); }   /* ink: a whole title is never red, only its accented word (the rule in nuance.css) */
.pg-split__head .nu-eyebrow + h2 { margin-top: var(--space-3); }
.pg-split__head p { margin-top: var(--space-4); max-width: 24em; font: 400 18px/30px var(--font-sans); color: var(--text-muted); }

/* Ruled rows: episodes, documents, credentials. */
.pg-rows { border-top: 1px solid var(--nu-rule); }
.pg-rows li { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); padding: var(--space-4) 0; border-bottom: 1px solid var(--nu-rule); }
.pg-rows h3 { font: 500 28px/34px var(--font-serif); letter-spacing: -0.01em; }
.pg-rows h3 a { text-decoration: none; }
.pg-rows h3 a:hover { text-decoration: underline; text-underline-offset: 6px; }
.pg-rows__meta { font: 500 12px/18px var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.pg-rows p { max-width: 48ch; font: 400 17px/28px var(--font-sans); color: var(--text-muted); }
.pg-rows p.pg-rows__text { color: var(--text); font-size: 18px; line-height: 30px; }

/* The sectors: cells in one ruled box, as the hero's strip, standing still. */
.pg-tags { display: flex; flex-wrap: wrap; border-top: 1px solid var(--nu-rule); border-left: 1px solid var(--nu-rule); }
.pg-tags li { display: flex; align-items: center; gap: 12px; min-height: 64px; padding-inline: 20px; border-right: 1px solid var(--nu-rule); border-bottom: 1px solid var(--nu-rule); font: 500 22px/1.2 var(--font-serif); letter-spacing: -0.01em; }
.pg-tags li::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.pg-tags + p { margin-top: var(--space-4); max-width: 34em; font: 400 18px/30px var(--font-sans); color: var(--text-muted); }
.pg-rows + .pg-tags { margin-top: var(--space-5); }   /* About: the sectors under the credential rows */

/* ------------------------------------------------------ the situations -- */
/* Consulting: the three situations as three doors, an accordion (Amélie,
   8 Oct 2026, after image-sync-accordion.framer.website and
   switchonhover.framer.website). The hairline idiom of the homepage's
   cells: shared rules, square corners, the numeral in its frame, the paper
   tint for what is open. By default, below 1024px, without script and on
   paper, the three stack and show everything: numeral and title in a row,
   then the first line, the first move and the "What changes" beat.
   With script on a desktop (assets/doors.js adds is-live) the block is two
   columns inside one hairline frame: on the left the list of titles, the
   open one on the paper tint; on the right the stage, on the same tint,
   where the template frames its picture: a white square with the open
   situation's first line and first move, and under it, on the tint, its
   "What changes" beat (Amélie, 8 Oct 2026: only the title stays left, the
   copy swaps inside the white square, the beat stays on the grey). The
   script moves the three details into the stage, where they sit on top of
   each other, so the square keeps one height and nothing moves; the open
   one fades in over the one leaving, 280ms ease-out; nothing moves under
   prefers-reduced-motion. */
.pg-doors { border-top: 1px solid var(--nu-rule); }
.pg-doors__list { display: grid; grid-template-columns: minmax(0, 1fr); }
.pg-doors__item { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: var(--space-3); align-items: center; padding: var(--space-4) 0; border-bottom: 1px solid var(--nu-rule); }   /* the anchors land under the bar through html's scroll-padding-top */
.pg-doors__row { display: contents; }   /* number, title and chevron: a real row only under 768px with script, see .is-rows */
.pg-doors__chev { display: none; }
.pg-doors__item .nu-num { grid-column: 1; grid-row: 1; }
.pg-doors__title { grid-column: 2; grid-row: 1; max-width: 16em; font: 500 32px/38px var(--font-serif); letter-spacing: -0.01em; color: var(--text); }
.pg-doors__title button { display: block; margin: 0; padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; color: inherit; text-align: left; text-wrap: inherit; cursor: pointer; }
.pg-doors__title button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 6px; }
.pg-doors__panel { grid-column: 2; padding-top: var(--space-3); }
.pg-doors__lead { max-width: 30em; font: 400 20px/32px var(--font-sans); color: var(--text); }
.pg-doors__text { margin-top: var(--space-3); max-width: 34em; font: 400 18px/30px var(--font-sans); color: var(--text-muted); }
.pg-doors__label { margin-top: var(--space-4); padding-top: var(--space-3); max-width: 34em; border-top: 1px solid var(--nu-rule); font: 500 12px/18px var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--red-text); }
.pg-doors__outcome { margin-top: var(--space-2); font: italic 400 28px/34px var(--font-serif); letter-spacing: -0.01em; color: var(--text); }
.pg-doors__stage { display: none; }

/* The accordion, once the script is in. */
.pg-doors.is-live { --pg-split: 41.6667%; position: relative; isolation: isolate; overflow: clip; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); border: 1px solid var(--nu-rule); }   /* --pg-split is the list column's share, 5 of 12 */
.pg-doors.is-live .pg-doors__list { grid-auto-rows: minmax(0, 1fr); }
.pg-doors.is-live .pg-doors__item { position: relative; padding: 28px 32px; border-bottom: 1px solid var(--nu-rule); border-right: 1px solid var(--nu-rule); cursor: pointer; transition: border-color .28s ease-out; }
.pg-doors.is-live .pg-doors__item:last-child { border-bottom: 0; }
/* The hairline between list and stage runs beside the closed titles only
   (Amélie's red lines, 9 Oct 2026): beside the open one it goes, so the
   title opens straight into the stage. */
.pg-doors.is-live .pg-doors__item.is-open { border-right-color: transparent; cursor: auto; }
.pg-doors.is-live .pg-doors__title { font-size: 28px; line-height: 34px; }
.pg-doors.is-live .pg-doors__stage { position: relative; display: grid; padding: 24px; }
.pg-doors.is-live .pg-doors__panel { grid-area: 1 / 1; display: grid; grid-template-rows: minmax(0, 1fr) auto auto; padding-top: 0; opacity: 1; visibility: visible; transition: opacity .28s ease-out, visibility 0s; }
.pg-doors.is-live .pg-doors__panel:not(.is-open) { opacity: 0; visibility: hidden; transition: opacity .28s ease-out, visibility 0s linear .28s; }
.pg-doors.is-live .pg-doors__card { padding: 40px 48px 48px; border: 1px solid var(--nu-rule); background-color: var(--surface); }
/* The form's moving hue instead of the grey (Amélie, 8 Oct 2026): the same
   three ellipses, colours and loops as the form's (.ct__glow in
   assets/contact.css), on copies of its keyframes below (the hero's own,
   nu-glow-1/2/3, are flattened to its band). One hue for the whole frame
   (Amélie, 9 Oct 2026: one piece, no demarcation): a single layer under
   the list and the stage, cut by clip-path to one shape, the stage column
   plus the open title's cell, so the ellipses drift across the join. The
   three cells are equal thirds (grid rows of 1fr) and the split is 5 of 12,
   so the shape is pure CSS on data-open; it has eight corners in every
   state and slides to the next open title in the same 280ms as the copy.
   The square with the copy stays plain white. Only in the live accordion:
   stacked, without script and on paper there is no stage. */
.pg-doors__glow { display: none; }
.pg-doors.is-live > .pg-doors__glow { display: block; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  --t: 0%; --b: 33.3334%;
  clip-path: polygon(var(--pg-split) 0, 100% 0, 100% 100%, var(--pg-split) 100%, var(--pg-split) var(--b), 0 var(--b), 0 var(--t), var(--pg-split) var(--t));
  transition: clip-path .28s ease-out;
  --g1: color-mix(in srgb, var(--blush) 55%, var(--surface)); --g2: color-mix(in srgb, var(--pink) 35%, var(--surface)); --g3: color-mix(in srgb, var(--red) 40%, var(--surface)); }
.pg-doors.is-live[data-open="2"] > .pg-doors__glow { --t: 33.3333%; --b: 66.6667%; }
.pg-doors.is-live[data-open="3"] > .pg-doors__glow { --t: 66.6666%; --b: 100%; }
.pg-doors__glow i { position: absolute; bottom: -35%; width: 85%; height: 75%; opacity: .55; background: radial-gradient(ellipse at center, var(--g) 0%, transparent 70%); }
.pg-doors__glow i:nth-child(1) { --g: var(--g1); left: -25%; }
.pg-doors__glow i:nth-child(2) { --g: var(--g2); left: 15%; }
.pg-doors__glow i:nth-child(3) { --g: var(--g3); left: 45%; }
@media (prefers-reduced-motion: no-preference) {
  .pg-doors__glow i:nth-child(1) { animation: pg-glow-1 26s ease-in-out infinite; }
  .pg-doors__glow i:nth-child(2) { animation: pg-glow-2 34s ease-in-out infinite; }
  .pg-doors__glow i:nth-child(3) { animation: pg-glow-3 42s ease-in-out infinite; }
}
@keyframes pg-glow-1 {
  0%, 100% { transform: translate(0, 0); opacity: .35; }
  30%  { transform: translate(40%, -60%); opacity: .75; }
  60%  { transform: translate(90%, -20%); opacity: .45; }
  80%  { transform: translate(30%, -90%); opacity: .7; } }
@keyframes pg-glow-2 {
  0%, 100% { transform: translate(0, 0); opacity: .7; }
  25%  { transform: translate(-50%, -80%); opacity: .3; }
  55%  { transform: translate(30%, -110%); opacity: .75; }
  80%  { transform: translate(60%, -30%); opacity: .4; } }
@keyframes pg-glow-3 {
  0%, 100% { transform: translate(0, 0); opacity: .45; }
  35%  { transform: translate(-70%, -100%); opacity: .75; }
  65%  { transform: translate(-110%, -40%); opacity: .3; }
  85%  { transform: translate(-40%, -70%); opacity: .7; } }
.pg-doors.is-live .pg-doors__label { margin-top: var(--space-4); padding: 0 24px; border-top: 0; max-width: none; }

/* Rows, under 768px with script (Amélie's mobile spec, 9 Oct 2026): three
   rows of number, title and chevron, the full row the tap target, 48px at
   least; the open row's panel straight under its own title, the full
   intro, first move and "What changes" as on desktop, nothing cut. The
   open row sticks under the site bar while its panel scrolls, so the
   title stays with its text; the chevron turns and the title steps up one
   size (22 to 26px) when open. The script lands the tapped row under the
   bar. */
.pg-doors.is-rows .pg-doors__item { display: block; padding: 0; }
.pg-doors.is-rows .pg-doors__row { position: sticky; top: var(--nu-bar); z-index: 1; display: grid; grid-template-columns: 48px minmax(0, 1fr) 24px; column-gap: var(--space-2); align-items: center; min-height: 48px; padding: 16px 0; background-color: var(--surface); cursor: pointer; }
.pg-doors.is-rows .pg-doors__item.is-open .pg-doors__row { cursor: auto; }
.pg-doors.is-rows .pg-doors__item .nu-num { grid-column: 1; grid-row: auto; }
.pg-doors.is-rows .pg-doors__title { grid-column: 2; grid-row: auto; max-width: none; font-size: 22px; line-height: 28px; transition: font-size .2s ease-out, line-height .2s ease-out; }
.pg-doors.is-rows .pg-doors__item.is-open .pg-doors__title { font-size: 26px; line-height: 32px; }
.pg-doors.is-rows .pg-doors__chev { display: block; grid-column: 3; grid-row: auto; width: 10px; height: 10px; margin: 0 auto 5px; border-right: 1.5px solid var(--text); border-bottom: 1.5px solid var(--text); rotate: 45deg; transition: rotate .28s ease-out, margin .28s ease-out; }
.pg-doors.is-rows .pg-doors__item.is-open .pg-doors__chev { rotate: 225deg; margin: 5px auto 0; }
.pg-doors.is-rows .pg-doors__panel { display: none; }
.pg-doors.is-rows .pg-doors__panel.is-open { display: block; padding: 0 0 24px calc(48px + var(--space-2)); }
.pg-doors.is-live .pg-doors__outcome { padding: 0 24px 16px; }
@media (prefers-reduced-motion: reduce) {
  .pg-doors, .pg-doors * { transition: none !important; }
}
button.pg-link { margin: 0; padding-top: 0; padding-inline: 0; border: 0; background-color: transparent; cursor: pointer; }
html:not(.js) button[data-print] { display: none; }
.pg-print-only { display: none; }

/* ------------------------------------------------- the two ways in (W4) -- */
.nu-cells--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* The two cells share one bottom line: the price sits at the foot of both
   (Amélie, 8 Oct 2026, the prices at the same level), and is the cell's
   touch of red, the numeral's colour at 28px. The contracting line is one
   small line right under the frame. */
.nu-cells--two li { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; }
/* The glowing frame on hover is the site's common tile behaviour, in
   assets/nuance.css (.nu-cells li). */
.nu-cells--two h3 { margin-top: 0; }
.nu-cells .pg-price { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--nu-rule); font: 400 28px/34px var(--font-serif); letter-spacing: -0.01em; color: var(--display); }
.pg-under { margin-top: var(--space-2); max-width: none; font: 400 15px/24px var(--font-sans); color: var(--text-muted); }
.pg-other-room { margin-top: var(--space-5); font: 400 18px/30px var(--font-sans); color: var(--text); }
.pg-other-room a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.pg-other-room a:hover { text-decoration-thickness: 2px; }

/* ------------------------------------------------------------- closing -- */
/* The Nerve's signup under one line, as on the Lab. */
.pg-close { text-align: center; }
.pg-close h2 { max-width: 18em; margin-inline: auto; }
.pg-close .nu-eyebrow { margin-bottom: var(--space-3); }
.pg-signup { max-width: 520px; margin-inline: auto; }
.pg-signup .nv__form { margin-top: 32px; text-align: left; }
.pg-signup .nv__row { border: 1px solid var(--rule-strong); background: var(--surface); }
.pg-signup .nv__input { padding: 14px 16px; border-bottom: 0; }
.pg-signup .nv__row { gap: 0; }
.pg-signup .nv__input--name { border-bottom: 1px solid var(--rule-strong); }
.pg-signup .nv__btn { border-radius: 0; padding-inline: 24px; }
.pg-signup .nv__done { max-width: 36ch; margin-inline: auto; }

/* ---------------------------------------------------------- the Brazen room -- */
/* Register B: the same hairline page on pink. The wordmark band is a flat
   band in the room's ink, the name in serif, until the wordmark exists. */
.pg-band { padding-block: var(--space-6); background: var(--band); color: var(--on-band); border-bottom: 1px solid var(--nu-rule); }
.pg-band p { max-width: var(--nu-page); margin-inline: auto; padding-inline: var(--nu-inset); font: 500 clamp(40px, 9vw, 140px)/1 var(--font-serif); letter-spacing: -0.03em; }

/* ------------------------------------------------------------ 1240 down -- */
@media (max-width: 1240px) {
  .pg-head__in { padding: 72px var(--nu-inset) 64px; }
  .pg-head h1 { font-size: 52px; }
  .pg-head__text { padding: 72px 32px 64px 0; }
  .pg-head__media { min-height: 460px; }
  .pg-split { gap: var(--space-6); }
  .pg-doors.is-live .pg-doors__item { padding: 24px; }
  .pg-doors.is-live .pg-doors__title { font-size: 24px; line-height: 30px; }
  .pg-doors.is-live .pg-doors__stage { padding: 16px; }
  .pg-doors.is-live .pg-doors__card { padding: 32px; }
  .pg-doors.is-live .pg-doors__label, .pg-doors.is-live .pg-doors__outcome { padding-inline: 16px; }
}

/* ---------------------------------------------------------------- mobile -- */
@media (max-width: 980px) {
  .pg-head__in { padding: 56px var(--nu-inset) 48px; }
  .pg-head h1 { font-size: 40px; }
  .pg-head__lead { font-size: 18px; line-height: 28px; }
  .pg-head--media .pg-head__in { grid-template-columns: minmax(0, 1fr); }
  .pg-head__text { padding: 56px 0 40px; }
  .pg-head__media { min-height: 360px; margin-inline: calc(-1 * var(--nu-inset)); border-inline: 0; border-top: 1px solid var(--nu-rule); }
  .pg-split { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .pg-split__head { position: static; }
  .pg-rows h3 { font-size: 24px; line-height: 30px; }
  .pg-tags li { min-height: 52px; padding-inline: 16px; font-size: 18px; }
  .pg-doors__item { grid-template-columns: 48px minmax(0, 1fr); column-gap: var(--space-2); }
  .pg-doors__item .nu-num { width: 48px; height: 48px; font-size: 24px; }
  .pg-doors__title { font-size: 26px; line-height: 32px; }
  .pg-doors__lead { font-size: 18px; line-height: 28px; }
  .pg-doors__text { line-height: 28px; }
  .pg-doors__outcome { font-size: 24px; line-height: 30px; }
  .nu-cells--two { grid-template-columns: minmax(0, 1fr); }
  .nu-cells .pg-price { font-size: 24px; line-height: 30px; }
  .pg-close { text-align: left; }
  .pg-close h2 { margin-inline: 0; }
  .pg-signup { max-width: none; margin-inline: 0; }
  .pg-signup .nv__row { flex-direction: column; gap: 16px; border: 0; }
  .pg-signup .nv__input { padding: 12px 0; border-bottom: 1px solid var(--rule-strong); }
  .pg-signup .nv__btn { width: 100%; padding-block: 14px; }
  .pg-signup .nv__done { margin-inline: 0; }
  .pg-prose h2 { font-size: 26px; line-height: 32px; }
  .pg-prose p, .pg-prose li { font-size: 17px; line-height: 28px; }
}

/* ------------------------------------------------------------------ 404 -- */
/* The Nuance template's 404 (Amélie, 8 Oct 2026): one ruled panel on the
   paper, the three numerals each in a design tool's selection frame (a
   hairline box, a filled square handle at each corner), three comment pins
   with their cursor reading Page, Not, Found, two centred lines, one
   button. Her system in place of the template's: Newsreader for the
   numerals, red handles, the pins in ink, red and blush with ink text
   (never white on red or blush), the square red button of the hero. */
.pg-404 { overflow: hidden; padding: 76px calc(var(--nu-edge) + var(--nu-inset)); }
.pg-404__panel { display: grid; place-content: center; justify-items: center; max-width: 1000px; min-height: 630px; margin-inline: auto; padding: 72px 32px; border: 1px solid var(--nu-rule); text-align: center; }
.pg-404__code { display: flex; align-items: center; gap: 36px; margin: 0; padding-inline: 48px; }
.pg-404__digit { position: relative; display: block; --dx: 0px; --dy: 0px; }
/* The template's motion, measured on nuance-portfolio.framer.website
   (9 Oct 2026, every 50ms): each frame rests about 0.6s with a slight
   wind-up, travels about 0.6s to its own corner, overshoots a touch and
   settles, rests, and comes back, on a 2.4s loop; the three run out of
   step. The loop below is that sampled curve, played straight (linear
   between the samples), so the easing is the template's and not a guess.
   Pin and cursor sit inside the frame and travel with it. The template
   plays it for everyone; here the design system stops every animation
   under prefers-reduced-motion (bundle.css), as on the rest of the site. */
.pg-404__digit:nth-child(1) { --dx: -2px; --dy: -9px; animation-delay: -0.3s; }
.pg-404__digit:nth-child(2) { --dx: 7px; --dy: 10px; z-index: 1; }   /* its pin stays above the third frame as they drift together */
.pg-404__digit:nth-child(3) { --dx: 14px; --dy: -9px; animation-delay: -0.9s; }
.pg-404__digit { animation: pg-404-drift 2.4s linear infinite; }
@keyframes pg-404-drift {
  0.0% { translate: calc(var(--dx) * 0) calc(var(--dy) * 0); }
  4.2% { translate: calc(var(--dx) * -0.03) calc(var(--dy) * -0.03); }
  8.3% { translate: calc(var(--dx) * -0.046) calc(var(--dy) * -0.046); }
  12.5% { translate: calc(var(--dx) * -0.035) calc(var(--dy) * -0.035); }
  16.7% { translate: calc(var(--dx) * 0.007) calc(var(--dy) * 0.007); }
  19.2% { translate: calc(var(--dx) * 0.05) calc(var(--dy) * 0.05); }
  21.7% { translate: calc(var(--dx) * 0.14) calc(var(--dy) * 0.14); }
  24.2% { translate: calc(var(--dx) * 0.26) calc(var(--dy) * 0.26); }
  26.7% { translate: calc(var(--dx) * 0.4) calc(var(--dy) * 0.4); }
  29.2% { translate: calc(var(--dx) * 0.58) calc(var(--dy) * 0.58); }
  31.7% { translate: calc(var(--dx) * 0.76) calc(var(--dy) * 0.76); }
  34.2% { translate: calc(var(--dx) * 0.86) calc(var(--dy) * 0.86); }
  36.7% { translate: calc(var(--dx) * 0.93) calc(var(--dy) * 0.93); }
  39.2% { translate: calc(var(--dx) * 0.975) calc(var(--dy) * 0.975); }
  41.7% { translate: calc(var(--dx) * 0.995) calc(var(--dy) * 0.995); }
  45.0% { translate: calc(var(--dx) * 1.002) calc(var(--dy) * 1.002); }
  47.5% { translate: calc(var(--dx) * 0.99) calc(var(--dy) * 0.99); }
  50.0% { translate: calc(var(--dx) * 0.978) calc(var(--dy) * 0.978); }
  52.5% { translate: calc(var(--dx) * 0.96) calc(var(--dy) * 0.96); }
  55.8% { translate: calc(var(--dx) * 0.975) calc(var(--dy) * 0.975); }
  58.3% { translate: calc(var(--dx) * 0.99) calc(var(--dy) * 0.99); }
  60.8% { translate: calc(var(--dx) * 1.0) calc(var(--dy) * 1.0); }
  63.3% { translate: calc(var(--dx) * 1.002) calc(var(--dy) * 1.002); }
  65.8% { translate: calc(var(--dx) * 0.995) calc(var(--dy) * 0.995); }
  68.3% { translate: calc(var(--dx) * 0.975) calc(var(--dy) * 0.975); }
  70.8% { translate: calc(var(--dx) * 0.94) calc(var(--dy) * 0.94); }
  73.3% { translate: calc(var(--dx) * 0.89) calc(var(--dy) * 0.89); }
  75.8% { translate: calc(var(--dx) * 0.81) calc(var(--dy) * 0.81); }
  78.3% { translate: calc(var(--dx) * 0.7) calc(var(--dy) * 0.7); }
  80.8% { translate: calc(var(--dx) * 0.52) calc(var(--dy) * 0.52); }
  83.3% { translate: calc(var(--dx) * 0.34) calc(var(--dy) * 0.34); }
  85.8% { translate: calc(var(--dx) * 0.2) calc(var(--dy) * 0.2); }
  88.3% { translate: calc(var(--dx) * 0.11) calc(var(--dy) * 0.11); }
  90.8% { translate: calc(var(--dx) * 0.05) calc(var(--dy) * 0.05); }
  93.3% { translate: calc(var(--dx) * 0.01) calc(var(--dy) * 0.01); }
  95.8% { translate: calc(var(--dx) * -0.015) calc(var(--dy) * -0.015); }
  97.9% { translate: calc(var(--dx) * -0.01) calc(var(--dy) * -0.01); }
  100.0% { translate: calc(var(--dx) * 0) calc(var(--dy) * 0); }
}
.pg-404__frame { position: relative; display: block; padding: 0.13em 0.1em 0; border: 1px solid color-mix(in srgb, var(--text) 45%, transparent); font: 500 200px/0.71 var(--font-serif); font-variant-numeric: lining-nums; letter-spacing: -0.03em; color: var(--text); }
.pg-404__frame::before, .pg-404__frame::after, .pg-404__digit::before, .pg-404__digit::after { content: ""; position: absolute; width: 8px; height: 8px; background: var(--red); }
.pg-404__frame::before { top: -4px; left: -4px; }
.pg-404__frame::after { bottom: -4px; right: -4px; }
.pg-404__digit::before { top: -4px; right: -4px; }
.pg-404__digit::after { bottom: -4px; left: -4px; }
/* The pin and, by its side, the cursor in the pin's colour, pointing at the frame. */
.pg-404__pin { --pin: var(--red); position: absolute; z-index: 1; display: inline-flex; padding: 6px 12px; border-radius: var(--radius-button); font: 500 14px/18px var(--font-sans); color: var(--ink); background: var(--pin); white-space: nowrap; }
.pg-404__pin::before { content: ""; position: absolute; width: 16px; height: 16px; background: var(--pin); -webkit-mask: var(--cursor) center / contain no-repeat; mask: var(--cursor) center / contain no-repeat; }
.pg-404 { --cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 1l11 7.5-4.7 1.5 2.9 5-2.2 1-2.7-5L2 14.5z'/%3E%3C/svg%3E"); }
.pg-404__pin--page { --pin: var(--text); color: var(--surface); left: -52px; bottom: -22px; }
.pg-404__pin--page::before { top: -18px; right: -6px; transform: rotate(90deg); }
.pg-404__pin--not { top: -34px; right: -56px; }
.pg-404__pin--not::before { bottom: -16px; left: -4px; transform: rotate(-90deg); }
.pg-404__pin--found { --pin: var(--blush); right: -84px; top: 50%; }
.pg-404__pin--found::before { top: -14px; left: -10px; }
.pg-404__text { margin-top: 40px; font: 400 20px/32px var(--font-sans); color: color-mix(in srgb, var(--text) 80%, var(--surface)); }
.pg-404__actions { margin-top: 36px; }
@media (max-width: 980px) {
  .pg-404 { padding: 48px var(--nu-inset); }
  .pg-404__panel { min-height: 560px; }
  .pg-404__code { gap: 28px; }
  .pg-404__frame { font-size: 150px; }
  .pg-404__pin--found { right: -78px; }
}
@media (max-width: 640px) {
  .pg-404 { padding: 68px 16px 72px; }
  .pg-404__panel { min-height: 0; padding: 160px 16px 128px; }
  .pg-404__code { gap: 16px; padding-inline: 0; }
  .pg-404__frame { font-size: 92px; }
  .pg-404__pin { padding: 5px 10px; font-size: 12px; line-height: 16px; }
  .pg-404__pin::before { width: 14px; height: 14px; }
  .pg-404__digit:nth-child(1) { --dx: -1px; --dy: -6px; }
  .pg-404__digit:nth-child(2) { --dx: 4px; --dy: 6px; }
  .pg-404__digit:nth-child(3) { --dx: 8px; --dy: -6px; }
  .pg-404__pin--page { left: -42px; bottom: -22px; }
  .pg-404__pin--page::before { top: -15px; right: -4px; }
  .pg-404__pin--not { top: -30px; right: -34px; }
  .pg-404__pin--not::before { bottom: -14px; left: -2px; }
  .pg-404__pin--found { right: -50px; top: 38%; }
  .pg-404__pin--found::before { top: -12px; left: -8px; }
  .pg-404__text { margin-top: 44px; font-size: 17px; line-height: 28px; text-wrap: balance; }
  .pg-404__text br { display: none; }
  .pg-404__actions { width: 100%; margin-top: 32px; }
  .pg-404__actions .ab-btn { width: 100%; justify-content: center; }
}

/* ------------------------------------------------------------- about -- */
/* The hero (Amélie, 8 Oct 2026, evening): the homepage's, with the
   Consulting proportions, the picture cropped to her face, and her three
   cells (a word, a figure, a fun fact still to choose). */
/* The picture (Amélie, 9 Oct 2026: she has to be centred, not cut in
   two): she stands right of centre in the photo, so the picture is shown
   a little larger than the cell and shifted left until she is in the
   middle, the window set on her face and the disco ball. */
.nu-hero--about .nu-hero__media img { right: auto; left: -18.5%; width: 115%; object-position: 50% 58%; }
.nu-proof__n--word { font-size: 40px; letter-spacing: -0.02em; }
.nu-proof__n--emoji { font-size: 36px; letter-spacing: 0.04em; }

/* The stack of cards (Amélie, 8 and 9 Oct 2026, after
   webx-bodilum.framer.website/components/demo/scroll-stack-cards, its
   settings: 18px between the stacked edges, a little depth, square
   corners because the Nuance template has no rounded ones). Every card is
   one screen: the same height for all, the window less the bar, the
   stack's top margin and a foot of 24px. All of them stick at the same
   place under the bar (room for three stacked edges above); the covered
   ones step back, 18px up and 4% smaller for each card over them (--d,
   set by assets/stack.js, at most three deep, so the stack never grows
   above its three edges). White, one hairline, the title and the place in
   the stack as the eyebrow, the text at 22px in the middle. Behind them
   the form's moving hue (the Consulting stage's ellipses and loops,
   pg-glow-1/2/3 above), sticky to the window so it follows the stack
   down. Without script the cards still stack, edge on edge; under reduced
   motion they are a plain sequence. */
.pg-stack-band { position: relative; isolation: isolate; overflow: clip; padding-block: 0; --pg-stick: 24px; --pg-step: 18px; --pg-depth: 3; }
.pg-stack-band > .nu-in { padding-block: var(--nu-gap); }
.pg-stack__glow { position: sticky; top: 0; z-index: -1; height: 100vh; margin-bottom: -100vh; overflow: hidden; pointer-events: none;
  --g1: color-mix(in srgb, var(--blush) 55%, var(--surface)); --g2: color-mix(in srgb, var(--pink) 35%, var(--surface)); --g3: color-mix(in srgb, var(--red) 40%, var(--surface)); }
.pg-stack__glow i { position: absolute; bottom: -35%; width: 85%; height: 75%; opacity: .55; background: radial-gradient(ellipse at center, var(--g) 0%, transparent 70%); }
.pg-stack__glow i:nth-child(1) { --g: var(--g1); left: -25%; }
.pg-stack__glow i:nth-child(2) { --g: var(--g2); left: 15%; }
.pg-stack__glow i:nth-child(3) { --g: var(--g3); left: 45%; }
@media (prefers-reduced-motion: no-preference) {
  .pg-stack__glow i:nth-child(1) { animation: pg-glow-1 26s ease-in-out infinite; }
  .pg-stack__glow i:nth-child(2) { animation: pg-glow-2 34s ease-in-out infinite; }
  .pg-stack__glow i:nth-child(3) { animation: pg-glow-3 42s ease-in-out infinite; }
}
/* The band is two columns (Amélie, 9 Oct 2026: smaller cards, on the
   right, a timeline on the left that moves with them): the timeline in
   the page's 5, the stack in its 7, both starting under the bar. */
.pg-stack__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-7); align-items: start; --pg-top: calc(var(--nu-bar) + var(--pg-stick) + var(--pg-depth) * var(--pg-step)); }
.pg-stack { display: grid; gap: var(--space-4); }
.pg-stack__card { --d: 0; position: sticky; top: var(--pg-top); display: grid; grid-template-rows: auto minmax(0, 1fr); height: var(--pg-card, 480px); padding: 28px 40px 40px; border: 1px solid var(--nu-rule); background-color: var(--surface);
  transform: translateY(calc(var(--d) * -1 * var(--pg-step))) scale(calc(1 - var(--d) * 0.04)); transform-origin: 50% 0; will-change: transform; }
.nu-section .pg-stack__label { display: flex; justify-content: space-between; gap: var(--space-4); padding-bottom: 16px; border-bottom: 1px solid var(--nu-rule); font: 500 13px/20px var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text); }
.pg-stack__count { flex: none; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pg-stack__body { align-self: center; max-width: 32em; padding-block: var(--space-4); }
.pg-stack__body p { font: 400 20px/32px var(--font-sans); color: var(--text); }
/* The timeline: one hairline, a dot per card on it, the title in serif.
   The current card in ink with a red dot; the cards already read keep an
   ink dot and a dimmer title; the ones to come a hollow dot. */
.pg-timeline { position: sticky; top: var(--pg-top); }
.pg-timeline ol { border-left: 1px solid var(--nu-rule); }
.pg-timeline li { position: relative; padding: 7px 0 7px 28px; }
.pg-timeline li::before { content: ""; position: absolute; left: -6px; top: 15px; width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--nu-rule); background: var(--surface); transition: background-color .25s ease-out, border-color .25s ease-out; }
/* The titles light, the current one in ink and larger (Amélie, 9 Oct
   2026: more contrast with the selected card). */
.pg-timeline a { display: block; max-width: 16em; font: 400 18px/24px var(--font-serif); letter-spacing: -0.01em; color: color-mix(in srgb, var(--text-muted) 55%, var(--surface)); text-decoration: none; transition: color .25s ease-out, font-size .25s ease-out; }
.pg-timeline a:hover, .pg-timeline a:focus-visible { color: var(--text-muted); }
.pg-timeline li.is-past::before { border-color: var(--text-muted); background: var(--text-muted); }
.pg-timeline li.is-current::before { border-color: var(--accent); background: var(--accent); }
.pg-timeline li.is-current a { color: var(--text); font-size: 26px; line-height: 30px; letter-spacing: -0.02em; }
.pg-timeline li.is-current::before { top: 17px; }
/* The thread's credentials, three lines, no rules. */
.pg-lines { margin-top: var(--space-5); }
.pg-lines p { font: 400 17px/28px var(--font-sans); color: var(--text-muted); }
.pg-lines p + p { margin-top: var(--space-2); }
@media (prefers-reduced-motion: reduce) {
  .pg-stack__card { position: static; height: auto; min-height: 0; transform: none; }
  .pg-timeline { position: static; }
}
@media (max-width: 1199px) {
  .pg-stack__in { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-6); }
  .pg-stack__card { --pg-card: 460px; padding: 24px 28px 32px; }
  .pg-stack__body p { font-size: 18px; line-height: 30px; }
  .pg-timeline a { font-size: 17px; line-height: 22px; }
  .pg-timeline li.is-current a { font-size: 22px; line-height: 26px; }
}
@media (max-width: 809px) {
  .pg-stack-band { --pg-stick: 16px; --pg-step: 12px; }
  .pg-stack__in { grid-template-columns: minmax(0, 1fr); }
  .pg-timeline { display: none; }
  .pg-stack { gap: var(--space-3); }
  .pg-stack__card { --pg-card: 480px; padding: 20px 20px 24px; }
  .nu-section .pg-stack__label { font-size: 12px; line-height: 18px; padding-bottom: 14px; }
  .pg-stack__body { padding-block: var(--space-4); }
  .pg-stack__body p { font-size: 18px; line-height: 30px; }
  .nu-hero--about .nu-hero__media img { left: 0; width: 100%; object-position: 85% 55%; }
  .nu-proof__n--word { font-size: 32px; }
  .nu-proof__n--emoji { font-size: 28px; }
}

/* The Lab and the Podcast heroes (Amélie, 9 Oct 2026): the Consulting hero
   with their own picture and figures. The Lab's line is a paragraph, so its
   text runs the full column; the Lab picture is framed on her and the
   laptop, the Podcast picture on her face. The Listen on row sits where the
   Consulting hero had its actions. */
.nu-hero--lab .nu-hero__sub { max-width: none; }
.nu-hero--lab .nu-hero__media img { object-position: 32% 47%; }   /* landscape frame: the phone in her hand (at 42% of the width) lands in the middle of the portrait slot at 1440 */
@media (max-width: 899px) { .nu-hero--lab .nu-hero__media img { object-position: 40% 47%; } }   /* the narrower slot on a phone */
.nu-hero--podcast .nu-hero__media img { object-position: 50% 30%; }
.nu-hero--podcast .ep-links--hero { margin-top: 24px; }