/* ==========================================================================
   NORILO SITE ENGINE — site.css
   Version 1.2.0 "Atelier II"
   --------------------------------------------------------------------------
   One stylesheet, one system.

   Two rules govern this file and explain most of its shape:

   1. NOTHING RELIES ON INHERITANCE FOR COLOUR.
      Kadence sets `h1..h6 { color:#1A202C }` and `p { color:#4A5568 }` at
      element specificity. Inheritance always loses to that. The 19/08 audit
      reported 24 "errors" which were all one bug: headings on the dark CTA
      panel rendered #1A202C on #111310 — a 1.1:1 contrast, invisible.
      Every text colour here is therefore stated explicitly.

   2. THE DARK CHAPTER IS A CHAPTER, NOT A STRIPE.
      Backgrounds change to mark a change of subject, never every 300px.

   Layer order
     01  Tokens            07  Shell
     02  Fonts             08  Section patterns
     03  Reset & base      09  Home
     04  Typography        10  Demonstrations
     05  Layout            11  Service & utility pages
     06  Motion            12  Responsive / reduced motion / print
   ========================================================================== */

/* ==========================================================================
   01 — TOKENS
   ========================================================================== */
:root {
  /* Ground. Near-white and warm: paper, not a white SaaS canvas. */
  --paper: #fbfaf7;
  --paper-2: #f2efe8;
  --paper-3: #e7e2d8;
  --surface: #ffffff;

  /* Ink. Deep, slightly green-black so it sits with the accent. */
  --ink: #0e0f0c;
  --ink-2: #16180f;
  --ink-3: #23261c;
  --body: #3d3f38;          /* body copy on paper — 9.6:1 */
  --muted: #5c5e55;         /* secondary copy on paper — 6.2:1 */
  --muted-soft: #67695f;    /* the lightest text allowed on paper — 4.9:1 on the band */

  /* On ink */
  --on-ink: #f6f4ee;
  --on-ink-body: #cfcdc3;   /* 9.9:1 on --ink */
  --on-ink-muted: #a6a49a;  /* 5.9:1 on --ink — the floor for dark surfaces */

  --line: rgba(14, 15, 12, .12);
  --line-2: rgba(14, 15, 12, .22);
  --line-ink: rgba(246, 244, 238, .18);

  /* Brand. One accent, used as punctuation. Ochre reads warm next to wood
     and workshop photography without turning the page into a mood board. */
  --accent: #b4541e;
  --accent-deep: #8c3f14;   /* 6.5:1 on the band — the accent used as text on light */
  --accent-on-ink: #d98a4f; /* 6.8:1 on ink — the accent used as text on dark */
  --accent-tint: #f6e9df;
  --on-accent: #ffffff;

  /* Signal. Incidents only, never decoration. Different hue family so it can
     never be mistaken for the brand colour. */
  --signal: #8e1f2f;
  --signal-tint: #f7e6e6;

  /* Type */
  --font: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: "Newsreader", ui-serif, "Iowan Old Style", Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Scale. Few sizes, strong contrast between them. */
  --t-display: clamp(2.9rem, 8.6vw, 8rem);
  --t-h1: clamp(2.5rem, 5.6vw, 4.9rem);
  --t-h2: clamp(2rem, 4vw, 3.5rem);
  --t-h3: clamp(1.32rem, 1.6vw, 1.75rem);
  --t-lead: clamp(1.12rem, 1.35vw, 1.42rem);
  --t-body: clamp(1.0625rem, .4vw + .95rem, 1.1875rem);
  --t-small: clamp(.95rem, .2vw + .9rem, 1rem);
  --t-label: .8125rem;      /* 13px — the legibility floor, never smaller */

  /* Space */
  --gutter: clamp(20px, 4vw, 64px);
  --max: 1400px;
  --max-text: 66ch;
  --section: clamp(88px, 9.5vw, 172px);
  --section-tight: clamp(64px, 6vw, 104px);

  /* Shape — one radius system: sharp editorial, pill for actions. */
  --r: 2px;
  --r-lg: 3px;
  --r-pill: 999px;
  --shadow: 0 1px 2px rgba(14, 15, 12, .04), 0 18px 44px rgba(14, 15, 12, .07);
  --shadow-lift: 0 2px 6px rgba(14, 15, 12, .06), 0 40px 80px rgba(14, 15, 12, .12);

  /* Motion — one easing, four durations. */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, .02, .25, 1);
  --d-micro: .26s;
  --d-text: .68s;
  --d-media: .95s;
  --d-chapter: .6s;

  --header-h: 76px;
}

/* ==========================================================================
   02 — FONTS
   Self-hosted, OFL, subset to the French charset. Instrument Sans is a
   variable face (400–700) in one 24 KB file; Newsreader is pinned to one
   optical size and one weight because it is used for accents only.
   Total: 56 KB for the whole typographic identity.
   ========================================================================== */
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-normal.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ==========================================================================
   03 — RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.6;
  font-feature-settings: "kern" 1, "liga" 1;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.nse-menu-open { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
::selection { background: var(--accent); color: var(--on-accent); }

.nse-main { overflow: clip; }

:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 3px;
  border-radius: 2px;
}
.nse-section-ink :where(a, button, summary):focus-visible,
.nse-footer :where(a, button):focus-visible,
.nse-demo-dark :where(a, button):focus-visible { outline-color: var(--on-ink); }

.nse-skip-link {
  position: fixed;
  left: 16px; top: -100px;
  z-index: 1200;
  padding: 13px 20px;
  background: var(--ink);
  color: var(--on-ink);
  font-size: var(--t-small);
  font-weight: 600;
  transition: top var(--d-micro) var(--ease);
}
.nse-skip-link:focus { top: 14px; }

.nse-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ==========================================================================
   04 — TYPOGRAPHY
   Every colour is explicit. No heading inherits its colour.
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .5em;
  color: var(--ink);
  font-weight: 600;
  text-wrap: balance;
}
h1, h2 { letter-spacing: -.035em; line-height: 1.02; }
h3, h4 { letter-spacing: -.02em; line-height: 1.2; }
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
h4 { font-size: 1.125rem; }

p, li, dd, figcaption, blockquote, td, th { color: var(--body); }
p { margin: 0 0 1em; max-width: var(--max-text); }
p:last-child { margin-bottom: 0; }
strong, b { color: var(--ink); font-weight: 600; }

.nse-display {
  font-size: var(--t-display);
  line-height: .92;
  letter-spacing: -.045em;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: .3em;
  text-wrap: balance;
}
.nse-lead {
  font-size: var(--t-lead);
  line-height: 1.45;
  letter-spacing: -.012em;
  color: var(--body);
  max-width: 46ch;
}
.nse-label, .nse-kicker {
  display: block;
  margin: 0 0 1.2em;
  font-size: var(--t-label);
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.nse-serif { font-family: var(--font-serif); font-weight: 400; letter-spacing: -.005em; }
.nse-num {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: .1em;
  color: var(--muted-soft);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.nse-accent { color: var(--accent-deep); }

/* Dark contexts restate every colour.
   NOT written with :where(). :where() has zero specificity, so `h2 { color }`
   at element specificity would beat it and the heading would render dark on
   dark — which is exactly the bug the 19/08 audit found. A plain descendant
   selector scores (0,1,1) and wins. */
.nse-final-cta h1, .nse-final-cta h2, .nse-final-cta h3, .nse-final-cta p,
.nse-final-cta .nse-label, .nse-final-cta .nse-kicker, .nse-final-cta .nse-num, .nse-final-cta a,
.nse-section-ink h1, .nse-section-ink h2, .nse-section-ink h3, .nse-section-ink h4, .nse-section-ink h5, .nse-section-ink h6,
.nse-footer h1, .nse-footer h2, .nse-footer h3, .nse-footer h4, .nse-footer h5, .nse-footer h6,
.nse-demo-dark h1, .nse-demo-dark h2, .nse-demo-dark h3, .nse-demo-dark h4, .nse-demo-dark h5, .nse-demo-dark h6,
.nse-final-cta h1, .nse-final-cta h2, .nse-final-cta h3 { color: var(--on-ink); }

.nse-section-ink p, .nse-section-ink li, .nse-section-ink dd, .nse-section-ink blockquote, .nse-section-ink figcaption,
.nse-footer p, .nse-footer li, .nse-footer dd, .nse-footer blockquote, .nse-footer figcaption,
.nse-demo-dark p, .nse-demo-dark li, .nse-demo-dark dd, .nse-demo-dark blockquote, .nse-demo-dark figcaption,
.nse-final-cta p, .nse-final-cta li { color: var(--on-ink-body); }

.nse-section-ink strong, .nse-section-ink b, .nse-footer strong, .nse-footer b, .nse-demo-dark strong, .nse-demo-dark b { color: var(--on-ink); }

.nse-section-ink .nse-label, .nse-section-ink .nse-kicker, .nse-section-ink .nse-num, .nse-section-ink small, .nse-section-ink cite,
.nse-footer .nse-label, .nse-footer .nse-kicker, .nse-footer .nse-num, .nse-footer small, .nse-footer cite,
.nse-demo-dark .nse-label, .nse-demo-dark .nse-kicker, .nse-demo-dark .nse-num, .nse-demo-dark small, .nse-demo-dark cite,
.nse-final-cta .nse-label, .nse-final-cta .nse-kicker, .nse-final-cta .nse-num, .nse-final-cta .nse-cta-note,
.nse-section-ink .nse-shead-index, .nse-footer .nse-shead-index, .nse-demo-dark .nse-shead-index,
.nse-final-cta .nse-shead-index { color: var(--on-ink-muted); }

.nse-section-ink .nse-lead, .nse-footer .nse-lead, .nse-demo-dark .nse-lead { color: var(--on-ink-body); }
/* Buttons carry their own ink; a blanket link colour here would repaint the
   primary button's label the same colour as its background. */
.nse-section-ink a:not(.nse-btn), .nse-footer a:not(.nse-btn),
.nse-demo-dark a:not(.nse-btn), .nse-final-cta a:not(.nse-btn) { color: var(--on-ink); }

/* Text sitting on a photograph always gets a scrim; never trust the image. */
.nse-on-media h1, .nse-on-media h2, .nse-on-media h3, .nse-on-media h4,
.nse-on-media p, .nse-on-media span, .nse-on-media strong, .nse-on-media a { color: #fff; }
.nse-on-media .nse-label, .nse-on-media .nse-kicker, .nse-on-media small, .nse-on-media .nse-num { color: rgba(255, 255, 255, .9); }

/* ==========================================================================
   05 — LAYOUT
   ========================================================================== */
.nse-container { width: min(100% - var(--gutter) * 2, var(--max)); margin-inline: auto; }
.nse-narrow { max-width: 840px; margin-inline: auto; }
.nse-measure { max-width: var(--max-text); }

.nse-section { position: relative; padding-block: var(--section); }
.nse-section-tight { padding-block: var(--section-tight); }
.nse-section-first { padding-top: calc(var(--header-h) + clamp(40px, 5vw, 72px)); }
.nse-section-band { background: var(--paper-2); }
.nse-section-ink { background: var(--ink); }

/* 12-column grid, used where a composition genuinely needs it. */
.nse-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 40px); }
.nse-c-4 { grid-column: span 4; }
.nse-c-5 { grid-column: span 5; }
.nse-c-6 { grid-column: span 6; }
.nse-c-7 { grid-column: span 7; }
.nse-c-8 { grid-column: span 8; }
.nse-c-12 { grid-column: 1 / -1; }
.nse-start-2 { grid-column-start: 2; }
.nse-start-6 { grid-column-start: 6; }
.nse-start-7 { grid-column-start: 7; }

.nse-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.nse-split-lead { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.nse-two-col { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.nse-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: clamp(28px, 3vw, 44px); }

/* Section opener. The rule and the index number do the work of a heading
   block without adding another type size. */
.nse-shead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .74fr); gap: clamp(24px, 4vw, 80px); align-items: end; margin-bottom: clamp(40px, 5vw, 76px); }
.nse-shead-solo { grid-template-columns: minmax(0, 1fr); }
.nse-shead h2 { margin-bottom: 0; max-width: 16ch; }
.nse-shead-note { color: var(--muted); max-width: 44ch; padding-bottom: .4em; margin: 0; }
.nse-shead-index { display: flex; align-items: center; gap: 14px; margin-bottom: 1.4em; font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: .1em; color: var(--muted-soft); }
.nse-shead-index::after { content: ""; flex: 1; height: 1px; background: var(--line); max-width: 160px; }
.nse-section-ink .nse-shead-index::after { background: var(--line-ink); }

