/* L1 home build-out (11-12-26): every section under the hero. The c2 language, kept: pearl ground, frosted glass panes
   with the spectral rim, Instrument Serif heads with an italic second phrase, light used as colour and never as text.
   Mobile first; the desktop layer starts at 761 px (where the WebGL field and the lattice run), wide at 1080 px.
   Nothing starts hidden: no reveal script, so JS off and reduced motion show every section as written.
   Replaces editorial.css, which only styled the retired two-card section. */

/* ---------- shared ---------- */
.hs-sec { position: relative; padding: 72px 0; }
#paths, #advisors, #clients { scroll-margin-top: 88px; }
.hs-head { max-width: 46em; margin: 0 0 32px; }
.hs-h2 { font: 400 clamp(38px, 10vw, 48px)/1.02 var(--serif); letter-spacing: -.015em; margin: 0 0 16px; text-wrap: balance; }
.hs-intro { font-size: 17px; line-height: 1.65; color: var(--ink-2); margin: 0; max-width: 36em; }
.hs-intro a, .hs-close-call a { color: var(--ink); text-underline-offset: 3px; }
.hs-fine { font-size: 13.5px; line-height: 1.55; color: var(--ink-3); margin: 0; }
.hs-arrow { display: inline-block; transition: transform .35s var(--ease); }

/* frosted pane: the recipe of c2's .card (near-opaque, so the lattice behind reads as a glow, never as lines over copy) */
.hs-pane {
  position: relative; border-radius: 24px; padding: 26px 22px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .9));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .95), 0 34px 70px -46px rgba(50, 60, 100, .4);
}
/* no backdrop-filter on panes: over a field redrawn every frame, a dozen blurred panes cost frames, and at this
   opacity the blur shows nothing. Only the two doors and the a-cryl-ic entry frost (desktop), as c2's cards did. */
.hs-pane::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from 210deg, #7FD6F2, #B49CF8, #EBB3CF, #B49CF8, #7FD6F2);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity: .5;
}

/* a whole tile is one link: the link's empty ::after covers the pane (the pane is the containing block) */
.hs-tile-link { color: inherit; text-decoration: none; }
.hs-tile-link::after { content: ""; position: absolute; inset: 0; border-radius: 24px; }
.hs-go { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 18px; font: 600 14.5px/1 var(--sans); color: var(--ink); }

/* ---------- (a) two doors ---------- */
.hs-door-pair { display: grid; gap: 18px; }
.hs-door.card { display: flex; flex-direction: column; justify-content: space-between; min-height: 300px; padding: 30px 24px 28px;
  backdrop-filter: none; -webkit-backdrop-filter: none; }
.hs-door .card-orb { margin-bottom: 40px; }
.hs-door .card-kicker { margin: 0 0 12px; }
.hs-door h3 { margin: 0 0 12px; }
.hs-door .hs-door-line { margin: 0 0 26px; max-width: 24em; }
/* the Enter button carries the whole door's hit area: its empty ::after fills the card (c2's .card is position:
   relative). The button itself must never transform, or it would become the containing block and the area would
   shrink to the button on hover; the card lifts instead. */
