/* ISSLA RISK - The Archive: shared components for service pages (services overview + every service page).
   Loaded BEFORE the page stylesheet (services.css / service.css). Behaviour: archive.js. Extracted unchanged from services.css, so /services/ renders as before.
   Shared pieces (hero, .hs section primitives, buttons, reveals, link identity) come from base.css; motion from the shared system (data-reveal*, --ease-out, --dur-*).
   Contents: compact photo hero, Archive tokens (leather / brass foil), report page drawing (.pg), filing cabinet (.caps/.cab/.dr), FAQ accordion (.faq/.qa), empty-folder CTA (.hs--end/.fld).
   Accent: brass only, one element per section. Everything is progressive enhancement over a complete static page. */

/* Two-zone layouts (capabilities, FAQ, fit table fallback) share one split: 4/8 from 900px, 5/7 from 1200px. */
.fit, .caps, .faq { --zones: minmax(0, 4fr) minmax(0, 8fr); }
@media (min-width: 1200px) { .fit, .caps, .faq { --zones: minmax(0, 5fr) minmax(0, 7fr); } }

/* 1. Compact hero band with a photographic background (LCP candidate, not lazy). Left-to-right shade keeps the copy at
   the contrast of the plain dark hero; the shared edge vignette stays on top of it. Parallax: parallax.js (data-parallax). */
.hero--compact { isolation: isolate; padding-block: clamp(3.5rem, 2rem + 5vw, 6.5rem); }
.hero--compact .hero__inner { max-width: 60rem; }
.hero--compact .display { font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.75rem); margin-bottom: var(--sp-4); }
.hero--compact h1 { white-space: normal; max-width: 44rem; }
.hero--compact .lede { max-width: 44rem; font-size: var(--fs-500); margin-bottom: var(--sp-5); }
.hero__bg { /* oversized by --ov (parallax.js) top and bottom so the shift never exposes an edge */
  position: absolute; left: 0; top: calc(var(--ov, 0px) * -1); z-index: 0; width: 100%; height: calc(100% + 2 * var(--ov, 0px));
  object-fit: cover; object-position: right 55%; pointer-events: none; will-change: transform;
}
.hero--compact::before {
  background:
    linear-gradient(90deg, rgba(4, 19, 27, 0.95) 0%, rgba(4, 19, 27, 0.92) 40%, rgba(4, 19, 27, 0.8) 60%, rgba(4, 19, 27, 0.2) 100%),
    radial-gradient(ellipse 75% 85% at 50% 48%, transparent 55%, rgba(1, 8, 11, 0.55) 100%);
}
@media (max-width: 760px) {
  .hero__bg { object-position: 72% 55%; }
  .hero--compact::before {
    background:
      linear-gradient(180deg, rgba(4, 19, 27, 0.9), rgba(4, 19, 27, 0.84)),
      radial-gradient(ellipse 75% 85% at 50% 48%, transparent 55%, rgba(1, 8, 11, 0.55) 100%);
  }
}

/* The Archive: one design language for the gallery (dossier shelf), capabilities (filing cabinet) and final CTA (empty folder).
   Petrol leather with a faint CSS grain, brass foil for titles / handles / frames, soft light from above, contact shadows for depth.
   One easing (--ease-out), the shared durations. Everything transform / opacity driven and gated: reduced motion and html.motion-paused
   show the same states without movement; without JS the CSS :hover / :focus-within path and the static states apply. */
