/* 047 v5: the shared system for the pages Lumen SITE builds (Home, Careers and the role pages, Contact, the legal pages and
   notices, 404). Built ON theme.css (untouched) and chrome.css. The Services page keeps its own sheet.

   THE MOTION MODEL (HANDOFF "The motion model"; SITE_PLAN rule 7). Nothing is driven by the scroll. Under html.motion each piece
   is armed in its START state; motion.js adds one class once, when the piece reaches the reading zone (data-arm); a TIME-BASED
   CSS animation then plays to its end and holds (fill-mode both). Transform and opacity only. The signature moments carry
   .snap (scroll-snap-align: center) under a proximity snap, so the browser glides them to the centre on its own.
   No .motion (reduced motion, no JS, an old browser): every piece stands finished and nothing snaps. */

/* ------------------------------------------------------------------ the snap: signature moments settle into the centre */
html.motion { scroll-snap-type: y proximity; }
.motion .snap { scroll-snap-align: center; }

/* ------------------------------------------------------------------ sections: a label at the margin, a heading under the lamp */
/* the rhythm (ROUND_FINAL2, 2026-10-12): no screen mostly black. Sections 96 px apart (they were 136), heads 44 under their label (64), heads of words two
   thirds of a screen at most, the ask 64/56 (88/72), the footer 72 (96) */
.sec { position: relative; isolation: isolate; padding: 96px 0; }
.sec__head { display: grid; gap: 22px; justify-items: start; margin-bottom: 44px; }
.sec__head .h2 { max-width: 22em; }
.label--rule { display: inline-flex; align-items: center; gap: 14px; }
.label--rule i { display: block; width: 22px; height: 2px; background: linear-gradient(90deg, var(--bw-oxblood), var(--bw-oxblood-lit)); }
.line { font: 400 clamp(1.125rem, 1rem + .5vw, 1.4375rem)/1.5 var(--sans); color: var(--bw-silver); max-width: 36em; text-wrap: pretty; }
/* the key light on the ground of a section, high on the right: an ellipse, never a panel */
.sec--lamp::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(44% 52% at 92% 6%, rgba(223, 223, 219, .05) 0%, rgba(223, 223, 219, .014) 46%, transparent 74%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 240px); mask-image: linear-gradient(180deg, transparent 0, #000 240px); }

/* the arrow link (as the Services proof link): gunmetal capitals, a hairline that catches the light under the pointer */
.more { position: relative; display: inline-flex; align-items: center; gap: 14px; min-height: 44px; padding-top: 12px;
  font: 500 .75rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; color: var(--bw-gun-300); transition: color .25s; }
.more svg { width: 16px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.25; transition: transform .25s var(--ease-light); }
.more::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; opacity: 0; transition: opacity .25s;
  background: linear-gradient(90deg, var(--light-2), var(--light-4)); }
.more:hover, .more:focus-visible { color: var(--bw-white); }
.more:hover::before, .more:focus-visible::before { opacity: 1; }
.more:hover svg { transform: translateX(3px); }

/* ------------------------------------------------------------------ the ink: the drawings' shared strokes (thin ink on black, lit toward the lamp) */
.ink { display: block; width: 100%; height: auto; overflow: visible; }
.ink-base { fill: none; stroke: var(--bw-gun-600); stroke-width: 1; stroke-dasharray: 2 4; }
.ink-base--solid { stroke: var(--bw-gun-700); stroke-dasharray: none; }
.ink-lit { fill: none; stroke: var(--bw-white); stroke-width: 1.6; stroke-linecap: square; stroke-dasharray: 1; stroke-dashoffset: 0; }
.ink-edge { fill: none; stroke: var(--bw-white); stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 0; }
.ink-steel { fill: var(--bw-silver); }
@keyframes ink-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* ------------------------------------------------------------------ an inner page's opening: the hero's own light and cloth, no plate */
.phead .hero__stage { grid-template-columns: minmax(0, 1fr); --hh: round(down, max(380px, 52svh), 1px); min-height: calc(var(--nav-h) + var(--hh)); }
.phead .hero__words { max-width: 820px; padding-block: 40px 32px; }
.phead .hero__words .lead { max-width: 34em; }
.phead .cloth, .close .cloth { right: max(30%, calc(100% - 820px)); }
.phead--short .hero__stage { --hh: round(down, max(300px, 36svh), 1px); }
.phead .hero__light { -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%); }
.phead .display { max-width: 16em; }

