/* ameliebeerens.com: the Nuance layout.
   Loaded third, after design-system/tokens.css and components/bundle.css,
   by src/layout.html (the Nuance layout became the site's only shell on 7 Oct 2026).

   Structure follows https://nuance-portfolio.framer.website/ (5 Oct 2026):
   a page drawn with hairlines. The header is one ruled bar of cells, the
   hero is three columns (text, picture, figures) closed by a strip, every
   section is a band between two rules, content sits 120px in, grids are
   cells that share their borders, corners are square. One dark band in the
   middle and a dark footer. Colours, type and buttons are the design
   system's: white ground, ink, red. The hero takes the template's glow, old
   film and moving strip (Amélie, 5 Oct 2026); all of it stops under
   prefers-reduced-motion.

   Red type sits on white or on ink only, at 24px and up. */

:root {
  --nu-inset: 120px;
  --nu-inset-hero: 64px;
  --nu-page: 1440px;            /* the template's page: wider screens centre it */
  --nu-edge: max(0px, (100% - var(--nu-page)) / 2);
  --nu-gap: 120px;              /* band padding, top and bottom */
  --nu-head: var(--space-6);    /* head to content */
  --nu-bar: 60px;
  --nu-tint: color-mix(in srgb, var(--red) 10%, var(--surface));   /* the template's pale accent fill, in red */
  --nu-side: 245px;              /* figures column and availability cell */
  --nu-rule: color-mix(in srgb, var(--text) 20%, transparent);
  --nu-rule-on-ink: color-mix(in srgb, var(--on-ink) 18%, transparent);
  --nu-card-on-ink: color-mix(in srgb, var(--on-ink) 7%, transparent);
  --nu-green: #1fa35a;          /* availability dot: stays green, the one colour outside her five tokens (Amélie, 7 Oct 2026, "the small beat must be green like it was when validated") */
  --nu-red-pale: color-mix(in srgb, var(--red) 40%, var(--surface)); /* third blob of the hero glow and the light stop of the hover rings: red at 40%, the contact form's recipe. It replaced a peach (#ffc7a8, an orange hue) on 9 Oct 2026: red and pink are the only hues (Amélie) */
}

*, *::before, *::after { box-sizing: border-box; }
/* No scroll-behavior here: site.js scrolls smoothly on a click only, never on a page load (brief round 3, C4). */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nu-bar) + 24px); }
body { margin: 0; background: var(--surface); color: var(--text); font-family: var(--font-sans); }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
h1, h2 { text-wrap: balance; }
:where(a, button, summary):focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.skip { position: absolute; left: var(--space-4); top: -80px; z-index: 10; background-color: var(--surface); padding: 8px 12px; }
.skip:focus { top: 8px; }

/* Buttons: square, as the template (Amélie, 5 Oct 2026; the design system's
   pill is overridden here only). The arrow is drawn, not a glyph. Mouse
   over: the arrow leaves by the top right and comes back in from the bottom
   left, and four corner ticks open around the button. */
.ab-btn { position: relative; gap: 4px; padding: 12px 16px; border-radius: 0; font-size: 16px; line-height: 24px; }
.ab-btn::after { content: ""; flex: none; width: 20px; height: 20px; background: var(--arrow-on-accent) 0 0 / 20px 20px no-repeat; }
.ab-btn::before { content: ""; position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: inset .25s ease-out, opacity .25s ease-out;
  --t: var(--text);
  background:
    linear-gradient(var(--t), var(--t)) left top / 12px 1px, linear-gradient(var(--t), var(--t)) left top / 1px 12px,
    linear-gradient(var(--t), var(--t)) right top / 12px 1px, linear-gradient(var(--t), var(--t)) right top / 1px 12px,
    linear-gradient(var(--t), var(--t)) left bottom / 12px 1px, linear-gradient(var(--t), var(--t)) left bottom / 1px 12px,
    linear-gradient(var(--t), var(--t)) right bottom / 12px 1px, linear-gradient(var(--t), var(--t)) right bottom / 1px 12px;
  background-repeat: no-repeat; }
.ab-btn:hover::before { inset: -4px; opacity: 1; }
.ab-link { background-image: linear-gradient(var(--accent), var(--accent)); }

/* ---------------------------------------------------------------- header -- */
/* The bar sticks to the top of the window, on an opaque ground of the
   scheme (Amélie, 7 Oct 2026). */
.nu-header { position: sticky; top: 0; z-index: 5; display: flex; align-items: stretch; min-height: var(--nu-bar); background: var(--surface); border-bottom: 1px solid var(--nu-rule); transition: margin .3s ease-out, padding .3s ease-out; }
.nu-header__name { display: flex; align-items: center; padding-inline: 20px; border-right: 1px solid var(--nu-rule); font: 500 24px/1.2 var(--font-serif); letter-spacing: -0.02em; text-decoration: none; white-space: nowrap; }
.nu-nav { flex: 1; }
.nu-nav > ul { display: flex; height: 100%; }
.nu-nav a, .nu-nav__group > button { display: flex; align-items: center; height: 100%; padding-inline: var(--nu-cell, 24px); border-right: 1px solid var(--nu-rule); font: 400 16px/24px var(--font-sans); color: var(--text); text-decoration: none; white-space: nowrap; transition: background-color .2s ease-out; }
.nu-nav a:hover, .nu-nav__group > button:hover, .nu-nav__group:hover > button, .nu-nav__group > button[aria-expanded="true"] { background-color: var(--nu-tint); }
/* The page you are on: a red line under its word in the bar. A page inside
   a group marks the group's word, never the row in the open panel. */
