/* ==========================================================================
   Texture, choreographed hero, architecture and rigour blocks.
   Loaded after site.css. Same Nocturne tokens; nothing new is introduced.
   ========================================================================== */

/* Grain and vignette over everything: a printed-paper feel on the dark ground */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: 59; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0, 0, 0, .38) 100%);
}
.band {
  background:
    repeating-linear-gradient(135deg, transparent 0 13px, rgba(198, 178, 124, .028) 13px 14px),
    linear-gradient(180deg, #13121b, var(--surface));
}
section { border-top: 1px solid var(--divider); }
.ticker + section { border-top: 0; }

/* Plates: registration ticks at the corners, like a printed instrument */
.plate::after {
  content: ""; position: absolute; right: 10px; bottom: 10px; width: 14px; height: 14px; pointer-events: none;
  border-right: 1px solid var(--a700); border-bottom: 1px solid var(--a700); opacity: .7;
  transition: opacity .4s, width .4s var(--ease), height .4s var(--ease), border-color .4s;
}
.plate:hover::after { opacity: 1; width: 22px; height: 22px; border-color: var(--a400); }
.plate .asks { margin: 18px 0 14px; padding-top: 14px; border-top: 1px dashed var(--divider); font-size: 14px; color: var(--text); }
.plate .asks .label { display: block; margin-bottom: 4px; }
.chip { align-self: flex-start; font: 400 9.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--a300); border: 1px solid var(--a800); background: var(--a900); padding: 7px 9px; margin: 0 0 14px; }

/* ---- Hero ---- */
.hero { min-height: 100svh; display: flex; align-items: center; padding: 118px 0 64px; }
.hero-grid {
  position: absolute; inset: 0; z-index: -1; opacity: .8;
  background-image: linear-gradient(var(--divider) 1px, transparent 1px), linear-gradient(90deg, var(--divider) 1px, transparent 1px);
  background-size: 64px 64px; background-position: center top;
  -webkit-mask-image: radial-gradient(70% 70% at 70% 45%, #000 20%, transparent 75%);
  mask-image: radial-gradient(70% 70% at 70% 45%, #000 20%, transparent 75%);
  animation: fade 2s var(--ease) both;
}
.hero .mark-wrap { right: auto; left: 46%; top: 50%; width: min(70vw, 760px); translate: 0 -50%; opacity: .55; }
.hero .rings { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--a700); stroke-width: .35; animation: slow 140s linear infinite reverse; }
.hero .rings polygon { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 2.6s var(--ease) .3s forwards; }
.hero-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 84px); align-items: center; position: relative; }
.hero h1 { max-width: 14ch; perspective: 800px; font-size: clamp(46px, 7.6vw, 100px); }
.hero h1 em { font-style: italic; color: var(--a300); }
.hero .lede { margin-bottom: 14px; }
.hero .lede.dim { color: var(--text-3); }
.hero .kicker { min-height: 1.5em; }

.w { display: inline-block; animation: word 1s var(--ease) both; animation-delay: calc(.9s + var(--k) * .12s); }
@keyframes word { from { opacity: 0; transform: translateY(.5em) rotateX(45deg); filter: blur(10px); } }
.type span {
  display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom;
  width: calc(var(--n) * (1ch + .2em)); border-right: 1px solid var(--a400);
  animation: typing 1.7s steps(var(--n)) .15s both, caret .55s step-end 5 .15s forwards;
}
@keyframes typing { from { width: 0; } }
@keyframes caret { 50% { border-right-color: transparent; } 100% { border-right-color: transparent; } }
.step { animation: rise .9s var(--ease) both; animation-delay: calc(1.9s + var(--s) * .2s); }
.ul { position: relative; display: inline-block; }
.ul::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.04em; height: 1px; background: linear-gradient(90deg, var(--a400), transparent); transform-origin: left; animation: drawx 1.4s var(--ease) 2.2s both; }
@keyframes drawx { from { transform: scaleX(0); } }

