:root {
  --pink: #d63a73;
  --pink-deep: #b3285c;
  --pink-glow: #ff5f98;
  --ink: #26211e;
  --ink-2: #5d5550;
  --paper: #f6f2ea;
  --table: #d8d1c4;
  --night: #0d1723;
  --night-2: #13202e;
  --cream: #f3ece1;
  --cream-2: #bfb3a4;
  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  --sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: Consolas, "SFMono-Regular", Menlo, "Liberation Mono", "Courier New", monospace;
  --gutter: clamp(18px, 4.2vw, 60px);
  --header-h: 80px;
  --veil-rgb: 216 209 196;
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* While the scene loads, the veil already has the tint the scene gives it at the start. */
html.js:not(.is-fallback) { --veil-rgb: 201 193 178; }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--table); }
body { margin: 0; background: var(--night); color: var(--ink); font: 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 100; padding: 10px 16px; background: var(--ink); color: var(--cream); font-weight: 600; text-decoration: none; transform: translateY(-200%); }
.skip-link:focus { transform: none; }
main:focus { outline: none; }

/* Header ---------------------------------------------------------------- */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 30;
  display: flex; align-items: center; gap: 20px;
  height: var(--header-h); padding: 0 var(--gutter);
  padding-top: env(safe-area-inset-top, 0px);
  color: var(--ink); transition: color .6s ease, background-color .5s ease, box-shadow .5s ease;
}
html[data-tone="dark"] .site-header { color: var(--cream); }
html.is-scrolled .site-header {
  background: rgb(246 242 234 / .8);
  box-shadow: 0 1px 0 rgb(38 33 30 / .1);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
}
html.is-scrolled[data-tone="dark"] .site-header { background: rgb(13 23 35 / .74); box-shadow: 0 1px 0 rgb(244 237 226 / .1); }
.brand { display: inline-flex; flex: none; }
.brand img { display: block; width: 78px; height: auto; }
.brand-line { margin: 0; padding-left: 18px; border-left: 1px solid currentColor; border-left-color: color-mix(in srgb, currentColor 30%, transparent); font: 11px/1.45 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.brand-line span { opacity: .62; }
.site-nav { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 34px); margin-left: auto; }
.nav-link { font-size: 14px; text-decoration: none; }
.nav-link:hover { color: var(--pink); }
.nav-cta { display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px; border: 1px solid currentColor; border-radius: 999px; font-size: 14px; font-weight: 600; text-decoration: none; transition: background-color .25s, color .25s, border-color .25s; }
.nav-cta:hover { background: var(--pink); border-color: var(--pink); color: #fff; }
.nav-cta-short { display: none; }

/* Story ---------------------------------------------------------------- */
.story { position: relative; background: var(--table); }
.stage { position: sticky; top: 0; z-index: 0; height: 100vh; overflow: hidden; background: var(--table); }
.stage-scene { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; }
.stage-scene canvas { display: block; width: 100%; height: 100%; }
html.is-scene-ready .stage-scene { opacity: 1; }
.stage-veil {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 80% 75% at 62% 52%, rgb(var(--veil-rgb) / 0) 56%, rgb(var(--veil-rgb) / .5) 100%);
}