:root {
  --leather: radial-gradient(rgba(255, 255, 255, 0.04) 0.6px, transparent 0.9px) 0 0 / 3px 3px, repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.06) 0 1px, transparent 1px 4px), linear-gradient(180deg, #123f55, #0b2837 55%, #07202d);
  --foil: linear-gradient(100deg, #8f7233, #e6cd8e 38%, #c4a468 56%, #8f7233);
  --foil-text: linear-gradient(100deg, #c9a85e, #f0dba2 40%, #d3b672 62%, #b8984f);
  --brass-hi: #e3c27a;
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}
html.motion-paused .dr, html.motion-paused .dr *, html.motion-paused .fld, html.motion-paused .fld * { transition: none !important; animation: none !important; }

/* Report page drawing (shared): four zones drawn in CSS, no text. Layout and tilt belong to the page stylesheet. */
.pg { position: relative; display: grid; align-content: start; gap: 0.5rem; padding: 0.55rem 0.4rem 0; border-top: 1px solid rgba(19, 35, 43, 0.14); transition: background-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.pg:first-child { border-top: 0; }
.pg.is-on { background: rgba(196, 164, 104, 0.16); box-shadow: inset 2px 0 0 var(--brass); }
.pg i, .pg b, .pg u, .pg span { display: block; }
.pg__t { height: 9px; width: 58%; background: rgba(13, 48, 66, 0.78); }
.pg__s { height: 5px; width: 36%; background: rgba(19, 35, 43, 0.3); }
.pg b { height: 4px; background: rgba(19, 35, 43, 0.2); }
.pg b:nth-of-type(1) { width: 92%; } .pg b:nth-of-type(2) { width: 84%; } .pg b:nth-of-type(3) { width: 90%; } .pg b:nth-of-type(4) { width: 52%; }
.pg__bar { height: 9px; width: var(--w); background: rgba(19, 64, 87, 0.55); }
.pg__conf { display: flex; gap: 0.3rem; margin-top: 0.15rem; }
.pg__conf u { width: 22%; height: 5px; background: rgba(19, 64, 87, 0.7); text-decoration: none; }
.pg__conf u:last-child { background: transparent; box-shadow: inset 0 0 0 1px rgba(19, 64, 87, 0.6); }
.pg__hatch { height: 2.1rem; border: 1px dashed rgba(19, 35, 43, 0.42); background: repeating-linear-gradient(135deg, rgba(19, 35, 43, 0.16) 0 2px, transparent 2px 7px); }
.pg__foot { height: 14px; width: 34%; border: 1px solid rgba(19, 35, 43, 0.4); }

/* 5. Capabilities: dark band, a filing cabinet of six drawers. Plain list by default (all six sheets visible: no JS, reduced motion).
   services.js turns the fronts into buttons (.is-ready): one drawer open at a time, the open one is pulled forward, its paper sheet shown. */
.hs--caps { position: relative; isolation: isolate; overflow: hidden; }
.hs--caps::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(44rem 26rem at 12% 40%, rgba(27, 81, 108, 0.38), transparent 70%); }
.caps { display: grid; gap: var(--sp-6) var(--sp-8); grid-template-columns: minmax(0, 1fr); }
.caps .hs__title { font-size: var(--fs-700); margin-bottom: var(--sp-3); }
.caps__intro { margin: 0; max-width: 24rem; color: var(--on-dark-soft); font-size: var(--fs-500); }
@media (min-width: 900px) { .caps { grid-template-columns: var(--zones); align-items: center; } }
.cab {
  --focus: #e3c27a; list-style: none; margin: 0; padding: 14px; perspective: 1400px; perspective-origin: 50% 0; border-radius: 4px; border: 1px solid rgba(196, 164, 104, 0.3);
  background: radial-gradient(80% 50% at 50% 0, rgba(148, 190, 211, 0.12), transparent 70%), linear-gradient(180deg, #0b2836, #061c27);
  box-shadow: inset 0 1px 0 rgba(246, 244, 238, 0.1), 0 34px 50px -26px rgba(0, 0, 0, 0.65);
}
.dr { --o: 0; position: relative; margin: 0 0 10px; }
.dr:last-child { margin-bottom: 0; }
.dr__front {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); width: 100%; min-height: 3.5rem; margin: 0; padding: 0 1.1rem 0 0.7rem; text-align: left; color: var(--ink); font: inherit;
  background: linear-gradient(180deg, #15445c, #0f3243 55%, #0a2735); border: 1px solid rgba(246, 244, 238, 0.1); border-top-color: rgba(246, 244, 238, 0.24); border-radius: 3px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4), 0 10px 16px -8px rgba(0, 0, 0, 0.55);
}
.dr__plate { /* label holder: paper card in a brass frame */
  display: inline-block; padding: 0.4rem 0.9rem; background: linear-gradient(180deg, #f1ecdc, #ded6bf); color: var(--ink); border: 1px solid #a8873f; box-shadow: inset 0 0 0 2px rgba(196, 164, 104, 0.35);
  font: 600 var(--fs-400) / 1.3 var(--font-serif);
}
.dr__handle { position: relative; flex: none; width: 3.4rem; height: 0.6rem; overflow: hidden; border-radius: 3px; background: var(--foil); box-shadow: 0 2px 3px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
.dr__handle::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, 0.8) 50%, transparent 65%); transform: translateX(-130%); }
.dr__sheet { margin-top: 8px; }
.dr__tray { padding: 0.3rem 0.5rem 0; }
.dr__paper {
  margin: 0; padding: 1.15rem 1.35rem; background: linear-gradient(180deg, #fbf9f3, #f0ece0); color: var(--ink); border-left: 3px solid var(--brass);
  box-shadow: inset 0 1px 0 #fff, 0 8px 14px -8px rgba(0, 0, 0, 0.6); font: 400 var(--fs-500) / 1.55 var(--font-serif);
}
/* enhanced */
.cab.is-ready .dr__front { cursor: pointer; transform: translate3d(0, 0, calc(var(--o) * 28px)) scale(calc(1 + var(--o) * 0.014)); transition: transform 600ms var(--ease-out), box-shadow 600ms var(--ease-out), border-color 240ms var(--ease-out); }
.cab.is-ready .dr.is-open { --o: 1; z-index: 1; }
.cab.is-ready .dr.is-open .dr__front { box-shadow: 0 3px 0 rgba(0, 0, 0, 0.4), 0 22px 28px -10px rgba(0, 0, 0, 0.7); border-top-color: rgba(227, 194, 122, 0.6); }
.cab.is-ready .dr:not(.is-open) .dr__front:hover { transform: translate3d(0, 0, 10px); border-top-color: rgba(246, 244, 238, 0.4); }
.cab.is-ready .dr__front:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.cab.is-ready .dr.is-open .dr__handle::after { animation: dr-glint 900ms var(--ease-out) 150ms 1 both; }
@keyframes dr-glint { from { transform: translateX(-130%); } to { transform: translateX(130%); } }
.cab.is-ready .dr__sheet { display: grid; grid-template-rows: 0fr; margin-top: 0; transition: grid-template-rows 520ms var(--ease-out), margin-top 520ms var(--ease-out); }
.cab.is-ready .dr.is-open .dr__sheet { grid-template-rows: 1fr; margin-top: 8px; transition-duration: 600ms; }
.cab.is-ready .dr__tray { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s 520ms; }
.cab.is-ready .dr.is-open .dr__tray { visibility: visible; transition-delay: 0s; }
.cab.is-ready .dr__paper { min-height: 6.5rem; display: flex; align-items: center; opacity: 0; transform: translate3d(0, -14px, 0); transition: opacity 260ms var(--ease-out), transform 520ms var(--ease-out); }
.cab.is-ready .dr.is-open .dr__paper { opacity: 1; transform: none; transition: opacity 520ms var(--ease-out) 160ms, transform 600ms var(--ease-out) 120ms; }
@media (max-width: 560px) { .cab.is-ready .dr__paper { min-height: 9.25rem; padding: 1rem 1.1rem; } }
@media (max-width: 420px) { .dr__front { padding-right: 0.8rem; } .dr__handle { width: 2.4rem; } .dr__plate { padding-inline: 0.7rem; } }

/* 6. FAQ: native details/summary (keyboard: Tab, Enter/Space). Without JS the browser toggles it natively; services.js animates height
   (WAAPI) and keeps `open` truthful. Open visuals read `[open]:not(.is-closing)` so they ease back while the close animation runs.
   Tint lives on ::after because the shared reveal group overrides transitions on .qa itself. */
.faq { display: grid; gap: var(--sp-6) var(--sp-8); grid-template-columns: minmax(0, 1fr); }
.faq__head .hs__title { margin-bottom: 0; position: relative; isolation: isolate; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75); }
.faq__head .hs__title::before { /* depth: decorative echo of the heading (aria-hidden, no duplicated text for assistive tech) */
  content: ""; content: attr(data-echo) / ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; user-select: none;
  color: var(--petrol-600); opacity: 0.1; translate: 3px 3px; text-shadow: none;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .faq__head .hs__title::before { animation: faq-echo linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    html.motion-paused .faq__head .hs__title::before { animation: none; }
  }
}
@keyframes faq-echo { from { translate: 3px 9px; } to { translate: 3px -3px; } }
.qa { position: relative; isolation: isolate; border-top: 1px solid var(--line); }
.qa:last-child { border-bottom: 1px solid var(--line); }
.qa::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left center; transition: transform var(--dur-slow) var(--ease-out); }
.qa::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--petrol-600); opacity: 0; transition: opacity var(--dur-base) var(--ease-inout); }
.qa:hover::before, .qa:focus-within::before, .qa[open]:not(.is-closing)::before { transform: scaleX(1); }
.qa[open]:not(.is-closing)::after { opacity: 0.045; }
.qa.is-closing::before { transition-duration: var(--dur-fast); }
.qa summary {
  position: relative; display: block; min-height: 2.75rem; padding: var(--sp-4) 3rem var(--sp-4) var(--sp-4); cursor: pointer; list-style: none;
  font: 500 var(--fs-500) / 1.4 var(--font-serif); color: var(--ink-soft); transition: color var(--dur-base) var(--ease-inout);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--petrol-600); transition-duration: var(--dur-fast); }