/* ==========================================================================
   06 — BUTTONS, LINKS
   Three styles, used everywhere. Nothing else.
   ========================================================================== */
.nse-btn {
  --btn-bg: transparent;
  --btn-ink: var(--ink);
  --btn-line: var(--line-2);
  --btn-hover: var(--ink);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 54px;
  padding: 0 28px;
  border: 1px solid var(--btn-line);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-ink);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: -.005em;
  isolation: isolate;
  overflow: hidden;
  transition: color var(--d-micro) var(--ease), border-color var(--d-micro) var(--ease);
}
.nse-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-hover);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--d-micro) var(--ease-io);
}
.nse-btn:hover::before, .nse-btn:focus-visible::before { transform: scaleY(1); transform-origin: top; }
.nse-btn i { font-style: normal; transition: transform var(--d-micro) var(--ease); }
.nse-btn:hover i { transform: translateX(5px); }

.nse-btn-primary { --btn-bg: var(--ink); --btn-ink: var(--on-ink); --btn-line: var(--ink); --btn-hover: var(--accent-deep); }
.nse-btn-primary:hover, .nse-btn-primary:focus-visible { --btn-line: var(--accent-deep); color: #fff; }
.nse-btn-ghost:hover, .nse-btn-ghost:focus-visible { color: var(--on-ink); --btn-line: var(--ink); }
.nse-btn-small { min-height: 46px; padding-inline: 20px; }

.nse-section-ink .nse-btn-primary, .nse-footer .nse-btn-primary, .nse-on-media .nse-btn-primary {
  --btn-bg: var(--on-ink); --btn-ink: var(--ink); --btn-line: var(--on-ink); --btn-hover: var(--accent);
}
.nse-section-ink .nse-btn-primary:hover, .nse-footer .nse-btn-primary:hover, .nse-on-media .nse-btn-primary:hover { color: #fff; }
.nse-section-ink .nse-btn-ghost, .nse-on-media .nse-btn-ghost { --btn-ink: var(--on-ink); --btn-line: var(--line-ink); --btn-hover: var(--on-ink); }
.nse-section-ink .nse-btn-ghost:hover, .nse-on-media .nse-btn-ghost:hover { color: var(--ink); }

/* Text link: the rule draws in, the arrow leads. */
.nse-link, .nse-text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--ink);
  font-size: var(--t-small);
  font-weight: 600;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 calc(100% - 10px);
  background-repeat: no-repeat;
  transition: background-size var(--d-micro) var(--ease);
}
.nse-link:hover, .nse-text-link:hover { background-size: 100% 1px; }
.nse-link i, .nse-text-link i { font-style: normal; transition: transform var(--d-micro) var(--ease); }
.nse-link:hover i, .nse-text-link:hover i { transform: translateX(5px); }
.nse-section-ink .nse-link, .nse-footer .nse-link, .nse-on-media .nse-link,
.nse-section-ink .nse-text-link, .nse-footer .nse-text-link, .nse-final-cta .nse-link { color: var(--on-ink); }

/* Circular arrow — the third and last button style. */
.nse-round {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  flex: none;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  color: var(--ink);
  transition: background-color var(--d-micro) var(--ease), color var(--d-micro) var(--ease), transform var(--d-micro) var(--ease), border-color var(--d-micro) var(--ease);
}
.nse-round i { font-style: normal; }

.nse-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: var(--t-label);
  font-weight: 500;
  color: var(--body);
  background: var(--surface);
}
.nse-tag-accent { background: var(--accent-tint); border-color: transparent; color: var(--accent-deep); }
.nse-tag-signal { background: var(--signal-tint); border-color: transparent; color: var(--signal); }
.nse-tag-fiction {
  background: transparent;
  border-style: dashed;
  border-color: var(--line-2);
  color: var(--muted);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
}
.nse-on-media .nse-tag-fiction { border-color: rgba(255,255,255,.5); color: rgba(255,255,255,.92); }
.nse-tags { display: flex; flex-wrap: wrap; gap: 10px; }

/* ==========================================================================
   07 — MOTION
   Five families. One easing. Nothing loops.
     text   translateY(105%) behind a mask
     block  Y 20px + opacity
     media  clip open + scale settle
     hover  scale 1 -> 1.025 on media only
     cta    arrow translateX
   ========================================================================== */
[data-reveal] { --rv: calc(var(--i, 0) * 70ms); }
.nse-js [data-reveal]:not(.is-in) { opacity: 0; }
.nse-js [data-reveal="up"]:not(.is-in) { transform: translate3d(0, 20px, 0); }
.nse-js [data-reveal="scale"]:not(.is-in) { transform: scale(.97); }
.nse-js [data-reveal="mask"] { clip-path: inset(0); }
.nse-js [data-reveal="mask"]:not(.is-in) { opacity: 1; clip-path: inset(0 0 101% 0); }
.nse-js [data-reveal="media"] { overflow: hidden; }
.nse-js [data-reveal="media"]:not(.is-in) { opacity: 1; clip-path: inset(0 0 100% 0); }
.nse-js [data-reveal="media"] :where(img) { transform: scale(1.06); transition: transform var(--d-media) var(--ease) var(--rv); }
[data-reveal="media"].is-in :where(img) { transform: none; }
[data-reveal].is-in {
  opacity: 1;
  transform: none;
  clip-path: inset(0);
  transition: opacity var(--d-text) var(--ease) var(--rv),
              transform var(--d-text) var(--ease) var(--rv),
              clip-path var(--d-media) var(--ease-io) var(--rv);
}

/* Line-by-line heading reveal. site.js wraps the lines so the markup stays a
   plain, crawlable heading. */
.nse-lines { display: block; }
.nse-line { display: block; overflow: hidden; padding-bottom: .06em; }
.nse-line > i { display: block; font-style: inherit; transform: translate3d(0, 105%, 0); transition: transform var(--d-text) var(--ease) calc(var(--l, 0) * 80ms); }
.nse-lines.is-in .nse-line > i { transform: none; }

/* Group cascade without an attribute on every child. */
.nse-js .nse-stagger > * { opacity: 0; transform: translate3d(0, 20px, 0); }
.nse-stagger.is-in > * { opacity: 1; transform: none; transition: opacity var(--d-text) var(--ease), transform var(--d-text) var(--ease); }
.nse-stagger.is-in > *:nth-child(1) { transition-delay: 0ms; }
.nse-stagger.is-in > *:nth-child(2) { transition-delay: 80ms; }
.nse-stagger.is-in > *:nth-child(3) { transition-delay: 160ms; }
.nse-stagger.is-in > *:nth-child(4) { transition-delay: 240ms; }
.nse-stagger.is-in > *:nth-child(5) { transition-delay: 320ms; }
.nse-stagger.is-in > *:nth-child(6) { transition-delay: 400ms; }
.nse-stagger.is-in > *:nth-child(n+7) { transition-delay: 480ms; }

.nse-scroll-progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 1100; pointer-events: none; }
.nse-scroll-progress i { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; }

/* ==========================================================================
   07b — LE REPÈRE — the Norilo signature
   --------------------------------------------------------------------------
   Two corner brackets, one hairline thick, borrowed from a printer's register
   mark. They frame anything the studio wants read as *composed*: a project
   cover, a specimen, a demonstration.

   Why two corners and not four: four reads as a decorative border, two reads
   as an act of framing. It is the difference between ornament and intent.

   It costs one element and no image, it inherits its colour from context, and
   it draws itself in when its media is revealed.
   ========================================================================== */
.nse-reg {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  --reg: 26px;
  --reg-inset: 14px;
  --reg-color: rgba(255, 255, 255, .82);
}
.nse-reg::before, .nse-reg::after {
  content: "";
  position: absolute;
  width: var(--reg);
  height: var(--reg);
  border: 1px solid var(--reg-color);
  transition: inset var(--d-text) var(--ease), opacity var(--d-text) var(--ease);
}
.nse-reg::before { top: var(--reg-inset); left: var(--reg-inset); border-right: 0; border-bottom: 0; }
.nse-reg::after { bottom: var(--reg-inset); right: var(--reg-inset); border-left: 0; border-top: 0; }
.nse-reg-ink { --reg-color: var(--line-2); }

/* The brackets arrive after the media has opened, then settle. */
.nse-js [data-reveal="media"]:not(.is-in) .nse-reg::before,
.nse-js [data-reveal="media"]:not(.is-in) .nse-reg::after { opacity: 0; --reg-inset: 30px; }
[data-reveal="media"].is-in .nse-reg::before,
[data-reveal="media"].is-in .nse-reg::after {
  opacity: 1;
  transition: inset var(--d-media) var(--ease) .22s, opacity var(--d-text) var(--ease) .22s;
}
/* On hover the frame opens: the composition breathes rather than the image. */
a:hover > .nse-reg, .nse-work-media:hover .nse-reg, .nse-scene:hover .nse-reg { --reg-inset: 10px; }

/* The same mark, used inline as a brand punctuation. */
.nse-reg-inline {
  display: inline-block;
  width: 9px; height: 9px;
  margin-right: 10px;
  border: 1px solid currentColor;
  border-right: 0; border-bottom: 0;
  vertical-align: 2px;
  opacity: .8;
}

/* ==========================================================================
   07c — PAGE TRANSITION
   An exit wipe on internal navigation. Deliberately short (320 ms) and
   deliberately not a loader: it never waits for the next document, it only
   covers the moment the browser is repainting.
   Skipped entirely under reduced motion, on modified clicks and on anything
   leaving the site.
   ========================================================================== */
.nse-wipe {
  position: fixed;
  inset: 0;
  z-index: 1400;
  background: var(--ink);
  transform: scaleY(0);
  transform-origin: 50% 100%;
  pointer-events: none;
  display: grid;
  place-items: center;
}
.nse-wipe span {
  font-size: var(--t-label);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--on-ink-muted);
  opacity: 0;
}
.nse-wipe.is-out {
  transform: scaleY(1);
  transition: transform .32s var(--ease-io);
}
.nse-wipe.is-out span { opacity: 1; transition: opacity .2s var(--ease) .12s; }
.nse-wipe.is-in {
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform .42s var(--ease-io);
}

/* ==========================================================================
   07d — SCENE
   A framed composition that holds a piece of Norilo's own work. The digital
   object, not a stock photograph, is the proof on this site.
   ========================================================================== */
.nse-scene {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--paper-2);
}
.nse-scene img { width: 100%; display: block; }
.nse-scene-cap {
  position: absolute;
  left: 14px; bottom: 14px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  background: rgba(14, 15, 12, .62);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: var(--t-label);
  letter-spacing: .04em;
}

/* ==========================================================================
   08 — SHELL
   ========================================================================== */
.nse-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: height var(--d-micro) var(--ease), transform var(--d-chapter) var(--ease-io);
}
.nse-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  backdrop-filter: saturate(1.5) blur(16px);
  -webkit-backdrop-filter: saturate(1.5) blur(16px);
  border-bottom: 1px solid transparent;
  opacity: 0;
  transition: opacity var(--d-micro) var(--ease), border-color var(--d-micro) var(--ease);
}
.nse-header.is-scrolled { height: 62px; }
.nse-header.is-scrolled::before { opacity: 1; border-bottom-color: var(--line); }
.nse-header.is-hidden { transform: translate3d(0, -102%, 0); }

.nse-header-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; width: min(100% - var(--gutter) * 2, var(--max)); }
.nse-brand { display: inline-flex; align-items: center; min-height: 46px; color: var(--ink); }
.nse-brand-wordmark { display: inline-flex; align-items: baseline; gap: 8px; font-size: 1.06rem; font-weight: 600; letter-spacing: .02em; }
.nse-brand-wordmark em { font-style: normal; font-size: var(--t-label); font-weight: 500; letter-spacing: .2em; color: var(--muted); }