.nu-nav > ul > li > a[aria-current], .nu-nav__group:has(a[aria-current]) > button { box-shadow: inset 0 -2px 0 var(--accent); }
/* A group: a word that opens a ruled box of two cells under the bar. */
.nu-nav__group { position: relative; display: flex; }
.nu-nav__group > button { gap: 10px; width: 100%; height: auto; flex: 1; background: none; border-block: 0; border-left: 0; cursor: pointer; }
.nu-nav__group > button::after { content: ""; width: 6px; height: 6px; margin-top: -4px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
/* Out of the flow, so the panel's rows do not widen the cell: the three
   cells stay equal. The panel hangs from the cell's left rule and may be
   wider than the cell. */
.nu-nav__group > ul { display: none; position: absolute; z-index: 20; top: 100%; left: -1px; min-width: calc(100% + 1px); width: max-content; }
.nu-nav__group:hover > ul, .nu-nav__group:has(:focus-visible) > ul, .nu-nav__group > button[aria-expanded="true"] + ul { display: block; }
.nu-nav__group > ul li { background: var(--surface); border: 1px solid var(--nu-rule); border-top: 0; }
.nu-nav__group > ul a { height: auto; min-height: 52px; padding-inline: var(--nu-cell, 24px); border-right: 0; }
.nu-nav__touch { display: none; }

/* Mouse over, as in the template: four corner ticks wait 8px inside a cell
   and open to its corners. The template has no sub-menus, so these are ours:
   the panel unrolls from the bar's rule, its rows arrive one after the other,
   the chevron turns, and a row answers with the button's arrow. */
@media (min-width: 981px) {
  /* The bar takes the hero's three columns: its rules continue the picture's. */
  .nu-header { display: grid; grid-template-columns: 50% minmax(0, 1fr) var(--nu-side); padding-inline: var(--nu-edge); }
  .nu-header__main { display: flex; align-items: stretch; margin-right: -1px; }
  /* Three cells of the same width, labels centred, as the template's (Amélie,
     7 Oct 2026): together they fill the text column, so the last rule still
     meets the picture's. */
  .nu-nav > ul { display: grid; grid-template-columns: repeat(3, 1fr); }
  .nu-nav > ul > li > a, .nu-nav__group > button { justify-content: center; }
  /* Past the page head (nuance.js adds is-past): the bar steps in to the
     sections' inset, 120px from each edge, with a rule at each end, so its
     edges sit on the grid of every section below. Every cell keeps the width
     it had in the head (--nu-cell-w, measured by nuance.js); only the empty
     stretch gives way. One motion of 300ms. */
  .nu-header.is-past { margin-inline: calc(var(--nu-edge) + var(--nu-inset)); padding-inline: 0; border-inline: 1px solid var(--nu-rule); grid-template-columns: auto minmax(0, 1fr) var(--nu-side); }
  .nu-header.is-past .nu-nav > ul { grid-template-columns: repeat(3, var(--nu-cell-w, auto)); }
  .nu-header__avail { grid-column: 3; margin-left: -1px; }
  .nu-nav > ul > li > a, .nu-nav__group > button, .nu-header__avail { position: relative; }
  .nu-nav > ul > li > a::before, .nu-nav__group > button::before, .nu-header__avail::before { content: ""; position: absolute; inset: 8px; opacity: 0; pointer-events: none; transition: inset .25s ease-out, opacity .25s ease-out;
    --t: var(--accent);
    background:
      linear-gradient(var(--t), var(--t)) left top / 10px 2px, linear-gradient(var(--t), var(--t)) left top / 2px 10px,
      linear-gradient(var(--t), var(--t)) right top / 10px 2px, linear-gradient(var(--t), var(--t)) right top / 2px 10px,
      linear-gradient(var(--t), var(--t)) left bottom / 10px 2px, linear-gradient(var(--t), var(--t)) left bottom / 2px 10px,
      linear-gradient(var(--t), var(--t)) right bottom / 10px 2px, linear-gradient(var(--t), var(--t)) right bottom / 2px 10px;
    background-repeat: no-repeat; }
  .nu-nav > ul > li > a:hover::before, .nu-nav > ul > li > a:focus-visible::before,
  .nu-nav__group:hover > button::before, .nu-nav__group:has(:focus-visible) > button::before, .nu-nav__group > button[aria-expanded="true"]::before,
  .nu-header__avail:hover::before, .nu-header__avail:focus-visible::before { inset: 0; opacity: 1; }

  .nu-nav__group > button::after { transition: transform .3s ease-out, margin .3s ease-out; }
  .nu-nav__group:hover > button::after, .nu-nav__group:has(:focus-visible) > button::after, .nu-nav__group > button[aria-expanded="true"]::after { transform: rotate(225deg); margin-top: 4px; }

  .nu-nav__group > ul { display: block; visibility: hidden; opacity: 0; clip-path: inset(0 0 100% 0); transition: clip-path .3s cubic-bezier(.2, .7, .2, 1), opacity .2s ease-out, visibility 0s .3s; }
  .nu-nav__group:hover > ul, .nu-nav__group:has(:focus-visible) > ul, .nu-nav__group > button[aria-expanded="true"] + ul { visibility: visible; opacity: 1; clip-path: inset(0 0 -200px 0); transition-delay: 0s; }
  .nu-nav__group > ul li { opacity: 0; transform: translateY(-8px); transition: opacity .25s ease-out, transform .25s ease-out; }
  .nu-nav__group:hover > ul li, .nu-nav__group:has(:focus-visible) > ul li, .nu-nav__group > button[aria-expanded="true"] + ul li { opacity: 1; transform: none; transition-delay: .08s; }
  .nu-nav__group:hover > ul li + li, .nu-nav__group:has(:focus-visible) > ul li + li, .nu-nav__group > button[aria-expanded="true"] + ul li + li { transition-delay: .14s; }

  .nu-nav__group > ul a { justify-content: space-between; gap: var(--space-4); }
  .nu-nav__group > ul a::after { content: ""; flex: none; width: 20px; height: 20px; background: var(--arrow) -20px 20px / 20px 20px no-repeat; transition: background-position .25s ease-out; }
  .nu-nav__group > ul a:hover::after, .nu-nav__group > ul a:focus-visible::after { background-position: 0 0; }
}
/* Narrower screens: tighter cells so the bar still ends on the picture's rule;
   where even that cannot fit, the last cell loses its rule instead of missing. */
/* 16px in the cells at every width: three equal cells of (720 - name) / 3
   = 176px hold "Work with me" at 1440 only with that. */
.nu-header { --nu-cell: 16px; }
@media (min-width: 981px) and (max-width: 1400px) {
  .nu-header__name { padding-inline: var(--space-3); }
}
@media (min-width: 981px) and (max-width: 1400px) {
  .nu-header__name { font-size: 22px; }
  .nu-header { --nu-cell: 12px; }
  .nu-nav > ul > li > a, .nu-nav__group > button, .nu-nav__group > ul a { gap: 8px; font-size: 15px; }
}
@media (min-width: 981px) and (max-width: 1140px) {
  .nu-nav > ul > li:nth-last-child(2) > a { border-right: 0; }
  .nu-nav > ul, .nu-header.is-past .nu-nav > ul { grid-template-columns: repeat(3, auto); }
  /* Stepped in, the bar has 240px less: the last cell shrinks to its word. */
  .nu-header.is-past { grid-template-columns: auto minmax(0, 1fr) auto; }
}

/* The sections Amélie specified in her own idiom (references, FAQ, The
   Nerve, The Lab) sat 64px in. Since the bar steps in to the page inset
   (7 Oct 2026), their text starts on the same line as the bar's edge:
   120px in, plus the centring margin on wider screens. The FAQ and the
   Lab's safety band are grids, so the inset goes on the band and the 64px
   stays as their inner gutter. Phone and tablet keep their own values. */
@media (min-width: 981px) {
  .nuance .refs { --ref-pad: calc(var(--nu-edge) + var(--nu-inset)); }
  .nuance .nv { padding-inline: calc(var(--nu-edge) + var(--nu-inset)); }
  .nuance .lab { --lab-pad: calc(var(--nu-edge) + var(--nu-inset)); }
  .nuance .qa, .nuance .lab--safe { padding-inline: calc(var(--nu-edge) + var(--nu-inset) - min(64px, var(--nu-inset))); }
  .nuance .qa { --qa-pad: min(64px, var(--nu-inset)); }
  .nuance .lab--safe { --lab-pad: min(64px, var(--nu-inset)); }
}
@media (prefers-reduced-motion: reduce) {
  .nu-header, .nu-header *, .nu-header *::before, .nu-header *::after { transition: none !important; }
}
/* Availability, the header's call to action: a green dot that pulses. The
   cell is as wide as the hero's figures column, so the two rules meet. The
   hero keeps the only red button above the fold. */
.nu-header__avail { flex: 0 0 var(--nu-side); display: flex; align-items: center; justify-content: center; gap: 14px; padding-inline: var(--space-2); border-left: 1px solid var(--nu-rule); font: 400 16px/24px var(--font-sans); text-decoration: none; white-space: nowrap; transition: background-color .2s ease-out; }
.nu-header__avail:hover { background-color: var(--nu-tint); }
/* Past the page head the cell says Contact instead (Amélie, 7 Oct 2026). */
.nu-header__avail-past, .nu-header.is-past .nu-header__avail-top { display: none; }
.nu-header.is-past .nu-header__avail-past { display: inline; }
.nu-header__avail i { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--nu-green); }
.nu-header__avail i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--nu-green); }
.nav-toggle { display: none; margin-left: auto; background: none; border: 0; border-left: 1px solid var(--nu-rule); padding: 0 var(--space-4); color: var(--text); cursor: pointer; }