.record {
  position: relative; border: 1px solid var(--a700); padding: clamp(20px, 2.4vw, 30px);
  background: linear-gradient(160deg, rgba(43, 37, 19, .55), rgba(18, 17, 26, .92) 55%);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8), inset 0 0 0 4px rgba(12, 11, 18, .6), inset 0 0 0 5px var(--a800);
  animation: panel 1.1s var(--ease) .5s both;
}
@keyframes panel { from { opacity: 0; transform: translateY(26px) scale(.985); } }
.record::before, .record::after { content: ""; position: absolute; width: 18px; height: 18px; border: 1px solid var(--a400); }
.record::before { top: -5px; left: -5px; border-right: 0; border-bottom: 0; }
.record::after { right: -5px; bottom: -5px; border-left: 0; border-top: 0; }
.rec-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--divider); }
.rec-title { font: 300 clamp(26px, 2.6vw, 34px)/1.1 var(--head); color: var(--a300); margin: 18px 0 12px; }
.rec-rows { list-style: none; margin: 0; padding: 0; }
.rec-rows li {
  display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: baseline; padding: 11px 0;
  border-bottom: 1px solid var(--divider); position: relative; overflow: hidden;
  animation: recrow .8s var(--ease) both; animation-delay: calc(1.5s + var(--r) * .42s);
}
.rec-rows li::after {
  content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(216, 199, 154, .18), transparent);
  transform: translateX(-110%); animation: scan 1.1s var(--ease) both; animation-delay: calc(1.6s + var(--r) * .42s);
}
.rec-rows b { font-weight: 500; font-size: 14px; color: var(--text); }
@keyframes recrow { from { opacity: 0; transform: translateX(-14px); } }
@keyframes scan { to { transform: translateX(110%); } }
.rec-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 16px; }
.stamp { display: inline-block; font-size: clamp(30px, 3.2vw, 42px); transform: rotate(-3deg); transform-origin: 20% 70%; animation: stamp .9s cubic-bezier(.2, 1.5, .3, 1) 3.7s both; }
@keyframes stamp { from { opacity: 0; transform: scale(1.9) rotate(-9deg); filter: blur(3px); } 60% { transform: scale(.96) rotate(-3deg); } to { transform: rotate(-3deg); } }

.replay { position: absolute; right: var(--gutter); bottom: 22px; background: none; border: 0; cursor: pointer; padding: 8px; transition: color .25s; }
.replay:hover { color: var(--a300); }
.hero.reset * { animation: none !important; opacity: 0; }

.ticker { border-block: 1px solid var(--divider); overflow: hidden; background: var(--bg); }
.ticker-track { display: flex; gap: 56px; width: max-content; padding: 14px 0; animation: marquee 48s linear infinite; font: 400 11px/1 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--text-3); }
.ticker-track span::before { content: "◇"; color: var(--a700); margin-right: 56px; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---- Architecture ---- */
.spine { list-style: none; margin: 0; padding: 0; border: 1px solid var(--divider); background: var(--surface); }
.spine li {
  display: grid; grid-template-columns: 56px 190px minmax(0, 1fr) 210px auto; gap: 18px; align-items: baseline;
  padding: 17px 20px; border-bottom: 1px solid var(--divider); position: relative; transition: background .3s var(--ease), padding-left .3s var(--ease);
}
.spine li:last-child { border-bottom: 0; }
.spine li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--a700); transform: scaleY(0); transform-origin: top; transition: transform .45s var(--ease); }
.spine li:hover { background: #17151f; padding-left: 28px; }
.spine li:hover::before, .spine li.hot::before { transform: scaleY(1); }
.spine li.hot { background: linear-gradient(90deg, rgba(78, 66, 31, .28), transparent 70%); }
.spine li.fast::before { transform: scaleY(1); background: var(--a300); animation: throb 2.4s ease-in-out infinite; }
@keyframes throb { 50% { opacity: .35; } }
.p-code { font: 400 11px/1 var(--mono); letter-spacing: .18em; color: var(--a700); }
.p-name { font: 400 24px/1.1 var(--head); color: var(--text); }
.p-q { color: var(--text-2); font-size: 14px; line-height: 1.55; }
.p-rate { font: 400 10px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-4); }
.p-on { display: flex; gap: 6px; }
.p-on b { font: 400 9.5px/1 var(--mono); letter-spacing: .14em; color: var(--a100); background: var(--a800); padding: 6px 8px; }

/* ---- Rigour blocks ---- */
.split2 { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--divider); background: var(--bg); margin-bottom: 40px; }
.split2 .col { padding: clamp(22px, 3vw, 36px); }
.split2 .col + .col { border-left: 1px solid var(--divider); background: linear-gradient(180deg, rgba(43, 37, 19, .25), transparent); }
.split2 .label { color: var(--a600); margin-bottom: 14px; display: block; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ticks li { padding-left: 24px; position: relative; color: var(--text-2); font-size: 14.5px; line-height: 1.65; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; border: 1px solid var(--a400); transform: rotate(45deg); }
.ticks b { font-weight: 600; color: var(--text); }
.table-wrap { overflow-x: auto; border: 1px solid var(--divider); }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 620px; }
.tbl th { background: var(--a900); color: var(--a300); font: 400 10px/1.5 var(--mono); letter-spacing: .16em; text-transform: uppercase; text-align: left; padding: 12px 18px; }
.tbl td { padding: 15px 18px; border-top: 1px solid var(--divider); color: var(--text-2); vertical-align: top; }
.tbl td:first-child { color: var(--text); }
.tbl tbody tr { transition: background .25s; }
.tbl tbody tr:hover { background: #15141e; }

.offers { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--divider); counter-reset: o; }
.offers li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px; padding: 24px 0 24px 52px; border-bottom: 1px solid var(--divider); position: relative; counter-increment: o; transition: background .3s; }
.offers li::before { content: counter(o, upper-roman); position: absolute; left: 0; top: 25px; font: 400 11px/1 var(--mono); letter-spacing: .16em; color: var(--a700); }
.offers li:hover { background: linear-gradient(90deg, rgba(43, 37, 19, .4), transparent 60%); }
.o-if { font: 400 clamp(20px, 2.2vw, 26px)/1.25 var(--head); color: var(--text); }
.o-then { color: var(--text-2); font-size: 14.5px; }

