/* ISSLA RISK - /how-we-work/ only: dark hero, five-step route, evidence standards, human judgment, closing band. Loaded after archive.css.
   Section rhythm as on /about/: plain paper, marble accent (edge, fading), official navy solid. Marble: tools/build_marble.py. */
.hero--how { padding-block: clamp(4rem, 2.5rem + 5vw, 7rem); background: linear-gradient(90deg, var(--petrol-900) 38%, rgba(3, 40, 60, 0) 88%), url("/assets/img/marble-dark.webp") center / cover no-repeat, var(--petrol-900); }
.hero--how::before { background: none; }
.hero--how .hero__inner { max-width: 60rem; }
.hero--how .display { margin-bottom: var(--sp-4); font-size: clamp(1.75rem, 1rem + 2.6vw, 3.25rem); text-wrap: balance; }
.hero--how h1 { margin-bottom: var(--sp-5); color: var(--on-dark); font-size: var(--fs-600); max-width: 40rem; }
.hero--how .btn-row { justify-content: flex-start; margin-top: var(--sp-6); }

.hw { position: relative; isolation: isolate; background: var(--paper); }
.hw__h { font-family: var(--font-serif); font-size: var(--fs-700); font-weight: 500; margin: 0 0 var(--sp-6); color: var(--petrol-900); }
.hw__two { display: grid; gap: var(--sp-5); }
.hw__txt { max-width: 46rem; font-size: var(--fs-500); }
.hw__txt p { margin: 0 0 var(--sp-5); }
.hw--stone::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; right: 0; width: min(48%, 42rem); background: url("/assets/img/marble-light.webp") 70% 40% / cover no-repeat; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%); mask-image: linear-gradient(90deg, transparent, #000 70%); }
.hw--navy { background: var(--petrol-800); color: var(--on-dark); --focus: #e3c27a; }
.hw--navy .hw__h { color: var(--on-dark); }
.hw--navy a { color: var(--on-dark); }
.hw--navy a:hover { color: var(--brass); }

/* Route: five steps on a rail. The segment above each step fills with brass as the step enters the middle of the viewport (how.js); reversible. */
.hwp { list-style: none; margin: 0; padding: 0; max-width: 54rem; }
.hwp__i { position: relative; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--sp-5); padding-bottom: var(--sp-7); }
.hwp__i:last-child { padding-bottom: 0; }
.hwp__i::before { content: ""; position: absolute; left: calc(1.5rem - 1px); top: 3rem; bottom: 0; width: 2px; background: var(--line); }
.hwp__i::after { content: ""; position: absolute; left: calc(1.5rem - 1px); top: 3rem; bottom: 0; width: 2px; background: var(--brass); transform: scaleY(0); transform-origin: top; transition: transform 0.9s var(--ease-out, ease-out); }
.hwp__i:last-child::before, .hwp__i:last-child::after { display: none; }
.hwp__i.is-on::after { transform: scaleY(1); }
.hwp__n { position: relative; z-index: 1; width: 3rem; height: 3rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--brass); border-radius: 50%; background: var(--paper); color: var(--brass-ink); font: 600 var(--fs-500) / 1 var(--font-serif); transition: background-color 0.4s ease, color 0.4s ease; }
.hwp__i.is-on .hwp__n { background: var(--brass); color: var(--petrol-900); }
.hwp__c h3 { margin: 0.5rem 0 var(--sp-2); font: 500 var(--fs-700) / 1.2 var(--font-serif); color: var(--petrol-900); }
.hwp__c p { margin: 0; max-width: 42rem; color: var(--ink-soft); font-size: var(--fs-500); }
html:not(.js) .hwp__i::after { transform: scaleY(1); }

.hw__pts { list-style: none; margin: var(--sp-6) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.hw__pts li { padding: 0.45rem 1rem; border: 1px solid var(--brass); border-radius: 999px; font-size: var(--fs-300); font-weight: 600; letter-spacing: 0.02em; color: var(--petrol-800); background: rgba(255, 255, 255, 0.6); }
.hw__links { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: grid; gap: var(--sp-2); font-size: var(--fs-400); }

.hw__end { background: linear-gradient(90deg, rgba(3, 40, 60, 0) 10%, var(--petrol-900) 62%), url("/assets/img/marble-dark.webp") 30% 50% / cover no-repeat, var(--petrol-900); color: var(--on-dark); padding-block: var(--sp-9); --focus: #e3c27a; }
.hw__endin { max-width: 46rem; display: grid; gap: var(--sp-5); justify-items: start; }
.hw__endt { margin: 0; font-family: var(--font-serif); font-size: var(--fs-800); font-weight: 500; color: var(--on-dark); }
.hw__endp { margin: 0; font-size: var(--fs-500); color: var(--on-dark-soft); }
.hw__end .btn--primary { background: var(--brass); color: var(--petrol-900); border-color: var(--brass); }
.hw__end .btn--primary:hover { background: #d6b87c; color: var(--petrol-900); }

@media (min-width: 62rem) { .hw__two { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--sp-8); } }
@media (prefers-reduced-motion: reduce) { .hwp__i::after, .hwp__n { transition: none; } }