/* Subpages v4 (notes, overview, contact, legal, utility): the homepage's chrome and craft, shared.
   The chrome rules mirror variant.css (the homepage) so every page ends the same way. */

/* ---------- chrome: nav over everything, drifting tapes, the desk section, the footer ---------- */
.nav { z-index: 300; }
.ptape { --ptape-bg: var(--cream); position: relative; z-index: 1; }
.ptape[data-ptape="shapes"] { --ptape-h: 56px; }
.footer { border-top: 1.5px solid var(--ink); }
.footer__tape { width: 100vw; margin: 34px calc(50% - 50vw) 0; }
.burst--footer { translate: 24px 0; }

.deskfoot { display: grid; grid-template-columns: 1fr 1fr; border-top: 1.5px solid var(--ink); }
.deskfoot__left { position: relative; overflow: hidden; padding: clamp(110px, 12vw, 160px) clamp(24px, 4.5vw, 64px); background: var(--cream); }
.deskfoot__left .scallop { --scallop-d: 140px; }
.deskfoot__left .h2 { margin: 0 0 18px; font-size: clamp(2.6rem, 4.6vw, 4.4rem); }
.deskfoot__left .lede { margin-left: 0; max-width: 46ch; }
.deskfoot__ctas { display: grid; gap: 14px; margin-top: 36px; max-width: 600px; }
.deskfoot__cta { justify-content: center; text-align: center; font: 400 1.6rem/1 var(--serif); padding-block: 18px; }
.deskfoot__right { display: grid; place-items: center; padding: 80px 24px; border-left: 1.5px solid var(--ink); background: repeating-linear-gradient(90deg, var(--pink) 0 38px, #fff 38px 76px); }
.deskfoot__pile { position: relative; display: grid; justify-items: center; }
.deskfoot__bubble { --bob-fill: #fff; --bob-ink: var(--ink); --bob-font: 400 1.6rem/1 var(--serif); margin-bottom: 26px; }
.deskfoot__card { background: #fff; border: 1.5px solid var(--ink); border-radius: 28px; box-shadow: 6px 6px 0 var(--ink); padding: 36px 36px 30px; max-width: 460px; }
.deskfoot__q { font: 400 clamp(1.9rem, 2.8vw, 2.5rem)/1.12 var(--serif); text-align: center; margin: 0 0 24px; }
.deskfoot__who { display: flex; align-items: center; gap: 18px; }
.deskfoot__who b { display: block; font: 600 .9rem/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.deskfoot__who small { display: block; font-size: .95rem; color: var(--ink-soft); }
.deskfoot__who a { color: inherit; }
.deskfoot__av { flex: none; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--pink); border: 1.5px solid var(--ink); font: italic 400 2rem/1 var(--serif); }
.deskfoot__edge { position: absolute; left: 0; right: 0; }
.deskfoot__edge--top { top: -1px; } .deskfoot__edge--bottom { bottom: -1px; }
@media (max-width: 860px) { .deskfoot { grid-template-columns: 1fr; } .deskfoot__right { border-left: 0; border-top: 1.5px solid var(--ink); } }

/* reading progress, under the nav (sub.js drives --read) */
.readbar { position: fixed; left: 0; right: 0; top: var(--readbar-top, 66px); z-index: 299; height: 4px; pointer-events: none; }
.readbar i { display: block; height: 100%; background: var(--marigold); border-right: 2px solid var(--ink); transform-origin: 0 50%; transform: scaleX(var(--read, 0)); }

/* the hero H1 words (elastic-word-pop): hidden only until sub.js plays them */
.note-h1 em, .nidx-hero h1 em { font-style: italic; position: relative; z-index: 0; white-space: nowrap; }
.note-h1 em::after, .nidx-hero h1 em::after { content: ""; position: absolute; z-index: -1; left: -.06em; right: -.06em; top: .14em; bottom: .1em; background: var(--marigold); border-radius: 4px; rotate: -1.4deg; transform-origin: 0 50%; transform: scaleX(0); transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.is-marked em::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .note-h1 em::after, .nidx-hero h1 em::after { transform: none; transition: none; } }

/* ============================================================ FIELD NOTES ARTICLE ============================================================ */
.sub--note { padding-top: clamp(40px, 6vw, 76px); }
.sub--note .wrap--rail { max-width: 1180px; grid-template-columns: minmax(0, 1fr) 300px; }
.sub--note .wrap--rail > article { max-width: 70ch; }
.note-head { margin-bottom: 30px; padding-bottom: 28px; border-bottom: 1.5px solid var(--ink); }
.note-head__meta { display: flex; align-items: center; gap: 14px; margin: 0 0 20px !important; font: 600 .76rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.note-chip { display: inline-block; padding: 8px 14px 7px; border: 1.5px solid var(--ink); border-radius: 999px; color: var(--ink); text-decoration: none; box-shadow: 2px 2px 0 var(--ink); transition: transform .12s ease, box-shadow .12s ease; }
.note-chip:hover { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }
.note-chip--marigold { background: var(--marigold); }
.note-chip--cobalt { background: var(--cobalt); color: #fff; }
.sub .note-h1 { font: 400 clamp(2.9rem, 6.4vw, 5rem)/.98 var(--serif); letter-spacing: -.012em; margin: 0 0 14px; text-wrap: balance; }
.sub .note-h1 mark { background: none; padding: 0; position: relative; z-index: 0; white-space: nowrap; }
.sub .note-h1 mark::after { content: ""; position: absolute; z-index: -1; left: -.06em; right: -.06em; top: .14em; bottom: .08em; background: var(--marigold); border-radius: 4px; rotate: -1.4deg; transform-origin: 0 50%; transform: scaleX(0); transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.sub .is-marked mark::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .sub .note-h1 mark::after { transform: none; transition: none; } }
.note-head .updated { margin: 0; }
.note > .lede { font-size: clamp(1.15rem, 1.5vw, 1.3rem); line-height: 1.6; color: var(--ink); margin-bottom: 10px; }

/* numbered sections: each h2 carries a bright numbered tab */
.note { counter-reset: nsec; }
.note > h2 { counter-increment: nsec; position: relative; margin-top: 54px; padding-top: 22px; border-top: 1.5px dashed rgb(30 27 22 / .28); font-size: clamp(1.7rem, 3vw, 2.3rem); }
.note > h2::before {
  content: counter(nsec, decimal-leading-zero); display: inline-grid; place-items: center; vertical-align: .32em;
  min-width: 42px; height: 28px; margin-right: 14px; padding: 0 8px; border: 1.5px solid var(--ink); border-radius: 999px;
  font: 600 .74rem/1 var(--sans); letter-spacing: .08em; background: var(--nsec, var(--marigold)); color: var(--ink); box-shadow: 2px 2px 0 var(--ink);
}
.note > h2:nth-of-type(6n+2) { --nsec: var(--pink); }
.note > h2:nth-of-type(6n+3) { --nsec: #8fbcff; }
.note > h2:nth-of-type(6n+4) { --nsec: #7cc95c; }
.note > h2:nth-of-type(6n+5) { --nsec: var(--lilac); }
.note > h2:nth-of-type(6n+6) { --nsec: #ff8a6b; }
.note p { font-size: 1.07rem; line-height: 1.7; }
.note ul { list-style: none; margin: 18px 0 22px; padding: 0; }
.note ul li { position: relative; padding: 14px 18px 14px 50px; margin: 0 0 12px; background: #fff; border: 1.5px solid var(--ink); border-radius: 14px; box-shadow: 4px 4px 0 var(--ink); line-height: 1.55; }
.note ul li::before { content: ""; position: absolute; left: 18px; top: 19px; width: 16px; height: 16px; border: 1.5px solid var(--ink); background: var(--marigold); border-radius: 50%; }
.note ul li:nth-child(3n+2)::before { background: var(--pink); border-radius: 3px; }
.note ul li:nth-child(3n+3)::before { background: var(--cobalt); border-radius: 3px; rotate: 45deg; width: 14px; height: 14px; }
.note a.link { text-decoration-color: var(--marigold); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.note a.link:hover { background: #fff3d6; }

/* the FAQ, as the live accordion (app.js glides it), dressed for an article */
.sub .faq.faq-mini { background: #fff; border: 1.5px solid var(--ink); border-radius: 18px; box-shadow: 5px 5px 0 var(--ink); padding: 6px 26px; margin: 18px 0 8px; text-align: left; }
.faq-mini summary { font-size: 1.28rem; }
.faq-mini details p { margin: 0; padding: 0 0 20px; font-size: 1rem; }

/* the closing card: what to bring to the call */
.note-cta { margin: 56px 0 0; padding: 28px 30px 30px; background: var(--marigold); border: 2px solid var(--ink); border-radius: 22px; box-shadow: 7px 7px 0 var(--ink); }
.note-cta__kicker { margin: 0 0 8px !important; font: 600 .72rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink) !important; }
.note-cta__h { margin: 0 0 18px !important; font: 400 clamp(1.7rem, 2.8vw, 2.3rem)/1.1 var(--serif) !important; color: var(--ink) !important; text-wrap: balance; }
.note-cta__bring { margin: 0 0 22px; }
.note-cta__bring > div { display: grid; grid-template-columns: 220px 1fr; gap: 14px; padding: 11px 0; border-top: 1.5px solid var(--ink); align-items: baseline; }
.note-cta__bring dt { font: 600 .68rem/1.25 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.note-cta__bring dd { margin: 0; font: 400 1.2rem/1.2 var(--serif); }
.note-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.note-cta__btn { font: 400 1.5rem/1 var(--serif); padding: 16px 30px; }
.note-cta__alt { margin: 0 !important; flex: 1 1 260px; font-size: .92rem !important; color: var(--ink) !important; }
.note-cta__alt a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) { .note-cta__bring > div { grid-template-columns: 1fr; gap: 3px; } .note-cta__btn { width: 100%; justify-content: center; } }

/* rail: the scroll-spy index as a card */
.rail__card--toc.tocs {
  --tocs-ink: var(--ink); --tocs-ink-dim: var(--ink-soft); --tocs-num: var(--ink-soft); --tocs-line: rgb(30 27 22 / .2);
  --tocs-line-hover: var(--ink); --tocs-bg: #fff; --tocs-top: 96px; --tocs-pad: 13px 34px 13px 0; --tocs-dot: 8px; --tocs-dot-right: 6px;
  position: static; padding: 6px 22px 10px;
}
.rail__card--toc .tocs__head { padding: 14px 0 12px; }
.rail__card--toc .tocs__title { font: 400 1.5rem/1.1 var(--serif); text-transform: none; letter-spacing: 0; }
.rail__card--toc .tocs__link { font: 400 1.08rem/1.25 var(--serif); }
.rail__card--toc .tocs__link.is-active::after, .rail__card--toc [aria-current="true"]::after { background: var(--tomato); }
@media (max-width: 991px) {
  .sub--note .wrap--rail { grid-template-columns: 1fr; }
  .sub__rail { position: static; }
  .rail__card--toc.tocs { position: sticky; top: 70px; z-index: 50; padding: 0 16px; }
}

/* ============================================================ NOTES INDEX ============================================================ */
.sub.sub--nidx { padding: 0 0 96px; }
.nidx-hero { position: relative; overflow: clip; text-align: center; padding: clamp(70px, 10vw, 130px) var(--pad) clamp(56px, 8vw, 96px); }
.nidx-hero .burst { position: absolute; width: clamp(150px, 20vw, 320px); z-index: 0; }
.nidx-hero .burst--l { left: max(-90px, -6vw); top: 14%; fill: var(--kelly); animation: heroSpinL 1.6s cubic-bezier(.2, 1.25, .35, 1) .05s both; }
.nidx-hero .burst--r { right: max(-90px, -6vw); top: 6%; fill: var(--pink); animation: heroSpinR 1.6s cubic-bezier(.2, 1.25, .35, 1) .15s both; }
@keyframes heroSpinL { from { transform: rotate(-240deg) scale(.25); opacity: 0; } 30% { opacity: 1; } to { transform: rotate(-6deg) scale(1); } }
@keyframes heroSpinR { from { transform: rotate(250deg) scale(.25); opacity: 0; } 30% { opacity: 1; } to { transform: rotate(10deg) scale(1); } }
.nidx-hero > * { position: relative; z-index: 1; }
.sub .nidx-hero h1 { font: 400 clamp(3.6rem, 10vw, 8rem)/.92 var(--serif); margin: 14px 0 22px; }
.nidx-hero .lede { margin: 0 auto; max-width: 58ch; font-size: clamp(1.05rem, 1.4vw, 1.2rem); }
.nidx { max-width: 1240px; margin: 0 auto; padding: 64px var(--pad) 0; }
.nidx-start {
  position: relative; display: grid; gap: 10px; padding: clamp(28px, 4vw, 44px) clamp(24px, 4vw, 52px);
  background: var(--ink); color: var(--cream); border: 2px solid var(--ink); border-radius: 26px; box-shadow: 8px 8px 0 var(--marigold); text-decoration: none;
}
.nidx-start__kicker { font: 600 .74rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--marigold); }
.nidx-start__h { font: 400 clamp(2.4rem, 5vw, 4.2rem)/.98 var(--serif); }
.nidx-start__h em { font-style: italic; color: var(--marigold); }
.nidx-start__p { max-width: 60ch; color: rgb(250 247 239 / .78); font-size: 1.05rem; line-height: 1.55; }
.nidx-start__go { position: absolute; right: clamp(24px, 4vw, 48px); top: 50%; translate: 0 -50%; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: var(--marigold); color: var(--ink); font: 400 1.8rem/1 var(--serif); border: 2px solid var(--cream); transition: transform .25s cubic-bezier(.22, 1, .36, 1); }
.nidx-start:hover .nidx-start__go { transform: translateX(6px); }
.nidx-h { font: 400 clamp(2rem, 3.6vw, 3rem)/1 var(--serif); margin: 72px 0 26px; display: flex; align-items: center; gap: 18px; }
.nidx-h::after { content: ""; flex: 1; height: 1.5px; background: var(--ink); }
.ngrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.ngrid li { margin: 0; }
.ncard {
  --isl-lift: -4px; display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--ink);
  background: #fff; border: 1.5px solid var(--ink); border-radius: 20px; overflow: hidden;
}
.ncard__top { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: var(--b); color: var(--bt); border-bottom: 1.5px solid var(--ink); }
.ncard__n { font: 600 .78rem/1 var(--sans); letter-spacing: .12em; }
.ncard__top .shape { transform: scale(.75); }
.ncard__q { padding: 20px 20px 8px; font: 400 1.55rem/1.12 var(--serif); text-wrap: balance; }
.ncard__a { padding: 0 20px; color: var(--ink-soft); font-size: .96rem; line-height: 1.5; flex: 1; }
.ncard__go { padding: 18px 20px 20px; font: 600 .82rem/1 var(--sans); letter-spacing: .06em; transition: translate .25s cubic-bezier(.22, 1, .36, 1); }
.ncard:hover .ncard__go { translate: 6px 0; }
@media (max-width: 1000px) { .ngrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .ngrid { grid-template-columns: 1fr; }
  .nidx-start__go { position: static; translate: none; margin-top: 8px; }
  .nidx-hero .burst { width: 140px; }
  .nidx-hero .burst--l { left: -76px; top: 30%; } .nidx-hero .burst--r { right: -60px; top: 4%; }
}
@media (prefers-reduced-motion: reduce) { .nidx-hero .burst { animation: none; } }
.ncard { box-shadow: 4px 4px 0 var(--ink); }
.ncard__top { height: 52px; box-sizing: border-box; }
.ncard__top .shape { flex: none; }

/* ============================================================ /OVERVIEW ============================================================ */
.sub.sub--ov { padding: 0 0 0; }
.ov-hero { position: relative; overflow: clip; text-align: center; padding: clamp(70px, 10vw, 130px) var(--pad) clamp(40px, 6vw, 70px); }
.ov-hero .burst { position: absolute; width: clamp(150px, 20vw, 320px); z-index: 0; }
.ov-hero .burst--l { left: max(-90px, -6vw); top: 18%; fill: var(--cobalt); animation: heroSpinL 1.6s cubic-bezier(.2, 1.25, .35, 1) .05s both; }
.ov-hero .burst--r { right: max(-90px, -6vw); top: 6%; fill: var(--tomato); animation: heroSpinR 1.6s cubic-bezier(.2, 1.25, .35, 1) .15s both; }
.ov-hero > * { position: relative; z-index: 1; }
.ov-hero .note-h1 { font-size: clamp(3.2rem, 8vw, 6.6rem); margin: 14px auto 22px; max-width: 13ch; }
.ov-hero .lede { margin: 0 auto; max-width: 60ch; font-size: clamp(1.05rem, 1.4vw, 1.22rem); color: var(--ink); }

/* at a glance: heyjay's bouncing step cards on rising hills (bank: bop-step-cards) */
.ov-glance { --bsc-hill: #2a9e00; --bsc-ink: var(--ink); --bsc-base: var(--cream); --bsc-card: #fff;
  --bsc-title-font: 400 2.2rem/1.05 var(--serif); --bsc-text-font: 400 1.02rem/1.55 var(--sans); --bsc-badge: 96px; --bsc-max: 1180px; --bsc-gap: 24px; padding-top: 30px; }
.ov-step__kicker { margin: 4px 0 6px; font: 600 .72rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }

.ov-sec { max-width: 1180px; margin: 0 auto; padding: clamp(72px, 9vw, 120px) var(--pad); }
.ov-sec .h2 em { font-style: italic; }

/* the loop: a numbered track, what happens beside who stays in control */
.ov-loop { text-align: center; }
.ov-loop__list { list-style: none; margin: 48px 0 0; padding: 0; text-align: left; position: relative; }
.ov-loop__list::before { content: ""; position: absolute; left: 31px; top: 30px; bottom: 30px; width: 2px; background: repeating-linear-gradient(180deg, var(--ink) 0 8px, transparent 8px 14px); }
.ov-loop__row { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1.25fr) minmax(0, 1fr); gap: 0 22px; align-items: stretch; margin: 0 0 22px; }
.ov-loop__n { position: relative; z-index: 1; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--b); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); font: 400 1.9rem/1 var(--serif); align-self: start; }
.ov-loop__what { background: #fff; border: 1.5px solid var(--ink); border-radius: 18px; box-shadow: 5px 5px 0 var(--ink); padding: 20px 24px; }
.ov-loop__what h3 { margin: 0 0 6px; font: 400 1.9rem/1 var(--serif); }
.ov-loop__what p { margin: 0; color: var(--ink-soft); line-height: 1.55; }
.ov-loop__ctl { position: relative; background: #fff3d6; border: 1.5px dashed var(--ink); border-radius: 18px; padding: 18px 22px; }
.ov-loop__ctl span { display: block; margin-bottom: 6px; font: 600 .68rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.ov-loop__ctl p { margin: 0; line-height: 1.5; color: var(--ink); }
.ov-loop__row.is-in .ov-loop__n { animation: loopPop .55s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes loopPop { from { transform: scale(.4) rotate(-20deg); } }
@media (max-width: 820px) {
  .ov-loop__list::before { left: 23px; }
  .ov-loop__row { grid-template-columns: 48px minmax(0, 1fr); gap: 12px 14px; }
  .ov-loop__n { width: 48px; height: 48px; font-size: 1.5rem; }
  .ov-loop__ctl { grid-column: 2; }
}

/* what an employee is: four bright tiles */
.ov-what { text-align: center; }
.ov-what .lede { margin: 18px auto 0; max-width: 62ch; }
.ov-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin-top: 48px; text-align: left; }
.ov-tile { --isl-lift: -4px; padding: 24px 22px 26px; background: var(--b); color: var(--bt); border: 1.5px solid var(--ink); border-radius: 22px; box-shadow: 5px 5px 0 var(--ink); }
.ov-tile .shape { display: block; margin-bottom: 22px; transform: scale(1.3); transform-origin: 0 50%; }
.ov-tile h3 { margin: 0 0 8px; font: 400 2.2rem/1 var(--serif); }
.ov-tile p { margin: 0; line-height: 1.5; opacity: .92; }
@media (max-width: 1000px) { .ov-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ov-tiles { grid-template-columns: 1fr; } }

/* records: copy beside the real sample record */
.ov-rec { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 90px); align-items: center; }
.ov-rec__copy p { color: var(--ink-soft); font-size: 1.07rem; line-height: 1.7; }
.ov-rec__rule { margin-top: 22px; padding: 18px 22px; background: var(--ink); border-radius: 18px; box-shadow: 5px 5px 0 var(--marigold); }
.ov-rec__rule p { margin: 0; color: var(--cream) !important; }
.ov-rec__rule strong { color: var(--marigold); }
.ov-rec__fig { margin: 0; }
.ov-rec__fig img { display: block; width: 100%; height: auto; border: 2px solid var(--ink); border-radius: 22px; box-shadow: 8px 8px 0 var(--ink); rotate: 1.5deg; }
.ov-rec__fig figcaption { margin-top: 18px; font-size: .92rem; color: var(--ink-soft); text-align: center; }
@media (max-width: 900px) { .ov-rec { grid-template-columns: 1fr; } .ov-rec__fig { max-width: 440px; margin-inline: auto; } }

/* boundaries: six cards with bright markers */
.ov-bounds { text-align: center; }
.ov-bounds__list { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; text-align: left; }
.ov-bounds__list li { position: relative; margin: 0; padding: 22px 22px 22px 56px; background: #fff; border: 1.5px solid var(--ink); border-radius: 18px; box-shadow: 4px 4px 0 var(--ink); color: var(--ink-soft); line-height: 1.55; }
.ov-bounds__list li::before { content: ""; position: absolute; left: 20px; top: 26px; width: 18px; height: 18px; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--marigold); }
.ov-bounds__list li:nth-child(6n+2)::before { background: var(--pink); border-radius: 3px; }
.ov-bounds__list li:nth-child(6n+3)::before { background: var(--cobalt); border-radius: 3px; rotate: 45deg; width: 15px; height: 15px; }
.ov-bounds__list li:nth-child(6n+4)::before { background: var(--kelly); }
.ov-bounds__list li:nth-child(6n+5)::before { background: var(--lilac); border-radius: 3px; }
.ov-bounds__list li:nth-child(6n+6)::before { background: var(--tomato); border-radius: 3px; rotate: 45deg; width: 15px; height: 15px; }
.ov-bounds__list strong { display: block; margin-bottom: 4px; font: 400 1.4rem/1.1 var(--serif); color: var(--ink); }
@media (max-width: 1000px) { .ov-bounds__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ov-bounds__list { grid-template-columns: 1fr; } }

.ov-privacy { max-width: 900px; padding-top: 0; }
.ov-privacy p { color: var(--ink-soft); font-size: 1.07rem; line-height: 1.7; }
.ov-privacy .note-cta { margin-top: 44px; }
@media (max-width: 640px) { .ov-hero .burst { width: 140px; } .ov-hero .burst--l { left: -76px; top: 36%; } .ov-hero .burst--r { right: -60px; top: 4%; } }
@media (prefers-reduced-motion: reduce) { .ov-hero .burst, .ov-loop__row.is-in .ov-loop__n { animation: none; } }
/* overview fixes: .sub h2 sizing is for articles, not these display heads; tile text keeps its tile's ink */
.sub--ov .h2 { font: 400 clamp(2.6rem, 5vw, 4.4rem)/1 var(--serif); margin: 10px 0 0; }
.sub--ov .ov-rec .h2 { font-size: clamp(2.2rem, 3.8vw, 3.4rem); margin-bottom: 18px; }
.sub .ov-tile h3, .sub .ov-tile p { color: var(--bt); }
.sub .ov-tile h3 { font: 400 2.2rem/1 var(--serif); }
.ov-glance .bsc__card { text-align: center; }
.ov-glance .bsc__title { font: 400 2.2rem/1.05 var(--serif); margin: 4px 0 8px; }
.ov-glance .ov-step__kicker { margin-top: 10px; }
.ov-rec { padding-top: 40px; }
.ov-bounds { padding-top: 40px; }
@media (max-width: 640px) {
  .ov-hero .burst, .nidx-hero .burst { width: 120px; }
  .ov-hero .burst--l, .nidx-hero .burst--l { top: auto; bottom: -40px; left: -60px; }
  .ov-hero .burst--r, .nidx-hero .burst--r { top: auto; bottom: -30px; right: -56px; }
  .ov-hero .section-kicker { padding-inline: 10px; }
}
@media (max-width: 640px) { .ov-hero, .nidx-hero { padding-bottom: 80px; } }

/* ============================================================ CONTACT · THANK-YOU · EMPLOYEE FILE ============================================================ */
.util { position: relative; overflow: clip; max-width: none; padding: clamp(70px, 11vh, 130px) var(--pad); }
.util .burst { position: absolute; width: clamp(150px, 19vw, 300px); z-index: 0; }
.util .burst--l { left: max(-100px, -7vw); bottom: 8%; fill: var(--cobalt); animation: heroSpinL 1.6s cubic-bezier(.2, 1.25, .35, 1) .05s both; }
.util .burst--r { right: max(-100px, -7vw); top: 6%; fill: var(--pink); animation: heroSpinR 1.6s cubic-bezier(.2, 1.25, .35, 1) .15s both; }
.util > *:not(.burst) { position: relative; z-index: 1; }
.util .note-h1 { font: 400 clamp(3.4rem, 8vw, 6.4rem)/.95 var(--serif); margin: 14px 0 22px; max-width: 12ch; }
.util .note-h1 mark { background: none; position: relative; z-index: 0; white-space: nowrap; }
.util .note-h1 mark::after { content: ""; position: absolute; z-index: -1; left: -.06em; right: -.06em; top: .14em; bottom: .08em; background: var(--marigold); border-radius: 4px; rotate: -1.4deg; transform-origin: 0 50%; transform: scaleX(0); transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.util .is-marked mark::after { transform: scaleX(1); }
.util__lede { max-width: 50ch; font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.6; color: var(--ink-soft); }
.util .utility-actions .pill { font: 400 1.4rem/1 var(--serif); padding: 16px 28px; }
.util__grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(40px, 6vw, 90px); align-items: center; }
.util__cards { display: grid; gap: 22px; }
.ucard { --isl-lift: -4px; display: grid; gap: 4px; padding: 22px 26px; border: 1.5px solid var(--ink); border-radius: 20px; box-shadow: 5px 5px 0 var(--ink); text-decoration: none; color: var(--ink); background: #fff; }
.ucard--mail { background: var(--marigold); rotate: -1.5deg; }
.ucard--desk { background: var(--ink); color: var(--cream); rotate: 1deg; box-shadow: 5px 5px 0 var(--pink); }
.ucard--post { rotate: -.6deg; }
.ucard__k { font: 600 .7rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; opacity: .8; }
.ucard b { font: 400 clamp(1.7rem, 2.6vw, 2.3rem)/1.1 var(--serif); }
.ucard small { font-size: .95rem; opacity: .8; line-height: 1.45; }
@media (max-width: 860px) { .util__grid { grid-template-columns: 1fr; } }

.util--thanks { text-align: center; min-height: calc(100svh - 300px); display: grid; align-content: center; justify-items: center; }
.util--thanks .note-h1 { margin-inline: auto; }
.util--thanks .util__lede { margin: 0 auto; }
.util--thanks .utility-actions { justify-content: center; }
.util__badge { --bb-label: #fff; margin-bottom: 18px; }

.employee-main { position: relative; overflow: clip; }
.employee-main .burst { position: absolute; width: clamp(140px, 18vw, 280px); z-index: 0; }
.employee-main .burst--l { left: max(-90px, -6vw); bottom: 6%; fill: var(--marigold); animation: heroSpinL 1.6s cubic-bezier(.2, 1.25, .35, 1) .05s both; }
.employee-main .burst--r { right: max(-90px, -6vw); top: 6%; fill: var(--kelly); animation: heroSpinR 1.6s cubic-bezier(.2, 1.25, .35, 1) .15s both; }
.employee-main .employee-file { z-index: 1; }
@media (max-width: 640px) {
  .util .burst, .employee-main .burst { width: 120px; }
  .util .burst--l, .employee-main .burst--l { left: -64px; }
  .util .burst--r, .employee-main .burst--r { right: -60px; top: 2%; }
}
@media (prefers-reduced-motion: reduce) { .util .burst, .employee-main .burst { animation: none; } }
/* phones: a long highlighted phrase wraps; the highlight follows each line instead of swiping one box */
@media (max-width: 640px) {
  .sub .note-h1 mark { white-space: normal; background: var(--marigold); padding: 0 .08em; border-radius: 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  .sub .note-h1 mark::after { display: none; }
}