.stage-fallback { position: absolute; inset: 0; width: 100%; height: 100%; }
html.js:not(.is-fallback) .stage-fallback { display: none; }
.fb-ground { fill: var(--fb-ground, #d8d1c4); transition: fill .6s; }
.fb-sheet rect { fill: #f6f2ea; }
.fb-sheet { opacity: var(--fb-sheet, 1); }
.fb-grid { fill: none; stroke: rgba(60, 57, 53, .08); stroke-width: 1; }
.fb-walls { fill: none; stroke: var(--fb-wall, #3c3935); stroke-width: 7; stroke-linejoin: round; }
.fb-roof { fill: none; stroke: #b8563a; stroke-width: 6; stroke-linejoin: round; opacity: var(--fb-roof, 0); }
.fb-windows rect { fill: var(--fb-window, #b8c8cc); transition: fill .6s; }
.fb-circuit { fill: none; stroke: #e0407a; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - var(--fb-draw, 1)); filter: drop-shadow(0 0 var(--fb-glow, 0px) #ff5f98); }
.fb-node { fill: #f6f2ea; stroke: #e0407a; stroke-width: 3; }

/* Loading sheet: while the 3D prepares, the drawing sheet is already in place, exactly where the
   scene will show it: same framing as layoutRect() in app.js and the first camera key (33 m across,
   or 21 m on portrait screens, turned by 2°). A pink pen sweeps it back and forth until the scene
   fades in over it, plan included. */
.stage-sketch { position: absolute; inset: 0; container-type: size; background: #e5ddca; }
html:not(.js) .stage-sketch, html.is-fallback .stage-sketch { display: none; }
html.is-scene-ready .stage-sketch { visibility: hidden; transition: visibility 0s .7s; }
.sketch-sheet {
  --g: clamp(18px, 4.2cqw, 60px); --x0: max(var(--g) + 452px, 43cqw); --x1: calc(100cqw - var(--g) / 2);
  --y0: 88px; --y1: calc(100cqh - 58px); --frame: 33;
  --k: calc(2 * min(max(40px, (var(--x1) - var(--x0)) / 2), max(40px, (var(--y1) - var(--y0)) / 2)) / var(--frame));
  --cx: calc((var(--x0) + var(--x1)) / 2);
  position: absolute; left: var(--cx); top: calc((var(--y0) + var(--y1)) / 2);
  width: calc(31.5 * var(--k)); height: calc(22.5 * var(--k));
  transform: translate(-50%, -50%) rotate(-2deg);
  box-shadow: calc(-.08 * var(--k)) calc(-.11 * var(--k)) calc(.12 * var(--k)) rgb(70 55 30 / .1);
  animation: sketch-sheet .35s ease-out both;
}
@container (max-width: 760px) or (max-aspect-ratio: 9/10) {
  .sketch-sheet { --x0: 10px; --x1: calc(100cqw - 10px); --y0: 114px; --y1: 56cqh; --frame: 21; }
}
@container (max-width: 700px) { .sketch-sheet { --y0: 98px; } }
@container ((max-width: 760px) or (max-aspect-ratio: 9/10)) and (height < 700px) { .sketch-sheet { --y1: 50cqh; } }
.sketch-paper { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
/* The pen runs over the paper only, inside the board's .25 m edge, and only where it shows: on tall
   phones the sheet is wider than the screen, so the pen turns back 24px inside the screen's edges. */
.sketch-pen {
  position: absolute; top: calc(.25 * var(--k)); bottom: calc(.25 * var(--k));
  left: max(.25 * var(--k), 15.75 * var(--k) - var(--cx) + 24px);
  right: max(.25 * var(--k), var(--cx) + 15.75 * var(--k) - 100cqw + 24px);
  animation: sketch-pen-in .3s .2s both, sketch-pen 1.3s .2s cubic-bezier(.45, 0, .55, 1) infinite alternate both;
}
.sketch-pen::after { content: ""; position: absolute; top: 0; bottom: 0; right: -1px; width: 2px; background: var(--pink); box-shadow: 0 0 10px 1px rgb(255 95 152 / .75); }
@keyframes sketch-sheet { from { opacity: 0; transform: translate(-50%, -50%) rotate(-2deg) scale(1.02); } }
@keyframes sketch-pen { from { transform: translateX(-100%); } }
@keyframes sketch-pen-in { from { opacity: 0; } }
@keyframes sketch-pen-breathe { from { opacity: .25; } }
.sk-board { fill: #f2ebdb; }
.sk-page { fill: #f6f3ea; }
.sk-grid { fill: none; stroke: #e1eaea; stroke-width: 1.2px; vector-effect: non-scaling-stroke; }

.stage-hud {
  position: absolute; right: var(--gutter); bottom: max(22px, env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 12px;
  padding: 7px 16px 7px 12px;
  font: 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); transition: color .6s ease, background-color .6s ease, opacity .5s ease, transform .5s ease;
  background: rgb(246 242 234 / .76); border: 1px solid rgb(38 33 30 / .1); border-radius: 999px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
html[data-tone="dark"] .stage-hud { background: rgb(13 23 35 / .72); border-color: rgb(244 237 226 / .12); }
html.is-story-end .stage-hud { opacity: 0; transform: translateY(8px); }
html[data-tone="dark"] .stage-hud { color: var(--cream); }
.hud-dial { width: 46px; height: 26px; overflow: visible; }
.hud-arc { fill: none; stroke: currentColor; stroke-opacity: .42; stroke-width: 1.4; stroke-dasharray: 2.4 3; }
.hud-horizon { stroke: currentColor; stroke-opacity: .3; stroke-width: 1; }
.hud-sun { fill: var(--pink); }
html[data-tone="dark"] .hud-sun { fill: #f4e2b8; }
.hud-time { font-size: 17px; letter-spacing: .03em; font-variant-numeric: tabular-nums; }
.hud-sep { width: 1px; height: 22px; background: currentColor; opacity: .3; }
.hud-index { color: var(--pink); font-weight: 700; }
html[data-tone="dark"] .hud-index { color: var(--pink-glow); }
.hud-total { opacity: .55; }
.hud-note { padding-left: 12px; border-left: 1px solid currentColor; border-left-color: color-mix(in srgb, currentColor 30%, transparent); opacity: .62; }
.stage-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgb(38 33 30 / .1); }
.stage-progress span { display: block; height: 100%; background: var(--pink); transform-origin: 0 50%; transform: scaleX(var(--story-progress, 0)); }
.stage-progress { transition: opacity .5s ease; }
html.is-story-end .stage-progress { opacity: 0; }
html[data-tone="dark"] .stage-progress { background: rgb(244 237 226 / .12); }
html[data-tone="dark"] .stage-progress span { background: var(--pink-glow); box-shadow: 0 0 10px var(--pink-glow); }
/* The progress line is also a row of links, one per chapter, for visitors in a hurry. */
.story-nav { position: sticky; bottom: env(safe-area-inset-bottom, 0px); z-index: 3; display: flex; height: 18px; margin-top: -18px; transition: opacity .5s ease; }
.story-nav a { position: relative; flex: 1; outline-offset: -3px; }
.story-nav a::before { content: ""; position: absolute; left: 0; bottom: 0; width: 1px; height: 7px; background: rgb(38 33 30 / .3); }
.story-nav a:first-child::before { display: none; }
.story-nav a:focus-visible { background: linear-gradient(to top, rgb(214 58 115 / .25), transparent); }
.story-nav span { position: absolute; bottom: 24px; left: 50%; padding: 6px 10px; white-space: nowrap; font: 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); background: rgb(246 242 234 / .94); border: 1px solid rgb(38 33 30 / .12); border-radius: 999px; transform: translateX(-50%); pointer-events: none; display: none; }
.story-nav a:nth-child(-n + 3) span { left: 6px; transform: none; }
.story-nav a:nth-last-child(-n + 3) span { left: auto; right: 6px; transform: none; }
.story-nav a:focus-visible span { display: block; }
@media (hover: hover) {
  .story-nav a:hover { background: linear-gradient(to top, rgb(214 58 115 / .25), transparent); }
  .story-nav a:hover span { display: block; }
}
.story:has(.story-nav a:hover, .story-nav a:focus-visible) .stage-hud { opacity: 0; }
html.is-story-end .story-nav:not(:focus-within) { opacity: 0; }
html[data-tone="dark"] .story-nav a::before { background: rgb(244 237 226 / .3); }
html[data-tone="dark"] .story-nav span { color: var(--cream); background: rgb(13 23 35 / .92); border-color: rgb(244 237 226 / .14); }

.chapters { position: relative; z-index: 1; margin-top: -100vh; }
.chapter { position: relative; display: flex; align-items: center; min-height: 100vh; padding: 0 var(--gutter); }
.chapter-trade { min-height: 113vh; }
.chapter-last { min-height: 120vh; }

.chapter-hero { display: block; min-height: 130vh; }
.hero-copy { display: flex; flex-direction: column; justify-content: center; min-height: 100vh; max-width: min(640px, 44vw); padding: calc(var(--header-h) + 10px) 0 72px; color: var(--ink); }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 26px; font: 11px/1.3 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--ink-2); }
.eyebrow-dot { width: 8px; height: 8px; border: 2px solid var(--pink); border-radius: 50%; }
.hero-copy h1 { margin: 0; font: 400 clamp(44px, 5.3vw, 94px)/.95 var(--serif); letter-spacing: -.035em; }
.hero-copy h1 .nowrap { white-space: nowrap; }
.hero-copy h1 em { display: block; font-style: italic; color: var(--pink); }
.hero-lead { max-width: 440px; margin: 30px 0 0; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.scroll-cue { display: flex; align-items: center; gap: 14px; margin: 38px 0 0; font: 11px/1 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--ink); }
.scroll-line { position: relative; width: 1px; height: 42px; background: rgb(38 33 30 / .25); overflow: hidden; }
.scroll-line::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: var(--pink); transform-origin: 50% 0; transform: scaleY(var(--hero-progress, .18)); }
.skip-story { display: inline-flex; gap: 8px; margin-top: 16px; padding-bottom: 4px; border-bottom: 1px solid rgb(38 33 30 / .3); font: 11px/1 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; }
.skip-story:hover { color: var(--pink-deep); border-bottom-color: currentColor; }

/* Chapter cards: small plan cartouches pinned over the scene. */
.card {
  position: relative; container-type: inline-size;
  width: min(412px, 100%); padding: 20px 24px 24px;
  background: rgb(246 242 234 / .94); border: 1px solid rgb(38 33 30 / .14);
  color: var(--ink); box-shadow: 0 34px 60px -44px rgb(38 22 12 / .7);
}
.chapter[data-tone="night"] .card { background: rgb(12 21 32 / .86); border-color: rgb(244 237 226 / .15); color: var(--cream); box-shadow: 0 34px 60px -40px rgb(0 0 0 / .8); }
.card-meta { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 18px; padding-bottom: 12px; border-bottom: 1px solid rgb(38 33 30 / .16); font: 11px/1.3 var(--mono); letter-spacing: .11em; text-transform: uppercase; }
.card-meta span:last-child { color: var(--pink-deep); }
.chapter[data-tone="night"] .card-meta { border-bottom-color: rgb(244 237 226 / .16); }
.chapter[data-tone="night"] .card-meta span:last-child { color: var(--pink-glow); }
.card h2 { margin: 0 0 14px; font: 400 clamp(30px, 3vw, 46px)/1.02 var(--serif); letter-spacing: -.025em; }
.card h2 em { display: block; font-style: italic; color: var(--pink); }
.chapter[data-tone="night"] .card h2 em { color: var(--pink-glow); }
.card p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.chapter[data-tone="night"] .card p { color: var(--cream-2); }
.card-list { display: grid; margin: 18px 0 0; padding: 0; list-style: none; border-top: 1px solid rgb(38 33 30 / .14); }
.card-list li { position: relative; padding: 9px 0 9px 22px; border-bottom: 1px solid rgb(38 33 30 / .14); font-size: 14px; line-height: 1.35; }
.card-list li::before { content: ""; position: absolute; left: 1px; top: 50%; width: 7px; height: 7px; border: 2px solid var(--pink); border-radius: 50%; transform: translateY(-50%); }
.card-photo { margin: 18px 0 0; }
.card-photo img { display: block; width: 100%; height: auto; aspect-ratio: 1280 / 762; object-fit: cover; }
.card-photo figcaption { margin-top: 8px; font: 11px/1.45 var(--mono); letter-spacing: .04em; color: var(--ink-2); }
.card-link { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding-top: 13px; border-top: 1px solid rgb(38 33 30 / .14); font-size: 14px; font-weight: 600; color: var(--pink-deep); text-decoration: none; }
.card-link:hover { color: var(--pink); }

/* Qualification marks: the body's mark exactly as published, on its transparent ground (scaled evenly,
   never recoloured, cropped or left tilted, smaller than the SIEM logo), or the credential set in type
   when it has no mark. Each links to where it can be checked: Qualifelec asks for its site and a link
   beside its mark. On a trade's card the mark comes down once its equipment runs in the scene; in the
   company facts, once the circuit reaches it. Setting data-qualifications to anything but "on" on
   <html> hides them all. */
html:not([data-qualifications="on"]) [data-qualification] { display: none; }
.stamp {
  --mark-h: 50px;
  position: relative; display: inline-grid; justify-items: center; align-content: center; gap: 7px;
  margin: 0; padding: 6px 8px 5px;
  color: var(--pink-deep); font: 9px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
}
/* The mark and its words; at publication the mark links to the certificate, the small link beneath to where the
   credential can be checked. */
.stamp-mark { display: grid; justify-items: center; gap: inherit; color: inherit; text-decoration: none; }
/* The mark opens the certificate itself: its words underline under the pointer. */
a.stamp-mark:hover .stamp-scope { text-decoration: underline; text-underline-offset: 2px; }
/* A mark keeps its proportions: its height is set, and no box width may squeeze it (the IRVE one overflows its
   box on purpose, see below). */
.stamp img { display: block; width: auto; max-width: none; height: var(--mark-h); }
/* The Bureau Veritas mark is a solid red tile: drawn a little lower, it does not outweigh the others. */
.stamp .mark-bv { height: calc(var(--mark-h) * .9); }
/* The IRVE file has wide transparent margins (46, 76, 44 and 46 px of 500 × 601): its box is tightened to
   the drawing, drawn 1.1 times taller so that its word mark reads about as large as the plain mark's. */
.stamp .mark-irve { height: calc(var(--mark-h) * 1.294); margin: calc(var(--mark-h) * -.099) calc(var(--mark-h) * -.164) calc(var(--mark-h) * -.095) calc(var(--mark-h) * -.099); }
.stamp-name { display: grid; place-items: center; min-height: var(--mark-h); max-width: 8em; font: 700 12px/1.3 var(--sans); letter-spacing: .08em; color: var(--ink); text-align: center; white-space: normal; }
.stamp-site { font-size: 9.5px; letter-spacing: .02em; text-transform: none; color: var(--ink-2); text-decoration: underline; text-decoration-color: rgb(38 33 30 / .3); text-underline-offset: 2px; }
.stamp-site:hover { color: var(--pink-deep); text-decoration-color: currentColor; }
/* On the card, the mark sits on the paper beside the end of the list, whose last rules stop short of it.
   Narrow cards give it its own line. */
.card .stamp { position: absolute; right: 18px; translate: 0 calc(6px - 100%); }
@container (min-width: 341px) {
  html[data-qualifications="on"] .card:has(> .stamp) .card-list li:nth-last-child(-n+3) {
    border-bottom-color: transparent;
    background: linear-gradient(rgb(38 33 30 / .14) 0 0) left bottom / calc(100% - 104px) 1px no-repeat;
  }
}
@container (max-width: 340px) {
  .card .stamp { position: relative; display: grid; width: max-content; margin: 16px 4px 0 auto; translate: none; }
}
html.js .card .stamp, .after-story.has-trail .facts div:not(.is-on) .stamp { opacity: 0; transform: translateY(-10px) rotate(-9deg) scale(1.7); }
.card .stamp, .facts .stamp { transition: opacity .12s ease-in, transform .34s cubic-bezier(.3, 1.45, .55, 1); }
html.js .card .stamp.is-stamped { opacity: 1; transform: none; }

/* After the story: the circuit leaves the scene and runs through the page. */
.after-story { position: relative; overflow: hidden; background: var(--night); color: var(--cream); }
.trail { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.trail-base { fill: none; stroke: rgb(255 95 152 / .17); stroke-width: 2; stroke-linejoin: round; }
.trail-live { fill: none; stroke: var(--pink-glow); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 5px rgb(255 95 152 / .75)); }
.trail-nodes circle { fill: var(--night); stroke: rgb(255 95 152 / .35); stroke-width: 2; transition: fill .35s, stroke .35s; }
.trail-nodes circle.is-on { fill: var(--pink-glow); stroke: var(--pink-glow); }
.company, .contact { position: relative; z-index: 1; padding: clamp(84px, 13vh, 150px) var(--gutter) clamp(72px, 11vh, 130px); }
.company { padding-left: calc(var(--gutter) + 34px); }
.contact { padding-left: calc(var(--gutter) + 34px); }
.section-head { display: flex; justify-content: space-between; gap: 16px; margin-bottom: clamp(38px, 6vh, 68px); padding-bottom: 14px; border-bottom: 1px solid rgb(244 237 226 / .17); font: 11px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--cream-2); }
.company-copy { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 clamp(30px, 5vw, 80px); align-items: start; }
.company-copy h2, .contact-copy h2 { margin: 0 0 24px; font: 400 clamp(40px, 5.2vw, 82px)/.98 var(--serif); letter-spacing: -.032em; }
.company-copy h2 em, .contact-copy h2 em { display: block; font-style: italic; color: var(--pink-glow); }
.company-copy > p { grid-column: 1; max-width: 600px; margin: 0; font-size: 18px; line-height: 1.65; color: var(--cream-2); }
.facts { grid-column: 2; grid-row: 1 / span 3; align-self: end; margin: 0; border-top: 1px solid rgb(244 237 226 / .17); }
.facts div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; padding: 15px 0; border-bottom: 1px solid rgb(244 237 226 / .17); }
.facts dt { padding-top: 4px; font: 11px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--cream-2); }
.facts dd { margin: 0; font-size: 17px; line-height: 1.45; }
.facts address { font-style: normal; }
.text-link { grid-column: 1; justify-self: start; display: inline-flex; gap: 12px; margin-top: 30px; padding-bottom: 8px; border-bottom: 1px solid var(--pink-glow); font-weight: 600; text-decoration: none; }
.text-link:hover { color: var(--pink-glow); }
.quals { display: flex; flex-wrap: wrap; gap: 10px; margin: 2px 0 0; padding: 0; list-style: none; }
.quals li { display: grid; }
/* In the company facts the marks stand on the night itself; their words turn light. */
.facts .stamp { padding: 4px 6px; gap: 6px; color: var(--pink-glow); }
.facts .stamp-name { color: var(--cream); }
.facts .stamp-site { color: var(--cream-2); text-decoration-color: rgb(244 237 226 / .35); }
.facts .stamp-site:hover { color: var(--pink-glow); }
.quals li:nth-child(2) .stamp { transition-delay: .12s; }
.quals li:nth-child(3) .stamp { transition-delay: .24s; }

.contact-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(34px, 6vw, 96px); align-items: start; }
.contact-copy > p { max-width: 520px; margin: 0; font-size: 18px; line-height: 1.65; color: var(--cream-2); }
.contact-switch { display: block; width: 150px; height: 56px; margin: -4px 0 22px -2px; overflow: visible; color: var(--cream-2); }
.trail-branch { fill: none; stroke: rgb(255 95 152 / .2); stroke-width: 2; transition: stroke .35s; }
.trail-branch.is-on { stroke: var(--pink-glow); }
.sw-in, .sw-out { fill: none; stroke: rgb(255 95 152 / .17); stroke-width: 2; stroke-linecap: round; transition: stroke .3s, stroke-width .3s; }
.sw-pin { fill: var(--night); stroke: currentColor; stroke-width: 2.5; }
.sw-lever { fill: none; stroke: currentColor; stroke-width: 3.5; stroke-linecap: round; transform-origin: 46px 28px; transition: transform .55s cubic-bezier(.3, 1.4, .4, 1); }
.sw-lamp { fill: transparent; stroke: currentColor; stroke-width: 2.5; transition: fill .4s, stroke .4s, filter .4s; }
.sw-cross { stroke: currentColor; stroke-width: 2.5; transition: stroke .4s; }
.contact.is-connected .sw-lever { transform: rotate(25.35deg); stroke: var(--pink-glow); }
.contact.is-connected .sw-in, .contact.is-connected .sw-out { stroke: var(--pink-glow); stroke-width: 2.5; filter: drop-shadow(0 0 5px rgb(255 95 152 / .75)); }
.contact.is-connected .sw-lamp { fill: #ffd489; stroke: #ffd489; filter: drop-shadow(0 0 12px #ffc86b); }
.contact.is-connected .sw-cross { stroke: #9a6a2c; }
.contact-card { padding: clamp(22px, 3vw, 34px); background: rgb(19 32 46 / .75); border: 1px solid rgb(244 237 226 / .16); }
.contact-label { display: block; font: 11px/1.3 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--cream-2); }
.contact-phone { display: block; margin: 8px 0 26px; font: 400 clamp(34px, 3.9vw, 56px)/1 var(--serif); letter-spacing: -.02em; text-decoration: none; transition: color .5s, text-shadow .5s; }
.contact.is-connected .contact-phone { color: var(--pink-glow); text-shadow: 0 0 26px rgb(255 95 152 / .45); }
.contact-mail { display: inline-flex; gap: 10px; margin: 8px 0 6px; font-size: 20px; font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--pink-glow); padding-bottom: 4px; }
.contact-phone:hover, .contact-mail:hover { color: var(--pink-glow); }
.contact-note { margin: 6px 0 26px; font-size: 13px; color: var(--cream-2); }
.contact-address { margin: 8px 0 0; font-size: 16px; }

/* Contact: on the left the direct ways to reach SIEM, on the right the card the circuit feeds, with the
   visitor's own plan to fill in, laid out like a drawing's title block. Once sent, the plan is stamped. */
.contact-direct { margin-top: clamp(30px, 5vh, 46px); padding-top: 24px; border-top: 1px solid rgb(244 237 226 / .17); }
.plan-form { position: relative; color: var(--cream); }
.plan-form-head { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding-bottom: 12px; border-bottom: 1px solid rgb(244 237 226 / .4); font: 11px/1.3 var(--mono); letter-spacing: .11em; text-transform: uppercase; color: var(--cream-2); }
.plan-form-head span:last-child { color: var(--pink-glow); white-space: nowrap; }
.plan-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.plan-field { display: grid; align-content: start; gap: 6px; margin: 0; padding: 12px 14px 10px 0; border-bottom: 1px solid rgb(244 237 226 / .14); }
.plan-col2 { padding-left: 14px; border-left: 1px solid rgb(244 237 226 / .14); }
.plan-field label, .plan-trades legend { font: 11px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--cream-2); }
.plan-required { color: var(--pink-glow); }
.plan-field input, .plan-field textarea { width: 100%; padding: 4px 0 6px; border: 0; border-bottom: 1px dashed rgb(244 237 226 / .3); border-radius: 0; background: transparent; color: var(--cream); font: 16px/1.4 var(--sans); }
.plan-field textarea { min-height: 96px; resize: vertical; }
.plan-field :is(input, textarea):focus-visible { outline: none; border-bottom: 1px solid var(--pink-glow); box-shadow: 0 2px 0 var(--pink-glow); }
/* Browser autofill keeps the night colours. */
.plan-field input:-webkit-autofill { -webkit-text-fill-color: var(--cream); box-shadow: 0 0 0 60px var(--night-2) inset; caret-color: var(--cream); }
.plan-wide, .plan-hint, .plan-trades { grid-column: 1 / -1; }
.plan-wide { position: relative; padding-right: 0; }
.plan-hint { margin: 0; padding: 8px 0 2px; font-size: 12.5px; line-height: 1.45; color: var(--cream-2); }
.plan-trades { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; margin: 0; padding: 12px 0 14px; border: 0; border-bottom: 1px solid rgb(244 237 226 / .14); }
.plan-trades legend { float: left; width: 100%; margin: 0 0 4px; padding: 0; }
.plan-chip { position: relative; display: inline-flex; cursor: pointer; }
.plan-chip input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.plan-chip span { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px 7px 9px; border: 1px solid rgb(244 237 226 / .28); border-radius: 999px; font-size: 14px; line-height: 1; transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s; }
.plan-chip svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.plan-chip:hover span { border-color: var(--pink-glow); }
.plan-chip input:checked + span { background: var(--pink-glow); border-color: var(--pink-glow); color: var(--night); box-shadow: 0 0 14px rgb(255 95 152 / .45); }
.plan-chip input:focus-visible + span { outline: 2px solid var(--pink-glow); outline-offset: 2px; }
/* A trap for robots, out of sight and out of the tab order. */
.plan-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.plan-form-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; margin-top: 16px; }
.plan-legal { flex: 1 1 220px; margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--cream-2); }
.plan-legal a { color: var(--pink-glow); }
.plan-send { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border: 0; border-radius: 999px; background: var(--pink-glow); color: var(--night); font: 700 15px/1 var(--sans); cursor: pointer; transition: box-shadow .25s; }
.plan-send:hover { box-shadow: 0 0 22px rgb(255 95 152 / .55); }
.plan-send:disabled { opacity: .6; cursor: progress; }
.plan-status { margin: 12px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--cream); }
.plan-status:empty { margin: 0; }
.plan-form.is-failed .plan-status { color: #ff9aa6; }
/* While sending, the current runs along the bottom of the sheet. */
.plan-form::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, transparent, var(--pink-glow), transparent) no-repeat; background-size: 40% 100%; opacity: 0; pointer-events: none; }
.plan-form.is-sending::after { opacity: 1; animation: plan-current 1s linear infinite; }
@keyframes plan-current { from { background-position: -70% 0; } to { background-position: 170% 0; } }
.plan-stamp { position: absolute; right: 12px; bottom: 20px; display: grid; justify-items: center; gap: 6px; margin: 0; padding: 10px 16px 9px; border: 4px double var(--pink-glow); border-radius: 6px; color: var(--pink-glow); font: 700 15px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; text-shadow: 0 0 12px rgb(255 95 152 / .5); pointer-events: none; opacity: 0; transform: rotate(-12deg) scale(1.8); transition: opacity .12s ease-in, transform .32s cubic-bezier(.3, 1.45, .55, 1); }
.plan-stamp-date { font-size: 10px; font-weight: 400; letter-spacing: .2em; }
.plan-form.is-sent .plan-stamp { opacity: .95; transform: rotate(-7deg); }

/* Footer ---------------------------------------------------------------- */
.site-footer { position: relative; z-index: 1; padding: 44px var(--gutter) calc(28px + env(safe-area-inset-bottom, 0px)); background: #09111a; color: var(--cream); }
.footer-main { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px; padding-bottom: 28px; border-bottom: 1px solid rgb(244 237 226 / .14); }
.footer-brand { display: inline-flex; }
.footer-brand img { display: block; width: 92px; height: auto; }
.footer-signature { margin: 0; font: 400 clamp(22px, 2.4vw, 32px)/1.1 var(--serif); letter-spacing: -.02em; }
.footer-signature em { color: var(--pink-glow); }
.footer-meta { margin: 0; text-align: right; font: 11px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--cream-2); }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding-top: 22px; font: 11px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--cream-2); }
.footer-bottom a { text-decoration: none; }
.footer-bottom a:hover { color: var(--pink-glow); }
.footer-note { margin: 22px 0 0; font-size: 12px; line-height: 1.5; color: rgb(191 179 164 / .8); }
.footer-bottom a[aria-current="page"] { color: var(--cream); }

/* Legal notice: a plain document under the same header and footer. */
.page-legal body { background: var(--paper); }
.page-legal .site-header { background: rgb(246 242 234 / .9); box-shadow: 0 1px 0 rgb(38 33 30 / .1); -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15); }
.legal { max-width: 780px; margin: 0 auto; padding: calc(var(--header-h) + clamp(44px, 8vh, 90px)) var(--gutter) clamp(64px, 10vh, 110px); }
.legal .legal-eyebrow { margin: 0 0 18px; font: 11px/1.3 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--ink-2); }
.legal h1 { margin: 0; font: 400 clamp(40px, 6vw, 72px)/1 var(--serif); letter-spacing: -.03em; }
.legal h1 em { font-style: italic; color: var(--pink); }
.legal .legal-lead { margin: 22px 0 0; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.legal section { margin-top: clamp(40px, 6vh, 56px); }
.legal h2 { margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid rgb(38 33 30 / .16); font: 11px/1.3 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--pink-deep); }
.legal p { margin: 0 0 12px; font-size: 16px; line-height: 1.65; color: var(--ink-2); }
.legal a { color: var(--pink-deep); text-underline-offset: 3px; }
.legal a:hover { color: var(--pink); }
.legal-facts { margin: 0; }
.legal-facts div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding: 11px 0; border-bottom: 1px solid rgb(38 33 30 / .1); }
.legal-facts dt { padding-top: 3px; font: 11px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.legal-facts dd { margin: 0; font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
.legal-facts address { font-style: normal; }
.legal-facts + p { margin-top: 14px; }
.legal .legal-updated { margin-top: 48px; font: 11px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }

/* Without JavaScript the story becomes a regular document. */
html:not(.js) .stage { position: relative; height: 72vh; }
html:not(.js) .stage-scene, html:not(.js) .stage-hud, html:not(.js) .stage-progress { display: none; }
html:not(.js) .chapters { margin-top: 0; }
html:not(.js) .chapter { min-height: 0; padding-block: 48px; }
html:not(.js) .hero-copy { min-height: 0; max-width: 680px; }
html:not(.js) .after-story .trail { display: none; }
html:not(.js) .story-nav { display: none; }

/* Layout breakpoints ----------------------------------------------------- */
@media (max-width: 1100px) {
  .brand-line { display: none; }
  .hero-copy { max-width: min(540px, 44vw); }
}
@media (max-width: 900px) {
  /* Only the réalisations stay in the menu, with a target large enough for a finger. */
  .nav-link:not(.nav-phone, .nav-works) { display: none; }
  .nav-works { padding-block: 12px; }
  .company-copy { grid-template-columns: minmax(0, 1fr); }
  .facts { grid-column: 1; grid-row: auto; margin-top: 34px; }
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
}
/* Portrait screens (same rule as the scene framing): the subject above, the cards below. */
@media (max-width: 760px), (max-aspect-ratio: 9/10) {
  .stage-hud { top: calc(var(--header-h) + env(safe-area-inset-top, 0px)); bottom: auto; left: var(--gutter); right: auto; gap: 10px; }
  .chapter { align-items: flex-end; min-height: 113vh; padding-bottom: 12vh; }
  .chapter-trade { min-height: 132vh; }
  .chapter-last { min-height: 128vh; }
  .chapter-hero { min-height: 132vh; }
  .chapters { overflow-x: clip; }
  .hero-copy { justify-content: flex-end; max-width: 640px; padding: 0 0 max(40px, 7vh); }
  .hero-text { position: relative; isolation: isolate; }
  .hero-text::before { content: ""; position: absolute; z-index: -1; top: -64px; bottom: calc(-1 * max(40px, 7vh)); left: calc(-1 * var(--gutter)); width: 100vw; background: linear-gradient(to top, rgb(var(--veil-rgb) / .92) 72%, rgb(var(--veil-rgb) / 0)); pointer-events: none; }
  .card { width: min(560px, 100%); }
}
@media (max-width: 700px) {
  :root { --header-h: 64px; }
  .brand img { width: 64px; }
  .nav-phone { display: none; }
  .nav-cta { padding: 9px 14px; }
  .nav-cta-long { display: none; }
  .nav-cta-short { display: inline; }
  .stage-hud { right: var(--gutter); }
  .hud-dial { width: 36px; height: 21px; }
  .hud-time { font-size: 14px; }
  .hud-note { display: none; }
  .hud-total { display: none; }
  .story-nav { height: 26px; margin-top: -26px; }
  .hero-copy { max-width: none; }
  .hero-copy h1 { font-size: clamp(38px, 11.6vw, 60px); }
  .hero-lead { margin-top: 18px; font-size: 15.5px; }
  .eyebrow { margin-bottom: 16px; }
  .scroll-cue { margin-top: 22px; }
  .scroll-line { height: 30px; }
  .card { padding: 16px 18px 18px; }
  .card h2 { font-size: clamp(28px, 8.2vw, 36px); }
  .card p { font-size: 15px; }
  .card-photo img { aspect-ratio: 2.3; }
  .company, .contact { padding-left: calc(var(--gutter) + 22px); }
  .facts div, .legal-facts div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .plan-form-grid { grid-template-columns: minmax(0, 1fr); }
  .plan-field { padding-right: 0; }
  .plan-col2 { padding-left: 0; border-left: 0; }
  .footer-main { grid-template-columns: auto 1fr; }
  .footer-meta { grid-column: 1 / -1; text-align: left; }
}

/* Card titles stay on one line on phones. */
@media (max-width: 420px) {
  .card .card-meta { font-size: 13px; letter-spacing: .08em; }
  .plan-form-head span:last-child { display: none; }
}
@media (max-width: 360px) {
  .hero-copy h1 .nowrap { white-space: normal; }
  .eyebrow { font-size: 10px; letter-spacing: .1em; }
}
@media (max-width: 700px) and (max-height: 700px) {
  .hero-copy h1 { font-size: clamp(34px, 10.4vw, 48px); }
  .hero-lead { font-size: 14.5px; line-height: 1.5; }
  .eyebrow { margin-bottom: 12px; }
  .scroll-cue { margin-top: 16px; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
  /* Without motion, the pen waits in the middle of the sheet and breathes: the page still shows it is loading. */
  .sketch-pen { transform: translateX(-50%); animation: sketch-pen-breathe 1.4s ease-in-out infinite alternate both !important; }
}