/* ------------------------------------------------------------------ hero -- */
/* Text, picture, proof in the template's proportions (720 / 475 / 245 of
   1440), ruled. Under the columns the
   glow, over everything (the picture too) the film, which now covers the whole page. */
/* The template's geometry, measured: the page is 1440 at most and centred;
   the hero is 90vh high counted from the top of the bar; the text column is
   half the page, 64px in from the left, 32px before the picture, and the
   block sits in the middle of that height (so 30px above the middle of what
   is left under the bar). 10px from eyebrow to headline, 20px, 20px. */
.nu-hero { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 50% minmax(0, 1fr) var(--nu-side); min-height: calc(90vh - var(--nu-bar)); padding-inline: var(--nu-edge); }
.nu-hero > * { position: relative; z-index: 1; }
.nu-hero__text { container-type: inline-size; align-self: center; padding: 32px 32px calc(var(--nu-bar) + 32px) 64px; }
.nu-eyebrow { font: 500 13px/20px var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.nu-label { font: 400 26px/32px var(--font-serif); letter-spacing: -0.005em; color: var(--text-muted); }
/* The template's headline: 60px on 72px, 52px on a tablet, 44px on a phone. */
.nu-hero h1 { margin-top: 10px; font: 500 60px/1.2 var(--font-serif); letter-spacing: -0.04em; text-wrap: balance; }
.nu-hero h1 em { font-style: italic; font-weight: 400; }
/* The accented word (Amélie, 8 Oct 2026, the site's rule): a title that is a
   sentence carries exactly one word in italic, the one you would stress
   reading it aloud; a title that names a thing (The Nerve., Listen., The
   log) carries none. An H1 keeps its own colour, an H2 takes the display
   red (the ink of the Brazen room). The hero's and the sections' rules
   below are the same rule written earlier. */
h1 em { font-style: italic; font-weight: 400; }
h2 em { font-style: italic; font-weight: 400; color: var(--display); }
.nu-hero__sub { margin-top: 20px; max-width: 90%; font: 400 18px/27px var(--font-sans); color: color-mix(in srgb, var(--text) 80%, var(--surface)); }
.nu-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); margin-top: 20px; }
/* The line under the link hangs below it, out of the flow: the block keeps its height. */
.nu-hero__more { position: relative; display: flex; }
.nu-hero__note { position: absolute; top: 100%; left: 0; margin-top: 6px; font: 400 13px/20px var(--font-sans); color: var(--text-muted); white-space: nowrap; }
.nu-hero__media { min-height: 0; border-inline: 1px solid var(--nu-rule); }
.nu-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.nu-proof { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); }
.nu-proof li { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: var(--space-3); text-align: center; }
.nu-proof li + li { border-top: 1px solid var(--nu-rule); }
.nu-proof__n { font: 400 54px/1 var(--font-serif); letter-spacing: -0.03em; font-variant-numeric: tabular-nums lining-nums; }
.nu-proof__n b { font-weight: 400; color: var(--accent); }