.hs-enter { align-self: flex-start; }
.hs-door .btn-ink, .hs-door .btn-ink:hover { transform: none; }
.hs-enter::after { content: ""; position: absolute; inset: 0; border-radius: 30px; }
.hs-door:hover, .hs-door:focus-within { transform: translateY(-4px); box-shadow: inset 0 0 0 1px #fff, 0 60px 100px -54px rgba(50, 60, 100, .5); }
.hs-door:hover .hs-arrow, .hs-door:focus-within .hs-arrow { transform: translateX(4px); }
/* a glass door handle: light caught on its edge */
.hs-handle {
  position: absolute; right: 22px; top: 50%; width: 5px; height: 64px; margin-top: -32px; border-radius: 99px;
  background: linear-gradient(180deg, #7FD6F2, #B49CF8, #EBB3CF); opacity: .7;
  box-shadow: 0 0 14px 1px rgba(180, 156, 248, .4); transition: opacity .5s var(--ease), box-shadow .5s var(--ease);
}
.hs-handle-b { background: linear-gradient(180deg, #EBB3CF, #B49CF8, #7FD6F2); box-shadow: 0 0 14px 1px rgba(235, 179, 207, .5); }
.hs-door:hover .hs-handle, .hs-door:focus-within .hs-handle { opacity: 1; box-shadow: 0 0 22px 4px rgba(180, 156, 248, .55); }

/* ---------- (a2) our name: the old site's brand story (D14) beside a dictionary entry on glass ---------- */
/* the copy wrapper dissolves so the phone order reads head, definition, story; desktop puts the entry in its own column */
.hs-name-in { display: grid; }
.hs-name-copy { display: contents; }
.hs-name .hs-head { order: 1; }
.hs-dict { order: 2; }
.hs-name-body { order: 3; }
.hs-name-body p { font-size: 17px; line-height: 1.65; color: var(--ink-2); margin: 0 0 14px; max-width: 34em; }
.hs-name-body .hs-name-lead { font: 400 clamp(24px, 6.6vw, 30px)/1.3 var(--serif); color: var(--ink); margin-bottom: 20px; text-wrap: pretty; }
.hs-name-body .hs-src { font-size: 13px; line-height: 1.55; color: var(--ink-3); margin: 22px 0 0; max-width: none; }
/* the entry: a slab of c2 glass with the spectral rim and one band of light across it */
.hs-dict {
  position: relative; isolation: isolate; margin: 0 0 36px; padding: 30px 24px 26px; border-radius: 28px; overflow: hidden;
  background: linear-gradient(150deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .86));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .95), 0 50px 90px -50px rgba(50, 60, 100, .4);
}
.hs-dict::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from 210deg, #7FD6F2, #B49CF8, #EBB3CF, #B49CF8, #7FD6F2);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity: .75;
}
.hs-dict::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(118deg, transparent 44%, rgba(160, 223, 242, .2) 52%, rgba(176, 151, 243, .16) 58%, rgba(231, 161, 197, .16) 64%, transparent 72%);
}
.hs-dict-word { margin: 0 0 8px; }
.hs-dict-word dfn { font: 400 clamp(56px, 17vw, 76px)/1 var(--serif); font-style: normal; letter-spacing: -.01em; color: var(--ink); }
.hs-dict-say { margin: 0 0 22px; font: 500 15px/1.4 var(--sans); color: var(--ink-3); }
.hs-dict-say i { margin-left: 6px; font: italic 400 19px/1 var(--serif); color: var(--ink-2); }
.hs-dict-senses { margin: 0 0 22px; padding: 20px 0 0 1.5em; border-top: 1px solid var(--line); display: grid; gap: 14px; }
.hs-dict-senses li { padding-left: 4px; font-size: 16.5px; line-height: 1.55; color: var(--ink-2); }
.hs-dict-senses li::marker { font: 600 14px/1 var(--sans); color: var(--ink-3); }
.hs-dict-senses b { font: 400 22px/1.2 var(--serif); color: var(--ink); margin-right: 4px; }
.hs-dict-use { margin: 0; padding-top: 18px; border-top: 1px solid var(--line); font: italic 400 21px/1.35 var(--serif); color: var(--ink-2); }