/* ------------------------------------------------------------------ the closer: the hero's light arrives once more; the seam closes the page */
.close .hero__stage { grid-template-columns: minmax(0, 1fr); padding-top: 0; --hh: round(down, max(400px, 58svh), 1px); min-height: var(--hh); }
.close .hero__words { padding-block: 64px; max-width: 900px; }
.close .display { max-width: 18em; }
.close .hero__light { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 34%); mask-image: linear-gradient(180deg, transparent 0, #000 34%); }
/* in shadow until the light arrives (the start of the hero's own animations), so nothing jumps when it does */
.motion .close:not(.light) .hero__light { opacity: 0; }
.motion .close:not(.light) .cloth { opacity: .15; }
.motion .close:not(.light) .hero__words > :not(.sweep) { opacity: .18; }
.motion .close:not(.light) .sweep { background-image: linear-gradient(105deg, #333435 0%, #333435 30%, #ffffff 38%, #ffffff 41%, #ececE9 50%, #e1e1dd 66.7%, #efefec 82%, var(--bw-white) 100%);
  background-size: 300% 100%; background-position: 0 0; }
@media (prefers-reduced-motion: no-preference) {
  .close.light .hero__words > .sweep { animation: sweep-text 1.5s var(--ease-light) .55s both; }
}

/* ------------------------------------------------------------------ the roll call: items take the light in turn (lists, rows) */
.motion .roll:not(.is-on) .roll__i { opacity: .26; }
.motion .roll:not(.is-on) .roll__i::before { transform: scaleX(0); }
@media (prefers-reduced-motion: no-preference) {
  .roll.is-on .roll__i { animation: roll-light .5s var(--ease-light) calc(var(--i, 0) * .14s) both; }
  .roll.is-on .roll__i::before { animation: roll-rule .5s var(--ease-light) calc(var(--i, 0) * .14s + .05s) both; }
  @keyframes roll-light { from { opacity: .26; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
  @keyframes roll-rule { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* ------------------------------------------------------------------ prose: the legal pages and notices */
.prose { max-width: 70ch; color: var(--bw-silver); font: 400 1.0625rem/1.7 var(--sans); }
.prose > * + * { margin-top: 1.05em; }
.prose h2 { margin-top: 2.6em; font: 600 1.25rem/1.25 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--bw-white); font-feature-settings: "case"; }
.prose h3 { margin-top: 2em; font: 600 1.0625rem/1.3 var(--sans); letter-spacing: .04em; color: var(--bw-white); }
.prose h2 + *, .prose h3 + * { margin-top: .7em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose ul { list-style: none; padding-left: 0; }
.prose ul > li { position: relative; padding-left: 1.6em; }
.prose ul > li::before { content: ""; position: absolute; left: 0; top: .78em; width: .7em; height: 1px; background: var(--bw-gun-350); }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: .45em; }
.prose strong, .prose b { color: var(--bw-white); font-weight: 600; }
.prose a, .link { color: var(--bw-white); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: var(--bw-gun-400);
  padding-block: .22em; transition: text-decoration-color .2s; }
.prose a:hover, .link:hover { text-decoration-color: var(--bw-white); }
.prose em { font-style: italic; }

@media (max-width: 899.98px) {
  .sec { padding: 64px 0; }
  .sec__head { margin-bottom: 32px; }
  .phead .hero__stage { --hh: 0px; min-height: 0; padding-top: calc(var(--nav-h) + 40px); padding-bottom: 24px; }
  .phead .hero__words { padding-block: 24px 16px; }
  .close .hero__stage { --hh: 0px; min-height: 0; padding-top: 32px; padding-bottom: 24px; }
  .close .hero__words { padding-block: 40px; align-self: start; }
}

/* ------------------------------------------------------------------ the ask: Let's Talk at the bottom of the page (the plan's one deliberate repeat).
   One button; when it arrives the light comes up on it, a band of light crosses it, and the highlight runs along the seam. */
.ask { position: relative; isolation: isolate; overflow: hidden; }
.ask::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(40% 120% at 12% 100%, rgba(223, 223, 219, .045) 0%, transparent 70%); }
.ask__in { display: flex; padding-block: 64px 56px; }
.ask .btn { position: relative; overflow: hidden; }
.ask .btn::after { content: ""; position: absolute; inset: 0; opacity: 0; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(110deg, transparent 0%, transparent 36%, rgba(254, 254, 253, .3) 46%, rgba(254, 254, 253, .08) 52%, transparent 62%, transparent 100%) 0 0 / 300% 100% no-repeat; }
.motion .ask:not(.light) .btn { opacity: .18; }
@media (prefers-reduced-motion: no-preference) {
  .ask.light .btn { animation: come-up .9s var(--ease-light) .1s both; }
  .ask.light .btn::after { animation: sweep-band 1.1s var(--ease-light) .45s both; }
}
@media (max-width: 899.98px) { .ask__in { padding-block: 48px 44px; } }

/* the roll call's order (no inline styles under the site's CSP: the index is a class) */
.roll__i--1 { --i: 1; } .roll__i--2 { --i: 2; } .roll__i--3 { --i: 3; } .roll__i--4 { --i: 4; } .roll__i--5 { --i: 5; } .roll__i--6 { --i: 6; }
.roll__i--7 { --i: 7; } .roll__i--8 { --i: 8; } .roll__i--9 { --i: 9; } .roll__i--10 { --i: 10; } .roll__i--11 { --i: 11; } .roll__i--12 { --i: 12; }
.roll__i { position: relative; }
.roll__i::before { transform-origin: left center; }

/* the back link above a page's title */
.back { display: inline-flex; align-items: center; gap: 12px; min-height: 40px; font: 450 .75rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; color: var(--bw-gun-300); transition: color .2s; }
.back svg { width: 16px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.25; }
.back:hover { color: var(--bw-white); }