.nse-nav { display: flex; align-items: center; gap: 2px; }
.nse-nav > a, .nse-nav-dropdown > summary {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 46px;
  padding-inline: 16px;
  color: var(--body);
  font-size: var(--t-small);
  font-weight: 500;
  border-radius: var(--r-pill);
  transition: color var(--d-micro) var(--ease);
}
.nse-nav > a::after, .nse-nav-dropdown > summary::after {
  content: "";
  position: absolute;
  left: 16px; right: 16px; bottom: 10px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--d-micro) var(--ease);
}
.nse-nav > a:hover, .nse-nav-dropdown > summary:hover { color: var(--ink); }
.nse-nav > a:hover::after { transform: scaleX(1); }
.nse-nav > a[aria-current="page"] { color: var(--ink); }
.nse-nav > a[aria-current="page"]::after { transform: scaleX(1); background: var(--accent); }
.nse-nav-dropdown.is-current > summary { color: var(--ink); }
.nse-nav-dropdown.is-current > summary::after { transform: scaleX(1); background: var(--accent); }

.nse-nav-dropdown { position: relative; }
.nse-nav-dropdown > summary { list-style: none; cursor: pointer; }
.nse-nav-dropdown > summary::-webkit-details-marker { display: none; }
.nse-nav-dropdown > summary::before {
  content: "";
  width: 5px; height: 5px;
  order: 2;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--d-micro) var(--ease);
}
.nse-nav-dropdown[open] > summary::before { transform: translateY(1px) rotate(-135deg); }
.nse-nav-popover {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  translate: -50% 0;
  width: min(92vw, 400px);
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lift);
  animation: nse-pop var(--d-micro) var(--ease) both;
}
@keyframes nse-pop { from { opacity: 0; transform: translate3d(0, -8px, 0); } }
.nse-nav-popover a { display: block; padding: 12px 14px; border-radius: var(--r); transition: background-color var(--d-micro) var(--ease); }
.nse-nav-popover a:hover { background: var(--paper-2); }
.nse-nav-popover a strong { display: block; font-size: var(--t-small); font-weight: 600; color: var(--ink); }
.nse-nav-popover a small { display: block; margin-top: 3px; font-size: var(--t-label); color: var(--muted); }
.nse-nav-popover a[aria-current="page"] { background: var(--accent-tint); }
.nse-nav-group-label { display: block; padding: 10px 14px 6px; font-size: var(--t-label); font-weight: 600; letter-spacing: .13em; color: var(--muted-soft); }
.nse-nav-group-label.is-protection { margin-top: 6px; border-top: 1px solid var(--line); }

.nse-header-actions { display: flex; align-items: center; gap: 12px; }
.nse-menu-toggle {
  display: none;
  width: 48px; height: 48px;
  align-items: center; justify-content: center; flex-direction: column;
  gap: 5px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--surface);
}
.nse-menu-toggle span { display: block; width: 18px; height: 1.5px; background: var(--ink); transition: transform var(--d-micro) var(--ease); }
.nse-menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.nse-menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

/* Full-screen mobile menu, numbered, thumb-reachable. */
.nse-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  flex-direction: column;
  /* Nine entries plus a CTA do not fit under `flex-end` on a small phone: the
     first links end up above the viewport and become unreachable. Start from
     the top and let the panel scroll. */
  justify-content: flex-start;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: calc(var(--header-h) + 12px) max(var(--gutter), env(safe-area-inset-right, 0px)) max(28px, env(safe-area-inset-bottom, 0px)) max(var(--gutter), env(safe-area-inset-left, 0px));
  background: var(--ink);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--d-chapter) var(--ease), visibility 0s linear var(--d-chapter);
}
.nse-mobile-menu.is-open { visibility: visible; opacity: 1; transition-delay: 0s; }
.nse-mobile-menu nav { display: flex; flex-direction: column; }
.nse-mobile-menu nav a {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 6px 0;
  border-top: 1px solid var(--line-ink);
  color: var(--on-ink);
  font-size: clamp(1.22rem, 4.8vw, 1.6rem);
  font-weight: 500;
  letter-spacing: -.03em;
  opacity: 0;
  transform: translate3d(0, 18px, 0);
}
.nse-mobile-menu.is-open nav a, .nse-mobile-menu.is-open .nse-mobile-menu-foot { opacity: 1; transform: none; transition: opacity var(--d-micro) var(--ease) calc(var(--i, 0) * 40ms + 80ms), transform var(--d-text) var(--ease) calc(var(--i, 0) * 40ms + 80ms); }
/* Service entries are a level down: smaller, so a long label such as
   "Google Business & Maps" stays on one line. */
.nse-mobile-menu nav a.is-service { font-size: clamp(1rem, 3.9vw, 1.18rem); min-height: 50px; color: var(--on-ink-body); }
.nse-mobile-menu nav a em { font-style: normal; font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: .1em; color: var(--on-ink-muted); }
.nse-mobile-menu nav a i { font-style: normal; font-size: 1rem; color: var(--on-ink-muted); }
.nse-mobile-menu nav a[aria-current="page"] { color: var(--accent-on-ink); }
.nse-mobile-menu nav a[aria-current="page"] em { color: var(--accent-on-ink); }
.nse-js .nse-mobile-menu-foot { opacity: 0; transform: translate3d(0, 18px, 0); }
.nse-mobile-menu-foot { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.nse-mobile-menu-foot .nse-btn { flex: 1 1 auto; }

/* Footer: the wordmark closes the page. */
.nse-footer { position: relative; padding-top: clamp(72px, 8vw, 120px); padding-bottom: max(28px, env(safe-area-inset-bottom, 0px)); background: var(--ink); }
.nse-footer-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, .8fr)); gap: clamp(30px, 3.5vw, 64px); padding-bottom: clamp(48px, 5vw, 84px); }
.nse-footer-brand { max-width: 34ch; }
.nse-footer-brand .nse-brand { color: var(--on-ink); margin-bottom: 20px; }
.nse-footer-brand .nse-brand-wordmark em { color: var(--on-ink-muted); }
.nse-footer-brand p { font-size: var(--t-small); margin-bottom: 22px; }
.nse-footer nav { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.nse-footer nav strong { margin-bottom: 16px; font-size: var(--t-label); font-weight: 600; letter-spacing: .14em; color: var(--on-ink-muted); }
/* 44px tall and padded so the audit's touch-target rule passes on the real
   footer links, not only in theory. */
.nse-footer nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 4px 10px 4px 0; font-size: var(--t-small); color: var(--on-ink-body); transition: color var(--d-micro) var(--ease); }
.nse-footer nav a:hover { color: var(--on-ink); }
.nse-footer-wordmark {
  display: block;
  margin: 0 auto;
  padding-bottom: clamp(20px, 2vw, 34px);
  font-size: clamp(3.6rem, 15.5vw, 14rem);
  line-height: .8;
  font-weight: 600;
  letter-spacing: -.055em;
  text-align: center;
  color: rgba(246, 244, 238, .06);
  user-select: none;
}
.nse-footer-bottom { display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between; padding-top: 24px; border-top: 1px solid var(--line-ink); font-size: var(--t-label); color: var(--on-ink-muted); }
.nse-footer-bottom a { color: var(--on-ink-muted); min-height: 44px; display: inline-flex; align-items: center; }
.nse-footer-bottom a:hover { color: var(--on-ink); }

.nse-dev-build-badge {
  position: fixed; left: 50%; top: 8px; translate: -50% 0; z-index: 1300;
  display: inline-flex; align-items: center; gap: 8px;
  max-width: 92vw; padding: 6px 14px;
  border-radius: var(--r-pill); background: var(--ink); color: var(--on-ink);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; pointer-events: none;
}
.nse-dev-build-badge i { width: 6px; height: 6px; border-radius: 50%; background: #7fdc8a; }

/* ==========================================================================
   09 — HOME
   ========================================================================== */

/* Hero: one message, one photograph, one action.
   The type runs the full width of the grid because a display size this large
   cannot share a row with an image without breaking into four ragged lines.
   The photograph follows immediately, full-bleed — the page opens on words
   and lands on an image. */
.nse-hero { padding-bottom: 0; }
.nse-hero-title { max-width: 18ch; margin-bottom: clamp(28px, 3.4vw, 52px); }
.nse-hero-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(20px, 4vw, 64px);
  align-items: end;
  padding-bottom: clamp(36px, 4.5vw, 72px);
}
.nse-hero-row .nse-lead { max-width: 40ch; margin: 0; }
.nse-hero-row .nse-actions { margin: 0; }
.nse-hero-band { position: relative; margin: 0; overflow: hidden; }
.nse-hero-band img { width: 100%; display: block; }
/* One <picture> with media-scoped sources: a 21:9 band is unreadable on a
   phone, and two stacked elements would make the browser fetch both crops. */
.nse-hero-band figcaption {
  position: absolute;
  left: var(--gutter); bottom: 22px;
  max-width: 34ch;
  padding: 10px 16px;
  background: rgba(14, 15, 12, .58);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: var(--t-label);
  letter-spacing: .01em;
}
.nse-hero-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px clamp(24px, 4vw, 56px);
  align-items: baseline;
  margin-top: clamp(24px, 2.6vw, 36px);
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: var(--t-small);
  color: var(--muted);
}
.nse-hero-foot b { color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------------------------
   SPECIMENS — the studio's own work as the hero object
   Three miniature sites, built in HTML rather than screenshotted: they stay
   sharp at any pixel density, they weigh nothing, and each one carries the
   real palette and typography of the demonstration it links to. This is the
   proof a web studio should lead with.
   -------------------------------------------------------------------------- */
/* The rail owns the full width; the grid inside keeps the page gutters.
   Bleeding out of .nse-container with negative margins made the container
   itself measure wider than the viewport. */
.nse-specimens-rail { width: 100%; }
.nse-specimens {
  width: min(100% - var(--gutter) * 2, var(--max));
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 28px);
  margin-top: clamp(36px, 4.5vw, 68px);
  perspective: 1600px;
}
.nse-spec {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--spec-bg);
  box-shadow: var(--shadow);
  transform: translate3d(0, var(--spec-y, 0px), 0);
  transition: transform var(--d-text) var(--ease), box-shadow var(--d-text) var(--ease);
}
.nse-spec:hover { box-shadow: var(--shadow-lift); }
.nse-spec-chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--spec-line);
  background: var(--spec-chrome);
}
.nse-spec-chrome i { width: 6px; height: 6px; border-radius: 50%; background: var(--spec-line); }
.nse-spec-chrome em {
  margin-left: 8px;
  font-style: normal;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--spec-muted);
}
.nse-spec-body { display: block; padding: clamp(18px, 2vw, 28px); min-height: clamp(190px, 20vw, 260px); }
.nse-spec-eyebrow {
  display: block;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--spec-accent);
}
.nse-spec-title {
  display: block;
  font-size: clamp(1.05rem, 1.5vw, 1.45rem);
  line-height: 1.12;
  letter-spacing: -.03em;
  font-weight: 600;
  color: var(--spec-ink);
  margin-bottom: 16px;
  max-width: 16ch;
}
.nse-spec-title em { font-style: italic; color: var(--spec-muted); }
.nse-spec-cta {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 14px;
  border-radius: var(--spec-radius);
  background: var(--spec-accent);
  color: var(--spec-on-accent);
  font-size: 12px;
  font-weight: 600;
}
.nse-spec-rule { display: block; height: 1px; margin: 18px 0 12px; background: var(--spec-line); }
.nse-spec-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.nse-spec-meta b { font-size: 12px; font-weight: 500; letter-spacing: .06em; color: var(--spec-muted); }
.nse-spec .nse-reg { --reg-inset: 10px; --reg: 18px; --reg-color: var(--spec-line); }