/* The glow: the template's own band at the foot of the hero (220px, six
   soft ellipses, half transparent, over the picture too) in tints of blush,
   pink and red, drawn by ::before. Inside that band only, three of the
   form's ellipses (assets/contact.css) drift sideways and a little up and
   down, so the band's upper edge moves like an irregular wave (Amélie,
   8 Oct 2026: the hue moves, but only at the bottom line, never all over
   the hero). They pass behind the text, the picture and the figures (z-index
   -1 in the hero's own stacking context, the band itself stays over the
   picture) and move only when motion is welcome. */
.nu-hero > .nu-glow { position: absolute; z-index: auto; inset: auto 0 0 0; height: 220px; 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: var(--nu-red-pale);
  --g4: color-mix(in srgb, var(--red) 40%, var(--surface)); }
.nu-hero > .nu-glow::before { content: ""; position: absolute; z-index: 2; inset: 0; opacity: .5;
  background:
    radial-gradient(ellipse 64% 48% at 5% 100%, var(--g1) 0%, transparent 70%),
    radial-gradient(ellipse 52% 44% at 24% 100%, var(--g3) 0%, transparent 70%),
    radial-gradient(ellipse 40% 52% at 44% 90%, var(--g2) 0%, transparent 70%),
    radial-gradient(ellipse 56% 40% at 63% 100%, var(--g3) 0%, transparent 70%),
    radial-gradient(ellipse 40% 48% at 80% 95%, var(--g1) 0%, transparent 70%),
    radial-gradient(ellipse 48% 44% at 98% 100%, var(--g2) 0%, transparent 70%); }
/* A white fade over the top of the band, above the ellipses and under the
   content, so the band's clipping edge never shows as a line. */
.nu-hero > .nu-glow::after { content: ""; position: absolute; z-index: -1; inset: 0 0 auto 0; height: 45%; background: linear-gradient(to bottom, var(--surface), transparent); }
.nu-glow i { position: absolute; z-index: -1; bottom: -70%; width: 60%; height: 170%; opacity: .55; background: radial-gradient(ellipse at center, var(--g) 0%, transparent 70%); }
.nu-glow i:nth-child(1) { --g: var(--g1); left: -20%; }
.nu-glow i:nth-child(2) { --g: var(--g2); left: 20%; }
.nu-glow i:nth-child(3) { --g: var(--g4); left: 60%; }
@media (prefers-reduced-motion: no-preference) {
  .nu-glow i:nth-child(1) { animation: nu-glow-1 26s ease-in-out infinite; }
  .nu-glow i:nth-child(2) { animation: nu-glow-2 34s ease-in-out infinite; }
  .nu-glow i:nth-child(3) { animation: nu-glow-3 42s ease-in-out infinite; }
}
/* The form's loops (ct-glow-1/2/3) flattened: the same timing, the travel
   mostly sideways so the ellipses stay in the band. */
@keyframes nu-glow-1 {
  0%, 100% { transform: translate(0, 0); opacity: .35; }
  30%  { transform: translate(35%, -18%); opacity: .75; }
  60%  { transform: translate(70%, 8%); opacity: .45; }
  80%  { transform: translate(25%, -28%); opacity: .7; } }
@keyframes nu-glow-2 {
  0%, 100% { transform: translate(0, 0); opacity: .7; }
  25%  { transform: translate(-40%, -22%); opacity: .3; }
  55%  { transform: translate(25%, -32%); opacity: .75; }
  80%  { transform: translate(50%, 6%); opacity: .4; } }
@keyframes nu-glow-3 {
  0%, 100% { transform: translate(0, 0); opacity: .45; }
  35%  { transform: translate(-55%, -28%); opacity: .75; }
  65%  { transform: translate(-90%, 2%); opacity: .3; }
  85%  { transform: translate(-30%, -20%); opacity: .7; } }

/* The old film: the template's own, drawn by nuance.js on this canvas (a few
   specks and now and then a scratch, six frames a second), fixed over the
   whole page, bar and footer included (Amélie, 6 Oct 2026). Nothing is drawn
   when motion is not welcome. */
.nu-film { position: fixed; z-index: 20; inset: 0; width: 100%; height: 100%; opacity: .35; pointer-events: none; }

/* The strip under the hero: the methodologies, moving; a red dot before
   each. Standing still (and wrapped) when motion is not welcome. */
.nu-marquee { overflow: hidden; display: flex; align-items: stretch; min-height: max(10vh, 64px); border-block: 1px solid var(--nu-rule); }
.nu-marquee__track { display: flex; flex-wrap: wrap; }
.nu-marquee ul { display: flex; flex-wrap: wrap; justify-content: center; }
.nu-marquee ul[aria-hidden] { display: none; }
.nu-marquee li { display: flex; align-items: center; gap: 16px; min-height: 64px; padding-inline: 24px; border-right: 1px solid var(--nu-rule); font: 500 28px/1.2 var(--font-serif); letter-spacing: -0.02em; white-space: nowrap; }
.nu-marquee li::before { content: ""; flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); }


/* -------------------------------------------------------------- sections -- */
.nu-section { padding-block: var(--nu-gap); border-bottom: 1px solid var(--nu-rule); }
.nu-in { max-width: 1440px; margin-inline: auto; padding-inline: var(--nu-inset); }
.nu-section h2 { font: 500 56px/60px var(--font-serif); letter-spacing: -0.02em; color: var(--display); }
.nu-head { margin-bottom: var(--nu-head); }
.nu-head h2 { max-width: 16em; }
.nu-head .nu-label + h2 { margin-top: var(--space-2); }
.nu-head__sub { margin-top: var(--space-3); max-width: 34em; font: 400 18px/30px var(--font-sans); color: var(--text-muted); }
.nu-head--center { text-align: center; }
.nu-head--center h2, .nu-head--center .nu-head__sub { margin-inline: auto; }

