/* Aplomb: a quiet circuit, not a dashboard. No scripts or external assets.
   The circuit repeats every 20 s, with a quiet rest after each 4.8 s sequence.
   Reduced motion keeps a static illustration; no page control is needed.
   Scroll-linked accents enhance supported browsers; content never depends on them. */

:root { --ap-edge: rgba(142,240,255,.16); }

/* Keep the original navy/cyan identity, with a finer surface and more air. */
.hero {
  position: relative;
  isolation: isolate;
  background: radial-gradient(ellipse at 85% 42%,#12344380,transparent 52%),
    radial-gradient(ellipse at 8% 2%,#182b3c70,transparent 48%),var(--ink-950);
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(#8ef0ff1a .65px,transparent .85px);
  background-size: 8px 8px;
  mask-image: linear-gradient(90deg,transparent 32%,#0008 100%);
}
.hero::after {
  content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,transparent 4%,#8ef0ff55 65%,transparent);
}
.hero__inner { gap: clamp(2rem,4vw,4rem); }
.hero h1 { text-wrap: balance; letter-spacing: -.035em; }
.hero .category { letter-spacing: .075em; }
.hero .lede { color: #c6d5e0; }

/* The original SVG remains intact. Light travels over the same connections. */
.hero__art {
  position: relative; isolation: isolate; border-radius: 20px;
  border: 1px solid #8ef0ff26;
  background: radial-gradient(ellipse at 71% 48%,#133d4b90,transparent 62%),
    linear-gradient(150deg,#152936bb,#09121ddd 56%,#0d1e2ad9);
  box-shadow: 0 35px 65px -35px #000b,0 1px 0 #cffaff1a inset,0 -1px 0 #0009 inset;
  padding: clamp(.8rem,2vw,1.4rem);
}
.hero__art::before {
  content: ""; position: absolute; inset: 12px; z-index: -1;
  border: 1px solid #c9faff0a; border-radius: 12px;
  background: linear-gradient(#8ef0ff08 1px,transparent 1px),
    linear-gradient(90deg,#8ef0ff08 1px,transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse at 55% 45%,#000,transparent 75%);
  pointer-events: none;
}
.hero__art::after {
  content: ""; position: absolute; inset: auto 18% -13px; height: 12px;
  border: 1px solid #8ef0ff12; border-top: 0; border-radius: 0 0 12px 12px;
  background: #0d1e2a70; z-index: -1; pointer-events: none;
}
.hero__art > svg { position: relative; overflow: visible; }
.hero__art .signal-anim { animation: none; opacity: .85; }
.ap-beam { opacity: 0; stroke: #d6fcff; stroke-width: 2.5; stroke-linecap: round; }
.ap-arrival { opacity: 0; fill: none; stroke: #8ef0ff; stroke-width: 1; }
.ap-spark { opacity: 0; fill: #b3f6ff; }
/* A restrained editorial rhythm. All text is fully visible even without animation. */
.section { position: relative; }
.section--panel {
  background: radial-gradient(ellipse at 95% 0,#244a611e,transparent 60%),var(--ink-850);
}
.section--paper {
  background: radial-gradient(ellipse at 0 0,#d9ebed80,transparent 60%),var(--paper);
}
.section > .container > .eyebrow::before {
  content: ""; display: inline-block; width: 24px; height: 1px;
  margin-right: .8rem; vertical-align: .32em; background: currentColor; opacity: .65;
  transform-origin: left;
}
.section h2 { text-wrap: balance; letter-spacing: -.025em; }
.card {
  position: relative; border-radius: 12px;
  background: linear-gradient(145deg,#243e5022,transparent 65%),var(--ink-900);
  border-color: #8ef0ff24;
  box-shadow: 0 16px 34px -25px #0009,0 1px 0 #f2ffff08 inset;
}
.section--paper .card {
  border-color: #cbd9df;
  background: linear-gradient(155deg,#fff,#f9fcfc);
  box-shadow: 0 18px 40px -28px #1d425743,0 1px 0 #fff inset;
}
.card .marker { color: var(--signal-soft); }
.card .marker::after {
  content: ""; display: inline-block; width: 22px; height: 1px;
  margin-left: 10px; vertical-align: middle; background: currentColor;
  transform: scaleX(.35); transform-origin: left; opacity: .65;
}
.section--paper .card .marker { color: var(--signal-ink); }
.feature { border-top-color: #8ef0ff38; }
.cta-band {
  background: radial-gradient(ellipse at 88% 10%,#22718b2e,transparent 65%),var(--ink-850);
}
.btn { border-radius: 6px; }
.btn--primary { box-shadow: 0 4px 18px -10px #3be5ff8c,0 1px 0 #fff8 inset; }
.primary-nav a { text-underline-offset: .35em; }
.primary-nav a:hover { text-decoration-color: var(--signal); }
.card:focus-within { border-color: #8ef0ff75; }
.section--paper .card:focus-within { border-color: var(--signal-ink); }

@media (min-width: 60rem) {
  .hero__art { transform: perspective(1100px) rotateY(-7deg) rotateX(2deg); }
}
@media (max-width: 59.99rem) {
  .hero::before { mask-image: linear-gradient(transparent 35%,#0008 100%); }
}

@media (prefers-reduced-motion: no-preference) {
  /* Same 20 s clock. Last beam lands at 3.76 s; arrival fades by 4.8 s.
     All moving layers are invisible across the loop seam. */
  .ap-beam {
    stroke-dasharray: 10 110; stroke-dashoffset: 10;
    animation: ap-travel 20s linear infinite both;
    animation-delay: var(--ap-delay,0s);
  }
  .ap-arrival {
    transform-box: fill-box; transform-origin: center;
    animation: ap-arrive 20s ease-out infinite both;
  }
  .ap-spark {
    transform-box: fill-box; transform-origin: center;
    animation: ap-spark 20s ease-out infinite both;
  }
  .hero__art .signal-anim { animation: ap-settle 20s ease-out infinite both; }
  .card,.btn { transition: transform .22s ease,box-shadow .22s ease,border-color .22s ease; }
  .card .marker::after { transition: transform .32s ease; }
  .card:focus-within .marker::after { transform: scaleX(1); }
  .btn--primary:active { transform: translateY(1px); box-shadow: 0 1px 4px #0003,0 1px 3px #075a6b55 inset; }
  @media (hover: hover) and (pointer: fine) {
    .card:hover { transform: translateY(-3px); border-color: #8ef0ff55; box-shadow: 0 23px 40px -26px #0009; }
    .section--paper .card:hover { border-color: #8fb9c8; box-shadow: 0 23px 40px -26px #1d42575c; }
    .card:hover .marker::after { transform: scaleX(1); }
    .btn--primary:hover { box-shadow: 0 8px 26px -10px #3be5ff8c,0 1px 0 #fff8 inset; }
  }
  /* No hidden content / timers / scroll listeners. Just a 10 px settle and an accent. */
  @supports (animation-timeline: view()) {
    .section > .container {
      animation: ap-enter linear both;
      animation-timeline: view(); animation-range: entry 0% entry 80%;
    }
    .section > .container > .eyebrow::before {
      animation: ap-line linear both;
      animation-timeline: view(); animation-range: entry 0% entry 100%;
    }
  }
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: ap-page-out .16s ease-out both; }
  ::view-transition-new(root) { animation: ap-page-in .22s ease-out both; }
}

@keyframes ap-travel {
  0% { opacity: 0; stroke-dashoffset: 10; }
  1.5% { opacity: .9; }
  9.5% { opacity: .9; }
  12.5%,100% { opacity: 0; stroke-dashoffset: -100; }
}
@keyframes ap-arrive {
  0%,18.8% { opacity: 0; transform: scale(.65); }
  19.9% { opacity: .5; }
  23.8%,100% { opacity: 0; transform: scale(2.3); }
}
@keyframes ap-spark {
  0%,19% { opacity: 0; transform: translate(0,0); }
  20% { opacity: .75; }
  24%,100% { opacity: 0; transform: translate(var(--ap-x),var(--ap-y)); }
}
@keyframes ap-settle { 0%,18.8%,24%,100% { opacity: .85; } 20% { opacity: 1; } }
@keyframes ap-enter { from { transform: translateY(10px); } to { transform: none; } }
@keyframes ap-line { from { transform: scaleX(.2); } to { transform: scaleX(1); } }
@keyframes ap-page-out { to { opacity: 0; } }
@keyframes ap-page-in { from { opacity: .65; transform: translateY(4px); } }

@media (prefers-reduced-motion: reduce) {
  .hero__art { transform: none; }
  .ap-beam,.ap-arrival,.ap-spark { display: none; }
  .hero__art .signal-anim { animation: none !important; opacity: .85; }
  .section > .container,.section > .container > .eyebrow::before { animation: none !important; transform: none; }
  @view-transition { navigation: none; }
  ::view-transition-old(root),::view-transition-new(root) { animation: none !important; }
}

@media print {
  .ap-beam,.ap-arrival,.ap-spark { display: none; }
  .hero__art,.section > .container { transform: none !important; }
}

/* Editorial transition, October 2026. Scoped to the new content; no script. */
.ap-direction { border-block: 1px solid #8ef0ff24; }
.ap-direction__intro { max-width: 68ch; }
.ap-direction__steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; list-style: none; padding: 0; margin: 2rem 0; }
.ap-direction__steps li { padding: clamp(1.2rem,3vw,2rem); border: 1px solid #8ef0ff30; border-radius: 12px; background: linear-gradient(145deg,#142d3a,#0b1722); }
.ap-direction__number { display: inline-block; color: #8ef0ff; font: 500 .82rem var(--font-body,sans-serif); letter-spacing: .12em; margin-bottom: 1.5rem; }
.ap-direction__steps h3 { color: #f2f8fb; margin-bottom: .75rem; }
.ap-direction__steps p { color: #bacbd8; margin: 0; }
.ap-direction .btn { white-space: normal; text-align: left; gap: .8rem; }
.ap-clarity { scroll-margin-top: 6rem; }
.ap-clarity details { border-top: 1px solid #8ef0ff38; padding: 1rem 0; }
.ap-clarity details:last-of-type { border-bottom: 1px solid #8ef0ff38; }
.ap-clarity summary { cursor: pointer; padding: .4rem .1rem; color: #edf7fc; font-weight: 600; line-height: 1.55; }
.ap-clarity summary::marker { color: #8ef0ff; }
.ap-clarity summary:focus-visible { outline: 2px solid #8ef0ff; outline-offset: 5px; border-radius: 2px; }
.ap-clarity details p { margin: 1rem 0 0; }
.ap-clarity__next { margin-top: 2rem; }
@media (max-width: 52rem) { .ap-clarity { scroll-margin-top: 9rem; } }
@media (max-width: 40rem) { .ap-direction__steps { grid-template-columns: 1fr; } .ap-direction__number { margin-bottom: .6rem; } }
@media (max-width: 36rem) { .ap-clarity { scroll-margin-top: 12rem; } }
@media (max-width: 22.5rem) { .ap-clarity { scroll-margin-top: 15rem; } }