/* Each miniature carries its destination's real palette. */
.nse-spec-solis  { --spec-bg:#f7f3ec; --spec-chrome:#fffdf9; --spec-line:rgba(28,23,16,.18); --spec-ink:#1c1710; --spec-muted:#6d6459; --spec-accent:#9a5a24; --spec-on-accent:#fff; --spec-radius:2px; }
.nse-spec-moreau { --spec-bg:#faf8f3; --spec-chrome:#fff;    --spec-line:rgba(22,21,15,.16); --spec-ink:#16150f; --spec-muted:#6a6759; --spec-accent:#16150f; --spec-on-accent:#faf8f3; --spec-radius:0; }
.nse-spec-moreau .nse-spec-title { font-family: var(--font-serif); font-weight: 400; letter-spacing: -.015em; }
.nse-spec-octave { --spec-bg:#eef0ee; --spec-chrome:#fff;    --spec-line:rgba(19,29,25,.18); --spec-ink:#131d19; --spec-muted:#5c6863; --spec-accent:#1d4a40; --spec-on-accent:#fff; --spec-radius:2px; }

.nse-specimens-cap { margin-top: clamp(18px, 2vw, 26px); font-size: var(--t-small); color: var(--muted); max-width: 62ch; }
.nse-swipe-hint { display: none; }
@media (max-width: 900px) { .nse-swipe-hint { display: inline-flex; align-items: center; gap: 7px; margin-right: 10px; font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-deep); } .nse-swipe-hint::after { content: "→"; } }

/* Manifesto: the one place a large serif statement is allowed. */
.nse-manifesto-line {
  font-size: clamp(1.6rem, 3.2vw, 2.9rem);
  line-height: 1.24;
  letter-spacing: -.02em;
  color: var(--ink);
  max-width: 22ch;
  margin: 0;
}
.nse-manifesto-line em { font-style: italic; color: var(--accent-deep); }
.nse-manifesto-foot {
  display: grid;
  grid-template-columns: minmax(0, .34fr) minmax(0, .66fr);
  gap: clamp(20px, 3vw, 48px);
  margin-top: clamp(40px, 4.5vw, 72px);
  padding-top: clamp(24px, 2.6vw, 36px);
  border-top: 1px solid var(--line);
}
.nse-manifesto-foot p { color: var(--muted); max-width: 52ch; margin: 0; }

/* Works: an editorial sequence, not a grid of equal cards. */
.nse-works .nse-container + .nse-work { margin-top: clamp(24px, 3vw, 44px); }
.nse-work-media {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--paper-3);
}
.nse-work-media img { width: 100%; transition: transform var(--d-media) var(--ease); }
.nse-work-media:hover img { transform: scale(1.025); }
.nse-work-flag { position: absolute; top: 18px; left: 18px; background: rgba(14,15,12,.62); border-color: rgba(255,255,255,.42); color: #fff; backdrop-filter: blur(6px); }
.nse-work-lead .nse-work-media { width: min(100% - var(--gutter) * 2, 1560px); margin-inline: auto; aspect-ratio: 16 / 9; }
.nse-work-meta {
  display: grid;
  grid-template-columns: minmax(0, .34fr) minmax(0, .46fr) auto;
  gap: clamp(18px, 3vw, 48px);
  align-items: start;
  margin-top: clamp(20px, 2.4vw, 32px);
}
.nse-work-meta h3 { margin: .3em 0 .15em; font-size: clamp(1.5rem, 2.4vw, 2.2rem); letter-spacing: -.03em; }
.nse-work-meta > div > p { color: var(--muted); font-size: var(--t-small); margin: 0; }
.nse-work-note { color: var(--muted); font-size: var(--t-small); margin: 0; }
.nse-work-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 56px); margin-top: clamp(48px, 6vw, 96px); }
.nse-work-side .nse-work-media { aspect-ratio: 4 / 5; }
.nse-work-side .nse-work-meta { grid-template-columns: minmax(0, 1fr); gap: 14px; }

/* Trades: four real activities, plainly labelled as illustration. */
.nse-trade-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); margin: 0; padding: 0; list-style: none; }
.nse-trade-row figure { margin: 0; }
.nse-trade-row picture { display: block; overflow: hidden; }
.nse-trade-row img { width: 100%; transition: transform var(--d-media) var(--ease); }
.nse-trade-row figure:hover img { transform: scale(1.025); }
.nse-trade-row figcaption { margin-top: 12px; font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.nse-trade-note { margin-top: clamp(24px, 3vw, 40px); color: var(--muted); font-size: var(--t-small); }

/* Services accordion. Native <details name> so only one opens, with no JS. */
.nse-accordion { border-top: 1px solid var(--line); }
.nse-accordion details { border-bottom: 1px solid var(--line); }
.nse-accordion summary {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto 28px;
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
  min-height: 88px;
  padding: 18px 0;
  cursor: pointer;
  list-style: none;
  transition: padding-inline var(--d-micro) var(--ease), color var(--d-micro) var(--ease);
}
.nse-accordion summary::-webkit-details-marker { display: none; }
.nse-accordion summary:hover { padding-inline: 14px; }
.nse-accordion-title { font-size: clamp(1.3rem, 2.2vw, 1.95rem); font-weight: 500; letter-spacing: -.03em; color: var(--ink); }
.nse-accordion-price { font-size: var(--t-small); color: var(--muted); white-space: nowrap; }
.nse-accordion-sign { position: relative; width: 14px; height: 14px; justify-self: end; }
.nse-accordion-sign::before, .nse-accordion-sign::after {
  content: ""; position: absolute; inset: 50% 0 auto 0; height: 1.5px; background: var(--ink);
  transition: transform var(--d-micro) var(--ease);
}
.nse-accordion-sign::after { transform: rotate(90deg); }
.nse-accordion details[open] .nse-accordion-sign::after { transform: rotate(0deg); }
.nse-accordion-body { padding: 0 0 30px; max-width: 62ch; }
.nse-accordion summary ~ .nse-accordion-body { animation: nse-acc var(--d-chapter) var(--ease) both; }
@keyframes nse-acc { from { opacity: 0; transform: translateY(-6px); } }
.nse-accordion-body ul { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 8px; }
.nse-accordion-body li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; font-size: var(--t-small); color: var(--muted); }
.nse-accordion-body li::before { content: "—"; color: var(--accent); }

/* The dark chapter: method, with the step list scrolling past a fixed column. */
.nse-method-layout { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.nse-method-aside { position: sticky; top: calc(var(--header-h) + clamp(24px, 5vh, 64px)); }
.nse-method-aside h2 { max-width: 14ch; }
.nse-method-aside p { max-width: 40ch; }
.nse-steps { display: grid; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.nse-steps li {
  position: relative;
  display: grid;
  grid-template-columns: clamp(64px, 8vw, 116px) minmax(0, 1fr);
  gap: clamp(16px, 2.4vw, 36px);
  padding: clamp(28px, 3.4vw, 46px) 0;
  border-top: 1px solid var(--line-ink);
  align-items: start;
  transition: opacity var(--d-chapter) var(--ease);
}
.nse-steps li:last-child { border-bottom: 1px solid var(--line-ink); }
.nse-steps-num {
  font-family: var(--font-mono);
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  line-height: 1;
  letter-spacing: -.04em;
  color: rgba(246, 244, 238, .58);
  transition: color var(--d-chapter) var(--ease);
}
.nse-steps li.is-current .nse-steps-num { color: var(--accent-on-ink); }
.nse-steps h3 { margin-bottom: .4em; }
.nse-steps p { margin: 0; max-width: 44ch; }

/* Pricing */
.nse-price-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.nse-price-card { display: flex; flex-direction: column; gap: 16px; padding: clamp(28px, 3.2vw, 52px); background: var(--paper); }
.nse-price-card.is-featured { background: var(--surface); }
.nse-price-label { margin: 0; font-size: var(--t-label); font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.nse-price-amount { margin: 0; font-size: clamp(2.8rem, 5.4vw, 4.6rem); line-height: .92; letter-spacing: -.045em; font-weight: 500; color: var(--ink); }
.nse-price-amount sup { font-size: .28em; font-weight: 500; letter-spacing: 0; top: -1.5em; margin-left: .3em; color: var(--muted); }
.nse-price-desc { font-size: var(--t-small); color: var(--muted); margin: 0; }
.nse-price-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.nse-price-list li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; font-size: var(--t-small); color: var(--body); }
.nse-price-list li::before { content: "—"; color: var(--accent); }
.nse-price-card .nse-btn { margin-top: auto; align-self: flex-start; }
.nse-price-extras { display: flex; flex-wrap: wrap; gap: 12px 14px; margin-top: 26px; }
.nse-price-extras span { display: inline-flex; align-items: baseline; gap: 8px; padding: 10px 18px; border: 1px solid var(--line); border-radius: var(--r-pill); font-size: var(--t-small); color: var(--muted); }
.nse-price-extras b { color: var(--ink); font-weight: 600; }

/* FAQ */
.nse-faq-list { border-top: 1px solid var(--line); }
.nse-faq-list details { border-bottom: 1px solid var(--line); }
.nse-faq-list summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 72px; padding: 16px 0; cursor: pointer; list-style: none;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem); font-weight: 500; letter-spacing: -.02em; color: var(--ink);
  transition: color var(--d-micro) var(--ease);
}
.nse-faq-list summary::-webkit-details-marker { display: none; }
.nse-faq-list summary:hover { color: var(--accent-deep); }
.nse-faq-list summary::after {
  content: ""; flex: none; width: 14px; height: 14px;
  background: linear-gradient(currentColor, currentColor) center/100% 1.5px no-repeat,
              linear-gradient(currentColor, currentColor) center/1.5px 100% no-repeat;
  transition: transform var(--d-micro) var(--ease);
}
.nse-faq-list details[open] summary::after { transform: rotate(135deg); }
.nse-faq-list details > :not(summary) { padding-bottom: 26px; max-width: 62ch; color: var(--muted); }

/* Monumental closing CTA */
.nse-cta { text-align: left; }
.nse-cta-title { font-size: clamp(2.4rem, 6.4vw, 5.6rem); line-height: .96; letter-spacing: -.045em; max-width: 15ch; margin-bottom: .5em; }
.nse-cta-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(24px, 4vw, 64px); align-items: end; padding-top: clamp(28px, 3vw, 44px); border-top: 1px solid var(--line-ink); }
.nse-cta-foot p { max-width: 46ch; margin: 0; }

/* ==========================================================================
   10 — DEMONSTRATIONS
   Three fictional sites. Each owns its palette, its type treatment and its
   structure, scoped under .nse-demo-*. They must never read as the same
   template recoloured, and never be mistakable for a real Norilo client.
   ========================================================================== */

/* Return bar: sits under the fixed Norilo header, never competing with it. */
.nse-demo-bar {
  position: relative;
  z-index: 5;
  margin-top: var(--header-h);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 18px;
  padding: 12px max(var(--gutter), env(safe-area-inset-left, 0px));
  background: var(--ink);
  color: var(--on-ink);
  font-size: var(--t-label);
}
.nse-demo-bar a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--on-ink); font-weight: 500; }
.nse-demo-bar a.nse-demo-bar-cta { padding: 11px 18px; border-radius: var(--r-pill); background: var(--on-ink); color: var(--ink); }
.nse-demo-bar > span { display: inline-flex; align-items: center; gap: 9px; color: var(--on-ink-muted); text-transform: uppercase; letter-spacing: .13em; }
.nse-demo-bar > span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-on-ink); }

.nse-demo { position: relative; background: var(--d-bg); color: var(--d-body); font-family: var(--d-font, var(--font)); }
.nse-demo-shell { width: min(100% - var(--gutter) * 2, var(--d-max, 1280px)); margin-inline: auto; }
.nse-demo h1, .nse-demo h2, .nse-demo h3, .nse-demo h4 { color: var(--d-ink); }
.nse-demo p, .nse-demo li, .nse-demo span, .nse-demo figcaption { color: var(--d-body); }
.nse-demo section { padding-block: clamp(64px, 7vw, 128px); }
.nse-demo-eyebrow { display: block; margin-bottom: 1.1em; font-size: var(--t-label); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--d-accent-text, var(--d-accent)); }
.nse-demo-nav { position: relative; z-index: 6; padding-block: 16px; border-bottom: 1px solid var(--d-line); }
.nse-demo-nav .nse-demo-shell { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.nse-demo-brand { display: inline-flex; align-items: center; min-height: 44px; font-size: 1.06rem; letter-spacing: .16em; font-weight: 500; color: var(--d-ink); }
.nse-demo-brand b { font-weight: 700; }
.nse-demo-nav nav { display: flex; gap: 4px 26px; }
.nse-demo-nav nav a { min-height: 44px; display: inline-flex; align-items: center; font-size: var(--t-small); color: var(--d-body); }
.nse-demo-nav nav a:hover { color: var(--d-ink); }
.nse-demo-cta {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 0 22px;
  border-radius: var(--d-radius, 999px);
  background: var(--d-accent); color: var(--d-on-accent);
  font-size: var(--t-small); font-weight: 600;
  transition: filter var(--d-micro) var(--ease);
}
.nse-demo-cta:hover { filter: brightness(1.09); }
.nse-demo-cta i { font-style: normal; transition: transform var(--d-micro) var(--ease); }
.nse-demo-cta:hover i { transform: translateX(4px); }
.nse-demo-cta-lg { min-height: 60px; padding-inline: 32px; font-size: var(--t-body); }
.nse-demo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: clamp(24px, 3vw, 36px); }
.nse-demo-note, .nse-demo-placeholder { font-size: var(--t-label); color: var(--d-muted, var(--d-body)); }
.nse-demo-placeholder {
  margin-top: 22px; padding: 16px 20px;
  border: 1px dashed var(--d-line-strong, var(--d-line));
  max-width: 78ch; line-height: 1.55;
}
.nse-demo-placeholder b { color: var(--d-ink); }