/* Cells that share their borders: the template's services grid. */
.nu-cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--nu-rule); }
.nu-cells li { position: relative; min-height: 325px; padding: var(--space-5) var(--space-5) var(--space-6); }
.nu-cells li + li { border-left: 1px solid var(--nu-rule); }
/* The glowing frame on hover, the site's common tile behaviour (Amélie,
   8 Oct 2026, first on Consulting's two ways in, then everywhere: the three
   situations here, the references and the Lab cards have their own copies
   in references.css and lab.css). The Nuance template's tool cards in the
   site's hue: under the cell a conic layer, a square wider than the cell's
   diagonal, the hue running round it (red, pale red, pink, blush, red); over
   it the cell's own white inset by 2px, so the hue shows as a 2px frame
   inside the hairline. It fades in on hover and keyboard focus and turns
   slowly, so the colour travels along the frame; still when motion is not
   welcome. Inside the frame the site's hover tint (--hover in scheme.css:
   her brand grey #f1f3f8 at a third, super subtle, Amélie, 8 Oct 2026),
   the same as the references
   and the FAQ rows. */
.nu-cells li { isolation: isolate; overflow: clip; background-color: var(--surface); }
.nu-cells li::before { content: ""; position: absolute; z-index: -2; top: 50%; left: 50%; width: 260%; aspect-ratio: 1; translate: -50% -50%; opacity: 0;
  background: conic-gradient(from 0deg, var(--red), var(--nu-red-pale), var(--pink), var(--blush), var(--red)); transition: opacity .3s ease-out; }
.nu-cells li::after { content: ""; position: absolute; z-index: -1; inset: 2px; background-color: var(--surface); transition: background-color .2s ease-out; }
.nu-cells li:hover::after, .nu-cells li:focus-within::after { background-color: var(--hover); }
.nu-cells li:hover::before, .nu-cells li:focus-within::before { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .nu-cells li:hover::before, .nu-cells li:focus-within::before { animation: nu-frame 8s linear infinite; }
}
@keyframes nu-frame { to { transform: rotate(1turn); } }
.nu-cells h3 { margin-top: var(--space-5); font: 500 28px/34px var(--font-serif); letter-spacing: -0.01em; }
.nu-cells h3 a { text-decoration: none; }
.nu-cells h3 a::after { content: ""; position: absolute; inset: 0; }
.nu-cells p { margin-top: var(--space-3); font: 400 17px/28px var(--font-sans); color: var(--text-muted); }
/* The situations with their outcome: seven rows shared by the three columns
   (number, title, description, then the hairline over "What changes", the
   outcome, the link), so the hairlines sit on one line. */
.nu-head--ink h2 { color: var(--text); }
.nu-head--ink h2 em { font-style: italic; font-weight: 400; color: var(--display); }
.nu-cells--outcome li { display: grid; grid-row: span 6; grid-template-rows: subgrid; align-content: start; min-height: 0; padding-bottom: var(--space-5); }
.nu-cells--outcome .nu-num { color: var(--text); }
.nu-cells--outcome p { margin-top: var(--space-3); }
.nu-cells--outcome .nu-cells__label { margin-top: var(--space-5); padding-top: var(--space-4); 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); }
.nu-cells--outcome .nu-cells__outcome { margin-top: var(--space-2); font: italic 400 28px/34px var(--font-serif); letter-spacing: -0.01em; color: var(--text); }
.nu-cells__link { justify-self: start; display: inline-flex; align-items: center; gap: 4px; margin-top: var(--space-4); 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; }
.nu-cells__link::before { content: ""; position: absolute; inset: 0; }
.nu-cells__link::after { content: ""; flex: none; width: 20px; height: 20px; background: var(--arrow) 0 0 / 20px 20px no-repeat; }
.nu-cells__link:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; }

/* The numeral in the template's icon frame: four corner ticks, no box. */
.nu-num { display: grid; place-items: center; width: 64px; height: 64px; font: 400 30px/1 var(--font-serif); color: var(--accent);
  --t: var(--text);
  background:
    linear-gradient(var(--t), var(--t)) left top / 8px 2px, linear-gradient(var(--t), var(--t)) left top / 2px 8px,
    linear-gradient(var(--t), var(--t)) right top / 8px 2px, linear-gradient(var(--t), var(--t)) right top / 2px 8px,
    linear-gradient(var(--t), var(--t)) left bottom / 8px 2px, linear-gradient(var(--t), var(--t)) left bottom / 2px 8px,
    linear-gradient(var(--t), var(--t)) right bottom / 8px 2px, linear-gradient(var(--t), var(--t)) right bottom / 2px 8px;
  background-repeat: no-repeat; box-shadow: inset 0 0 0 1px var(--nu-rule); }

/* The dark band: three cards a shade lighter than the ground. */
.nu-section--ink { background: var(--surface-ink); color: var(--on-ink); border-bottom: 0; }
.nu-section--ink h2 { color: var(--on-ink); }
.nu-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.nu-cards p { min-height: 240px; padding: var(--space-5); background: var(--nu-card-on-ink); font: 400 18px/30px var(--font-sans); }
/* Working with me: the head holds on the left while the
   four hairline rows pass; each row is a label, what I do, what you get. */