.linklist { display: grid; border: 1px solid var(--divider); background: var(--surface); }
.linklist a { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 18px 22px; border-bottom: 1px solid var(--divider); color: var(--text); transition: background .3s, padding-left .3s var(--ease); }
.linklist a:last-child { border-bottom: 0; }
.linklist a:hover { background: #17151f; padding-left: 30px; }
.linklist .label { grid-column: 1 / -1; color: var(--a700); }
.linklist b { font: 400 22px/1.2 var(--head); }
.linklist i { grid-column: 1; font-style: normal; font-size: 13.5px; color: var(--text-3); }
.linklist u { grid-row: 2 / span 2; grid-column: 2; align-self: center; text-decoration: none; color: var(--a400); font-size: 18px; transition: transform .3s var(--ease); }
.linklist a:hover u { transform: translate(3px, -3px); }

.lead { border-top: 1px solid var(--a800); }
.done.slim { padding: 10px 0; border: 0; background: none; }
.done.slim p { margin: 0; color: var(--a300); }
.newsletter { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; padding-bottom: 44px; margin-bottom: 44px; border-bottom: 1px solid var(--divider); }
.nl-line { font: 300 clamp(22px, 2.4vw, 30px)/1.25 var(--head); color: var(--text); margin: 10px 0 0; max-width: 28ch; }
.nl-form { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.nl-form .nl-consent, .nl-form .msg { grid-column: 1 / -1; }
.nl-form input[type=email] { padding: 11px 14px; }
.nl-consent { font-size: 12.5px; }

/* ---- Responsive ---- */
@media (max-width: 1060px) {
  .spine li { grid-template-columns: 48px 160px minmax(0, 1fr); }
  .spine .p-rate, .spine .p-on { grid-column: 3; }
}
@media (max-width: 900px) {
  .hero { align-items: flex-start; padding-top: 104px; }
  .hero-in { grid-template-columns: 1fr; }
  .hero .mark-wrap { left: 20%; width: 120vw; opacity: .3; }
  .split2 { grid-template-columns: 1fr; }
  .split2 .col + .col { border-left: 0; border-top: 1px solid var(--divider); }
  .offers li { grid-template-columns: 1fr; gap: 8px; }
  .newsletter { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .spine li { grid-template-columns: 40px minmax(0, 1fr); padding: 15px 14px; }
  .spine .p-name, .spine .p-q, .spine .p-rate, .spine .p-on { grid-column: 2; }
  .rec-rows li { grid-template-columns: 1fr; gap: 2px; }
  .nl-form { grid-template-columns: 1fr; }
  .replay { display: none; }
}

/* Reduced motion: nothing spins, scales, slides or scrolls. The hero still plays: words and rows fade
   in, the mark and rules draw, the specimen line types. Drawing and fading are not vestibular triggers,
   and many Windows machines report "reduce" because system animations are switched off, so a full
   opt-out would make the introduction look broken rather than calm. */
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 0; transform: none; transition: opacity 1s ease; transition-delay: calc(var(--i, 0) * 80ms); }
  .rv.in { opacity: 1; }
  .mark, .hero .rings, .ticker-track, .status.on i, .spine li.fast::before { animation: none; }
  .mark line { animation: draw 1.6s var(--ease) forwards; animation-delay: calc(var(--i) * 70ms + 250ms); }
  .hero .rings polygon { animation: draw 2.6s var(--ease) .3s forwards; }
  .w { animation: fade 1s ease both; animation-delay: calc(.9s + var(--k) * .12s); }
  .step, .record, .rec-rows li { animation-name: fade; }
  .stamp { animation: fade 1s ease 3.7s both; }
  .rec-rows li::after { display: none; }
  .btn:hover, .spine li:hover, .linklist a:hover { transform: none; padding-left: revert; }
}

/* ---- Platform gateway pages (eete., odl., dip. subdomains) ---- */
.hero.gateway .hero-copy { max-width: 760px; }
.hero.gateway h1 { font-size: clamp(48px, 9vw, 120px); max-width: none; }
.gw-ask { margin: 26px 0 6px; padding: 16px 0 0; border-top: 1px dashed var(--divider); max-width: 52ch; }
.gw-ask .label { display: block; margin-bottom: 6px; }
.gw-ask b { font: 400 clamp(20px, 2.4vw, 26px)/1.3 var(--head); color: var(--text); }
.hero.gateway .status { margin: 28px 0 0; }