/* Full-bleed cover with a guaranteed scrim: text over a photograph never
   depends on how bright that photograph happens to be. */
.nse-demo .nse-demo-cover { position: relative; padding-block: clamp(96px, 14vw, 200px) clamp(40px, 5vw, 72px); overflow: hidden; }
.nse-demo-cover-media { position: absolute; inset: 0; z-index: 0; }
.nse-demo-cover-media img { width: 100%; height: 100%; object-fit: cover; }
.nse-demo-cover::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(10,8,6,.72) 0%, rgba(10,8,6,.46) 46%, rgba(10,8,6,.86) 100%);
}
.nse-demo-cover-inner, .nse-demo-cover .nse-demo-facts { position: relative; z-index: 2; }
.nse-demo-cover h1 { font-size: clamp(2.6rem, 7vw, 5.6rem); line-height: .96; letter-spacing: -.04em; margin-bottom: .3em; }
.nse-demo-cover p { max-width: 44ch; font-size: var(--t-lead); }
.nse-demo-facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 40px);
  margin: clamp(48px, 7vw, 110px) auto 0; padding: 0; list-style: none;
  border-top: 1px solid rgba(255,255,255,.24); padding-top: 24px;
}
.nse-demo-facts b { display: block; font-size: var(--t-body); font-weight: 600; margin-bottom: 3px; }
.nse-demo-facts span { font-size: var(--t-small); }

.nse-demo-craft-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: clamp(20px, 4vw, 72px); align-items: end; margin-bottom: clamp(32px, 4vw, 56px); }
.nse-demo-craft-head p { max-width: 46ch; margin: 0; }
.nse-demo-craft-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); }
.nse-demo-craft-grid figure { margin: 0; }
.nse-demo-craft-grid picture { display: block; overflow: hidden; }
.nse-demo-craft-grid img { width: 100%; transition: transform var(--d-media) var(--ease); }
.nse-demo-craft-grid figure:hover img { transform: scale(1.025); }
.nse-demo-craft-grid figcaption { margin-top: 14px; }
.nse-demo-craft-grid figcaption b { display: block; font-size: var(--t-body); font-weight: 600; color: var(--d-ink); margin-bottom: 4px; }
.nse-demo-craft-grid figcaption span { font-size: var(--t-small); }

.nse-demo-jobs { margin-top: clamp(24px, 3vw, 40px); }
.nse-demo-jobs-head, .nse-demo-jobs li { display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr) minmax(0, 1fr) 90px; gap: clamp(12px, 2vw, 26px); align-items: baseline; }
.nse-demo-jobs-head { padding-bottom: 12px; border-bottom: 1px solid var(--d-line); font-size: var(--t-label); letter-spacing: .13em; text-transform: uppercase; }
.nse-demo-jobs ul { margin: 0; padding: 0; list-style: none; }
/* The hover surface stays inside the box: a negative inset paints outside the
   element and is reported as real overflow by any measuring instrument. */
.nse-demo-jobs li {
  position: relative;
  padding: clamp(18px, 2vw, 26px) 18px;
  border-bottom: 1px solid var(--d-line);
}
.nse-demo-jobs li::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--d-surface); opacity: 0; transition: opacity var(--d-micro) var(--ease); }
.nse-demo-jobs li:hover::before { opacity: 1; }
/* The rows are inset instead of bleeding out, so nothing ever measures
   wider than its own list. */
.nse-demo-jobs ul { margin: 0; padding: 0; list-style: none; }
.nse-demo-jobs-head { padding-inline: 18px; }
.nse-demo-jobs b { font-size: var(--t-body); font-weight: 600; color: var(--d-ink); }
.nse-demo-jobs span { font-size: var(--t-small); font-variant-numeric: tabular-nums; }
.nse-demo-jobs em { grid-column: 1 / -1; margin-top: 6px; font-style: normal; font-size: var(--t-small); }

.nse-demo-zone .nse-demo-shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: clamp(26px, 4vw, 72px); align-items: center; }
.nse-demo-zone ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.nse-demo-zone li { padding: 9px 16px; border: 1px solid rgba(255,255,255,.24); font-size: var(--t-small); }

.nse-demo-reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); margin-top: clamp(24px, 3vw, 36px); }
.nse-demo-reviews blockquote { margin: 0; padding: clamp(20px, 2.4vw, 30px); border: 1px solid var(--d-line); background: var(--d-surface); }
.nse-demo-reviews p { margin: 0 0 14px; color: var(--d-ink); }
.nse-demo-reviews footer { font-size: var(--t-label); }
.nse-demo-reviews-note { margin-top: 16px; font-size: var(--t-label); }

.nse-demo-quote .nse-demo-shell { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(24px, 4vw, 64px); align-items: end; }

/* Full-bleed photographic band between chapters: the page breathes and the
   subject changes without a heading doing the work. */