.nu-section--ink h2 em { font-style: italic; font-weight: 400; color: var(--red); }
.nu-section--ink .nu-eyebrow { color: color-mix(in srgb, var(--on-ink) 70%, transparent); }
.nu-inside { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-7); align-items: start; }
.nu-inside__head { position: sticky; top: calc(var(--nu-bar) + var(--space-5)); }
/* The other sticky heads of this layout (FAQ, Lab) start under the bar too. */
.nuance .qa__head-in, .nuance .lab--safe .lab__head-in { top: calc(var(--nu-bar) + 48px); }
.nu-inside__head h2 { margin-top: var(--space-3); text-wrap: balance; }
.nu-inside__intro { margin-top: var(--space-4); max-width: 24em; font: 400 18px/30px var(--font-sans); color: color-mix(in srgb, var(--on-ink) 80%, transparent); }
/* No rule under the last row: the closing line's own rule, full width, closes the band. */
.nu-inside + .nu-line { max-width: none; }
.nu-rows li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--space-4); padding-block: var(--space-5); border-top: 1px solid var(--nu-rule-on-ink); }
.nu-rows__label { padding-top: 8px; font: 500 12px/18px var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; color: color-mix(in srgb, var(--on-ink) 70%, transparent); }
.nu-rows h3 { font: 500 28px/34px var(--font-serif); letter-spacing: -0.01em; }
.nu-rows h3 + p { margin-top: var(--space-3); font: 400 17px/28px var(--font-sans); color: color-mix(in srgb, var(--on-ink) 80%, transparent); }
.nu-rows__get { margin-top: var(--space-4); font: italic 400 24px/30px var(--font-serif); }
.nu-rows__get span { display: block; margin-bottom: 4px; font: 500 12px/18px var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); }
@media (max-width: 980px) {
  .nu-inside { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .nu-inside__head { position: static; }
  .nu-inside__intro { font-size: 17px; line-height: 28px; }
  .nu-rows li { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); padding-block: var(--space-4); }
  .nu-rows__label { padding-top: 0; }
  .nu-rows h3 { font-size: 26px; line-height: 32px; }
}
.nu-line { margin-top: var(--nu-head); padding-top: var(--space-5); border-top: 1px solid var(--nu-rule-on-ink); max-width: 22em; font: 500 36px/44px var(--font-serif); letter-spacing: -0.01em; text-wrap: balance; }


/* The Nerve: the last three issues as rows in one ruled box. */
.nu-issues { max-width: 864px; margin-inline: auto; border: 1px solid var(--nu-rule); counter-reset: issue; }
.nu-issues li { display: flex; align-items: baseline; gap: var(--space-4); padding: var(--space-4) var(--space-5); }
.nu-issues li + li { border-top: 1px solid var(--nu-rule); }
.nu-issues h3 { font: 500 28px/34px var(--font-serif); letter-spacing: -0.01em; }
.nu-issues h3 a { text-decoration: none; }
.nu-signup { max-width: 560px; margin: var(--nu-head) auto 0; }
.nu-signup__more { margin-top: var(--space-5); }

/* Closing: the template's contact panel, flat in the lead colour, the form
   on a white card. The one rounded block of the page, as in the template. */
.nu-section--last { border-bottom: 0; }
.nu-contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6); align-items: center; padding: var(--space-6); background: var(--band); color: var(--on-band); border-radius: var(--radius-panel); }
.nu-contact__card { padding: var(--space-5); background: var(--surface); color: var(--text); border-radius: var(--radius-tile); }
.nu-contact__card .ab-email { display: none; }   /* the address is beside the card */
.nu-contact__text h2 { color: var(--on-band); max-width: 9em; }
.nu-contact__text p { margin-top: var(--space-4); font: 400 21px/32px var(--font-sans); }
.nu-contact__text p + p { margin-top: var(--space-2); }
.nu-contact__mail { font-weight: 500; text-underline-offset: 6px; }
.form-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }   /* the honeypot: off screen, and aria-hidden in the markup */
.form-error { border-left: 2px solid var(--rule-strong); padding-left: var(--space-3); }

/* ---------------------------------------------------------------- footer -- */
/* The template's footer in the header's idiom (Amélie, 7 Oct 2026). Body:
   content 120px in like every band, the statement left, the three header
   cells as three columns right, their names in the phone menu's eyebrow.
   Bar: the top bar mirrored, full width, ruled cells, the availability cell
   at the end. Thinner, statement at 32px, no coil (Amélie, 8 Oct 2026). */
.nu-footer { position: relative; isolation: isolate; overflow: hidden; background: var(--surface-ink); color: var(--on-ink);
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f1f3f8' stroke-width='2'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E"); }
.nu-footer__body { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-width: var(--nu-page); margin-inline: auto; padding: 64px var(--nu-inset) 64px; }
.nu-footer__lead { max-width: 560px; }
.nu-footer__name { font: 500 32px/40px var(--font-serif); letter-spacing: -0.02em; }
.nu-footer__line { font: 500 32px/40px var(--font-serif); letter-spacing: -0.02em; color: color-mix(in srgb, var(--on-ink) 42%, transparent); text-wrap: balance; }
.nu-footer__social { margin-top: 32px; }
.nu-footer__social ul { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.nu-footer__social a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: color-mix(in srgb, var(--on-ink) 10%, transparent); color: var(--on-ink); transition: background-color .2s ease-out; }
.nu-footer__social a:hover { background: color-mix(in srgb, var(--on-ink) 18%, transparent); }
.nu-footer__social svg { width: 18px; height: 18px; }
.nu-footer__facts { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-7); margin-top: 28px; }
.nu-footer__facts dd { margin: 6px 0 0; font: 400 18px/27px var(--font-sans); }
.nu-footer__facts a { text-decoration: none; }
.nu-footer__facts a:hover { text-decoration: underline; text-underline-offset: 6px; }
.nu-footer .nu-eyebrow { color: color-mix(in srgb, var(--on-ink) 70%, transparent); }
.nu-footer__nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); padding-left: 36px; }
.nu-footer__nav ul { margin-top: 10px; }
.nu-footer__nav a { display: inline-flex; align-items: center; gap: 6px; padding-block: 16px; font: 400 18px/27px var(--font-sans); text-decoration: none; white-space: nowrap; }
.nu-footer__nav a::after { content: ""; flex: none; width: 20px; height: 20px; background: var(--arrow) 0 0 / 20px 20px no-repeat; }
.nu-footer__nav a:hover { text-decoration: underline; text-underline-offset: 6px; }