.qa[open]:not(.is-closing) summary { color: var(--ink); }
.qa[open]:not(.is-closing) summary:hover { color: var(--petrol-700); }
.qa summary::after { /* plus; the vertical bar collapses and the glyph turns when open */
  content: ""; position: absolute; right: var(--sp-4); top: 50%; width: 0.9rem; height: 0.9rem; margin-top: -0.45rem;
  background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
  transition: background-size var(--dur-base) var(--ease-inout), transform var(--dur-base) var(--ease-inout);
}
.qa[open]:not(.is-closing) summary::after { background-size: 100% 1.5px, 1.5px 0; transform: rotate(180deg); }
.qa p { margin: 0; padding: 0 var(--sp-4) var(--sp-5); max-width: 42rem; color: var(--ink-soft); }
@media (min-width: 900px) {
  .faq { grid-template-columns: var(--zones); align-items: center; } /* heading centred against the question block, as in the capabilities band */
}

/* 7. Final CTA: an empty folder on the dark band. Static default = open (no JS, reduced motion, paused). services.js arms it (.is-armed): closed
   until ~40% of it is in view, then the front flap falls forward (CSS 3D, ease-out) and the sheet with the CTA is readable; reversible. */
.hs--end {
  position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(3.5rem, 2rem + 6vw, 7rem);
  background-image: radial-gradient(60rem 30rem at 85% -10%, rgba(27, 81, 108, 0.45), transparent 70%), linear-gradient(180deg, var(--petrol-900), #061c27);
}
.hs--end::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 75% 85% at 50% 48%, transparent 55%, rgba(1, 8, 11, 0.55) 100%); }
.fld { --tab: 2.5rem; --lip: 3.5rem; position: relative; width: min(100%, 58rem); margin-inline: auto; padding: var(--tab) 0 1.1rem; perspective: 2600px; perspective-origin: 50% 30%; }
.fld__back {
  position: absolute; left: 0; right: 0; top: var(--tab); bottom: 0; border-radius: 0 5px 5px 5px; background: var(--leather); border: 1px solid rgba(196, 164, 104, 0.4);
  box-shadow: inset 0 1px 0 rgba(246, 244, 238, 0.14), 0 44px 60px -30px rgba(0, 0, 0, 0.75);
}
.fld__tab {
  position: absolute; left: 1.75rem; top: 0; z-index: 2; isolation: isolate; display: block; height: calc(var(--tab) + 1px); padding: 0.6rem 1.5rem 0; min-width: 10.5rem; text-align: center;
  color: var(--brass-hi); font: 500 var(--fs-400) / 1.5 var(--font-serif); transition: transform 240ms var(--ease-out);
}
.fld__tab::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 6px 6px 0 0; background: var(--leather); border: 1px solid rgba(196, 164, 104, 0.45); border-bottom: 0; box-shadow: inset 0 1px 0 rgba(246, 244, 238, 0.14); }
.fld__sheet {
  position: relative; z-index: 1; display: grid; gap: var(--sp-5) var(--sp-7); align-items: center; margin: 0.9rem 1rem 0; padding: clamp(1.5rem, 4vw, 2.75rem) clamp(1.25rem, 4vw, 3rem) calc(clamp(1.25rem, 3vw, 2rem) + var(--lip));
  background: linear-gradient(180deg, #fbf9f3, #f0ece0); color: var(--ink); border-radius: 2px; box-shadow: inset 0 1px 0 #fff, 0 10px 20px -10px rgba(0, 0, 0, 0.55); --focus: #1b516c;
}
.end__title { margin: 0 0 var(--sp-3); max-width: 22em; color: var(--ink); font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2.1rem); line-height: 1.14; }
.end__text p { margin: 0; max-width: 34rem; color: var(--ink-soft); font-size: var(--fs-500); }
.end__action .btn--primary { border-color: var(--brass-ink); }
@media (min-width: 760px) { .fld__sheet { grid-template-columns: minmax(0, 1fr) auto; } .end__action { justify-self: end; } }
.fld__flap { /* front flap, hinged along its lower edge: falls forward and stays as a lip below the sheet */
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; top: calc(var(--tab) + 1.1rem); border-radius: 2px 2px 5px 5px; pointer-events: none; backface-visibility: visible;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 30%), var(--leather); border: 1px solid rgba(196, 164, 104, 0.45); box-shadow: inset 0 1px 0 rgba(246, 244, 238, 0.16), 0 -8px 20px -8px rgba(0, 0, 0, 0.5);
  transform-origin: 50% 100%; transform: rotateX(84deg); transition: transform 1000ms var(--ease-out);
}
.fld__flap::before { /* an empty label */
  content: ""; position: absolute; left: 50%; top: 20%; width: min(44%, 15rem); height: 3rem; transform: translateX(-50%); border: 1px solid rgba(196, 164, 104, 0.55); background: rgba(246, 244, 238, 0.05); box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.12);
}
.fld.is-armed:not(.is-open) .fld__flap { transform: none; transition-duration: 900ms; }
.fld.is-armed .fld__tab { cursor: pointer; }
.fld.is-armed .fld__tab:hover { transform: translateY(-3px); }
@media (max-width: 759.98px) { .fld { --tab: 2.1rem; --lip: 2.5rem; } .fld__tab { left: 1rem; min-width: 8.5rem; padding-inline: 1rem; font-size: var(--fs-300); } .fld__sheet { margin-inline: 0.6rem; } }