.nse-demo-band { position: relative; padding: 0 !important; overflow: hidden; }
.nse-demo-band img { width: 100%; display: block; }
.nse-demo-band .nse-reg { --reg-inset: 24px; --reg: 34px; }
.nse-demo .nse-demo-band-cap, .nse-demo-band-cap {
  position: absolute; left: 24px; bottom: 22px; z-index: 4;
  padding: 9px 16px;
  background: rgba(10, 8, 6, .68);
  backdrop-filter: blur(10px);
  color: #fff !important;
  font-size: var(--t-label);
  letter-spacing: .06em;
}
.nse-demo-ghost {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px;
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: var(--d-radius, 999px);
  color: #fff; font-size: var(--t-small); font-weight: 600;
  transition: background-color var(--d-micro) var(--ease), color var(--d-micro) var(--ease);
}
.nse-demo-ghost:hover { background: #fff; color: var(--ink); }

/* A demonstration's own process list. */
.nse-demo-steps { margin: 0; padding: 0; list-style: none; display: grid; }
.nse-demo-steps li { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: clamp(14px, 2vw, 30px); padding: clamp(20px, 2.2vw, 30px) 0; border-top: 1px solid var(--d-line); align-items: baseline; }
.nse-demo-steps li:last-child { border-bottom: 1px solid var(--d-line); }
.nse-demo-steps i { font-style: normal; font-family: var(--font-mono); font-size: clamp(1.1rem, 2vw, 1.6rem); color: var(--d-accent-text); }
.nse-demo-steps b { display: block; font-size: var(--t-h3); font-weight: 600; color: var(--d-ink); margin-bottom: 5px; letter-spacing: -.02em; }
.nse-demo-steps span { font-size: var(--t-small); max-width: 56ch; display: block; }
.nse-demo-craft-grid figure { position: relative; }
.nse-demo-craft-grid .nse-reg { --reg-inset: 12px; --reg: 20px; }

/* ---- Atelier Solis: wood, warmth, matter -------------------------------- */
.nse-demo-solis {
  --d-bg: #f7f3ec;
  --d-ink: #1c1710;
  --d-body: #554c40;
  --d-muted: #6d6459;
  --d-line: rgba(28, 23, 16, .16);
  --d-line-strong: rgba(28, 23, 16, .3);
  --d-accent: #9a5a24;
  --d-accent-text: #8a4f1f;
  --d-on-accent: #fff;
  --d-surface: #fffdf9;
  --d-radius: 2px;
  --d-max: 1280px;
}
.nse-demo-solis .nse-demo-cta { border-radius: 2px; }
.nse-demo-solis h1, .nse-demo-solis h2 { letter-spacing: -.035em; }
.nse-demo-solis h2 { font-size: clamp(1.9rem, 3.4vw, 3rem); }
.nse-demo-solis .nse-demo-craft { background: var(--d-surface); }
.nse-demo-solis .nse-demo-zone { background: #1c1710; }
.nse-demo-solis .nse-demo-zone h2, .nse-demo-solis .nse-demo-zone p { color: #f3ece1; }
.nse-demo-solis .nse-demo-zone .nse-demo-eyebrow { color: #d9a066; }
.nse-demo-solis .nse-demo-zone p { color: #cbbfae; }
.nse-demo-solis .nse-demo-zone li { color: #e6dccd; }
.nse-demo-solis .nse-demo-quote { background: var(--d-surface); border-top: 1px solid var(--d-line); }

/* ---- Élise Moreau: editorial, serif, quiet ------------------------------ */
.nse-demo-moreau {
  --d-bg: #faf8f3;
  --d-ink: #16150f;
  --d-body: #4a483f;
  --d-muted: #6a6759;
  --d-line: rgba(22, 21, 15, .15);
  --d-line-strong: rgba(22, 21, 15, .3);
  --d-accent: #16150f;
  --d-accent-text: #6a6759;
  --d-on-accent: #faf8f3;
  --d-surface: #fff;
  --d-radius: 0px;
  --d-max: 1120px;
}
.nse-demo-moreau .nse-demo-cta { border-radius: 0; }
.nse-demo-moreau .nse-demo-brand { font-family: var(--font-serif); font-size: 1.3rem; letter-spacing: .01em; }
.nse-demo-moreau h1, .nse-demo-moreau h2, .nse-demo-moreau h3 { font-family: var(--font-serif); font-weight: 400; letter-spacing: -.015em; }
.nse-demo-moreau h1 { font-size: clamp(2.3rem, 5.2vw, 4.4rem); line-height: 1.06; }
.nse-demo-moreau h1 em { font-style: italic; color: var(--d-muted); }
.nse-demo-moreau h2 { font-size: clamp(1.8rem, 3.4vw, 2.9rem); line-height: 1.1; }
.nse-demo .nse-demo-editorial-hero { padding-block: clamp(72px, 9vw, 150px) clamp(48px, 5vw, 84px); }
.nse-demo-editorial-intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(20px, 4vw, 56px); align-items: end; margin-top: clamp(32px, 4vw, 56px); }
.nse-demo-editorial-intro p { max-width: 46ch; font-size: var(--t-lead); line-height: 1.5; margin: 0; }
.nse-demo-editorial-intro .nse-demo-actions { margin: 0; }
.nse-demo-editorial-figure .nse-demo-shell { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.nse-demo-editorial-figure.is-reversed .nse-demo-shell { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.nse-demo-editorial-figure figure { margin: 0; }
.nse-demo-editorial-figure figcaption { margin-top: 12px; font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--d-muted); }
.nse-demo-pull { margin: 0; font-family: var(--font-serif); font-size: clamp(1.4rem, 2.7vw, 2.2rem); line-height: 1.3; letter-spacing: -.015em; color: var(--d-ink); max-width: 22ch; }
.nse-demo-pull::before { content: "« "; }
.nse-demo-pull::after { content: " »"; }
.nse-demo-aside-note h3 { font-size: clamp(1.35rem, 2.2vw, 1.9rem); margin-bottom: .5em; }
.nse-demo-aside-note p { max-width: 52ch; }
.nse-demo-rule { border: 0; border-top: 1px solid var(--d-line); margin: 0 0 clamp(30px, 4vw, 56px); }
.nse-demo-cols-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); }
.nse-demo-cols-grid i { display: block; margin-bottom: 14px; font-style: normal; font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: .14em; text-transform: uppercase; color: var(--d-muted); }
.nse-demo-cols-grid h3 { font-size: 1.35rem; margin-bottom: .45em; }
.nse-demo-case { background: var(--d-surface); }
.nse-demo-case .nse-demo-shell { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.nse-demo-case-aside { position: sticky; top: calc(var(--header-h) + 40px); }
.nse-demo-case-aside p { max-width: 40ch; }
.nse-demo-case-flow { margin: 0; padding: 0; list-style: none; display: grid; }
.nse-demo-case-flow li { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 22px; padding: 22px 0; border-top: 1px solid var(--d-line); align-items: baseline; }
.nse-demo-case-flow li:last-child { border-bottom: 1px solid var(--d-line); }
.nse-demo-case-flow i { font-style: italic; font-family: var(--font-serif); font-size: 1.1rem; color: var(--d-muted); }
.nse-demo-case-flow b { display: block; font-weight: 600; color: var(--d-ink); margin-bottom: 4px; }
.nse-demo-case-flow span { font-size: var(--t-small); }
.nse-demo-case-result { grid-column: 2; margin-top: 22px; padding-top: 18px; border-top: 2px solid var(--d-ink); font-size: var(--t-lead); color: var(--d-ink); max-width: 46ch; }
.nse-demo-aside-note .nse-demo-case-result { grid-column: auto; }
.nse-demo-book { border-top: 1px solid var(--d-line); }
.nse-demo-book .nse-demo-shell { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(24px, 4vw, 60px); align-items: center; }

/* Moreau: the portrait shares the opening rather than following it. */
.nse-moreau-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 80px); align-items: end; }
.nse-moreau-portrait { margin: 0; position: relative; }
.nse-moreau-portrait img { width: 100%; }
.nse-moreau-aside-media { margin: clamp(24px, 3vw, 36px) 0 0; position: relative; }
.nse-moreau-aside-media img { width: 100%; }
.nse-demo-editorial-pull { padding-block: clamp(48px, 6vw, 96px) !important; }
.nse-demo-moreau .nse-reg { --reg-inset: 12px; --reg: 22px; }

.nse-demo-portrait-strip .nse-demo-shell { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(26px, 4vw, 72px); align-items: center; }
.nse-demo-portrait-strip figure { margin: 0; position: relative; }
.nse-demo-portrait-strip img { width: 100%; }
.nse-demo-portrait-strip blockquote { margin: 0; }
.nse-demo-portrait-strip blockquote p { font-size: clamp(1.3rem, 2.4vw, 2rem); line-height: 1.3; letter-spacing: -.025em; color: var(--d-ink); max-width: 24ch; }
.nse-demo-portrait-strip footer { margin-top: 18px; font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--d-muted); }
.nse-demo-octave-grid article.is-media { grid-row: span 2; }
.nse-demo-octave-grid figure { margin: 14px 0 0; position: relative; }
.nse-demo-octave-grid img { width: 100%; }
.nse-demo-octave-grid .nse-reg { --reg-inset: 8px; --reg: 16px; }
.nse-web-mobile-media { margin: 0 0 clamp(20px, 2.4vw, 32px); position: relative; }
.nse-web-mobile-media img { width: 100%; }

/* ---- Maison Octave: structured, institutional, cool --------------------- */
.nse-demo-octave {
  --d-bg: #eef0ee;
  --d-ink: #131d19;
  --d-body: #47534e;
  --d-muted: #5c6863;
  --d-line: rgba(19, 29, 25, .16);
  --d-line-strong: rgba(19, 29, 25, .3);
  --d-accent: #1d4a40;
  --d-accent-text: #1d4a40;
  --d-on-accent: #fff;
  --d-surface: #fff;
  --d-radius: 2px;
  --d-max: 1360px;
}
.nse-demo-octave .nse-demo-cta { border-radius: 2px; }
.nse-demo-octave h1 { font-size: clamp(2.1rem, 4.2vw, 3.6rem); letter-spacing: -.035em; line-height: 1.02; }
.nse-demo-octave h2 { font-size: clamp(1.8rem, 3.2vw, 2.8rem); letter-spacing: -.03em; line-height: 1.08; }
.nse-demo-octave-hero { background: var(--d-surface); border-bottom: 1px solid var(--d-line); }
.nse-demo-octave-hero .nse-demo-shell:first-child { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 72px); align-items: center; }
.nse-demo-octave-hero figure { margin: 0; }
.nse-demo-octave-copy p { max-width: 44ch; font-size: var(--t-lead); }
.nse-demo-octave-scope { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: clamp(36px, 4vw, 64px) 0 0; background: var(--d-line); border: 1px solid var(--d-line); }
.nse-demo-octave-scope > div { padding: 18px 22px; background: var(--d-surface); }
.nse-demo-octave-scope dt { font-size: var(--t-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--d-ink); margin-bottom: 5px; }
.nse-demo-octave-scope dd { margin: 0; font-size: var(--t-small); color: var(--d-body); }
.nse-demo-octave-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--d-line); border: 1px solid var(--d-line); }
.nse-demo-octave-grid > article { display: grid; align-content: start; gap: 10px; padding: clamp(22px, 2.4vw, 34px); background: var(--d-surface); }
.nse-demo-octave-grid h3 { font-size: 1.2rem; margin: 0; }
.nse-demo-octave-grid p { margin: 0; font-size: var(--t-small); }
.nse-demo-octave-story { background: var(--d-bg); }
.nse-demo-story-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); }
.nse-demo-story-steps figure { position: relative; }
.nse-demo-story-steps .nse-reg { --reg-inset: 10px; --reg: 18px; }
.nse-demo-story-steps figure { margin: 0; }
.nse-demo-story-steps picture { display: block; overflow: hidden; }
.nse-demo-story-steps img { width: 100%; transition: transform var(--d-media) var(--ease); }
.nse-demo-story-steps figure:hover img { transform: scale(1.02); }
.nse-demo-story-steps figcaption { margin-top: 16px; }
.nse-demo-story-steps i { display: block; font-style: normal; font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase; color: var(--d-accent-text); margin-bottom: 6px; }
.nse-demo-story-steps b { display: block; font-size: var(--t-h3); font-weight: 600; color: var(--d-ink); margin-bottom: 6px; letter-spacing: -.02em; }
.nse-demo-story-steps span { font-size: var(--t-small); }
.nse-demo-octave-sheet { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: clamp(36px, 4vw, 64px) 0 0; background: var(--d-line); border: 1px solid var(--d-line); }
.nse-demo-octave-sheet > div { display: grid; gap: 5px; padding: 18px 22px; background: var(--d-surface); }
.nse-demo-octave-sheet dt { font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase; color: var(--d-muted); }
.nse-demo-octave-sheet dd { margin: 0; font-weight: 600; color: var(--d-ink); font-variant-numeric: tabular-nums; }
.nse-demo-octave-phases { background: var(--d-ink); }
.nse-demo-octave-phases h2, .nse-demo-octave-phases .nse-demo-craft-head p { color: #eef0ee; }
.nse-demo-octave-phases .nse-demo-eyebrow { color: #86b3a5; }
.nse-demo-phase-rows { display: grid; gap: 1px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.16); }
.nse-demo-phase-rows > div { display: grid; grid-template-columns: 104px minmax(0, .6fr) minmax(0, 1.4fr); gap: clamp(14px, 2vw, 30px); padding: 20px 24px; background: var(--d-ink); align-items: baseline; }
.nse-demo-phase-rows i { font-style: normal; font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: .1em; color: #86b3a5; }
.nse-demo-phase-rows b { font-weight: 600; color: #eef0ee; }
.nse-demo-phase-rows span { font-size: var(--t-small); color: #b7c2bd; }
.nse-demo-octave .nse-demo-quote { background: var(--d-surface); border-top: 1px solid var(--d-line); }

.nse-demo-note-section { background: var(--paper-2); }

/* ==========================================================================
   11 — SERVICE & UTILITY PAGES
   Same system, fewer moves. These pages need clarity and rhythm, not a
   different design language.
   ========================================================================== */

/* Page opener with a first-screen action. */
.nse-phero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(30px, 5vw, 88px); align-items: end; }
.nse-phero-solo { grid-template-columns: minmax(0, 1fr); }
.nse-phero h1 { max-width: 15ch; }
.nse-phero-aside { padding: clamp(22px, 2.4vw, 34px); border: 1px solid var(--line); background: var(--surface); }
.nse-phero-aside p { font-size: var(--t-small); color: var(--muted); }
.nse-web-hero .nse-web-checklist { padding: clamp(24px, 2.6vw, 38px); border: 1px solid var(--line); background: var(--surface); }
.nse-web-checklist ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.nse-web-checklist li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: baseline; font-size: var(--t-small); color: var(--body); }
.nse-web-checklist li::before { content: ""; width: 13px; height: 8px; border-left: 1.6px solid var(--accent); border-bottom: 1.6px solid var(--accent); transform: rotate(-45deg); translate: 0 -2px; }

/* Bordered grid — the one card pattern on the whole site. */
.nse-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.nse-cards > * { display: grid; align-content: start; gap: 10px; padding: clamp(24px, 2.6vw, 38px); background: var(--paper); margin: 0; }
.nse-cards h3 { margin: 0; }
.nse-cards p { margin: 0; font-size: var(--t-small); color: var(--muted); }
.nse-cards .nse-num { margin-bottom: 8px; }
.nse-section-band .nse-cards > * { background: var(--surface); }

/* Every demonstrative figure is framed and captioned: nothing can be taken
   for a real client dashboard. */
.nse-figure { border: 1px solid var(--line); background: var(--surface); }
.nse-figure-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 14px 20px; border-bottom: 1px solid var(--line); font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--muted); }
.nse-figure-body { padding: clamp(20px, 2.4vw, 32px); }
.nse-figure-cap { margin: 12px 2px 0; font-size: var(--t-label); color: var(--muted); text-transform: none; letter-spacing: 0; }

.nse-quote { padding: clamp(22px, 2.4vw, 34px); border-left: 2px solid var(--accent); background: var(--paper-2); font-family: var(--font-serif); font-size: clamp(1.15rem, 1.6vw, 1.5rem); line-height: 1.4; color: var(--ink); }
.nse-quote-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; font-family: var(--font); }
.nse-micro { font-size: var(--t-label); letter-spacing: .07em; text-transform: uppercase; font-weight: 600; color: var(--muted); }
.nse-em { color: var(--ink); font-weight: 600; }

.nse-checklist { margin: 0; padding: 0; list-style: none; display: grid; gap: 1px; background: var(--line); }
.nse-checklist li { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 18px; background: var(--surface); font-size: var(--t-small); }
.nse-checklist li em { font-style: normal; font-size: var(--t-label); letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--muted); }