.nu-footer__bar { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto var(--nu-side); min-height: var(--nu-bar); padding-inline: var(--nu-edge); border-top: 1px solid var(--nu-rule-on-ink); }
.nu-footer__company { display: flex; align-items: center; padding-inline: 20px; font: 400 15px/22px var(--font-sans); color: color-mix(in srgb, var(--on-ink) 70%, transparent); }
.nu-footer__cell { display: flex; align-items: center; padding-inline: 24px; border-left: 1px solid var(--nu-rule-on-ink); font: 400 16px/24px var(--font-sans); text-decoration: none; white-space: nowrap; transition: background-color .2s ease-out; }
a.nu-footer__cell:hover { background-color: var(--nu-card-on-ink); }
.nu-footer__bar .scheme { margin: 0; gap: var(--space-3); }
.nu-footer__avail { display: flex; align-items: center; justify-content: center; gap: 14px; padding-inline: var(--space-2); border-left: 1px solid var(--nu-rule-on-ink); font: 400 16px/24px var(--font-sans); text-decoration: none; white-space: nowrap; transition: background-color .2s ease-out; }
.nu-footer__avail:hover { background-color: var(--nu-card-on-ink); }
.nu-footer__avail i { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--nu-green); }
.nu-footer__avail i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--nu-green); }

/* ---------------------------------------------------------------- motion -- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .3s ease-out, transform .3s ease-out; }
  .js .reveal.is-in { opacity: 1; transform: none; }

  .ab-btn:hover::after, .nu-footer__nav a:hover::after { animation: nu-arrow .4s ease-in-out; }

  .nu-header__avail i::after, .nu-footer__avail i::after { animation: nu-pulse 2s ease-out infinite; }
  .nu-marquee__track { flex-wrap: nowrap; width: max-content; animation: nu-marquee 60s linear infinite; }
  .nu-marquee:hover .nu-marquee__track { animation-play-state: paused; }
  .nu-marquee ul, .nu-marquee ul[aria-hidden] { display: flex; flex-wrap: nowrap; }
}
@keyframes nu-pulse { from { transform: scale(1); opacity: .6; } 70%, to { transform: scale(3.2); opacity: 0; } }
@keyframes nu-arrow { 0% { background-position: 0 0; } 49% { background-position: 20px -20px; } 50% { background-position: -20px 20px; } 100% { background-position: 0 0; } }
@keyframes nu-marquee { to { transform: translateX(-50%); } }

/* ------------------------------------------------------------ 1240 down -- */
@media (max-width: 1240px) {
  :root { --nu-inset: 48px; --nu-gap: 96px; }
  .nu-header__avail { gap: 10px; font-size: 15px; }
  .nu-proof__n { font-size: 44px; }
  .nu-hero > .nu-glow { height: 127px; }
  .nu-marquee { min-height: 100px; }
  .nu-marquee li { font-size: 24px; }
  .nu-section h2 { font-size: 46px; line-height: 50px; }
  .nu-footer__name, .nu-footer__line { font-size: 28px; line-height: 36px; }
  .nu-footer__body { padding-block: 56px; }
  .nu-footer__nav { padding-left: 24px; }
  .nu-footer__nav a { font-size: 17px; }
  .nu-cells li, .nu-cards p { padding: var(--space-4); }
}

/* ---------------------------------------------------------------- mobile -- */
/* The bar keeps the name and a word, "Menu". The hero stacks: text, then
   the picture beside the three beats, as the template does. Cells stack and
   keep their shared rules. */