/* Film strip (type "film-strip"): horizontal scroll-snap strip of 16:9 photo cards. Static without JS / with reduced motion / paused: native scroller, every card and line visible.
   With JS + motion allowed (.is-ready): the active card is sharp, neighbours dim and shrink, the second line fades in, a brass line draws; images drift on scroll (view timeline). */
.sv-fs { padding-bottom: clamp(3rem, 2rem + 4vw, 5.5rem); overflow: hidden; }
.fs__head { margin-bottom: var(--sp-6); }
.fs__head .hs__title { max-width: 36rem; margin-bottom: var(--sp-3); }
.fs__intro { margin: 0; max-width: 40rem; color: var(--on-dark-soft); font-size: var(--fs-500); }
.fs { --cw: 86vw; position: relative; }
.fs__strip { position: relative; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: rgba(196, 164, 104, 0.5) transparent; padding-block: var(--sp-3) var(--sp-5); }
.fs__strip:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.fs__list { display: flex; gap: clamp(0.75rem, 2vw, 1.5rem); width: max-content; margin: 0; padding: 0 calc(50% - var(--cw) / 2); list-style: none; }
.fs__c { position: relative; flex: 0 0 var(--cw); aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; background: var(--petrol-800); scroll-snap-align: center; scroll-snap-stop: always; outline-offset: 3px; box-shadow: 0 26px 40px -24px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(196, 164, 104, 0.3); }
.fs__c:focus-visible { outline: 3px solid var(--focus); }
.fs__c img { position: absolute; top: 0; left: -8%; width: 116%; height: 100%; object-fit: cover; }
.fs__c::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 28%, rgba(5, 21, 29, 0.62) 52%, rgba(5, 21, 29, 0.93)); pointer-events: none; }
.fs__tx { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: clamp(1rem, 0.5rem + 2vw, 2rem); }
.fs__t { margin: 0; max-width: 30rem; font: 500 clamp(1.3rem, 1rem + 1.3vw, 2.1rem) / 1.15 var(--font-serif); color: var(--on-dark); text-wrap: balance; }
.fs__t::after { content: ""; display: block; width: 4.5rem; height: 2px; margin-top: 0.6rem; background: var(--foil); transform-origin: left; }
.fs__d { margin: 0.6rem 0 0; max-width: 34rem; font-size: 0.95rem; line-height: 1.45; color: #e9edef; }
.fs__d a { color: #f0dba2; }
.fs__ctl { display: none; align-items: center; gap: var(--sp-3); }
.fs.is-ready .fs__ctl { display: flex; }
.fs__b { flex: none; position: relative; width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid rgba(196, 164, 104, 0.6); border-radius: 50%; background: transparent; cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out); }
.fs__b::before { content: ""; position: absolute; left: 50%; top: 50%; width: 0.7rem; height: 0.7rem; border: solid var(--brass); border-width: 0 2px 2px 0; transform: translate(-30%, -50%) rotate(135deg); }
.fs__b--n::before { transform: translate(-70%, -50%) rotate(-45deg); }
.fs__b:hover:not(:disabled) { background: rgba(196, 164, 104, 0.16); }
.fs__b:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.fs__b:disabled { opacity: 0.35; cursor: default; }
.fs__rail { position: relative; flex: 1 1 auto; height: 2.75rem; }
.fs__rail::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: rgba(196, 164, 104, 0.3); }
.fs__fill { position: absolute; left: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; width: calc(var(--p, 0) * 100%); background: var(--foil); transition: width 600ms var(--ease-out); }
.fs__tick { position: absolute; top: 50%; left: calc(var(--s) * 100%); width: 2px; height: 12px; margin: -6px 0 0 -1px; background: rgba(196, 164, 104, 0.55); }
@media (max-width: 559.98px) { .fs__c { aspect-ratio: 5 / 4; } .fs__d { font-size: 0.875rem; } }
@media (min-width: 700px) { .fs { --cw: min(72vw, 52rem); } .fs__c { aspect-ratio: 16 / 9; } }
@media (min-width: 700px) { .fs__ctl { padding-top: var(--sp-2); } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html:not(.motion-paused) .fs__c img { animation: fs-drift linear both; animation-timeline: view(inline); }
    @keyframes fs-drift { from { transform: translateX(4%); } to { transform: translateX(-4%); } }
  }
}
html.motion:not(.motion-paused) .fs.is-ready .fs__c { transition: opacity 800ms var(--ease-inout), transform 800ms var(--ease-inout); }
html.motion:not(.motion-paused) .fs.is-ready .fs__c:not(.is-active) { opacity: 0.55; transform: scale(0.96); }
html.motion:not(.motion-paused) .fs.is-ready .fs__c.is-active { transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
html.motion:not(.motion-paused) .fs.is-ready .fs__d { transition: opacity 700ms var(--ease-inout), visibility 0s linear 700ms; }
html.motion:not(.motion-paused) .fs.is-ready .fs__c:not(.is-active) .fs__d { opacity: 0; visibility: hidden; }
html.motion:not(.motion-paused) .fs.is-ready .fs__c.is-active .fs__d { transition: opacity 600ms var(--ease-out) 200ms, visibility 0s; }
html.motion:not(.motion-paused) .fs.is-ready .fs__t::after { transform: scaleX(0); transition: transform 500ms var(--ease-inout); }
html.motion:not(.motion-paused) .fs.is-ready .fs__c.is-active .fs__t::after { transform: none; transition: transform 700ms var(--ease-out) 250ms; }
html.motion-paused .fs__fill, html.motion-paused .fs__b { transition: none !important; }

/* Conversion micro-lines: under the hero button and the final CTA button */
.hero__micro { margin: var(--sp-3) 0 0; font-size: var(--fs-300); color: var(--on-dark-soft); }
.end__micro { margin: var(--sp-3) 0 0; max-width: 15rem; font-size: var(--fs-300); color: var(--ink-soft); }

/* Service hero: the H1 leads in the same serif as the home headline; the lede runs wide enough to stay at 3-4 lines */
.hero--service .hero__inner { max-width: 66rem; }
.hero--service h1 { font-family: var(--font-serif); font-weight: 500; font-size: clamp(2.25rem, 1.4rem + 2vw, 3.25rem); line-height: 1.12; letter-spacing: -0.012em; text-wrap: balance; text-rendering: optimizeLegibility; font-kerning: normal; font-feature-settings: "kern", "liga", "onum"; -webkit-font-smoothing: antialiased; color: var(--on-dark); max-width: 34ch; margin-bottom: var(--sp-5); }
.hero--service .lede { max-width: 62rem; font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem); line-height: 1.6; color: var(--on-dark-soft); text-wrap: pretty; margin-bottom: var(--sp-6); }