/* Local intelligence: a geographic reading grid, plainly an example. */
.nse-geo { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.nse-geo b { display: grid; place-items: center; aspect-ratio: 1; background: var(--paper-2); font-family: var(--font-mono); font-size: var(--t-label); font-weight: 400; color: var(--muted); }
.nse-geo b[data-rank="top"] { background: var(--accent); color: #fff; }
.nse-geo b[data-rank="mid"] { background: var(--accent-tint); color: var(--accent-deep); }
.nse-geo b[data-rank="low"] { background: var(--paper-2); color: var(--body); }
.nse-geo b[data-rank="out"] { background: var(--paper-3); color: var(--muted); }
.nse-geo-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 16px; font-size: var(--t-label); color: var(--muted); }
.nse-geo-legend span { display: inline-flex; align-items: center; gap: 8px; }
.nse-geo-legend i { width: 12px; height: 12px; background: var(--paper-2); }
.nse-geo-legend i.is-top { background: var(--accent); }
.nse-geo-legend i.is-mid { background: var(--accent-tint); }
.nse-geo-legend i.is-out { background: var(--paper-3); }

/* Google Business: two paths that visibly fork. */
.nse-fork { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap: clamp(18px, 2.2vw, 30px); }
.nse-fork-path { display: flex; flex-direction: column; gap: 14px; padding: clamp(26px, 2.8vw, 40px); border: 1px solid var(--line); background: var(--surface); }
.nse-fork-path.is-incident { border-color: color-mix(in srgb, var(--signal) 32%, transparent); background: var(--signal-tint); }
.nse-fork-path h3 { margin: 0; }
.nse-fork-path p { font-size: var(--t-small); color: var(--muted); margin: 0; }
.nse-fork-path .nse-btn { margin-top: auto; align-self: flex-start; }
.nse-fork-prices { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.nse-fork-prices li { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 11px 0; border-top: 1px solid var(--line); font-size: var(--t-small); color: var(--muted); }
.nse-fork-prices li b { color: var(--ink); white-space: nowrap; }

/* Protection: a case file, never a hacker interface. */
.nse-dossier { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.nse-dossier-row { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: clamp(12px, 1.8vw, 28px); padding: clamp(18px, 1.9vw, 26px) clamp(20px, 2vw, 30px); background: var(--surface); align-items: baseline; }
.nse-dossier-row > i { font-style: normal; font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: .1em; color: var(--muted); }
.nse-dossier-row b { display: block; margin-bottom: 4px; }
.nse-dossier-row span { font-size: var(--t-small); color: var(--muted); }
.nse-warning { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 15px; padding: clamp(20px, 2.2vw, 28px); border: 1px solid color-mix(in srgb, var(--signal) 32%, transparent); background: var(--signal-tint); }
.nse-warning::before { content: "!"; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--signal); color: #fff; font-weight: 700; font-size: var(--t-small); }
.nse-warning strong { display: block; margin-bottom: 6px; color: var(--signal); }
.nse-warning p { margin: 0; font-size: var(--t-small); color: var(--body); }

/* Method page: the sticky sequence, with its own progress track. */
.nse-method-stack { display: grid; }
.nse-method-step { display: grid; grid-template-columns: clamp(56px, 7vw, 100px) minmax(0, 1fr); gap: clamp(16px, 2.2vw, 34px); padding: clamp(26px, 3.2vw, 44px) 0; border-top: 1px solid var(--line); align-items: start; }
.nse-method-step:last-child { border-bottom: 1px solid var(--line); }
.nse-method-step i { font-style: normal; font-family: var(--font-mono); font-size: clamp(1.3rem, 2.4vw, 2rem); line-height: 1; color: var(--muted-soft); transition: color var(--d-chapter) var(--ease); }
.nse-method-step.is-current i { color: var(--accent-deep); }
.nse-method-step h2 { font-size: var(--t-h3); margin-bottom: .4em; }
.nse-method-step p { font-size: var(--t-small); color: var(--muted); margin: 0; max-width: 46ch; }
.nse-method-visual { position: sticky; top: calc(var(--header-h) + 48px); padding: clamp(22px, 2.4vw, 34px); border: 1px solid var(--line); background: var(--surface); }
.nse-method-visual-label { display: block; margin-bottom: 18px; font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: .1em; color: var(--accent-deep); }
.nse-method-track { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.nse-method-track li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 12px; align-items: center; font-size: var(--t-small); color: var(--muted); }
.nse-method-track li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--paper-3); transition: background-color var(--d-chapter) var(--ease); }
.nse-method-track li.is-current { color: var(--ink); }
.nse-method-track li.is-current::before { background: var(--accent-deep); }
.nse-method-note { margin-top: 20px; font-size: var(--t-label); color: var(--muted); }

/* Contact */
.nse-contact-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(30px, 4.5vw, 76px); align-items: start; }
.nse-contact-points { margin: 0 0 28px; padding: 0; list-style: none; display: grid; }
.nse-contact-points li { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); font-size: var(--t-small); align-items: baseline; }
.nse-contact-points li:last-child { border-bottom: 1px solid var(--line); }
.nse-contact-points i { font-style: normal; font-family: var(--font-mono); font-size: var(--t-label); color: var(--muted); }
.nse-form-shell { padding: clamp(24px, 2.8vw, 44px); border: 1px solid var(--line); background: var(--surface); }
.nse-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.nse-field { display: grid; gap: 8px; }
.nse-field-full, .nse-consent { grid-column: 1 / -1; }
.nse-field > span { font-size: var(--t-label); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.nse-field > span em { color: var(--signal); font-style: normal; margin-left: 3px; }
.nse-field :where(input, select, textarea) {
  width: 100%; min-height: 54px; padding: 14px 16px;
  border: 1px solid var(--line-2); background: var(--paper);
  font-size: 16px;   /* iOS must never zoom on focus */
  line-height: 1.45;
  transition: border-color var(--d-micro) var(--ease), box-shadow var(--d-micro) var(--ease);
}
.nse-field textarea { min-height: 152px; resize: vertical; }
.nse-field :where(input, select, textarea):focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px var(--accent-tint); }
.nse-consent { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; min-height: 44px; padding: 10px 0; cursor: pointer; font-size: var(--t-small); color: var(--muted); }
.nse-consent input { width: 24px; height: 24px; min-height: 24px; accent-color: var(--accent-deep); margin: 0; font-size: 16px; }
.nse-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; margin-top: 26px; }
.nse-form-note { margin: 0; font-size: var(--t-label); color: var(--muted); }
.nse-form-error { color: var(--signal); font-size: var(--t-small); }
.nse-form-status { display: flex; gap: 12px; padding: 16px 20px; margin-bottom: 24px; border: 1px solid var(--line); background: var(--accent-tint); font-size: var(--t-small); }
.nse-form-status.is-error { background: var(--signal-tint); border-color: color-mix(in srgb, var(--signal) 32%, transparent); }

/* Closing CTA on service pages + related links strip. */
.nse-final-cta { background: var(--ink); }
.nse-cta-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(28px, 4vw, 72px); align-items: end; }
.nse-cta-grid h2 { font-size: clamp(2rem, 3.6vw, 3.4rem); max-width: 17ch; margin-bottom: .35em; }
.nse-cta-grid p { max-width: 46ch; }
.nse-cta-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.nse-cta-note { font-size: var(--t-label); }
.nse-section-dense { padding-block: var(--section-tight); }
.nse-related-services { background: var(--paper-2); }
.nse-related-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.nse-related-links a { display: grid; gap: 7px; padding: clamp(22px, 2.4vw, 32px); background: var(--surface); transition: background-color var(--d-micro) var(--ease); }
.nse-related-links a:hover { background: var(--accent-tint); }
.nse-related-links strong { font-size: var(--t-h3); font-weight: 500; letter-spacing: -.02em; }
.nse-related-links span { font-size: var(--t-small); color: var(--muted); }
.nse-related-links b { margin-top: 6px; font-weight: 400; color: var(--muted); transition: transform var(--d-micro) var(--ease); }
.nse-related-links a:hover b { transform: translateX(6px); color: var(--accent-deep); }

/* Demonstration previews reused by the Concept Lab module. */
.nse-demo-panel { display: block; border: 1px solid var(--line); background: var(--surface); overflow: hidden; }
.nse-demo-panel-media { overflow: hidden; }
.nse-demo-panel-media img { width: 100%; transition: transform var(--d-media) var(--ease); }
.nse-demo-panel:hover .nse-demo-panel-media img { transform: scale(1.025); }
.nse-demo-panel-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 18px; padding: clamp(20px, 2.2vw, 30px); }
.nse-demo-panel-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.nse-demo-panel-go { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border: 1px solid var(--line-2); border-radius: 50%; transition: background-color var(--d-micro) var(--ease), color var(--d-micro) var(--ease); }
.nse-demo-panel:hover .nse-demo-panel-go { background: var(--ink); color: var(--on-ink); }

/* Section wrappers with no styling of their own, listed so the audit of
   "declared but unstyled" classes stays meaningful. */
.nse-trades, .nse-services, .nse-pricing, .nse-method-chapter,
.nse-demo-ba-section, .nse-demo-jobs-section, .nse-demo-reviews-section,
.nse-demo-octave-services, .nse-demo-editorial-cols, .nse-contact-copy,
.nse-showcase-grid, .nse-showcase-aside, .nse-showcase-stack,
.nse-showcase-legend, .nse-swipe-hint { }

/* Legal pages and other module-rendered markup keep their own content and only
   inherit the Norilo shell. */
.nse-legal-shell .nse-container { max-width: 880px; }
.nse-legal-head { margin-bottom: clamp(28px, 3vw, 46px); }
.nse-legal-prose, .nse-prose { max-width: 72ch; }
.nse-legal-prose h2, .nse-prose h2 { font-size: var(--t-h3); margin-top: 1.8em; }
.nse-legal-prose h3, .nse-prose h3 { font-size: 1.125rem; margin-top: 1.5em; }
.nse-legal-prose a, .nse-prose a { text-decoration: underline; text-underline-offset: .18em; }
.nse-legal-prose ul, .nse-legal-prose ol, .nse-prose ul, .nse-prose ol { padding-left: 1.15em; display: grid; gap: 8px; margin-bottom: 1.2em; }
.nse-legal-prose table, .nse-prose table { width: 100%; border-collapse: collapse; font-size: var(--t-small); display: block; overflow-x: auto; }
.nse-legal-prose :where(th, td), .nse-prose :where(th, td) { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; }

/* Projects, reviews and the 404 template. */
.nse-page-hero h1 { max-width: 16ch; }
.nse-project-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: clamp(18px, 2.2vw, 30px); }
.nse-project-card { display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--surface); overflow: hidden; }
.nse-project-visual img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.nse-project-placeholder { aspect-ratio: 16 / 10; background: var(--paper-2); display: grid; place-items: center; color: var(--muted); }
.nse-project-card > :where(h3, p, .nse-project-meta, .nse-project-link) { padding-inline: clamp(18px, 2vw, 26px); }
.nse-project-card h3 { padding-top: clamp(18px, 2vw, 26px); margin-bottom: .35em; }
.nse-project-card p { font-size: var(--t-small); color: var(--muted); }
.nse-project-meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: var(--t-label); color: var(--muted); }
.nse-project-link { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; font-weight: 600; font-size: var(--t-small); }
.nse-project-card > *:last-child { padding-bottom: clamp(14px, 1.6vw, 20px); }
.nse-project-cover { padding-block: 0 clamp(30px, 4vw, 60px); }
.nse-project-cover img { width: 100%; }
.nse-review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: clamp(14px, 1.8vw, 22px); }
.nse-review-grid > * { display: grid; align-content: start; gap: 11px; padding: clamp(20px, 2.2vw, 30px); border: 1px solid var(--line); background: var(--surface); }
.nse-review-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.nse-review-stars { color: var(--accent-deep); letter-spacing: .12em; font-size: var(--t-small); }
.nse-review-source { font-size: var(--t-label); color: var(--muted); }
.nse-review-heading { margin-bottom: clamp(24px, 3vw, 38px); }
.nse-v15-trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.nse-v15-trust-grid > * { padding: clamp(18px, 2vw, 26px); background: var(--surface); font-size: var(--t-small); }
.nse-404-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
.nse-404-card { display: grid; gap: 10px; padding: clamp(28px, 3vw, 46px); border: 1px solid var(--line); background: var(--surface); }
.nse-404-card span { font-family: var(--font-mono); font-size: clamp(3rem, 8vw, 5.5rem); line-height: 1; color: var(--paper-3); }
.nse-404-card strong { font-size: 1.125rem; }
.nse-404-card i { display: block; height: 8px; background: var(--paper-2); }
.nse-404-card i:nth-of-type(2) { width: 72%; }
.nse-404-card i:nth-of-type(3) { width: 44%; }
.nse-section-heading { max-width: 760px; margin-bottom: clamp(30px, 3.6vw, 52px); }
.nse-section-action { margin-top: clamp(26px, 3vw, 42px); }
.nse-card-label { font-size: var(--t-label); font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }

/* ==========================================================================
   11b — SERVICE PAGE OPENINGS
   A service page opens on a photograph of the situation it addresses, with a
   guaranteed scrim. The register mark frames it; the text never depends on
   how bright the image happens to be.
   ========================================================================== */
.nse-svc-open {
  position: relative;
  padding-block: calc(var(--header-h) + clamp(80px, 12vw, 190px)) clamp(56px, 7vw, 110px);
  overflow: hidden;
}
.nse-svc-open-media { position: absolute; inset: 0; z-index: 0; }
.nse-svc-open-media img { width: 100%; height: 100%; object-fit: cover; }
.nse-svc-open::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(175deg, rgba(10, 10, 8, .78) 0%, rgba(10, 10, 8, .5) 44%, rgba(10, 10, 8, .88) 100%);
}
.nse-svc-open-inner { position: relative; z-index: 2; }
.nse-svc-open .nse-display { max-width: 15ch; }
.nse-svc-open .nse-lead { max-width: 52ch; color: rgba(255, 255, 255, .92); }
.nse-svc-open .nse-reg { --reg-color: rgba(255, 255, 255, .5); --reg-inset: 22px; --reg: 34px; z-index: 2; }