/* ---------- (b) why Acrylic ---------- */
.hs-head-split { display: grid; gap: 4px; max-width: none; }
.hs-plaque { display: grid; gap: 14px; margin: 0 0 16px; padding: 28px 22px 24px; }
.hs-crd { margin: 0; display: flex; align-items: baseline; gap: 12px; }
.hs-crd-k { font: 600 12.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.hs-crd-n { font: 400 clamp(60px, 19vw, 88px)/.9 var(--serif); letter-spacing: -.01em; color: var(--ink); }
.hs-plaque-body h3 { font: 400 28px/1.1 var(--serif); margin: 0 0 8px; }
.hs-plaque-body p { margin: 0 0 10px; color: var(--ink-2); }
.hs-plaque-body .hs-fine { margin-bottom: 14px; }
.hs-src { font-size: 13px; line-height: 1.55; color: var(--ink-3); margin: 0; padding-top: 12px; border-top: 1px solid var(--line); }
.hs-src a { color: var(--ink-2); text-underline-offset: 3px; }
.hs-src a:hover { color: var(--ink); }
.hs-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.hs-fact { display: flex; flex-direction: column; }
.hs-fact h3 { font: 400 25px/1.12 var(--serif); margin: 0 0 10px; }
.hs-fact p { font-size: 15.5px; line-height: 1.6; color: var(--ink-2); margin: 0 0 16px; }
.hs-fact .hs-src { margin: auto 0 0; }

/* ---------- (c) how we work ---------- */
.hs-steps-pane { padding: 30px 22px 10px; }
.hs-steps { list-style: none; margin: 0; padding: 0; display: grid; }
.hs-step { position: relative; display: grid; grid-template-columns: 52px 1fr; column-gap: 18px; align-content: start; padding-bottom: 28px; }
.hs-step-n {
  grid-row: 1 / span 2; position: relative; z-index: 1; width: 52px; height: 52px; border-radius: 999px;
  display: grid; place-items: center; font: 500 12.5px/1 var(--sans); letter-spacing: .1em; color: var(--ink);
  background: radial-gradient(circle at 36% 32%, #fff 0 22%, #EEF0F6 48%, rgba(214, 220, 236, .9) 72%, rgba(198, 181, 246, .45) 100%);
  box-shadow: 0 0 0 1px #fff, 0 0 24px 4px rgba(160, 223, 242, .3), 0 10px 18px -10px rgba(50, 60, 100, .4);
}
.hs-step:nth-child(2) .hs-step-n { box-shadow: 0 0 0 1px #fff, 0 0 24px 4px rgba(198, 181, 246, .34), 0 10px 18px -10px rgba(50, 60, 100, .4); }
.hs-step:nth-child(3) .hs-step-n { box-shadow: 0 0 0 1px #fff, 0 0 24px 4px rgba(235, 179, 207, .36), 0 10px 18px -10px rgba(50, 60, 100, .4); }
/* the thread between steps: one segment per step, so it always ends on the next orb */
.hs-step:not(:last-child)::after {
  content: ""; position: absolute; left: 25px; top: 56px; bottom: 4px; width: 2px; border-radius: 2px; opacity: .65;
  background: linear-gradient(180deg, #7FD6F2, #B49CF8, #EBB3CF); background-size: 100% 200%;
}
.motion .hs-step:not(:last-child)::after { animation: hs-flow-y 5s linear infinite; }
@keyframes hs-flow-y { to { background-position: 0 200%; } }
@keyframes hs-flow-x { to { background-position: 200% 0; } }
.hs-step h3 { font: 400 25px/1.12 var(--serif); margin: 12px 0 8px; }
.hs-step p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.hs-after { margin-top: 24px; }
.hs-after .btn { width: 100%; }

/* ---------- (d) what we do ---------- */
.hs-tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.hs-tile { display: flex; flex-direction: column; padding: 28px 22px 24px; transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.hs-tile, .hs-article { --glow: rgba(160, 223, 242, .5); }
.hs-tile[data-light="violet"] { --glow: rgba(198, 181, 246, .55); }
.hs-tile[data-light="rose"] { --glow: rgba(245, 197, 216, .6); }
.hs-glyph {
  display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 22px; border-radius: 14px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .95), rgba(240, 242, 248, .6));
  box-shadow: inset 0 0 0 1px #fff, 0 0 0 1px rgba(29, 33, 38, .06), 0 0 26px 6px var(--glow);
}
.hs-glyph svg { width: 30px; height: 30px; fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hs-tile h3 { font: 400 28px/1.1 var(--serif); margin: 0 0 12px; }
.hs-tile p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
.hs-tile:hover, .hs-tile:focus-within, .hs-article:hover, .hs-article:focus-within { transform: translateY(-4px); box-shadow: inset 0 0 0 1px #fff, 0 46px 80px -46px rgba(50, 60, 100, .5); }
.hs-tile:hover .hs-arrow, .hs-tile:focus-within .hs-arrow, .hs-article:hover .hs-arrow, .hs-article:focus-within .hs-arrow { transform: translateX(4px); }
/* sub pages in the client area, as a hairline list (PENTA 11-07: pill tags read as template) */
.hs-more { margin-top: 36px; }
.hs-more-h { font: 600 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 6px; }
.hs-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; }
.hs-links li { border-top: 1px solid var(--line); }
.hs-links li:last-child { border-bottom: 1px solid var(--line); }
.hs-links a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 4px;
  text-decoration: none; font: 500 16px/1.3 var(--sans); color: var(--ink);
}
.hs-links a:hover .hs-arrow, .hs-links a:focus-visible .hs-arrow { transform: translateX(4px); }

/* ---------- (e) the advisor band: dark, separate, one line ---------- */
.hs-band { position: relative; isolation: isolate; overflow: hidden; padding: 72px 0; background: #15181D; color: #FBFAF7; }
.hs-band::before, .hs-band::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; opacity: .8;
  background: linear-gradient(90deg, transparent, #7FD6F2 25%, #B49CF8 50%, #EBB3CF 75%, transparent); }
.hs-band::before { top: 0; }
.hs-band::after { bottom: 0; opacity: .4; }
.hs-band-light {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(118deg, transparent 40%, rgba(127, 214, 242, .16) 48%, rgba(180, 156, 248, .15) 54%, rgba(235, 179, 207, .14) 60%, transparent 70%),
    radial-gradient(70% 90% at 92% 10%, rgba(180, 156, 248, .16), transparent 70%),
    radial-gradient(60% 80% at 0% 100%, rgba(127, 214, 242, .1), transparent 70%);
}
.hs-band .eyebrow { color: rgba(251, 250, 247, .74); }
.hs-band .hs-h2 { color: #FBFAF7; }
.hs-band-in { display: grid; gap: 8px; }
.hs-band-line { font-size: 18px; line-height: 1.6; color: rgba(251, 250, 247, .82); margin: 0 0 28px; max-width: 30em; }
.hs-btn-pearl { background: #FBFAF7; color: var(--ink); box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), 0 14px 34px -14px rgba(0, 0, 0, .7), 0 0 40px -6px rgba(180, 156, 248, .45); }
.hs-btn-pearl:hover { transform: translateY(-2px); background: #fff; }
.hs-btn-pearl:hover .hs-arrow { transform: translateX(4px); }
.hs-band :focus-visible { outline-color: #FBFAF7; }

/* ---------- (f) insights ---------- */
.hs-head-row { display: grid; gap: 8px; max-width: none; }
.hs-head-row .btn { justify-self: start; }
.hs-articles { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.hs-article { display: flex; flex-direction: column; padding: 28px 22px 24px; transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
/* a page, not a tile: one line of light across its top edge */
.hs-article::after { content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #7FD6F2, #B49CF8, #EBB3CF); opacity: .75; }
.hs-kicker { font: 600 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 14px; }
.hs-article h3 { font: 400 27px/1.12 var(--serif); margin: 0 0 12px; }
.hs-article p:not(.hs-kicker) { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
.hs-ins-note { margin-top: 18px; }

/* ---------- (g) the record ---------- */
.hs-record-in { display: grid; gap: 4px; }
.hs-docs-pane { padding: 6px 18px; }
.hs-docs { list-style: none; margin: 0; padding: 0; }
.hs-docs li + li { border-top: 1px solid var(--line); }
.hs-doc { display: grid; grid-template-columns: 1fr auto; column-gap: 16px; row-gap: 6px; padding: 20px 2px; text-decoration: none; color: var(--ink); }
.hs-doc-k { font: 400 24px/1.15 var(--serif); }
.hs-doc-d { grid-column: 1; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.hs-doc-go {
  grid-column: 2; grid-row: 1 / span 2; align-self: center; display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 999px; font: 500 17px/1 var(--sans); box-shadow: inset 0 0 0 1px rgba(29, 33, 38, .18), inset 0 1px 0 #fff;
  background: rgba(255, 255, 255, .7); transition: background .35s, color .35s, transform .35s var(--ease);
}
.hs-doc:hover .hs-doc-go, .hs-doc:focus-visible .hs-doc-go { background: var(--ink); color: #FBFAF7; transform: translateX(3px); }
.hs-doc:hover .hs-doc-k { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* ---------- (h) closing pair ---------- */
.hs-close { padding-bottom: 88px; }
.hs-close-in { text-align: center; padding: 44px 22px 36px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .95), 0 34px 70px -46px rgba(50, 60, 100, .4), 0 0 120px -24px rgba(180, 156, 248, .35); }
.hs-close-mark { display: block; width: 60px; height: 60px; margin: 0 auto 20px; }
.hs-close-mark svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 12px 18px rgba(60, 70, 110, .22)); }
.hs-close .hs-intro { margin: 0 auto; }
.hs-close-cta { display: grid; gap: 10px; margin: 28px 0 22px; }
.hs-close-call { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }

/* ---------- desktop: 761 px and up (WebGL field + lattice live here, so the panes frost) ---------- */
@media (min-width: 761px) {
  .hs-sec { padding: 112px 0; }
  .hs-head { margin-bottom: 48px; }
  .hs-h2 { font-size: clamp(46px, 5.4vw, 74px); margin-bottom: 20px; }
  .hs-intro { font-size: 18px; }
  .hs-pane { padding: 34px 32px; }

  .hs-door-pair { grid-template-columns: 1fr 1fr; gap: 32px; }
  .hs-door.card { min-height: 440px; padding: 44px 44px 40px; backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); }
  .hs-door h3 { font-size: clamp(40px, 4vw, 58px); }
  .hs-door .hs-door-line { font-size: 18px; }
  .hs-handle { right: 30px; height: 88px; margin-top: -44px; }

  .hs-name-in { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); grid-template-areas: "head dict" "body dict"; grid-template-rows: auto 1fr; column-gap: 72px; align-items: start; }
  .hs-name .hs-head { grid-area: head; }
  .hs-name-body { grid-area: body; }
  .hs-name-body p { font-size: 18px; }
  .hs-name-body .hs-name-lead { font-size: clamp(28px, 2.6vw, 34px); }
  .hs-dict { grid-area: dict; align-self: center; margin: 0; padding: 48px 48px 40px;
    backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); }
  .hs-dict-word dfn { font-size: clamp(76px, 7.4vw, 104px); }

  .hs-head-split { grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: end; }
  .hs-head-split .hs-h2 { margin-bottom: 0; }
  .hs-plaque { grid-template-columns: auto 1fr; gap: 56px; align-items: center; padding: 40px 48px; margin-bottom: 20px; }
  .hs-crd { flex-direction: column; gap: 10px; }
  .hs-crd-n { font-size: clamp(84px, 9vw, 128px); }
  .hs-plaque-body h3 { font-size: 34px; }
  .hs-facts { grid-template-columns: 1fr 1fr; gap: 20px; }

  .hs-steps-pane { padding: 44px 40px 16px; }
  .hs-after .btn { width: auto; }

  .hs-tiles { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .hs-tile { padding: 36px 32px 30px; min-height: 340px; }
  .hs-links { grid-template-columns: repeat(3, 1fr); column-gap: 32px; }
  .hs-links li:nth-last-child(-n+3) { border-bottom: 1px solid var(--line); }

  .hs-band { padding: 104px 0; }
  .hs-band-in { grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: end; }
  .hs-band .hs-h2 { margin-bottom: 0; }
  .hs-band-line { margin-bottom: 26px; }

  .hs-head-row { grid-template-columns: 1fr auto; align-items: end; gap: 32px; }
  .hs-head-row .hs-h2 { margin-bottom: 0; }
  .hs-articles { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .hs-article { padding: 36px 32px 30px; min-height: 280px; }
  .hs-article::after { left: 32px; right: 32px; }

  .hs-record-in { grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
  .hs-docs-pane { padding: 8px 32px; }
  .hs-doc { padding: 24px 2px; }
  .hs-doc-k { font-size: 28px; }

  .hs-close { padding-bottom: 128px; }
  .hs-close-in { padding: 72px 48px 56px; }
  .hs-close-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 34px 0 26px; }
}

/* ---------- wide: 1080 px and up ---------- */
@media (min-width: 1080px) {
  .hs-facts { grid-template-columns: repeat(3, 1fr); }
  /* the four steps run left to right, the thread joining each orb to the next */
  .hs-steps { grid-template-columns: repeat(4, 1fr); column-gap: 36px; }
  .hs-step { grid-template-columns: 1fr; padding-bottom: 28px; }
  .hs-step-n { grid-row: auto; margin-bottom: 8px; }
  .hs-step:not(:last-child)::after { left: 60px; right: -32px; top: 25px; bottom: auto; width: auto; height: 2px;
    background: linear-gradient(90deg, #7FD6F2, #B49CF8, #EBB3CF); background-size: 200% 100%; }
  .motion .hs-step:not(:last-child)::after { animation-name: hs-flow-x; }
}

/* ---------- phone extras ---------- */
@media (max-width: 420px) {
  .hs-sec { padding: 64px 0; }
  .hs-pane { padding: 24px 18px; }
  .hs-door.card { padding: 28px 20px 24px; }
  .hs-handle { right: 16px; }
  .hs-dict { padding: 26px 18px 22px; }
  .hs-steps-pane { padding: 26px 18px 6px; }
}

/* ---------- (b2) the filing index beside the record (David 11-12 PM: break the seven panes up) ----------
   Layout is CSS only and works with JS off: at 1080 px and up the plaque and the index sit in a left column that stays
   in view (sticky, only where the window is tall enough to hold it) while the six cards pass on the right as rows. */
.hs-index { margin: 0 0 16px; padding: 22px 22px 14px; }
.hs-index-k { font: 600 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 14px; }
.hs-index-doc { padding: 14px 0 12px; border-top: 1px solid var(--line); }
.hs-index-t { margin: 0 0 10px; font: 400 21px/1.2 var(--serif); color: var(--ink); }
.hs-index-t span { display: block; margin-top: 2px; font: 500 12.5px/1.4 var(--sans); color: var(--ink-3); }
.hs-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.hs-chips li { position: relative; padding: 7px 11px; border-radius: 999px; font: 500 12.5px/1 var(--sans); letter-spacing: .02em;
  color: var(--ink-2); background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px var(--line);
  transition: color .5s var(--ease), box-shadow .5s var(--ease), transform .5s var(--ease); }
.hs-chips-adv { --chip: rgba(150, 214, 240, .62); }
.hs-chips-crs { --chip: rgba(240, 186, 210, .7); }
.hs-chips li.is-on { color: var(--ink); transform: translateY(-1px); box-shadow: inset 0 0 0 1px #fff, 0 0 0 1px rgba(29, 33, 38, .08), 0 0 18px 3px var(--chip); }

@media (min-width: 1080px) {
  .hs-why-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px; align-items: start; }
  .hs-why-grid .hs-plaque { grid-template-columns: 1fr; gap: 18px; padding: 34px 34px 28px; margin-bottom: 16px; }
  .hs-why-grid .hs-crd { flex-direction: row; align-items: baseline; gap: 14px; }
  .hs-why-grid .hs-crd-n { font-size: clamp(80px, 6.6vw, 108px); }
  .hs-why-grid .hs-plaque-body h3 { font-size: 30px; }
  .hs-why-grid .hs-index { padding: 26px 34px 16px; }
  .hs-why-grid .hs-facts { grid-template-columns: 1fr; gap: 16px; }
  .hs-why-grid .hs-fact { display: grid; grid-template-columns: minmax(0, 10.5em) minmax(0, 1fr); column-gap: 30px; padding: 32px 34px; }
  .hs-why-grid .hs-fact h3 { grid-row: 1 / span 2; margin: 0; font-size: 29px; }
  .hs-why-grid .hs-fact p { grid-column: 2; }
  .hs-why-grid .hs-fact .hs-src { grid-column: 2; }
}
@media (min-width: 1080px) and (min-height: 780px) {
  .hs-why-aside { position: sticky; top: 104px; }
}

/* ---------- motion layer (David 11-12 PM: "state of the art scroll effects" on the record and the four steps) ----------
   Enhancement only. home-motion.js adds html.hm-on when motion is allowed (no reduced motion, not an automated browser);
   without it every card and step shows settled, exactly as written. Transforms, light and emphasis only: no text is ever
   made invisible, so a frozen frame shows dimmed steps at worst, never a blank band. */

/* the record: each card tips up out of the page as it arrives (--e: 1 at the fold, 0 once settled) */
.hm-on .hs-facts { perspective: 1400px; }
.hm-on .hs-fact { transform-origin: 50% 0; will-change: transform;
  transform: translate3d(0, calc(var(--e, 0) * 44px), 0) rotateX(calc(var(--e, 0) * 11deg)) scale(calc(1 - var(--e, 0) * .03));
  transition: box-shadow .6s var(--ease); }
.hm-on .hs-fact::before { transition: opacity .6s var(--ease); }
/* the card being read: its rim at full light and a spectral bar along its edge; its items light in the index */
.hm-on .hs-fact::after { content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, #7FD6F2, #B49CF8, #EBB3CF); transform: scaleY(0); transform-origin: 50% 0;
  transition: transform .7s var(--ease); pointer-events: none; }
.hm-on .hs-fact.is-live::after { transform: scaleY(1); }
.hm-on .hs-fact.is-live::before, .hm-on .hs-plaque.is-live::before { opacity: 1; }
.hm-on .hs-fact.is-live { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .95), 0 0 34px 2px rgba(180, 156, 248, .22), 0 34px 70px -40px rgba(50, 60, 100, .45); }
/* the CRD number resolves digit by digit, and one sweep of light crosses the plaque, the first time it is seen */
.hm-on .hs-crd-n span { display: inline-block; }
.hm-on .hs-plaque:not(.is-seen) .hs-crd-n span { opacity: .3; filter: blur(7px); transform: translateY(.18em); }
.hm-on .hs-plaque.is-seen .hs-crd-n span { animation: hm-digit .9s var(--ease) both; animation-delay: calc(var(--i, 0) * 90ms); }
@keyframes hm-digit { from { opacity: .3; filter: blur(7px); transform: translateY(.18em); } to { opacity: 1; filter: none; transform: none; } }
.hm-on .hs-plaque { overflow: hidden; }
.hm-on .hs-plaque::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 38%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(127, 214, 242, .18) 35%, rgba(180, 156, 248, .26) 50%, rgba(235, 179, 207, .18) 65%, transparent);
  transform: translateX(-120%) skewX(-12deg); opacity: 0; }
.hm-on .hs-plaque.is-seen::after { animation: hm-sweep 1.6s .25s var(--ease) both; }
@keyframes hm-sweep { 0% { opacity: 0; transform: translateX(-120%) skewX(-12deg); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateX(330%) skewX(-12deg); } }

/* the four steps: a faint track, the light drawn along it (--f per segment), each orb igniting as the light reaches it */
.hm-on .hs-step:not(:last-child)::before { content: ""; position: absolute; left: 25px; top: 56px; bottom: 4px; width: 2px; border-radius: 2px; background: var(--line); }
.hm-on .hs-step:not(:last-child)::after { opacity: 1; transform-origin: 50% 0; transform: scaleY(var(--f, 0)); }
.hm-on .hs-step-n { transition: transform .6s var(--ease), box-shadow .6s var(--ease), color .6s var(--ease); }
.hm-on .hs-step:not(.is-lit) .hs-step-n { transform: scale(.88); color: var(--ink-3); box-shadow: 0 0 0 1px #fff, 0 8px 16px -12px rgba(50, 60, 100, .35); }
.hm-on .hs-step.is-now .hs-step-n { transform: scale(1.12); }
.hm-on .hs-step-n::after { content: ""; position: absolute; inset: -8px; border-radius: 999px; border: 1.5px solid transparent;
  border-top-color: rgba(29, 33, 38, .55); border-right-color: rgba(29, 33, 38, .15); opacity: 0; transition: opacity .5s var(--ease); }
.hm-on .hs-step.is-now .hs-step-n::after { opacity: 1; animation: hm-spin 2.8s linear infinite; }
@keyframes hm-spin { to { transform: rotate(360deg); } }
.hm-on .hs-step h3, .hm-on .hs-step p { transition: opacity .6s var(--ease), transform .6s var(--ease); }
.hm-on .hs-step:not(.is-lit) h3, .hm-on .hs-step:not(.is-lit) p { opacity: .34; transform: translateY(10px); }
.hm-on .hs-step.is-lit:not(.is-now) h3, .hm-on .hs-step.is-lit:not(.is-now) p { opacity: .8; }
.hm-num { display: none; }

@media (min-width: 1080px) {
  .hm-on .hs-step:not(:last-child)::before { left: 60px; right: -32px; top: 25px; bottom: auto; width: auto; height: 2px; }
  .hm-on .hs-step:not(:last-child)::after { transform-origin: 0 50%; transform: scaleX(var(--f, 0)); }
  /* the step being read stands behind the glass as a numeral, refracted by the pane in front of it */
  .hm-on .hm-stage { position: relative; }
  .hm-on .hm-num { display: block; position: absolute; right: 12px; top: -26px; width: 2.2em; height: 1em; z-index: 0; pointer-events: none;
    font: 400 clamp(190px, 17vw, 270px)/1 var(--serif); letter-spacing: -.02em; }
  .hm-on .hm-num::before { content: ""; position: absolute; inset: 18% 8% 6% 18%; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(180, 156, 248, .30), rgba(127, 214, 242, .12) 60%, transparent); filter: blur(18px); }
  .hm-on .hm-num span { position: absolute; right: 0; top: 0; color: transparent; -webkit-text-stroke: 1.2px rgba(29, 33, 38, .2);
    opacity: 0; transform: translateY(.16em); transition: opacity .7s var(--ease), transform .9s var(--ease); }
  .hm-on .hm-num span.is-now { opacity: 1; transform: none; }
  .hm-on .hs-how .hs-head, .hm-on .hs-steps-pane { position: relative; z-index: 1; }
}
/* pinned: the stage holds still while the scroll walks the light through the four steps (tall windows only) */
@media (min-width: 1080px) and (min-height: 780px) {
  .hm-on .hm-track { height: var(--track, auto); }
  .hm-on .hm-stage { position: sticky; top: 96px; }
}