@media (max-width: 980px) {
  :root { --nu-inset: 24px; --nu-inset-hero: 24px; --nu-gap: 72px; --nu-head: var(--space-5); }
  .nu-header { flex-wrap: wrap; }
  .nu-header__main { display: contents; }
  .nu-header__name { border-right: 0; padding-inline: var(--nu-inset-hero); font-size: 22px; min-height: var(--nu-bar); }
  .nu-header__avail { display: none; }
  .nav-toggle { display: block; }
  .nu-nav { display: none; flex-basis: 100%; border-top: 1px solid var(--nu-rule); }
  .nu-nav.is-open { display: block; max-height: calc(100vh - var(--nu-bar)); overflow: auto; border-bottom: 1px solid var(--nu-rule); margin-bottom: -1px; }
  .nu-nav > ul { flex-direction: column; height: auto; }
  .nu-nav a, .nu-nav__group > ul a { min-height: 56px; padding-inline: var(--space-4); border-right: 0; border-bottom: 1px solid var(--nu-rule); font-size: 20px; }
  .nu-nav > ul > li:last-child > a { border-bottom: 0; }
  /* In the open menu a group is a small label over its two rows. */
  .nu-nav__group > button { width: 100%; height: auto; padding: var(--space-3) var(--space-4) var(--space-1); border-right: 0; pointer-events: none; font: 500 12px/18px var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
  .nu-nav__group > button::after { display: none; }
  /* In the open menu the group is only a label: the line goes to the row. */
  .nu-nav__group:has(a[aria-current]) > button { box-shadow: none; }
  .nu-nav__group > ul a[aria-current] { box-shadow: inset 0 -2px 0 var(--accent); }
  .nu-nav__group { display: block; }
  .nu-nav__group > ul { display: block; position: static; height: auto; min-width: 0; width: auto; margin: 0; }
  .nu-nav__group > ul li { border: 0; }
  .nu-nav__touch { display: block; }

  .nu-marquee { min-height: 64px; }
  .nu-hero > .nu-glow { height: 103px; }
  .nu-marquee li { min-height: 64px; font-size: 20px; }

  .nu-section h2 { font-size: 36px; line-height: 40px; }
  .nu-footer__name, .nu-footer__line { font-size: 26px; line-height: 32px; }
  .nu-cells, .nu-cards, .nu-contact, .nu-footer__body { grid-template-columns: minmax(0, 1fr); }
  .nu-cells li { min-height: 0; padding-bottom: var(--space-5); }
  .nu-cells li + li { border-left: 0; border-top: 1px solid var(--nu-rule); }
  .nu-cells h3 { margin-top: var(--space-4); }
  /* The three situations slide on a phone (Amélie, 9 Oct 2026): one box in
     view, the next one's edge showing past it, a swipe to the left brings
     it in; the scroll snaps box to box. Each box keeps its own hairline
     frame, the shared hairlines of the row are off. The track runs edge to
     edge so the peek goes past the inset; the boxes still start on it. No
     scrollbar, no dots. The subgrid of the desktop row does not apply here. */
  .nu-cells--outcome { display: flex; gap: var(--space-3); border: 0; margin-inline: calc(-1 * var(--nu-inset)); padding-inline: var(--nu-inset);
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--nu-inset); -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .nu-cells--outcome::-webkit-scrollbar { display: none; }
  .nu-cells--outcome::after { content: ""; flex: 0 0 calc(100% - min(86%, 420px) - var(--space-3)); }   /* room after the last box, so it lands on the inset like the others */
  /* The boxes share the tallest one's height; the description row takes the
     spare room, so the hairline, the outcome and the link sit at the bottom
     of every box, on one line across the swipe as they are on the desktop. */
  .nu-cells--outcome li { flex: 0 0 min(86%, 420px); grid-row: auto; grid-template-rows: auto auto 1fr auto auto auto; align-content: stretch; scroll-snap-align: start; border: 1px solid var(--nu-rule); }
  .nu-cells--outcome li + li { border-top: 1px solid var(--nu-rule); }
  .nu-cards { gap: var(--space-3); }
  .nu-cards p { min-height: 0; font-size: 17px; line-height: 28px; }
  .nu-line { font-size: 28px; line-height: 36px; }
  .nu-issues li { padding: var(--space-3) var(--space-4); }
  .nu-issues h3 { font-size: 22px; line-height: 28px; }
  .ab-signup { flex-direction: column; align-items: stretch; }
  .ab-signup .ab-btn { justify-content: center; }
  .nu-contact { gap: var(--space-5); padding: var(--space-4) var(--space-3); border-radius: var(--radius-tile); }
  .nu-contact__text { order: -1; padding-inline: var(--space-2); }
  .nu-contact__card { padding: var(--space-4); }
  .nu-contact__text p { font-size: 18px; line-height: 28px; }
  .nu-footer__body { padding: 48px var(--nu-inset) 40px; }
  .nu-footer__social { margin-top: 32px; }
  .nu-footer__facts { margin-top: 28px; gap: var(--space-4) var(--space-6); }
  .nu-footer__nav { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-5) var(--space-4); margin-top: 48px; padding-left: 0; }
  .nu-footer__nav a { padding-block: 10px; font-size: 17px; }
  .nu-footer__bar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-inline: 0; }
  .nu-footer__avail { order: -1; grid-column: 1 / -1; min-height: var(--nu-bar); border-left: 0; border-bottom: 1px solid var(--nu-rule-on-ink); }
  .nu-footer__bar .nu-footer__cell { min-height: var(--nu-bar); padding-inline: var(--nu-inset); border-left: 0; border-bottom: 1px solid var(--nu-rule-on-ink); }
  a.nu-footer__cell + a.nu-footer__cell { border-left: 1px solid var(--nu-rule-on-ink); }
  .nu-footer__bar .scheme { grid-column: 1 / -1; }
  .nu-footer__bar .scheme { border-bottom: 1px solid var(--nu-rule-on-ink); padding-inline: var(--nu-inset); min-height: var(--nu-bar); }
  .nu-footer__company { order: 10; grid-column: 1 / -1; min-height: var(--nu-bar); padding-inline: var(--nu-inset); }
}

/* ------------------------------------------------- hero, tablet and phone -- */
/* The template's own steps. Under 1200: the text keeps its half, 64px in,
   and starts 128px from the top of the page; the picture sits over the three
   figures. Under 810: text first (24px in, 100px from the top), then the
   picture beside the figures. */
@media (max-width: 1199px) {
  .nu-hero { min-height: 0; }
  .nu-hero h1 { font-size: min(52px, 15.2cqi); }
  .nu-hero__sub { max-width: none; font-size: 16px; line-height: 24px; }
  .ab-btn { font-size: 14px; line-height: 21px; }
  .nu-hero__more { display: contents; }
  .nu-hero__note { position: static; flex-basis: 100%; margin-top: -8px; white-space: normal; }
}
@media (min-width: 810px) and (max-width: 1199px) {
  .nu-hero { grid-template-columns: 50% 50%; grid-template-rows: minmax(0, 1fr) 150px; }
  .nu-hero__text { grid-row: 1 / -1; align-self: start; padding: calc(128px - var(--nu-bar)) 32px 72px 64px; }
  .nu-hero__media { border-right: 0; }
  .nu-proof { grid-template-rows: none; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--nu-rule); border-left: 1px solid var(--nu-rule); }
  .nu-proof li + li { border-top: 0; border-left: 1px solid var(--nu-rule); }
}
@media (max-width: 809px) {
  .nu-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .nu-hero__text { grid-column: 1 / -1; padding: calc(100px - var(--nu-bar)) 24px 32px; border-bottom: 1px solid var(--nu-rule); }
  .nu-eyebrow { font-size: 12px; line-height: 18px; }
  .nu-hero h1 { font-size: min(44px, 13cqi); }
  .nu-hero__media { min-height: 360px; border-left: 0; }
  /* The rows may grow with their label ("Working languages" takes two lines on a phone, brief round 3, H2): never clip a cell. */
  .nu-proof { grid-template-rows: repeat(3, 1fr); }
  .nu-proof li { min-height: 140px; padding: var(--space-3) var(--space-4); }
}