/* The honest-outcomes list: three possible results, stated plainly. */
.nse-svc-truth { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 4vw, 72px); align-items: start; }
.nse-truth-list { margin: 0; padding: 0; list-style: none; display: grid; }
.nse-truth-list li { padding: clamp(20px, 2.4vw, 30px) 0; border-top: 1px solid var(--line); }
.nse-truth-list li:last-child { border-bottom: 1px solid var(--line); }
.nse-truth-list b { display: block; font-size: var(--t-h3); font-weight: 500; letter-spacing: -.02em; color: var(--ink); margin-bottom: 8px; }
.nse-truth-list span { font-size: var(--t-small); color: var(--muted); max-width: 58ch; display: block; }

.nse-svc-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(24px, 3vw, 48px); align-items: start; }
/* Three cases in a narrow column: one per row, or the third sits alone
   next to an empty cell. */
.nse-cards-tall { grid-template-columns: minmax(0, 1fr); }
.nse-cards-tall > * { align-content: start; }

/* Lighter step list for service pages: numbers as margin notes. */
.nse-steps-light { margin: 0; padding: 0; list-style: none; display: grid; }
.nse-steps-light li { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: clamp(14px, 2vw, 28px); padding: clamp(18px, 2vw, 26px) 0; border-top: 1px solid var(--line); align-items: baseline; }
.nse-steps-light li:last-child { border-bottom: 1px solid var(--line); }
.nse-steps-light i { font-style: normal; font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: .1em; color: var(--muted-soft); }
.nse-steps-light b { display: block; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.nse-steps-light span { font-size: var(--t-small); color: var(--muted); }

/* The geo reading sits beside its grid rather than under it. */
.nse-geo-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.nse-geo-read h3 { margin-bottom: .6em; }
.nse-geo-read p { max-width: 46ch; }
.nse-price-inline { font-size: clamp(1.9rem, 3vw, 2.6rem) !important; margin: 4px 0 6px !important; }

/* ==========================================================================
   12 — RESPONSIVE
   Mobile is a different composition, not a narrower one.
   ========================================================================== */
@media (max-width: 1180px) {
  .nse-work-meta { grid-template-columns: minmax(0, .4fr) minmax(0, 1fr); }
  .nse-work-meta > a { grid-column: 2; justify-self: start; }
  .nse-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nse-footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 1100px) {
  .nse-nav { display: none; }
  .nse-menu-toggle { display: inline-flex; }
  .nse-header-actions > .nse-btn { display: none; }
}

@media (max-width: 980px) {
  :root { --header-h: 66px; --section: clamp(72px, 11vw, 104px); }
  .nse-hero-row { grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
  .nse-hero-band figcaption { position: static; max-width: none; background: none; backdrop-filter: none; color: var(--muted); padding: 12px var(--gutter) 0; }
  .nse-split, .nse-two-col, .nse-split-lead, .nse-method-layout,
  .nse-manifesto-foot, .nse-work-pair, .nse-cta-foot { grid-template-columns: minmax(0, 1fr); }
  .nse-shead { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 16px; }
  .nse-shead-note { padding-bottom: 0; }
  .nse-method-aside { position: static; }
  .nse-work-lead .nse-work-media { width: 100%; aspect-ratio: 4 / 3; }
  .nse-work-meta { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .nse-work-meta > a { grid-column: 1; }
  .nse-trade-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nse-price-duo { grid-template-columns: minmax(0, 1fr); }
  .nse-cta-foot { gap: 24px; }
}

@media (max-width: 860px) {
  .nse-demo-craft-head, .nse-demo-zone .nse-demo-shell, .nse-demo-quote .nse-demo-shell { grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }
  .nse-demo-craft-grid { grid-template-columns: minmax(0, 1fr); }
  .nse-demo-steps li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .nse-demo-band-cap { left: 16px; bottom: 16px; }
  .nse-demo-facts { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .nse-demo-reviews { grid-template-columns: minmax(0, 1fr); }
  .nse-demo-jobs-head { display: none; }
  .nse-demo-jobs li { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  .nse-demo-jobs span::before { content: attr(data-label) " : "; }
  .nse-demo-nav nav { display: none; }
  .nse-demo-nav .nse-demo-shell { justify-content: space-between; }
  .nse-demo-editorial-intro, .nse-demo-editorial-figure .nse-demo-shell,
  .nse-demo-editorial-figure.is-reversed .nse-demo-shell, .nse-demo-case .nse-demo-shell,
  .nse-demo-book .nse-demo-shell, .nse-demo-octave-hero .nse-demo-shell:first-child { grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
  .nse-demo-case-aside { position: static; }
  .nse-demo-case-flow li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .nse-demo-case-result { grid-column: auto; }
  .nse-demo-cols-grid, .nse-moreau-hero { grid-template-columns: minmax(0, 1fr); gap: 26px; align-items: start; }
  /* Four full-width phases make a 2 900px section on a phone. Two up keeps
     the same information inside one comfortable scroll. */
  .nse-demo-story-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .nse-demo-story-steps b { font-size: var(--t-body); }
  .nse-demo-story-steps span { font-size: var(--t-label); }
  .nse-demo-octave-grid, .nse-demo-octave-scope, .nse-demo-octave-sheet { grid-template-columns: minmax(0, 1fr); }
  .nse-demo-phase-rows > div { grid-template-columns: minmax(0, 1fr); gap: 5px; }
  .nse-demo-pull { max-width: none; }
  .nse-form-grid { grid-template-columns: minmax(0, 1fr); }
  .nse-method-step, .nse-dossier-row, .nse-contact-points li, .nse-steps-light li { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .nse-geo { gap: 4px; }
  .nse-404-grid { grid-template-columns: minmax(0, 1fr); }
  .nse-demo-bar { row-gap: 6px; }
  .nse-demo-bar > span { order: 3; width: 100%; }
}

@media (max-width: 860px) {
  .nse-phero, .nse-contact-grid, .nse-cta-grid, .nse-svc-truth, .nse-svc-split, .nse-geo-layout { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .nse-method-visual { position: static; }
  .nse-cta-actions { flex-direction: row; flex-wrap: wrap; align-items: center; }
}

@media (max-width: 900px) {
  /* Three miniatures side by side stop being readable well before they stop
     fitting. Stacking them added nine hundred pixels to the page, so they
     become a swipeable row instead: the whole idea stays visible, the page
     does not grow, and swiping three sites is a better mobile gesture than
     scrolling past them. */
  .nse-specimens {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(82vw, 380px);
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    width: 100%;
    scroll-padding-inline: var(--gutter);
    padding-inline: var(--gutter);
    padding-bottom: 8px;
    scrollbar-width: none;
    perspective: none;
  }
  .nse-specimens::-webkit-scrollbar { display: none; }
  .nse-specimens > * { scroll-snap-align: start; }
  .nse-spec { transform: none !important; }
  .nse-spec-body { min-height: 0; padding: 18px; }
  .nse-spec-title { font-size: 1.15rem; max-width: none; }
  .nse-spec-eyebrow, .nse-spec-cta, .nse-spec-meta b, .nse-spec-chrome em { font-size: 13px; }
  .nse-demo-portrait-strip .nse-demo-shell { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .nse-demo-octave-grid article.is-media { grid-row: auto; }
}

@media (max-width: 700px) {
  /* The homepage ran past 11 000 px on a phone. The portfolio keeps its
     presence but stops taking three full screens. */
  .nse-work-lead .nse-work-media, .nse-work-side .nse-work-media { aspect-ratio: 3 / 2; }
  .nse-work-meta { gap: 10px; margin-top: 14px; }
  .nse-work-meta h3 { font-size: 1.5rem; margin: .2em 0 .1em; }
  .nse-work-pair { gap: 30px; margin-top: 34px; }
  .nse-works .nse-container + .nse-work { margin-top: 18px; }
  /* The trades become a swipe row too: same gesture as the specimens, and
     five hundred pixels off the page. */
  .nse-trade-row {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 46vw;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1);
    scrollbar-width: none;
  }
  .nse-trade-row::-webkit-scrollbar { display: none; }
  .nse-trade-row > * { scroll-snap-align: start; }
  .nse-trades .nse-container { overflow: hidden; }
  .nse-price-card { padding: 26px 22px; gap: 12px; }
  .nse-price-amount { font-size: 2.6rem; }
  .nse-price-list { gap: 7px; }
  /* The portfolio keeps its presence with a shorter frame: three covers at
     16:10 instead of 3:2 is four hundred pixels off the page. */
  .nse-work-lead .nse-work-media, .nse-work-side .nse-work-media { aspect-ratio: 16 / 10; }
  .nse-steps li { padding-block: 22px; }
  .nse-faq-list summary { min-height: 62px; }
  .nse-accordion summary { min-height: 68px; }
  .nse-manifesto-foot { margin-top: 26px; padding-top: 20px; }
  .nse-trade-note { margin-top: 18px; }
  .nse-hero-foot { margin-top: 22px; padding-top: 16px; }
  .nse-specimens-cap { margin-top: 14px; }
  :root { --section: clamp(64px, 9vw, 88px); }
  /* The accordion drops the price column rather than crushing four columns. */
  .nse-accordion summary { grid-template-columns: 38px minmax(0, 1fr) 22px; row-gap: 4px; min-height: 76px; }
  .nse-accordion-price { grid-column: 2 / 3; font-size: var(--t-label); }
  .nse-accordion summary:hover { padding-inline: 0; }
  .nse-steps li { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .nse-steps-num { font-size: 1.4rem; }
  .nse-footer-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .nse-footer-bottom { flex-direction: column; gap: 2px; }
  .nse-manifesto-line { max-width: none; }
}

@media (max-width: 560px) {
  :root { --gutter: 22px; }
  .nse-actions > .nse-btn { flex: 1 1 auto; }
  .nse-trade-row { gap: 10px; }
  .nse-hero-foot { gap: 6px 18px; }
  .nse-price-extras span { width: 100%; }
}

@media (max-width: 380px) {
  :root { --gutter: 18px; }
  .nse-brand-wordmark em { display: none; }
  .nse-trade-row { grid-template-columns: minmax(0, 1fr); }
  .nse-trade-row li:nth-child(n+3) { display: none; }
}

@media (max-width: 380px) {
  /* At 320px the demonstration bar is brand (150) + action (120) + gap (20)
     inside a 284px shell. Six pixels over: the gap and the action give way,
     the brand keeps its full name. */
  .nse-demo-nav .nse-demo-shell { gap: 8px; }
  .nse-demo-cta { padding-inline: 14px; font-size: var(--t-label); }
  .nse-demo-brand { font-size: .95rem; letter-spacing: .1em; }
}

@media (max-height: 540px) and (orientation: landscape) {
  .nse-mobile-menu { justify-content: flex-start; overflow-y: auto; }
  .nse-mobile-menu nav a { min-height: 48px; font-size: 1.05rem; }
  .nse-hero-grid { min-height: 0; }
}

/* ==========================================================================
   13 — REDUCED MOTION, PRINT, FORCED COLORS
   The calm version is complete: nothing stays hidden, nothing is clipped.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal], .nse-reveal, .nse-stagger > *, .nse-lines .nse-line > i, .nse-mobile-menu nav a, .nse-mobile-menu-foot {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  [data-reveal="media"] :where(img) { transform: none !important; }
  .nse-work-media:hover img, .nse-trade-row figure:hover img { transform: none; }
  .nse-header.is-hidden { transform: none; }
}

body.nse-motion-off :where([data-reveal], .nse-reveal, .nse-stagger > *, .nse-lines .nse-line > i, .nse-mobile-menu nav a, .nse-mobile-menu-foot) {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
  transition: none !important;
}
body.nse-motion-off [data-reveal="media"] :where(img) { transform: none !important; }
body.nse-motion-off .nse-header.is-hidden { transform: none; }

@media print {
  .nse-header, .nse-mobile-menu, .nse-scroll-progress, .nse-skip-link, .nse-dev-build-badge { display: none !important; }
  body { background: #fff; color: #000; }
  .nse-section { padding-block: 20px; }
  [data-reveal], .nse-reveal, .nse-stagger > * { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; color: #555; }
}

@media (forced-colors: active) {
  .nse-btn, .nse-tag, .nse-price-card { border: 1px solid CanvasText; }
  .nse-btn::before { display: none; }
}