:root {

  color-scheme: light;

  --rail: min(calc(var(--statement-size) * 6.64), 56%);

  --card-t: clamp(1.35rem, .536vw + 1.018rem, 1.875rem);
  --card-d: clamp(.9375rem, .179vw + .84rem, 1.125rem);

  --rule-gap: clamp(2rem, 5vw, 4.5rem);

  --chalk: #F0EFEA;
  --spark: #FFFFFF;
  --paper: #FFFFFF;
  --bone: #E7E5DD;
  --bone-deep: #E0DED4;
  --ink: #15181B;
  --ink-lift: #1C2024;
  --ink-lift-2: #22262A;
  --ink-live: #16222E;
  --brand-18: rgba(1, 142, 255, .18);
  --brand: #018EFF;

  --focus: #0170C8;
  --brand-lite: #01C0FE;

  --ember: #FF6600;

  --ink-rgb: 21, 24, 27;
  --ink-70: rgba(21, 24, 27, .70);
  --ink-15: rgba(21, 24, 27, .15);
  --ink-45: rgba(21, 24, 27, .45);

  --ink-65: rgba(21, 24, 27, .65);
  --steel: rgba(21, 24, 27, .16);
  --chalk-65: rgba(240, 239, 234, .65);
  --chalk-0:  rgba(240, 239, 234, 0);
  --chalk-14: rgba(240, 239, 234, .14);
  --brand-40: rgba(1, 142, 255, .40);
  --chalk-40: rgba(240, 239, 234, .40);
  --chalk-10: rgba(240, 239, 234, .10);
  --chalk-line: rgba(240, 239, 234, .20);

  --t-50:  .8125rem;
  --t-100: .8125rem;
  --t-200: 1.0625rem;
  --t-300: 1.0625rem;
  --t-400: clamp(1.25rem, 1.1rem + .7vw, 1.625rem);
  --t-500: clamp(1.25rem, 1.1rem + .7vw, 1.625rem);
  --t-600: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  --t-700: clamp(1.875rem, 1.4rem + 2.4vw, 3.25rem);
  --t-800: clamp(2.5rem, 1.6rem + 4.6vw, 5.5rem);

  --state: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --work: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --pad: clamp(1.25rem, 5vw, 5.5rem);

  --v0: clamp(.25rem, .5vw, .375rem);
  --v1: clamp(.5rem, 1vw, .75rem);
  --v2: clamp(.75rem, 1.6vw, 1.25rem);
  --v3: clamp(1.25rem, 2.4vw, 1.75rem);
  --v4: clamp(1.75rem, 3.4vw, 2.75rem);
  --v5: clamp(2.5rem, 5vw, 4rem);
  --v6: clamp(4rem, 8vw, 6.5rem);
  --band: clamp(4.5rem, 12vw, 9rem);
  --header: 76px;

  --ease: cubic-bezier(.22, 1, .36, 1);

  --statement-size: clamp(3rem, 1rem + 8.6vw, 8.4rem);
  --worth-offset: calc(var(--statement-size) * 1.364);

  --r-tap: 100px;
  --r-field: 10px;

  --veil: rgba(8, 9, 11, .94);
}

@font-face {
  font-family: 'Archivo';
  src: url('assets/fonts/archivo.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('assets/fonts/instrument-sans.woff2') format('woff2-variations');

  font-weight: 400 700;
  font-style: normal;
  font-display: block;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;

  scroll-padding-top: var(--header);
  overflow-x: clip;

  scrollbar-gutter: stable;

  overscroll-behavior-y: none;
  background: linear-gradient(to bottom, var(--chalk) 0 66%, var(--ink) 66% 100%);
}

body {

  background: var(--chalk);
  color: var(--ink);
  font-family: var(--work);
  font-size: var(--t-300);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -.003em;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

::selection { background: var(--brand); color: var(--chalk); }

.statement {

  margin-left: -.033em;
  font-family: var(--state);
  font-weight: 600;
  font-size: var(--statement-size);
  line-height: .94;

  letter-spacing: -.045em;
  text-wrap: balance;
}

.statement--sm {
  font-family: var(--state);
  font-weight: 600;
  font-size: var(--t-700);
  line-height: 1.06;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.figure {
  font-family: var(--state);
  font-weight: 600;

  font-size: var(--a2);
  line-height: 1.05;
  letter-spacing: -.02em;
  max-width: 14ch;
}
.figcap { font-size: var(--t-100); color: var(--ink-65); max-width: 28ch; margin-top: .6rem; }

.lead {
  max-width: 52ch;
  font-size: var(--t-400);
  line-height: 1.55;
  color: var(--ink-70);
}

.eyebrow {
  font-family: var(--work);
  font-size: var(--t-100);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .26em;
  text-transform: uppercase;

  color: var(--ink-70);
}

.tm { font-size: .58em; vertical-align: .55em; letter-spacing: 0; }

.roll { overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.roll b { display: block; font-weight: inherit; transition: transform .7s var(--ease); }
.js .roll b { transform: translateY(108%); }
.js .roll.in b { transform: none; }

.srule {
  display: grid;

  grid-template-columns: minmax(0, max-content) 1fr;
  align-items: center;
  gap: .9rem;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

.srule i { display: none; }
.srule .eyebrow { white-space: nowrap; }

@media (max-width: 860px) { .srule .eyebrow { white-space: normal; } }

.stories__nav { display: flex; gap: .5rem; margin-bottom: 1rem; }
.stories__b {

  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--steel);
  border-radius: 50%;
  background: none;
  color: var(--ink-70);
  cursor: pointer;
  transition: border-color .22s var(--ease), color .22s var(--ease), background .22s var(--ease);
}
.stories__b svg { width: 1rem; height: 1rem; stroke: currentColor; stroke-width: 1.6; fill: none; }
.stories__b:hover { border-color: var(--ink); color: var(--ink); }
.stories__b:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.stories__b[disabled] { opacity: .35; cursor: default; }
.stories__b[disabled]:hover { border-color: var(--steel); color: var(--ink-70); }

.faqf__stories blockquote p,
.faqf__stories .help__who,
.faqf__stories .story figcaption { max-width: 34ch; }

.stories__track { display: grid; }

.story {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s var(--ease);
}
.story.is-on { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .story { transition: none; } }

@media (min-width: 1100px) {
  .faqf__stories {
    grid-column: 1;

    grid-row: 1 / -1;
    align-self: start;
    position: sticky;
    top: calc(var(--header) + clamp(1.5rem, 3vw, 2.5rem));

    padding-left: clamp(2rem, 4vw, 4rem);
    padding-right: clamp(1.5rem, 4vw, 4rem);
    max-width: none;
    margin: 0;
  }
}
@media (max-width: 1099px) {
  .faqf__stories { margin-bottom: clamp(2rem, 5vw, 3rem); }
}

.solpics {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--bone);
}
.solpics img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;

  transition: opacity .5s var(--ease);
}
.solpics img:first-child { opacity: 1; }
.help[data-sol] .solpics img:first-child { opacity: 0; }
.help[data-sol="1"] .solpics img:nth-child(1),
.help[data-sol="2"] .solpics img:nth-child(2),
.help[data-sol="3"] .solpics img:nth-child(3),
.help[data-sol="4"] .solpics img:nth-child(4),
.help[data-sol="5"] .solpics img:nth-child(5) { opacity: 1; }

@media (prefers-reduced-motion: reduce) { .solpics img { transition: none; } }

@media (max-width: 1099px) { .solpics { display: none; } }

.srule .eyebrow,
.cost__rail .eyebrow,
.svcf__head .eyebrow {
  font-size: clamp(1.05rem, 1.5vw, 1.375rem);
  letter-spacing: .22em;
  color: var(--ink);
}

.study .srule .eyebrow,
.svcf .svcf__head .eyebrow { color: var(--chalk); }

@media (min-width: 1100px) {
  .srule--v {
    display: flex;
    flex-direction: column;

    align-items: center;
    width: max-content;
    justify-self: start;
    gap: 1rem;
    margin-bottom: 0;
    align-self: stretch;
  }
  .srule--v .eyebrow { writing-mode: vertical-rl; margin: 0; }
  .srule--v i:first-child { display: none; }
  .srule--v i:last-child {
    display: block;
    flex: 1;
    width: 1px;
    min-height: 3rem;
    margin-right: 0;
    background: var(--rail-line, var(--steel));
  }
}

.wrap { padding-inline: var(--pad); }
.band { padding-block: var(--band); }

.hdr {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;

  background: var(--chalk);
}

.mark { display: block; flex: none; }

.mark img { width: auto; height: clamp(40px, 3.4vw, 50px); }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.25rem); }

@media (min-width: 1100px) { .nav > .btn { margin-left: clamp(.75rem, 1.6vw, 1.75rem); } }
.nav a {
  font-size: var(--t-100);
  color: var(--ink-70);
  transition: color .2s var(--ease);
}
.nav a:hover, .nav a[aria-current] { color: var(--brand); }

.nav a.btn { color: var(--bl); }

.clock {
  font-family: var(--work);
  font-size: var(--t-50);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-65);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.clock:empty { display: none; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: .75rem;

  padding: .8rem 1.5rem;

  --bl: var(--chalk);
  --bg: var(--ink);
  background: var(--bg);
  color: var(--bl);

  font-family: var(--state);
  font-size: var(--t-400);
  font-weight: 800;
  letter-spacing: -.005em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;

  border: 1px solid var(--chalk-line);
  border-radius: var(--r-tap);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: border-color .48s var(--ease), background .48s var(--ease),
              color .48s var(--ease), box-shadow .48s var(--ease);
}

.btn__l {
  display: block;
  height: 1em;
  overflow: hidden;
}

.btn { position: relative; }
.btn__l { position: static; }
.btn__l i {
  display: block;
  height: 1em;
  font-style: normal;
}

.btn::after {
  content: '';
  flex: none;
  width: 1.75em;
  height: 1.75em;
  background: currentColor;
  -webkit-mask: var(--mark) center / 100% 100% no-repeat;
          mask: var(--mark) center / 100% 100% no-repeat;
  --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10.9' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M8.6 15.4 15.4 8.6M9.5 8.6h5.9v5.9' fill='none' stroke='%23000' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  transition: none;
}
.btn:hover::after, .btn:focus-visible::after {
  --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10.6' fill='none' stroke='%23000' stroke-width='2.7'/%3E%3Cpath d='M8.6 15.4 15.4 8.6M9.5 8.6h5.9v5.9' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@property --edge {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.btn__l::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 2px;
  pointer-events: none;
  border-radius: inherit;

  background: conic-gradient(from var(--edge),
              transparent 0 48%, var(--brand-40) 58%, var(--chalk-40) 68%,
              var(--spark) 74%, var(--chalk-40) 80%, var(--brand-40) 88%,
              transparent 96%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  filter: drop-shadow(0 0 5px var(--brand)) drop-shadow(0 0 12px var(--brand-40));
  transition: opacity .4s var(--ease);
  animation: edge-run 2.4s linear infinite;
}
.btn:hover .btn__l::before, .btn:focus-visible .btn__l::before { opacity: 1; }
@keyframes edge-run { to { --edge: 360deg; } }
@media (prefers-reduced-motion: reduce) { .btn__l::before { animation: none; } }

.btn--lg { padding: .95rem 1.85rem; font-size: var(--t-500); gap: .7rem; }

.btn:hover, .btn:focus-visible {
  --bl: var(--spark);
  --bg: var(--ink-live);
  border-color: var(--brand);
  box-shadow: 0 0 34px 1px var(--brand-18);
}

@media (prefers-reduced-motion: reduce) {
  .btn__l i { transition: none; }
  .btn:hover .btn__l i, .btn:focus-visible .btn__l i { transform: none; }
}

.nav-more { display: none; }

.hero { padding-block: clamp(3.5rem, 9vw, 7.5rem) clamp(3.5rem, 8vw, 6.5rem); }

.hero:has(.hero__grid) {
  min-height: calc(100vh - var(--header));
  min-height: calc(100svh - var(--header));
  display: grid;
  align-content: center;

  padding-block: clamp(14rem, 34vh, 23rem) clamp(2.5rem, 5vw, 4rem);
}

@media (max-width: 860px) {
  .hero:has(.hero__grid) {
    min-height: 0;
    align-content: start;
    padding-block: clamp(2.25rem, 7vh, 4rem) clamp(2.5rem, 7vw, 4rem);
  }
}

.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: end;
}
.hero__lede { display: grid; gap: clamp(1rem, 2.5vw, 1.5rem); justify-items: start; }
@media (min-width: 861px) {

  .hero__lede { margin-left: 0; }
}

.hero__lede .eyebrow {

  display: block;
  font-size: var(--t-200);
  font-weight: 600;
  letter-spacing: .22em;
  color: var(--ink);
}
.hero__desc { max-width: 42ch; color: var(--ink-70); font-size: var(--t-500); line-height: 1.5; }
.hero__lede .btn { margin-top: .75rem; }
.hero__note { max-width: 46ch; }

@media (min-width: 861px) {
  .hero:not(:has(.hero__viz)) .hero__grid {

    grid-template-columns: minmax(0, 1.35fr) minmax(21rem, .85fr);
    column-gap: clamp(2rem, 5vw, 5rem);
    align-items: end;
  }

  .hero:not(:has(.hero__viz)) .hero__note { max-width: 52ch; padding-bottom: .35rem; }

  .hero:has(.hero__grid):not(:has(.hero__viz)) {
    min-height: 0;

    padding-block: clamp(5rem, 16vh, 10rem) var(--band);
  }
}

.hero__note p { color: var(--ink); font-size: var(--t-400); line-height: 1.5; }

.hero__note .hero__gets {
  margin-top: 1.15rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--steel);
  font-size: var(--t-200);
  color: var(--ink-70);
}
.hero__note p + p { margin-top: 1rem; }
.hero__note .btn { margin-top: 1.75rem; }

.hero { position: relative; isolation: isolate; }
.hero__viz { display: none; }

.hero__weave {
  display: none;
  --weave-ink: var(--ink-rgb);
  --weave-rest: 1.42;
}

.hero__weave .weave {
  --weave-cut:
    radial-gradient(ellipse 1545px 33% at 0% 52.5%, #0000 0 88%, #000 100%),
    linear-gradient(to bottom, #000 0 68%, #0006 86%, #0000 100%),
    radial-gradient(ellipse 90% 32.5% at 0% 100%, #0000 0 80%, #000 100%);
  mask-image: var(--weave-cut);
  -webkit-mask-image: var(--weave-cut);
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
}
.hero__grid { position: relative; z-index: 1; }

.viz {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.arm { transform-origin: 1200px 196px; }
.arm__line { stroke: var(--ink-45); stroke-width: .8; }

.arm__node { fill: var(--ink); stroke: none; }
.arm__label {
  font-family: var(--work);
  font-size: var(--t-100);
  font-weight: 600;
  letter-spacing: .22em;
  fill: var(--ink-45);
}

.js .arm__line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .arm__node, .js .arm__label { opacity: 0; }
.js .hero__viz .arm__line { animation: viz-draw 1s var(--ease) .2s forwards; }
.js .in .arm__node, .js .in .arm__label { animation: viz-in .5s var(--ease) .45s forwards; }
.js .in .arm--2 .arm__line { animation-delay: .35s; }
.js .in .arm--2 .arm__node, .js .in .arm--2 .arm__label { animation-delay: .6s; }
.js .in .arm--3 .arm__line { animation-delay: .5s; }
.js .in .arm--3 .arm__node, .js .in .arm--3 .arm__label { animation-delay: .75s; }

.js .in .arm--1 { animation: signal-a 11s ease-in-out 1.3s infinite alternate; }
.js .in .arm--2 { animation: signal-b 14s ease-in-out 1.3s infinite alternate; }
.js .in .arm--3 { animation: signal-c  9s ease-in-out 1.3s infinite alternate; }

.js .in .arm--1 .arm__label {
  transform-origin: 941px 216px;
  animation: viz-in .5s var(--ease) .45s forwards, unslant-a 11s ease-in-out 1.3s infinite alternate;
}
.js .in .arm--2 .arm__label {
  transform-origin: 1067px 346px;
  animation: viz-in .5s var(--ease) .6s forwards, unslant-b 14s ease-in-out 1.3s infinite alternate;
}
.js .in .arm--3 .arm__label {
  transform-origin: 1364px 318px;
  animation: viz-in .5s var(--ease) .75s forwards, unslant-c 9s ease-in-out 1.3s infinite alternate;
}

@keyframes unslant-a {
  from { transform: rotate(3.4deg) scale(1.111); }
  to   { transform: rotate(-2.8deg) scale(.901); }
}
@keyframes unslant-b {
  from { transform: rotate(-3.6deg) scale(.909); }
  to   { transform: rotate(2.9deg) scale(1.105); }
}
@keyframes unslant-c {
  from { transform: rotate(-2.4deg) scale(1.081); }
  to   { transform: rotate(3.2deg) scale(.893); }
}

@keyframes signal-a {
  from { transform: rotate(-3.4deg) scale(.90); }
  to   { transform: rotate(2.8deg)  scale(1.11); }
}
@keyframes signal-b {
  from { transform: rotate(3.6deg)  scale(1.10); }
  to   { transform: rotate(-2.9deg) scale(.905); }
}
@keyframes signal-c {
  from { transform: rotate(2.4deg)  scale(.925); }
  to   { transform: rotate(-3.2deg) scale(1.12); }
}

.viz__ring { stroke: var(--ink); stroke-width: .8; fill: none; }
.viz__dot { fill: var(--ink); }
.viz__ping { stroke: var(--ink); stroke-width: .8; fill: none; transform-origin: 1200px 196px; }

.js .viz__hub > * { opacity: 0; }
.js .in .viz__hub > * { animation: viz-in .6s var(--ease) 1.1s forwards; }
.js .in .viz__ping { animation: viz-ping 4.5s ease-out 1.6s infinite; }

@keyframes viz-draw { to { stroke-dashoffset: 0; } }
@keyframes viz-in { to { opacity: 1; } }
@keyframes viz-sweep {
  from { transform: rotate(-3deg) scale(.96); }
  to   { transform: rotate(3deg) scale(1.04); }
}
@keyframes viz-ping {
  0%       { opacity: .55; transform: scale(1); }
  70%,100% { opacity: 0;   transform: scale(3.4); }
}

.split { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); }
.split__rail > * + * { margin-top: .75rem; }

.signed {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);

  padding-top: clamp(2.4rem, 5vw, 3.75rem);
  border-top: 1px solid var(--steel);
  max-width: 26ch;
}
.signed b { display: block; }

.signed--face {
  display: flex;
  align-items: center;
  gap: clamp(.9rem, 2vw, 1.3rem);
  max-width: none;

  font-family: var(--work);
  letter-spacing: 0;
}

.signed__who { display: grid; gap: .12rem; }
.signed--face b   { font-size: var(--t-400);   font-weight: 600; color: var(--ink);    line-height: 1.25; }
.signed--face span{ font-size: var(--t-300); font-weight: 600; color: var(--ink-70); line-height: 1.35; }
.signed--face em  { font-size: var(--t-200);      font-weight: 400; color: var(--ink-65); line-height: 1.35;
                    font-style: normal; letter-spacing: .01em; }
.signed__face {

  --face: clamp(58px, 6.2vw, 82px);
  width: var(--face);
  height: var(--face);
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  object-fit: cover;

  background: var(--bone);
}

.cost-fold { display: grid; align-content: start; min-height: 78vh;
             padding-block: clamp(1rem, 2.2vw, 1.75rem) clamp(4.5rem, 11vw, 9rem); }

.cost { max-width: 58rem; }
.cost-row { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); }
.cost__rail .eyebrow {
  display: flex;
  align-items: center;
  gap: .9rem;
  white-space: nowrap;
}
.cost__rail .eyebrow::after {
  content: '';

  flex: 1;
  margin-right: var(--rule-gap);
  height: 1px;
  background: var(--steel);
  transform-origin: left;
  transition: transform .6s var(--ease);
}
.js .cost__rail .eyebrow::after { transform: scaleX(0); }

.js .cost__rail.in .eyebrow::after { transform: scaleX(1); }
.cost__data { min-height: 1px; }

.cost > * { text-wrap: pretty; }

.cost .lead { text-align: left; hyphens: none; -webkit-hyphens: none; text-wrap: pretty; }

.cost > * {
  font-family: var(--state);
  font-size: var(--t-600);
  line-height: 1.26;
  letter-spacing: -.018em;
  max-width: none;
}

.cost #cost, .cost .cost__close { font-weight: 600; color: var(--ink); }
.cost .lead { font-weight: 600; color: var(--ink-70); }
.ink .cost #cost, .ink .cost .cost__close { color: var(--chalk); }
.ink .cost .lead { color: var(--chalk-65); }

.cost .lead { margin-top: clamp(1.25rem, 2.4vw, 1.75rem); }
.cost .lead + .lead { margin-top: 1.1rem; }
.cost__close { margin-top: clamp(2rem, 4vw, 3rem); }

.marks {

  padding-block: 0;
  view-timeline-name: --marks-pass;
  view-timeline-axis: block;
}

.marks__label {

  margin-bottom: clamp(0.6rem, 1.3vw, 1.05rem);
}

.marks__window {
  overflow: clip;
  container-type: inline-size;

  mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
  min-height: clamp(70px, 9vw, 118px);
  display: flex;
  align-items: center;
}

.marks__track {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  flex: none;
  width: max-content;
  gap: clamp(2.5rem, 8vw, 7rem);
}

.logo {
  height: calc(var(--s, 1) * clamp(50px, 8.2vw, 108px));
  width: auto;
  flex: none;
  object-fit: contain;
  display: block;
}

@supports (animation-timeline: view()) {
  .js .marks__track {
    animation: marks-parade linear both;
    animation-timeline: --marks-pass;
    animation-range: entry 0% exit 100%;
  }
}
@keyframes marks-parade {

  from { transform: translate3d(-100%, 0, 0); }

  to   { transform: translate3d(100cqw, 0, 0); }
}

@media (min-width: 861px) {

  .marks__window { width: calc(var(--rail) - var(--rule-gap)); }
}

@supports not (animation-timeline: view()) {
  .marks__window { width: auto; overflow: visible; container-type: normal; mask-image: none; }
  .marks__track { flex-direction: row; width: auto; justify-content: space-between;
                  gap: clamp(0.9rem, 2.3vw, 1.9rem); }
}
@media (prefers-reduced-motion: reduce) {
  .marks__window { width: auto; overflow: visible; container-type: normal; mask-image: none; }
  .marks__track { flex-direction: row; width: auto; justify-content: space-between;
                  gap: clamp(0.9rem, 2.3vw, 1.9rem); animation: none; transform: none; }
}

.ink { background: var(--ink); color: var(--chalk); }

.ink .eyebrow, .ink .figcap, .ink .signed--face span,
.nf--ink .figcap { color: var(--chalk-65); }
.ink .lead, .ink p { color: var(--chalk-65); }
.ink .statement, .ink .statement--sm, .ink .figure { color: var(--chalk); }
.ink .prose a { color: var(--brand-lite); border-bottom-color: var(--chalk-line); }
.ink .signed { border-color: var(--chalk-line); }

.sols { border-top: 1px solid var(--steel); }

.sol {
  display: grid;
  grid-template-columns: 2.75rem 1fr max-content;
  align-items: baseline;
  gap: .5rem clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1.35rem, 2.8vw, 1.9rem);
  border-bottom: 1px solid var(--steel);
  transition: border-color .25s var(--ease);
}
.sol__n { grid-row: 1; font-variant-numeric: tabular-nums; }
.sol__name {
  font-family: var(--state);
  font-weight: 600;
  font-size: var(--t-600);
  line-height: 1.12;
  letter-spacing: -.02em;
  transition: color .22s var(--ease);
}
.sol__out { grid-column: 2; color: var(--ink-70); }
.sol__go {
  grid-row: 1;
  grid-column: 3;
  font-size: var(--t-100);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-65);
  transition: color .22s var(--ease);
}
.sol:hover { border-color: var(--brand); }
.sol:hover .sol__name, .sol:hover .sol__go { color: var(--brand); }

.prose { max-width: 58ch; }

.split .prose {

  max-width: 45ch;
  margin-left: auto;

  font-size: var(--a5);
  line-height: 1.62;
}

.split .prose > :first-child { margin-top: 0; }
.prose h2 {
  font-family: var(--state);
  font-weight: 600;
  font-size: var(--t-600);
}

.split .prose h2 { font-size: var(--a2); }
.prose h2 {
  line-height: 1.12;
  letter-spacing: -.02em;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  margin-bottom: .9rem;
}
.prose p, .prose li { color: var(--ink-70); }

.ink .prose p, .ink .prose li { color: var(--chalk-65); }
.prose p + p { margin-top: 1rem; }
.prose ul { margin: 1rem 0 0 1.1rem; }
.prose li + li { margin-top: .5rem; }

.prose a {
  color: var(--brand);
  border-bottom: 1px solid var(--steel);
  transition: border-color .22s var(--ease), color .22s var(--ease);
}
.prose a:hover,
.prose a:focus-visible { border-bottom-color: currentColor; }
@media (prefers-reduced-motion: reduce) { .prose a { transition: none; } }
.prose strong { color: var(--ink); font-weight: 600; }

.qa { border-top: 1px solid var(--steel); max-width: 68ch; }
.split .qa { max-width: none; }

.split .qa details p { max-width: 45ch; }

.qa details { position: relative; border-bottom: 1px solid var(--steel); }

.qa details::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: transparent;
  transition: background 2s cubic-bezier(.16, .84, .44, 1) .12s;
}
.qa details:hover::before,
.qa details:focus-within::before {
  background: var(--bone-deep);
  transition: background .2s var(--ease) 0s;
}
@media (prefers-reduced-motion: reduce) { .qa details::before { transition: none; } }

.qa summary {
  display: grid;
  grid-template-columns: 1fr max-content;
  gap: 1.5rem;
  align-items: baseline;
  padding-block: clamp(1.1rem, 2.4vw, 1.5rem);
  cursor: pointer;
  list-style: none;
  font-family: var(--state);
  font-weight: 600;

  font-size: var(--a3);
  line-height: 1.25;
  letter-spacing: -.015em;
  transition: color .2s var(--ease);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: '+'; color: var(--ink-65); font-family: var(--work); font-size: var(--t-300); }
.qa details[open] summary::after { content: '\2013'; }

.qa summary:hover { color: var(--ink-70); }
.qa details > p { padding-bottom: clamp(1.1rem, 2.4vw, 1.5rem); color: var(--ink-70); max-width: 58ch; }
.qa details > p + p { margin-top: .85rem; padding-bottom: 0; }
.qa details > p:last-of-type { padding-bottom: clamp(1.1rem, 2.4vw, 1.5rem); }

.form { max-width: 34rem; display: grid; gap: 1.25rem; }
.field { display: grid; gap: .4rem; }

.field, .field > * { min-width: 0; }
.field label { font-size: var(--t-100); font-weight: 600; letter-spacing: .04em; }
.field input, .field textarea, .field select {
  font: inherit;
  color: var(--ink);
  padding: .8rem .9rem;
  background: transparent;
  border: 1px solid var(--steel);
  border-radius: var(--r-field);
  min-height: 44px;
  transition: border-color .2s var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--brand);
  outline: none;
}
.field textarea { min-height: 8rem; resize: vertical; }

.form .btn {
  justify-self: start;
  font-size: var(--t-200);
}
.form .btn::after { width: 1.5em; height: 1.5em; }
.form__note { font-size: var(--t-100); color: var(--ink-65); }

.cta {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-items: center;
  background: var(--ink);
  color: var(--chalk);
  overflow: clip;
}
.cta__inner { width: 100%; padding-block: clamp(3.5rem, 9vw, 7rem); }

.cta__pin { display: contents; }

.cta__bg {
  position: absolute; inset: 0; z-index: -2;
  background: var(--ink) url("assets/cta-sky-900.jpg") center / cover no-repeat;

  opacity: .34;
}

@media (min-width: 861px) { .cta__bg { background-image: url("assets/cta-sky.jpg"); } }

.cta__vig {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top,   rgba(21,24,27,.94) 0, rgba(21,24,27,.55) 34%, rgba(21,24,27,0) 68%),
    linear-gradient(to right, rgba(21,24,27,.80) 0, rgba(21,24,27,0) 42%),
    linear-gradient(to bottom, rgba(21,24,27,.55) 0, rgba(21,24,27,0) 22%);
}

.cta__inner { text-align: center; position: relative; z-index: 1; }
.cta__eyebrow {

  max-width: 46ch;
  margin-inline: auto;
  font-family: var(--state);
  font-size: var(--t-100);
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1.45;
  color: var(--spark);
  text-wrap: balance;
}
.cta__h {
  margin-top: clamp(.75rem, 1.6vw, 1.25rem);
  font-family: var(--state);
  font-weight: 800;
  font-size: clamp(2.75rem, 1.1rem + 7.6vw, 9.5rem);
  line-height: .9;
  letter-spacing: -.045em;
  text-transform: uppercase;
}

.cta__a, .cta__b { display: block; }
.cta__a { color: var(--chalk-40); }
.cta__b { color: var(--chalk); }

.strike { display: inline-block; position: relative; white-space: nowrap; }
.strike::after {
  content: '';
  position: absolute;
  left: -.015em;
  right: -.015em;

  top: .44em;
  height: .13em;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left center;
  animation: strike-draw linear both;
  animation-timeline: view();

  animation-range: cover 46% cover 68%;
}
@keyframes strike-draw { to { transform: scaleX(1); } }
@supports not (animation-timeline: view()) { .strike::after { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .strike::after { animation: none; transform: scaleX(1); } }

@supports (animation-timeline: view()) {
  @media (min-width: 861px) and (min-height: 720px) and (prefers-reduced-motion: no-preference) {

    .js .cta:has(.cta__pin) {
      display: block;
      min-height: 0;
      height: 200vh;
      view-timeline-name: --ctahold;
      view-timeline-axis: block;
    }

    .js .cta .cta__pin {
      position: sticky;
      top: 0;
      height: 100vh;
      display: grid;
      align-content: center;
      overflow: clip;
    }
    .js .cta .strike::after {
      animation-timeline: --ctahold;
      animation-duration: auto;

      animation-range: contain 18% contain 62%;
    }
  }
}

.cta__act {

  margin-top: clamp(2.75rem, 6vw, 5rem);
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: center;
}

@media (min-width: 861px) {
  .cta__act { justify-items: center; }
}

:where(.cta) .btn {
  --bl: var(--ink);
  --bg: var(--paper);
  border-color: var(--paper);
}
.cta .btn { justify-self: center; }

body:not(.home) .cta {
  background: var(--chalk);
  color: var(--ink);
}
body:not(.home) .cta__eyebrow { color: var(--ink); }

body:not(.home) .cta .statement {
  font-size: clamp(1.75rem, 9.24vw, 8.4rem);

  line-height: 1.06;
}

body:not(.home) .cta__note {
  font-size: var(--a5);
  line-height: 1.5;
}

body:not(.home) .cta .statement { margin-top: var(--v2); }
body:not(.home) .cta .btn { margin-top: var(--v3); }
body:not(.home) .cta__note    { color: var(--ink-70); }
body:not(.home) .cta__fine    { color: var(--ink-65); }
body:not(.home) :where(.cta) .btn {
  --bl: var(--chalk);
  --bg: var(--ink);
  border-color: var(--ink);
}

.cta, .study, .hero { isolation: isolate; }

@media (min-width: 861px) and (min-height: 720px) {
  main {
    position: relative;
    z-index: 1;
    background: var(--chalk);
  }
  .ftr {
    position: sticky;
    bottom: 0;
    z-index: 0;
  }

  .ftr__cue { height: 0; view-timeline-name: --footer-reveal; view-timeline-axis: block; }

  body { timeline-scope: --footer-reveal; }
}

@supports (animation-timeline: view()) {
  @media (min-width: 861px) and (min-height: 720px) and (prefers-reduced-motion: no-preference) {

    .ftr::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 3;
      pointer-events: none;
      background: linear-gradient(to bottom,
                  var(--veil) 0%, var(--veil) 18%,
                  rgba(8, 9, 11, .62) 46%, rgba(8, 9, 11, .22) 74%,
                  rgba(8, 9, 11, 0) 100%);
      animation-name: ftr-clear;
      animation-duration: auto;
      animation-fill-mode: both;
      animation-timeline: --footer-reveal;

      animation-timing-function: cubic-bezier(.65, 0, .85, .25);
      animation-range: cover 0px cover 573px;
    }
    @keyframes ftr-clear {
      0%   { opacity: 1; }
      100% { opacity: 0; }
    }

    .ftr__statement, .ftr__cols, .ftr__fine {
      animation-name: ftr-rise;
      animation-duration: auto;
      animation-fill-mode: both;
      animation-timeline: --footer-reveal;

      animation-timing-function: cubic-bezier(.45, 0, .12, 1);
      animation-range: cover 425px cover 668px;
    }
    @keyframes ftr-rise { from { transform: translateY(50px); } to { transform: none; } }
  }
}

.ftr {

  --ftr-stmt: clamp(2.25rem, 1rem + 6.6vw, 6rem);
  --ftr-reserve: calc(5.16 * var(--ftr-stmt) + clamp(1.25rem, 2.4vw, 2rem));
  --menu-shift: 0px;

  --word-size: min(14rem, calc((100vw - 2 * var(--pad) - var(--ftr-reserve)) / 8.25));
  background: var(--ink); color: var(--chalk); padding-block: clamp(3.5rem, 8vw, 6rem) 2rem; }

@media (min-width: 861px) and (min-height: 720px) {

  .ftr { padding-top: 204px; }
}
.ftr__logo { width: auto; height: 30px; margin-bottom: clamp(2rem, 5vw, 3rem); }

.ftr__grid {

  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
}
@media (min-width: 861px) {
  .ftr__grid {
    position: relative;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: clamp(1.25rem, 2.4vw, 2rem);
    row-gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
  }

  .ftr__statement { grid-column: 1; grid-row: 1; }

  .ftr__cols {

    padding-bottom: calc(.86 * var(--word-size) + clamp(1rem, 1.6vw, 1.75rem));
    grid-column: 2; grid-row: 1; align-self: start;

    padding-left: calc(100vw - 2 * var(--pad) - var(--ftr-reserve)
                       - 7.2015 * var(--word-size) + var(--menu-shift));
  }
  .ftr__word { grid-column: 2; grid-row: 1; align-self: end; }

}

.ftr__word {

  text-align: right;

  padding-right: .09em;
  font-family: var(--state);
  font-weight: 800;

  font-size: var(--word-size);

  margin-right: 0;
  white-space: nowrap;
  line-height: .86;
  letter-spacing: -.045em;
  text-transform: uppercase;
  user-select: none;
  color: transparent;

  background-image: linear-gradient(var(--chalk-40) 0 0),
                    url("assets/cta-sky-word.jpg"), url("assets/cta-sky-word.jpg");
  background-blend-mode: screen, overlay, normal;

  background-size: auto, cover, cover;
  background-position: 0 0, 0% 24%, 0% 24%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: word-drift 26s ease-in-out infinite alternate;
}

@keyframes word-drift { to { background-position: 0 0, 100% 76%, 100% 76%; } }
@media (prefers-reduced-motion: reduce) { .ftr__word { animation: none; } }

@supports (animation-timeline: view()) {

  @media (min-width: 861px) and (min-height: 720px) and (prefers-reduced-motion: no-preference) {
    .ftr__word {
      animation-name: word-drift, ftr-rise;
      animation-duration: 26s, auto;
      animation-timing-function: ease-in-out, cubic-bezier(.45, 0, .12, 1);
      animation-iteration-count: infinite, 1;
      animation-direction: alternate, normal;
      animation-fill-mode: none, both;
      animation-timeline: auto, --footer-reveal;
      animation-range: normal, cover 425px cover 668px;
    }
  }
}

.ftr__statement {
  font-family: var(--state);
  font-weight: 800;
  font-size: var(--ftr-stmt);
  line-height: .92;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.ftr__statement span { color: var(--chalk-65); }

.ftr__cols {
  display: grid;
  grid-template-columns: 1fr;

  gap: 1.5rem clamp(1rem, 1.8vw, 1.75rem);
  margin-top: 0;
}

.ftr h2 {
  font-family: var(--state);
  font-size: var(--t-50);
  font-weight: 800;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--chalk);
  margin-bottom: 1rem;
}
.ftr ul { list-style: none; display: grid; gap: .6rem; }

.ftr li { color: var(--chalk-65); font-size: var(--t-200); }
.ftr a { color: var(--chalk-65); font-size: var(--t-200); transition: color .2s var(--ease); }
.ftr a:hover { color: var(--chalk); }

.ftr__sol__cols { display: flex; flex-wrap: wrap; gap: clamp(1.25rem, 2.4vw, 2.25rem); }
@media (min-width: 861px) {

}
.ftr__sol__cols > ul { flex: none; }
.ftr__sol__cols ul { display: grid; gap: .6rem; align-content: start; }

@media (min-width: 861px) {

  .ftr__social { margin-left: 0; }
}

.ftr__social ul { display: flex; flex-wrap: wrap; gap: .5rem; }
.ftr__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}
.ftr__social a { color: var(--chalk); }
.ftr__social svg {
  width: 34px; height: 34px; flex: none;
  fill: currentColor;
  stroke: none;
  transition: color .3s var(--ease);
}

.ftr__social a:hover { color: var(--chalk-65); }

:where(.ftr) .btn {
  --bl: var(--ink);
  --bg: var(--paper);
  border-color: var(--paper);
}

.ftr__social { display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; row-gap: .9rem; }
.ftr__social > h2 { flex: 1 0 100%; }

.ftr__cta {
  margin-top: 0;
  margin-left: clamp(1.75rem, 3vw, 3rem);
  padding: .7rem 1.3rem;
  font-size: var(--t-100);
  font-family: var(--state);
  cursor: pointer;
}
.ftr__cta::after { width: 1.7em; height: 1.7em; }

@media (min-width: 861px) {
  .ftr__cta {
    margin-left: auto;
    padding: .8rem 1.45rem;
    font-size: var(--t-200);
  }
}

@media (max-width: 860px) {
  .ftr__cta { padding: .85rem 1.45rem; font-size: var(--t-200); }
}
.ftr__hint { flex: 1 0 100%; }
.ftr__hint {
  margin-top: .2rem;
  font-size: var(--t-100);
  color: var(--chalk-65);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.ftr__hint.is-on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .ftr__hint { transition: none; } }

.ftr__fine { margin-top: 2.5rem; font-size: var(--t-100); color: var(--chalk-65); display: grid; gap: .4rem; }

.ftr__fine a {
  font-size: inherit;
  color: var(--chalk);
  text-decoration: underline;
  text-underline-offset: .25em;
  text-decoration-thickness: from-font;
}
.ftr__fine a:hover,
.ftr__fine .ftr__pref:hover { text-decoration-thickness: 2px; }

.ftr__fine .ftr__pref {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  color: var(--chalk);
  text-decoration: underline;
  text-underline-offset: .25em;
  text-decoration-thickness: from-font;
}

.bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 30;
  display: none;
  padding: .75rem var(--pad) calc(.75rem + env(safe-area-inset-bottom));
  background: var(--chalk);
  border-top: 1px solid var(--steel);
  transition: transform .45s var(--ease);
}

.bar--away { transform: translateY(110%); }
@media (prefers-reduced-motion: reduce) { .bar { transition: none; } }

.bar .btn { display: flex; width: 100%; justify-content: center; }

[data-reveal] { transition: opacity .45s var(--ease), transform .45s var(--ease); }
.js [data-reveal] { opacity: 0; transform: translateY(10px); }

.js .cost[data-reveal] { opacity: 1; transform: none; }

.js .hero__viz[data-reveal] { opacity: 1; transform: none; }
.js [data-reveal].in { opacity: 1; transform: none; }

.js .step:nth-child(2) { transition-delay: .06s; }
.js .step:nth-child(3) { transition-delay: .12s; }
.js .step:nth-child(4) { transition-delay: .18s; }

@supports (animation-timeline: view()) {
  .js .px-lag {
    animation: px-lag linear both;
    animation-timeline: view();
    animation-range: exit 0% exit 100%;
  }
  .js .px-rise {
    animation: px-rise linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 90%;
  }
}
@keyframes px-lag { from { transform: translateY(0); } to { transform: translateY(14%); } }
@keyframes px-rise { from { transform: translateY(42px); } to { transform: translateY(0); } }

@media (max-width: 1039px) {
  .clock { display: none; }
}

@media (max-width: 860px) {
  .nav-hide, .clock { display: none; }
  .hdr .btn { display: none; }
  .nav-more { display: block; }
  .bar { display: block; }
  body { padding-bottom: 4.5rem; }
}

@media (min-width: 861px) {
  .cost__data { min-height: 26rem; }

  .cost-row {
    grid-template-columns: var(--rail) minmax(0, 1fr);
    gap: 0;
    align-items: start;
  }
  .cost__rail .eyebrow { margin-top: .45rem; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__viz { display: block; position: absolute; inset: 0 0 -34% 0; z-index: 0; pointer-events: none; }

  .hero__weave  { display: block; position: absolute; inset: 0 0 -20% 0; z-index: 0; pointer-events: none; }

  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.58fr); column-gap: clamp(2rem, 5vw, 5rem); align-items: start; }  .sol { grid-template-columns: 2.75rem minmax(0, 1fr) minmax(0, 1fr) max-content; }
  .sol__out { grid-column: 3; grid-row: 1; }
  .sol__go { grid-column: 4; }

  .ftr__cols { display: flex; flex-wrap: wrap; gap: 2.25rem clamp(2rem, 4.6vw, 5.5rem); }
  .ftr__cols a { overflow-wrap: anywhere; }
}

@media (min-width: 1200px) {
  .split { grid-template-columns: minmax(0, 1fr) auto; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; transition-delay: 0s !important; }
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .js .roll b { transform: none; }
  .js .arm__line { stroke-dashoffset: 0; }
  .js .arm__node, .js .arm__label, .js .viz__hub > * { opacity: 1; }
  .js .arm, .js .arm__label { animation: none !important; transform: none !important; }
  .js .viz__ping { display: none; }
}

.study {
  position: relative;
  isolation: isolate;
  color: var(--chalk);
  padding-block: clamp(5rem, 12vw, 9rem);

  overflow: clip;
  view-timeline-name: --study-pass;
  view-timeline-axis: block;
}

.study__ground,
.svcf__ground {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ink);
}

.svcf__pic {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--svcf-pic-h, 26%);
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.svcf__pic img {
  position: absolute;

  inset: -46% 0;
  width: 100%;
  height: 192%;
  object-fit: cover;
  display: block;
  opacity: .26;
  filter: grayscale(.82) contrast(1.06) brightness(.92);
}
@supports (animation-timeline: view()) {
  .js .svcf__pic img {
    animation: head-drift linear both;
    animation-timeline: --svcf-pass;
    animation-range: cover 0% cover 100%;
    will-change: transform;
  }
}

@keyframes head-drift {
  from { transform: translateY(-20%); }
  to   { transform: translateY(20%); }
}
@media (prefers-reduced-motion: reduce) {
  .js .svcf__pic img { animation: none; transform: none; }
}
.svcf { background: none; position: relative; }

@supports (animation-timeline: view()) {
  .js .cost-fold {
    animation: fold-lag linear both;
    animation-timeline: view();
    animation-range: exit 0% exit 100%;
    will-change: transform;
  }
}

@keyframes fold-lag {
  from { transform: translateY(0) scale(1);          opacity: 1; }
  to   { transform: translateY(10vh) scale(.965);    opacity: .62; }
}
@media (prefers-reduced-motion: reduce) {
  .js .cost-fold { animation: none; transform: none; opacity: 1; }
}

.seam {
  position: relative;

  margin-top: -26vh;
  height: 215vh;

  view-timeline-name: --seam-pass;
  view-timeline-axis: block;
}
.seam__pin {
  position: relative;
  position: sticky;

  top: 0;
  height: 100vh;
  overflow: clip;
}
@supports (animation-timeline: view()) {

  .js .seam__say {
    animation: say-in linear both;
    animation-timeline: --seam-pass;
    animation-range: contain 26% contain 42%;
  }

  .js .friction__l--a { animation: rub-a linear both, seam-in-a linear both, seam-out-a linear forwards; }
  .js .friction__l--b { animation: rub-b linear both, seam-in-b linear both, seam-out-b linear forwards; }
  .js .friction__l--a,
  .js .friction__l--b {
    animation-timeline: --seam-pass, --seam-pass, --seam-pass;

    animation-range: contain 0% contain 96%, entry 52% entry 100%, contain 72% contain 88%;
  }
}

.orbit {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  --mark-h: clamp(4.5rem, 13.5vw, 21.5rem);
  --ring: clamp(.55, 1vw, 1.15);
}
.orbit__b {
  position: absolute;

  left: calc(50% + var(--x) * 1vw);
  top:  calc(43% + var(--y) * 1vh);
  width: calc(clamp(3.25rem, 6.5vw, 7rem) * var(--s));
  translate: -50% -50%;
  opacity: 0;

  z-index: 0;
}
.orbit__b img { width: 100%; height: auto; display: block; }

@supports (animation-timeline: view()) {
  .js .orbit__b {
    animation: orbit-hold linear both;
    animation-timeline: --seam-pass;

    animation-range: cover 64% cover 82%;
  }

  .js .orbit__b:nth-child(2) { animation-range: cover 64.74% cover 82%; }
  .js .orbit__b:nth-child(3) { animation-range: cover 64.11% cover 82%; }
  .js .orbit__b:nth-child(4) { animation-range: cover 64.48% cover 82%; }
  .js .orbit__b:nth-child(5) { animation-range: cover 64.85% cover 82%; }
  .js .orbit__b:nth-child(6) { animation-range: cover 64.22% cover 82%; }
  .js .orbit__b:nth-child(7) { animation-range: cover 64.59% cover 82%; }
  .js .orbit__b:nth-child(8) { animation-range: cover 64.96% cover 82%; }
  .js .orbit__b:nth-child(9) { animation-range: cover 64.33% cover 82%; }
  .js .orbit__b:nth-child(10) { animation-range: cover 64.70% cover 82%; }
  .js .orbit__b:nth-child(11) { animation-range: cover 64.07% cover 82%; }
  .js .orbit__b:nth-child(12) { animation-range: cover 64.44% cover 82%; }
  .js .orbit__b:nth-child(13) { animation-range: cover 64.81% cover 82%; }
  .js .orbit__b:nth-child(14) { animation-range: cover 64.18% cover 82%; }
  .js .orbit__b:nth-child(15) { animation-range: cover 64.55% cover 82%; }
}

@keyframes orbit-hold {
  0%   { opacity: 0; }
  14%  { opacity: var(--o); }
  62%  { opacity: var(--o); }
  100% { opacity: 0; }
}

@media (max-width: 860px) {
  .orbit__b { width: calc(clamp(2.5rem, 13vw, 4.5rem) * var(--s)); }

  .orbit__b { top: calc(43% + var(--y) * .55vh); }
  .orbit__b:nth-child(n+7) { display: none; }
}

@media (max-width: 1099px) { .orbit { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .js .orbit__b { animation: none; opacity: var(--o); }
}

@keyframes seam-out-a {
  0%   { opacity: 1; translate: 0 0; }
  62%  { opacity: 1; }
  100% { opacity: 0; translate: 96% 0; }
}
@keyframes seam-out-b {
  0%   { opacity: 1; translate: 0 0; }
  62%  { opacity: 1; }
  100% { opacity: 0; translate: -96% 0; }
}

@keyframes seam-in-a {
  0%   { opacity: 0; translate: -78% 0; }
  20%  { opacity: 1; }
  100% { opacity: 1; translate: 0 0; }
}
@keyframes seam-in-b {
  0%   { opacity: 0; translate: 78% 0; }
  20%  { opacity: 1; }
  100% { opacity: 1; translate: 0 0; }
}

@keyframes rub-a {
  0%   { transform: translate3d(-15%, 0, 0); }
  22%  { transform: translate3d(-5.5%, 0, 0); }
  30%  { transform: translate3d(-1.2%, 0, 0); }
  36%  { transform: translate3d(0, 0, 0); }

  45%  { transform: translate3d(0, 0, 0); }
  47%  { transform: translate3d(1.5%, 0, 0); }
  56%  { transform: translate3d(1.5%, 0, 0); }
  58%  { transform: translate3d(3.1%, 0, 0); }
  66%  { transform: translate3d(3.1%, 0, 0); }
  68%  { transform: translate3d(4.6%, 0, 0); }
  76%  { transform: translate3d(4.6%, 0, 0); }
  78%  { transform: translate3d(6.2%, 0, 0); }
  88%  { transform: translate3d(6.2%, 0, 0); }

  100% { transform: translate3d(9.4%, 0, 0); }
}
@keyframes rub-b {
  0%   { transform: translate3d(15%, 0, 0); }
  22%  { transform: translate3d(5%, 0, 0); }
  30%  { transform: translate3d(1%, 0, 0); }
  36%  { transform: translate3d(0, 0, 0); }

  44%  { transform: translate3d(0, 0, 0); }
  46%  { transform: translate3d(-1.3%, 0, 0); }
  55%  { transform: translate3d(-1.3%, 0, 0); }
  57%  { transform: translate3d(-2.9%, 0, 0); }
  65%  { transform: translate3d(-2.9%, 0, 0); }
  67%  { transform: translate3d(-4.3%, 0, 0); }
  75%  { transform: translate3d(-4.3%, 0, 0); }
  77%  { transform: translate3d(-5.9%, 0, 0); }
  88%  { transform: translate3d(-5.9%, 0, 0); }
  100% { transform: translate3d(-8.8%, 0, 0); }
}

@keyframes say-in {
  from { opacity: 0; transform: translate3d(0, .75rem, 0); }
  to   { opacity: 1; transform: none; }
}

@keyframes mark-in {
  0%   { opacity: 0; transform: translate(-50%, -54%) scale(.9); }
  52%  { opacity: 0; transform: translate(-50%, -54%) scale(.93); }
  68%  { opacity: 1; transform: translate(-50%, -54%) scale(1); }
  100% { opacity: 1; transform: translate(-50%, -54%) scale(1); }
}

@keyframes study-rise {
  from { opacity: 0; transform: translate3d(0, 1.5rem, 0); }
  to   { opacity: 1; transform: none; }
}

.study .eyebrow { color: var(--chalk-65); }
.study__rule i { background: var(--chalk-line); }

.study__rule { margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }

@media (min-width: 861px) {
  .study__inner {

    display: grid;

    --study-rail: max(calc((100vw - 68rem) / 2 - var(--pad)), 19rem);
    grid-template-columns: var(--study-rail) minmax(0, 1fr);
    column-gap: 0;
    align-items: start;
  }
  .study__rule { grid-column: 1; grid-row: 1 / -1; margin-bottom: 0; --rail-line: var(--chalk-line); }
  .study__inner { grid-template-rows: auto auto; }

  .study__inner .study__list { grid-row: 1; }
  .study__inner .study__note { grid-row: 2; }
  .study__inner .study__list,
  .study__inner .study__note {
    grid-column: 2;
    margin-left: 0;
    margin-right: 0;
  }

  .study__inner .study__note { max-width: 62ch; }

  .study__inner .study__list { margin-top: .52rem; }
  .study__rule  { grid-column: 1; margin-bottom: 0; --rail-line: var(--chalk-line); }

  .study__inner .study__list {
    grid-column: 2;
    max-width: none;
    margin-top: .52rem;
  }

}

.seam__say {
  position: absolute;
  left: 0;
  right: 0;
  top: 74%;
  margin: 0 auto;
  max-width: 56rem;
  opacity: 0;
  padding-inline: clamp(1.25rem, 4vw, 4rem);
  text-align: center;
  font-size: var(--t-500);
  line-height: 1.5;
  color: var(--ink-70);
  text-wrap: pretty;
}
.seam__say b { font-weight: 600; color: var(--ink); }

.friction {
  margin: 0;
  padding-inline: clamp(1.25rem, 4vw, 4rem);
  font-family: var(--state);
  font-weight: 800;

  font-size: clamp(2.25rem, 7.4vw, 12.5rem);
  line-height: .74;
  letter-spacing: -.045em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink);
  user-select: none;
  position: relative;

  position: absolute;
  left: 0;
  right: 0;

  top: 44%;
  transform: translateY(-50%);
}

.seam--static .friction__l { animation: none !important; transform: none !important; translate: none !important; opacity: 1 !important; }
.friction__l { display: block; will-change: transform; }
.friction__l--b { margin-top: -.03em; }

.seam__pin { position: sticky; }

.friction__mark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: auto;
  height: clamp(4.5rem, 13.5vw, 21.5rem);
  transform: translate(-50%, -54%);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
}
@supports (animation-timeline: view()) {
  .js .friction__mark {
    animation: mark-in linear both;
    animation-timeline: --seam-pass;

    animation-range: contain 0% contain 96%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .friction__mark { opacity: 1; animation: none; }
}

.study__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 860px) {
  .study__list { margin-top: clamp(2rem, 4.5vw, 3.25rem); }
}

.case {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-block: 0 clamp(2.5rem, 5vw, 4rem);
}

.case + .case {
  border-top: 1px solid var(--chalk-line);
  padding-top: clamp(2.5rem, 5vw, 4rem);
}

.case__shot {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--ink);
}

.case__shot img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .6s var(--ease);
}
.case__shot:hover img,
.case__shot:focus-visible img { transform: scale(1.012); }

.case__ix {
  font-family: var(--work);
  font-size: var(--t-50);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--chalk-40);
}
.case__ix span {
  color: var(--chalk-65);
  font-variant-numeric: tabular-nums;
}
.case__name {
  font-family: var(--state);
  font-size: var(--t-200);
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.2;
  margin-top: .45rem;
  color: var(--chalk);
}
.case__flabel {
  margin: clamp(1.1rem, 2.4vw, 1.5rem) 0 .5rem;
  font-family: var(--work);
  font-size: var(--t-50);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--chalk-40);
}
.case__friction { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.case__f {
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr);
  gap: .35rem;
  font-size: var(--t-100);
  line-height: 1.45;
  color: var(--chalk-65);
  text-wrap: pretty;
}
.case__f > span:first-child { font-variant-numeric: tabular-nums; }.case__f--in > span:first-child { color: var(--chalk-40); }
.case__f--in  { color: var(--chalk-65); }

.case__f--res { color: var(--chalk); }
.case__f--res > span:first-child { color: var(--chalk-40); }

.case__flabel--out { color: var(--chalk-65); }

.study__note {
  margin-top: clamp(2rem, 4vw, 3rem);
  max-width: 62ch;
  color: var(--chalk-40);
  font-size: var(--t-200);
  line-height: 1.65;
}

@media (min-width: 861px) {
  .case {

    grid-template-columns:
      calc(.9 * (75vw - var(--pad) - var(--study-rail))) minmax(0, 1fr);

    align-items: start;
    gap: clamp(1.5rem, 3vw, 2.5rem);
  }

  .case:nth-child(even) {
    grid-template-columns:
      minmax(0, 1fr) calc(.9 * (75vw - var(--pad) - var(--study-rail)));
  }
  .case:nth-child(even) .case__shot { grid-column: 2; grid-row: 1; }
  .case:nth-child(even) .case__rec  { grid-column: 1; grid-row: 1; }

}

@media (prefers-reduced-motion: reduce) {
  .js .study__inner, .js .seam__say,
  .js .friction__l--a, .js .friction__l--b { animation: none; transform: none; translate: none; opacity: 1; }
}

.jl { padding-block: 0 clamp(4rem, 9vw, 7rem); }

.hero.jhero .hero__grid { grid-template-columns: minmax(0, 1fr); text-align: start; }
.hero.jhero .hero__lede { width: 100%; justify-items: start; margin-left: 0; }
.hero.jhero .statement { text-align: start; }
.jhero__say {

  max-width: 58ch;
  margin-inline: 0;
  color: var(--ink-70);
  font-size: var(--t-300);
}
@media (min-width: 861px) {

  .hero.jhero .hero__lede { display: contents; }
  .hero.jhero .hero__grid {

    grid-template-columns: 68% 32%;
    column-gap: 0;
    row-gap: clamp(1rem, 2.5vw, 1.5rem);
  }
  .hero.jhero .statement  { grid-column: 1; grid-row: 1; }
  .hero.jhero .jhero__say { grid-column: 1; grid-row: 2; }
  .hero.jhero .jsearch    { grid-column: 2; grid-row: 1; align-self: end; }

  .jhero.hero:has(.hero__grid) { padding-block: clamp(2.5rem, 6vh, 4.5rem) clamp(1.5rem, 3vw, 2rem); }
}

.hero:not(:has(.hero__viz)) .statement { font-size: clamp(2.75rem, 1.6rem + 3.6vw, 5.5rem); }

.vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.jsearch { position: relative; display: grid; margin-bottom: 0; }
.jsearch input {
  width: 100%;
  padding: .55rem 2.5rem .85rem 0;
  border: 0;
  border-bottom: 1px solid var(--steel);
  background: none;
  font: inherit;
  font-size: var(--t-400);
  color: var(--ink);
}
.jsearch input::placeholder { color: var(--ink-65); }
.jsearch input:focus { outline: none; border-bottom-color: var(--ink); }
.jsearch svg {
  position: absolute;
  right: .15rem;
  top: 50%;
  transform: translateY(-60%);
  width: 20px; height: 20px;
  fill: none; stroke: var(--ink-45); stroke-width: 1.6;
  stroke-linecap: round;
  pointer-events: none;
}
.jsearch input:focus ~ svg { stroke: var(--ink); }

.jfilter { display: flex; flex-wrap: wrap; gap: 11px; margin-bottom: 3rem; }

.jl > input[name="jf"] { position: absolute; opacity: 0; pointer-events: none; }
.jfilter label {
  display: inline-flex;
  align-items: center;

  min-height: 50px;
  padding: 0 25.5px;
  border: 1px solid var(--steel);
  border-radius: var(--r-tap);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-70);
  cursor: pointer;
  transition: border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
}
.jfilter label:hover { border-color: var(--ink); color: var(--ink); }
#jf-all:checked  ~ .jfilter label[for="jf-all"],
#jf-0:checked    ~ .jfilter label[for="jf-0"],
#jf-1:checked    ~ .jfilter label[for="jf-1"],
#jf-2:checked    ~ .jfilter label[for="jf-2"],
#jf-3:checked    ~ .jfilter label[for="jf-3"],
#jf-4:checked    ~ .jfilter label[for="jf-4"],
#jf-5:checked    ~ .jfilter label[for="jf-5"] { background: var(--ink); border-color: var(--ink); color: var(--chalk); }
.jl > input[name="jf"]:focus-visible ~ .jfilter label { outline: 2px solid var(--focus); outline-offset: 2px; }

#jf-0:checked ~ .jdeck .jfeat:not([data-cat="Being found"]),
#jf-0:checked ~ .jgrid [data-cat]:not([data-cat="Being found"]),
#jf-1:checked ~ .jdeck .jfeat:not([data-cat="The record"]),
#jf-1:checked ~ .jgrid [data-cat]:not([data-cat="The record"]),
#jf-2:checked ~ .jdeck .jfeat:not([data-cat="Being chosen"]),
#jf-2:checked ~ .jgrid [data-cat]:not([data-cat="Being chosen"]),

#jf-3:checked ~ .jdeck .jfeat:not([data-cat="Solutions"]),
#jf-3:checked ~ .jgrid [data-cat]:not([data-cat="Solutions"]),
#jf-4:checked ~ .jdeck .jfeat:not([data-cat="Convenience"]),
#jf-4:checked ~ .jgrid [data-cat]:not([data-cat="Convenience"]),
#jf-5:checked ~ .jdeck .jfeat:not([data-cat="Experiences"]),
#jf-5:checked ~ .jgrid [data-cat]:not([data-cat="Experiences"]) { display: none; }

.jfeat {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
  color: var(--ink);

  padding-bottom: 0;
  margin-bottom: 6rem;
}
.jfeat__shot {
  position: relative;

  aspect-ratio: 665 / 409;
  background: var(--ink-lift);
  display: grid;
  align-content: end;
  padding: 1rem 1.15rem;
  overflow: clip;
}
.jfeat__shot::before {
  content: '';
  position: absolute;
  inset: -25%;
  background:
    repeating-linear-gradient(72deg,  rgba(240,239,234,.13) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(-58deg, rgba(240,239,234,.09) 0 1px, transparent 1px 72px),
    radial-gradient(120% 90% at 74% 14%, rgba(1,142,255,.22), transparent 60%);
}

.jfeat__body { display: flex; flex-direction: column; align-self: stretch; gap: 0; }

.jfeat .pill { margin-top: auto; align-self: flex-start; }

.jfeat__t { margin-bottom: clamp(.85rem, 1.5vw, 1.15rem); }
.jfeat__meta { margin-bottom: clamp(1.15rem, 2.2vw, 1.65rem); }
.jfeat__d { margin-bottom: clamp(2rem, 3.6vw, 3rem); }
.jfeat__meta { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-65); }
.jfeat__meta b { color: var(--ink); font-weight: 600; }
.jfeat__t {
  font-family: var(--state);

  font-size: clamp(2rem, 1.3rem + 2.35vw, 3.6rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.028em;
  text-wrap: balance;
}
.jfeat__d { font-size: var(--card-d); color: var(--ink-70); max-width: 46ch; line-height: 1.6; text-wrap: pretty; }

.jgrid .ecard { border: 0; background: none; grid-template-rows: auto 1fr; }

.jgrid .ecard__body { display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: clamp(2rem, 3.2vw, 2.6rem) 0 0; }
.jgrid .ecard__date {
  font-size: var(--t-100);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-65);
  margin-bottom: clamp(1.1rem, 2vw, 1.5rem);
}
.jgrid .ecard__t { margin-bottom: clamp(1.25rem, 2.3vw, 1.75rem); }
.jgrid .ecard__d { margin-bottom: clamp(2rem, 3.4vw, 2.75rem); }
.jgrid .pill { margin-top: auto; margin-bottom: clamp(.75rem, 1.4vw, 1.25rem); }

.jgrid .ecard__t { font-size: var(--card-t); line-height: 1.28; letter-spacing: -.018em; }
.jgrid .ecard__d { font-family: var(--work); font-size: var(--card-d); font-weight: 400; color: var(--ink-70); line-height: 1.6; max-width: 46ch; }
.ecard__shot {
  position: relative;
  aspect-ratio: 377 / 239;
  background: var(--ink-lift);
  display: grid;
  align-content: end;
  padding: .85rem 1rem;
  overflow: clip;
}

.ecard__shot::before,
.mcard__shot::before,
.jfeat__shot::before {
  content: '';
  position: absolute;
  inset: -25%;
  background:
    repeating-linear-gradient(var(--tex-a, 72deg),  rgba(240,239,234,.13) 0 1px, transparent 1px 38px),
    repeating-linear-gradient(var(--tex-b, -58deg), rgba(240,239,234,.09) 0 1px, transparent 1px 64px),
    radial-gradient(120% 90% at var(--tex-x, 74%) var(--tex-y, 14%), rgba(1,142,255,.22), transparent 60%);
}
.jgrid .ecard:nth-child(4n+2) .ecard__shot, .more__grid .mcard:nth-child(4n+2) .mcard__shot {
  --tex-a: 26deg; --tex-b: -81deg; --tex-x: 24%; --tex-y: 26%;
}
.jgrid .ecard:nth-child(4n+3) .ecard__shot, .more__grid .mcard:nth-child(4n+3) .mcard__shot {
  --tex-a: 108deg; --tex-b: -37deg; --tex-x: 62%; --tex-y: 74%;
}
.jgrid .ecard:nth-child(4n+4) .ecard__shot, .more__grid .mcard:nth-child(4n+4) .mcard__shot {
  --tex-a: 54deg; --tex-b: -12deg; --tex-x: 12%; --tex-y: 62%;
}
.jfeat__shot { --tex-a: 88deg; --tex-b: -46deg; --tex-x: 82%; --tex-y: 20%; }

.ecard__shot img, .mcard__shot img, .jfeat__shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ecard__shot:has(img) .ecard__lab,
.mcard__shot:has(img) .mcard__lab,
.jfeat__shot:has(img) .jfeat__lab { text-shadow: 0 1px 12px rgba(8, 9, 11, .75); }
.ecard__lab { position: relative; font-size: var(--a7, var(--t-100)); letter-spacing: .18em; text-transform: uppercase; color: var(--chalk-40); }

.pill {

  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  height: 58px;
  padding: 0 32px;
  border: 1px solid rgba(21, 24, 27, .3);
  border-radius: var(--r-tap);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.pill__l { position: relative; display: block; overflow: hidden; height: 1.2em; }
.pill__l i {
  display: block;
  font-style: normal;
  line-height: 1.2em;
  transition: transform .9s cubic-bezier(.16, 1, .3, 1);
}
.pill svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (pointer: fine) {
  .ecard:hover .pill, .jfeat:hover .pill {
    transform: scaleX(1.02);
    transition: transform .7s cubic-bezier(.34, 3.56, .64, 1);
    border-color: var(--ink);
  }
  .ecard:hover .pill__l i, .jfeat:hover .pill__l i { transform: translateY(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  .pill, .pill__l i { transition: none; }
  .ecard:hover .pill, .jfeat:hover .pill { transform: none; }
  .ecard:hover .pill__l i, .jfeat:hover .pill__l i { transform: none; }
}

.jgrid { display: grid; gap: 21px; }
.is-out { display: none !important; }
.jnone { margin-top: 1rem; color: var(--ink-65); }

.jres { display: none; }
.jl.is-searching .jres { display: block; }
.jl.is-searching .jdeck,
.jl.is-searching .jgrid,
.jl.is-searching .jfilter { display: none; }

.jres__count {
  margin: 0 0 clamp(1rem, 2vw, 1.5rem);
  font-size: var(--t-100);
  color: var(--ink-65);
}
.jres__count b { color: var(--ink); font-weight: 600; }

.jres__list { border-top: 1px solid var(--steel); }

.jres__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: .35rem clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1.05rem, 2.2vw, 1.5rem) 0;
  border-bottom: 1px solid var(--steel);
  color: var(--ink);
  transition: padding-left .4s var(--ease);
}

.jres__row:hover,
.jres__row:focus-visible { padding-left: clamp(.4rem, 1vw, .9rem); }
.jres__row:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }

.jres__t {
  grid-column: 1;
  font-family: var(--state);
  font-size: var(--card-t);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.02em;
}
.jres__meta {
  grid-column: 2;
  grid-row: 1;
  font-size: var(--t-100);
  color: var(--ink-65);
  white-space: nowrap;
}
.jres__d {
  grid-column: 1;
  max-width: 62ch;
  font-size: var(--card-d);
  line-height: 1.5;
  color: var(--ink-70);
}

.jres mark {
  background: none;
  color: var(--ink);
  font-weight: 600;
  box-shadow: inset 0 -.35em 0 var(--brand-18);
}

@media (max-width: 700px) {
  .jres__row { grid-template-columns: minmax(0, 1fr); }
  .jres__meta { grid-column: 1; grid-row: auto; order: -1; }
}
@media (prefers-reduced-motion: reduce) { .jres__row { transition: none; } }

@media (min-width: 861px) {

  .jfeat { grid-template-columns: 56.7fr 37.4fr; column-gap: 7%; align-items: start; }

  .jfeat__shot { aspect-ratio: 377 / 239; height: auto; }
}

@media (min-width: 620px) {
  .jgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .jgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.jdeck { position: relative; }
.jdeck__strip { display: contents; }

@media (min-width: 1400px) and (hover: hover) {

  .jl:has(> #jf-all:checked) .jdeck {

    --region: 62%;
    --colgap: 6%;

    --wi-n: .155;
    --wi: calc(var(--wi-n) * 100%);
    --open-n: calc(1 - 2 * var(--wi-n));
    --wa: calc(var(--open-n) * 100% - 2 * var(--slit));
    --slit: 3px;
    position: relative;
    margin-bottom: 6rem;

    padding-bottom: clamp(0px, calc(300px - 15vw), 6rem);
  }
  .jl:has(> #jf-all:checked) .jdeck__strip {
    display: flex;
    gap: var(--slit);
    width: var(--region);

    aspect-ratio: calc(377 / 239 / var(--open-n));
  }
  .jl:has(> #jf-all:checked) .jdeck .jfeat {

    position: static;
    display: block;
    flex: 0 0 var(--w, var(--wi));
    min-width: 0;
    margin-bottom: 0;
    overflow: clip;
    transition: flex-basis .55s cubic-bezier(.22, 1, .36, 1);
  }
  .jl:has(> #jf-all:checked) .jdeck .jfeat__shot {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    max-height: none;
  }

  .jl:has(> #jf-all:checked) .jdeck .jfeat__body {
    position: absolute;
    top: 0;
    left: calc(var(--region) + var(--colgap));
    right: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s ease;
  }

  .jl:has(> #jf-all:checked) .jdeck__strip[data-open="0"] > .jfeat:nth-child(1),
  .jl:has(> #jf-all:checked) .jdeck__strip[data-open="1"] > .jfeat:nth-child(2),
  .jl:has(> #jf-all:checked) .jdeck__strip[data-open="2"] > .jfeat:nth-child(3) { --w: var(--wa); }

  .jl:has(> #jf-all:checked) .jdeck__strip[data-open="0"] > .jfeat:nth-child(1) > .jfeat__body,
  .jl:has(> #jf-all:checked) .jdeck__strip[data-open="1"] > .jfeat:nth-child(2) > .jfeat__body,
  .jl:has(> #jf-all:checked) .jdeck__strip[data-open="2"] > .jfeat:nth-child(3) > .jfeat__body { opacity: 1; pointer-events: auto; }

  .jl:has(> #jf-all:checked) .jdeck .jfeat__spine {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 100%;
    writing-mode: vertical-rl;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 1.1rem .55rem;
    font-family: var(--state);

    font-size: clamp(16px, 1.7vw, 24px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--chalk);

    text-shadow: 0 1px 16px rgba(8, 9, 11, .92), 0 0 3px rgba(8, 9, 11, .5);
    white-space: normal;
    overflow: hidden;
    pointer-events: none;
    opacity: 1;
    transition: opacity .3s ease;
  }
  .jl:has(> #jf-all:checked) .jdeck .jfeat__spine i {
    flex: 0 1 auto;
    min-height: 0;

    overflow: hidden;
    font-style: normal;
    max-height: 100%;
  }

  .jl:has(> #jf-all:checked) .jdeck__strip[data-open="0"] > .jfeat:nth-child(1) .jfeat__spine,
  .jl:has(> #jf-all:checked) .jdeck__strip[data-open="1"] > .jfeat:nth-child(2) .jfeat__spine,
  .jl:has(> #jf-all:checked) .jdeck__strip[data-open="2"] > .jfeat:nth-child(3) .jfeat__spine { opacity: 0; }

  .jl:has(> #jf-all:checked) .jdeck__strip > .jfeat .ecard__lab { opacity: 0; transition: opacity .3s ease; }
  .jl:has(> #jf-all:checked) .jdeck__strip[data-open="0"] > .jfeat:nth-child(1) .ecard__lab,
  .jl:has(> #jf-all:checked) .jdeck__strip[data-open="1"] > .jfeat:nth-child(2) .ecard__lab,
  .jl:has(> #jf-all:checked) .jdeck__strip[data-open="2"] > .jfeat:nth-child(3) .ecard__lab { opacity: 1; }
}

.jfeat__spine { display: none; }
@media (prefers-reduced-motion: reduce) {
  .jdeck > .jfeat { transition: none; }
}

@media (min-width: 1000px) {
  body:not(.home) main .wrap,
  body:not(.home) main .cta__inner {
    max-width: calc(1760px + 2 * var(--pad));
    margin-inline: auto;
  }
}

.jp { padding-block: clamp(2rem, 5vw, 3.5rem) clamp(4rem, 9vw, 7rem); }
@media (min-width: 1000px) {
  .jp {

    max-width: calc(1760px + 2 * var(--pad));
    margin-inline: auto;

    display: grid;

    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 7%;
    align-items: start;
  }

  .jp__head { grid-column: 1; align-self: stretch; }

  .jp__head .jp__stick { position: sticky; top: calc(var(--header) + 2rem); }
  .jp__body { grid-column: 2; }

  .ends { grid-column: 1; }
  .more { grid-column: 1 / -1; }
}

.jp__head { max-width: none; }

.jp__h1 {
  margin-top: 0;

  font-size: var(--a0);
  line-height: 1.0;
  letter-spacing: -.045em;
}

.jp__share {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;

  margin: clamp(3.25rem, 6vw, 4.75rem) 0 clamp(2.1rem, 3.8vw, 2.9rem);
  padding: 0;
}

.jp__share a,
.jp__share .jp__prt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  color: var(--ink);
}

.jp__prt {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}
.jp__share svg {
  width: 34px; height: 34px;
  fill: currentColor;
  stroke: none;
  transition: color .25s var(--ease);
}
.jp__share a:hover,
.jp__share .jp__prt:hover { color: var(--ink-70); }
@media (prefers-reduced-motion: reduce) { .jp__share svg { transition: none; } }

.jp__answer {
  margin: 0 0 clamp(1.75rem, 3.4vw, 2.5rem);

  font-size: clamp(1.125rem, .48vw + .82rem, 1.5rem);
  line-height: 1.5;
  color: var(--ink);
  text-wrap: pretty;
}

.jp__meta {
  margin: clamp(1.5rem, 2.8vw, 2.25rem) 0 0;
  font-size: var(--a7);
  letter-spacing: .04em;
  color: var(--ink-65);
}
.jp__meta a { color: var(--ink-65); }
.jp__meta a:hover { color: var(--brand); }
.jp__meta span { color: var(--ink); font-weight: 600; }

:root {
  --a0: clamp(3.24rem, 4.42vw, 6.7rem);
  --a1: clamp(2.33rem, 3.19vw, 4.82rem);
  --a2: clamp(1.86rem, 2.55vw, 3.86rem);
  --a3: clamp(1.49rem, 2.04vw, 3.09rem);
  --a4: clamp(1.2rem, 1.63vw, 2.47rem);

  --a5: clamp(1.0625rem, .4167vw + .75rem, 1.3125rem);

  --a6: clamp(.875rem, 1.04vw, 1.125rem);

  --a7: clamp(.8125rem, .84vw, 1rem);
}

@media (max-width: 360px) {

  :root { --a0: clamp(2.85rem, 4.42vw, 6.7rem); }
}

.handoff {
  margin: clamp(2.5rem, 5vw, 3.5rem) 0;
  padding: clamp(1.4rem, 2.6vw, 1.9rem) 0;
  border-top: 1px solid var(--steel);
  border-bottom: 1px solid var(--steel);
  display: grid;
  gap: .5rem;
  justify-items: start;
}
.handoff__lab {
  font-size: var(--t-100);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-65);
}
.handoff__t {
  font-family: var(--state);
  font-size: var(--a4);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.015em;
  color: var(--ink);
  text-wrap: pretty;
}
.handoff__go { margin-top: .6rem; height: 46px; padding: 0 22px; font-size: 13.5px; }

.jp { timeline-scope: --article-end; }

.jp__body { position: relative; }
.jp__end {
  position: absolute;
  left: 0;
  bottom: 55vh;
  width: 1px;
  height: 1px;
  view-timeline-name: --article-end;
  view-timeline-axis: block;
}

.railoffer {
  --low: 44px;
  margin-top: clamp(3.5rem, 7.5vw, 6rem);
}

@media (max-height: 880px) {
  .jp__share { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); margin-bottom: 1.4rem; }
  .railoffer { --low: 26px; margin-top: clamp(2rem, 4vw, 3rem); }
}

.railoffer .ecard__t { font-size: var(--a3); }
.railoffer .ecard__d { font-size: var(--a5); font-weight: 400; color: var(--ink-70); }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    @keyframes offer-arrive {
      0%   { opacity: 0; transform: translateY(calc(var(--low) * 1.45)); }
      22%  { opacity: 1; transform: translateY(var(--low)); }
      72%  { opacity: 1; transform: translateY(var(--low)); }
      100% { opacity: 1; transform: translateY(0); }
    }
    @keyframes share-yield {
      from { opacity: 1; }
      to   { opacity: 0; visibility: hidden; }
    }
    .jp__share {
      animation-name: share-yield;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: --article-end;
      animation-range: cover 0% cover 30%;
    }
    .railoffer {
      animation-name: offer-arrive;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: --article-end;
      animation-range: cover 0% cover 100%;
    }
  }
}

@media (max-width: 999px) {
  .jp { display: flex; flex-direction: column; }
  .jp__head, .jp__stick { display: contents; }
  .jp__h1 { order: 1; }
  .jp__meta { order: 2; }
  .jp__share { order: 3; }
  .toc { order: 4; }
  .jp__body { order: 5; }
  .railoffer { order: 6; }
  .more { order: 7; }
}

.jp__body { margin-top: clamp(2rem, 4vw, 3rem); }

.jp__lead {
  margin: 0 0 clamp(1.75rem, 3.5vw, 2.75rem);

}
.jp__lead img {
  display: block;
  width: 100%;
  height: auto;

  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--bone);
}
.jp__lead figcaption {
  margin-top: .6rem;
  font-family: var(--work);
  font-size: var(--t-100);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-65);
}

.jp__prose { max-width: 47rem; }

@media (min-width: 1000px) {
  .jp__prose {

    max-width: 61ch;

    margin-left: auto;
  }
}
@media (min-width: 1000px) { .jp__body { margin-top: 0; } }

@media (min-width: 1000px) {
  .jp--wide {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.58fr);
    column-gap: clamp(2rem, 5vw, 5rem);
  }

  .jp--wide .jp__prose {
    max-width: none;
    margin-left: 0;
  }

  .jp--wide .jp__prose > p { text-align: justify; }
}

.jp__prose { counter-reset: sec; }
.jp__prose h2 {
  position: relative;
  font-family: var(--state);

  font-size: var(--a2);
  font-weight: 600; letter-spacing: -.015em; line-height: 1.2;
  margin-top: clamp(2.25rem, 5vw, 3.25rem);
  padding-top: clamp(1.1rem, 2.2vw, 1.6rem);
  counter-increment: sec;
}

.jp__prose h2::before { content: none; }
.jp__prose--numbered h2::before {
  content: counter(sec, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding-top: .5rem;
  font-family: var(--state);
  font-size: var(--t-100);
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--ink-65);
}
.jp__prose h2#questions { padding-top: clamp(2rem, 4vw, 3rem); }
.jp__prose--numbered h2#questions::before { content: ''; padding-top: 0; }

.jp__prose > :first-child { margin-top: 0; }

.jp__prose { font-size: var(--a5); }
.jp__prose p { margin-top: 1.1rem; color: var(--ink-70); line-height: 1.62; text-wrap: pretty; }
.jp__prose strong { color: var(--ink); font-weight: 600; }
.jp__prose a { color: var(--brand); }

.jp__prose .steps { counter-reset: step; list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1.1rem; }
.jp__prose .steps li {
  position: relative;
  counter-increment: step;
  padding-left: 3.1rem;
  color: var(--ink-70);
  line-height: 1.6;
}
.jp__prose .steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: .06em;
  font-family: var(--state);
  font-size: var(--t-300);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;

  color: var(--ink-65);
}
.jp__prose .steps b { display: block; color: var(--ink); font-weight: 600; }
.jp__prose .steps span { display: block; margin-top: .3rem; }

.jp__prose pre {
  margin-top: 1.25rem; padding: 1rem 1.1rem;
  background: var(--bone); overflow-x: auto;
  font-size: var(--t-100); line-height: 1.55;
}
.jp__prose code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; }

.toc { margin-top: clamp(1.5rem, 3vw, 2rem); border-top: 1px solid var(--steel); padding-top: 1rem; }
.toc ol { list-style: none; margin: .75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
@media (min-width: 1000px) { .toc ol { display: grid; gap: .5rem; } }

.toc a {
  font-size: var(--a5);
  color: var(--ink-65);
  line-height: 1.4;
  transition: color .25s var(--ease), font-weight .25s var(--ease);
}
.toc a:hover { color: var(--brand); }

.toc li { position: relative; }
.toc a.is-here { color: var(--ink); }
.toc a.is-here::before {
  content: '';
  position: absolute;
  left: -1.05rem;
  top: .42em;
  width: 0;
  height: 0;
  border-left: 6px solid var(--brand);
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
}
.toc .eyebrow { color: var(--ink-65); }

.keys {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.4rem, 3vw, 2rem);
  background: var(--bone);
  border-left: 2px solid var(--brand);
}
.keys ul { margin: .75rem 0 0; padding-left: 1.1rem; display: grid; gap: .5rem; }
.keys li { color: var(--ink-70); line-height: 1.55; }

.pull {
  margin: clamp(2.25rem, 5vw, 3.25rem) 0;
  padding-left: clamp(1rem, 2.5vw, 1.75rem);
  border-left: 2px solid var(--ink);
  font-family: var(--state);
  font-size: var(--t-500);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.018em;
  color: var(--ink);
  text-wrap: balance;
}

.faq { margin-top: 1.25rem; border-top: 1px solid var(--steel); }
.faq__q { padding-block: 1.25rem; border-bottom: 1px solid var(--steel); }
.faq__q h3 { font-size: var(--a4, var(--t-300)); font-weight: 600; }
.faq__q p { margin-top: .5rem; color: var(--ink-70); line-height: 1.6; }

.ecard {
  display: grid;
  background: none;
  border: 0;
  color: var(--ink);
}
.ecard--cta { grid-template-rows: 1fr; }
.ecard--cta .ecard__body { display: grid; align-content: start; gap: .55rem; padding: 0; }
.ecard__eyebrow {
  font-size: var(--a7, var(--t-200));
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-65);
}
.ecard__t {
  font-family: var(--state);
  font-size: var(--a2);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.ecard__d { color: var(--ink); font-family: var(--state); font-size: var(--a4); font-weight: 600; line-height: 1.3; letter-spacing: -.012em; }
.ecard__btn { margin-top: .85rem; justify-self: start; font-size: var(--t-100); }

.more { margin-top: clamp(3.5rem, 8vw, 6rem); }
.more__h {
  font-family: var(--state);
  font-size: var(--a1);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.04em;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}

.more__h span { color: var(--steel); }

.more__h .ltr { --tone: calc(.22 + (var(--i) / var(--n)) * .78); color: rgba(var(--ink-rgb), var(--tone)); }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    @keyframes ltr-ramp {
      0%   { color: rgba(var(--ink-rgb), .12); }
      55%  { color: var(--ink); }
      100% { color: rgba(var(--ink-rgb), var(--tone)); }
    }
    .more__h .ltr {
      animation-name: ltr-ramp;
      animation-duration: auto;
      animation-fill-mode: both;
      animation-timing-function: linear;
      animation-timeline: view();

      animation-range: cover calc(38% + var(--i) * 3%) cover calc(54% + var(--i) * 3%);
    }

  }
}

.nf__head[data-sweep] .ltr,
.nf__say[data-sweep] .ltr { --tone: 1; }

@media (prefers-reduced-motion: reduce) {
  .js .nf__half--a .ltr,
  .js .nf__half--b .ltr { color: var(--ink); }
}

@supports (animation-timeline: view()) {
  @media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
    .js .nf__pin {
      height: 240vh;
      view-timeline-name: --fold01;
      view-timeline-axis: block;
    }

.js .nf__pinner { position: sticky; top: 20vh; }

    .js .nf__pin .nf__head .ltr { color: rgba(var(--ink-rgb), .12); }
    .js .nf__pin .nf__say .ltr  { color: transparent; }
    @keyframes ltr-arrive {
      from { color: transparent; }
      60%  { color: var(--ink); }
      to   { color: var(--ink); }
    }
    .js .nf__pin .nf__head .ltr,
    .js .nf__pin .nf__say .ltr {
      animation-name: ltr-ramp;
      animation-duration: auto;
      animation-fill-mode: both;
      animation-timing-function: linear;
      animation-timeline: --fold01;
    }

    .js .nf__pin .nf__head .ltr {
      animation-range:
        contain calc(2% + (var(--i) / var(--n)) * 16%)
        contain calc(8% + (var(--i) / var(--n)) * 16%);
    }

    .js .nf__pin .nf__say .ltr {
      animation-name: ltr-arrive;
      animation-range:
        contain calc(52% + (var(--i) / var(--n)) * 16%)
        contain calc(59% + (var(--i) / var(--n)) * 16%);
    }
    .js .nf__pin .nf__note > p {
      animation-name: seq-in;
      animation-duration: auto;
      animation-fill-mode: both;
      animation-timing-function: linear;
      animation-timeline: --fold01;
      animation-range: contain var(--from) contain var(--to);
    }
    .js .nf__pin .nf__note--seq-a > p:nth-child(1) { --from: 27%; --to: 35%; }
    .js .nf__pin .nf__note--seq-a > p:nth-child(2) { --from: 38%; --to: 46%; }

    .js .nf__pin .nf__note--seq-b > p:nth-child(1) { --from: 72%; --to: 79%; }
    .js .nf__pin .nf__note--seq-b > p:nth-child(2) { --from: 80%; --to: 86%; }
    .js .nf__pin .nf__note--seq-b > p:nth-child(3) { --from: 86%; --to: 91%; }
    .js .nf__pin .nf__note--seq-b > p:nth-child(4) { --from: 91%; --to: 96%; }
    @keyframes seq-in {
      from { opacity: 0; transform: translateY(10px); }
      to   { opacity: 1; transform: none; }
    }
  }
}

.more__grid { display: grid; gap: 21px; }
.mcard { display: grid; gap: 0; color: var(--ink); align-content: start; }
.mcard__shot {
  position: relative;
  margin-bottom: clamp(1rem, 1.9vw, 1.4rem);

  aspect-ratio: 377 / 239;
  background: var(--ink-lift);
  display: grid;
  align-content: end;
  padding: .85rem 1rem;
  overflow: clip;
}
.mcard__shot::before {
  content: '';
  position: absolute;
  inset: -25%;
  background:
    repeating-linear-gradient(72deg,  rgba(240,239,234,.13) 0 1px, transparent 1px 38px),
    repeating-linear-gradient(-58deg, rgba(240,239,234,.09) 0 1px, transparent 1px 64px),
    radial-gradient(120% 90% at 74% 14%, rgba(1,142,255,.22), transparent 60%);
}

.mcard__meta {

  font-size: var(--a5);
  letter-spacing: .01em;
  color: var(--ink-65);
  margin-bottom: clamp(.7rem, 1.3vw, 1rem);
}
.mcard__t {
  font-family: var(--state);
  font-size: var(--card-t);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -.018em;
  text-wrap: pretty;
}
.mcard__d {
  margin-top: clamp(.6rem, 1.1vw, .9rem);

  font-size: var(--a5);
  max-width: 46ch;
  color: var(--ink-70);
  line-height: 1.55;
  text-wrap: pretty;
}

@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
  @keyframes ltr-hover {
    0%, 100% { color: var(--ink); }
    45%      { color: var(--ink-65); }
  }
  .mcard:hover .mcard__t .ltr,
  .jgrid .ecard:hover .ecard__t .ltr,
  .jfeat:hover .jfeat__t .ltr {
    animation: ltr-hover .52s var(--ease) both;
    animation-delay: calc(var(--i) * 15ms);
  }
}

.mcard:hover .mcard__t,
.jgrid .ecard:hover .ecard__t,
.jfeat:hover .jfeat__t { color: var(--ink-70); }
.mcard:hover .mcard__t .ltr,
.jgrid .ecard:hover .ecard__t .ltr,
.jfeat:hover .jfeat__t .ltr { color: var(--ink); }

@media (min-width: 620px) { .more__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

@media (max-width: 860px) {

  .hero:has(.hero__grid) { padding-block: clamp(2rem, 5vh, 3rem); }

  .nav a:not(.btn):not(.nav-hide),
  .ftr__cols a,
  .toc a,
  .rel__card {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .rel__card, .ftr__cols a { display: flex; }
  .ftr__cols li { display: flex; }
  .ftr__cols a { width: 100%; }

  .seam { height: auto; margin-top: 0; padding-block: clamp(3rem, 12vh, 5rem); }
  .seam__pin { position: static; height: auto; overflow: visible; }
  .friction { position: static; transform: none; padding-top: 0; }
  .js .friction__l--a, .js .friction__l--b,
  .js .friction__mark, .js .seam__say {
    animation: none !important;
    transform: none !important;
    translate: none !important;
    opacity: 1 !important;
  }
  .friction__mark {
    position: static;
    height: clamp(4.5rem, 22vw, 7rem);

    margin: clamp(1.25rem, 5vw, 2rem) auto clamp(.9rem, 3.5vw, 1.4rem);
  }
  .seam__say { position: static; margin-top: clamp(1.5rem, 6vw, 2.5rem); }

  .js .marks__track { animation: none !important; transform: none !important; opacity: 1 !important; }

  .marks__window { width: auto; overflow: clip; container-type: normal; mask-image: none; }
  .marks__track { flex-wrap: wrap; width: 100%; justify-content: center;
                  gap: clamp(1.25rem, 6vw, 2rem); }
  .logo { height: calc(var(--s, 1) * clamp(38px, 13vw, 56px)); }
}

.help__grid { display: grid; gap: clamp(2.5rem, 6vw, 4rem); margin-top: clamp(2rem, 5vw, 3.5rem); }

.help__mid { container-type: inline-size; }
.help__tag { margin-bottom: clamp(1rem, 2.4vw, 1.5rem); }

.help__quote p {
  font-size: var(--t-300);
  line-height: 1.6;
  color: var(--ink-70);
  text-wrap: pretty;
}
.help__quote { margin: 0; }
.help__who {
  margin-top: clamp(1.25rem, 2.6vw, 1.75rem);
  font-size: var(--t-100);
  line-height: 1.4;
  color: var(--ink-65);
}
.help__who b { display: block; font-weight: 600; color: var(--ink); }

.help__list { list-style: none; margin: 0; padding: 0; }
.help__list li {
  font-family: var(--state);

  font-size: clamp(1.75rem, 9.2cqw, 9.5rem);
  font-weight: 600;

  letter-spacing: -.04em;
  line-height: 1.04;
  white-space: nowrap;

  color: rgba(21, 24, 27, .35);
  transition: color .35s var(--ease);
}
.help__list a, .help__list span { color: inherit; }

.help__list li:first-child                   { color: var(--ink); }
.help__list:hover li,
.help__list:focus-within li                  { color: rgba(21, 24, 27, .35); }
.help__list li:hover,
.help__list li:focus-within                  { color: var(--ink); }

@supports (animation-timeline: view()) {
  .js .help__list { view-timeline-name: --sol-pass; view-timeline-axis: block; }

  .js .help__list li:nth-child(1) { --sol-at: 28.0%; --sol-off: 34.8%; }
  .js .help__list li:nth-child(2) { --sol-at: 34.8%; --sol-off: 41.2%; }
  .js .help__list li:nth-child(3) { --sol-at: 41.2%; --sol-off: 49.2%; }
  .js .help__list li:nth-child(4) { --sol-at: 49.2%; --sol-off: 57.2%; }
  .js .help__list li:nth-child(5) { --sol-at: 57.2%; --sol-off: 64.8%; }

  .js .help__list .ltr {
    --sol-step: .4%;
    animation-name: sol-fill, sol-release;
    animation-duration: auto, auto;
    animation-fill-mode: both, forwards;
    animation-timing-function: linear, linear;
    animation-timeline: --sol-pass, --sol-pass;

    animation-range:
      cover calc(var(--sol-at) + var(--i) * var(--sol-step))
      cover calc(var(--sol-at) + var(--i) * var(--sol-step) + var(--sol-step)),
      cover var(--sol-off)
      cover calc(var(--sol-off) + 5%);
  }

  .js .help__list:hover .ltr,
  .js .help__list:focus-within .ltr,
  .js .help__list--picked .ltr,
  .js .help__list--live .ltr { animation: none; }

  @media (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .js .help__list li:hover .ltr,
    .js .help__list li:focus-within .ltr {
      animation: sol-hover .42s var(--ease) both;
      animation-delay: calc(var(--i) * 16ms);
    }
  }

  .js .help__list--picked li,
  .js .help__list--live li { color: rgba(var(--ink-rgb), .35); }
  .js .help__list--picked li.is-picked,
  .js .help__list--live li.is-picked { color: var(--ink); }
}

@keyframes sol-hover {
  from { color: rgba(var(--ink-rgb), .35); }
  to   { color: var(--ink); }
}
@keyframes sol-fill {
  from { color: rgba(var(--ink-rgb), .3); }
  to   { color: var(--ink); }
}
@keyframes sol-release {
  from { color: var(--ink); }
  to   { color: rgba(var(--ink-rgb), .3); }
}
@media (prefers-reduced-motion: reduce) {
  .js .help__list li, .js .help__list .ltr { animation: none; }
}

@media (min-width: 861px) {

  .help__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(2.5rem, 6vw, 5rem);
  }
  .help__rule       { grid-row: 1; margin-bottom: 0; }
  .help__mid        { grid-row: 2; padding-left: clamp(1rem, 5vw, 7rem); }
  .help__stories--b { grid-row: 3; margin-right: 0; max-width: 46ch; }

  @media (min-width: 1100px) {

    .help__grid {
      grid-template-columns:
        max-content
        clamp(.75rem, 2vw, 2.5rem)
        minmax(0, 1fr)
        clamp(15rem, 31vw, 31rem);

      grid-template-rows: auto auto auto;
      column-gap: clamp(1.75rem, 2.8vw, 3rem);
      align-items: start;
    }

    .help__rule { grid-column: 1; grid-row: 1 / -1; }
    .solpics    { grid-column: 4; grid-row: 1 / -1; }

    .help__rule { margin-top: -.35rem; }
    .help__mid        { grid-column: 3; grid-row: 1; padding-left: 0; }
    .help__stories--b { grid-column: 4; max-width: none; }
  }

  .help__list    { margin-top: -.35rem; }

}

.faqf__head { margin-bottom: clamp(1.25rem, 2.4vw, 1.9rem); }

.ink [data-reveal] { opacity: 1; }

.offer__def {
  border-left: 2px solid var(--brand);
  padding-left: clamp(.85rem, 1.6vw, 1.25rem);
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}
.offer__def b { font-weight: 700; }

.help__say {
  display: grid;
  margin-top: clamp(1rem, 2vw, 1.5rem);
  max-width: 44ch;
}
.help__say span {
  grid-area: 1 / 1;
  font-family: var(--work);
  font-size: var(--t-200);
  line-height: 1.45;
  color: var(--ink-70);
  opacity: 0;
  transition: opacity .28s var(--ease);
}

.help:not([data-sol]) .help__say span:first-child { opacity: 1; }
.help[data-sol="1"] .help__say span:nth-child(1),
.help[data-sol="2"] .help__say span:nth-child(2),
.help[data-sol="3"] .help__say span:nth-child(3),
.help[data-sol="4"] .help__say span:nth-child(4),
.help[data-sol="5"] .help__say span:nth-child(5) { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .help__say span { transition: none; } }

.ask__body p { max-width: 45ch; }

.napa__ask { position: relative; isolation: isolate; overflow: hidden; }
.napa__ask::before {
  content: "";
  position: absolute;
  z-index: -1;

  inset: -12% -12px;
  background: url("assets/journal/chamber-of-commerce-1500.webp") center top / auto 250% no-repeat;
  filter: brightness(.24) saturate(.55) blur(2px);
}

.ink.napa__ask .eyebrow,
.ink.napa__ask p,
.ink.napa__ask li,
.ink.napa__ask .leap { color: var(--chalk); }
.ink.napa__ask .ask__src { color: var(--chalk-65); }

.ask__grid { display: grid; row-gap: var(--v4); }

.ask__side { display: grid; row-gap: var(--v4); align-content: start; }

.ask__side > .srule { grid-template-columns: minmax(0, 1fr); margin-bottom: 0; }

.ask__side > .srule .eyebrow { white-space: normal; }

.ask__fig {
  display: grid;

  gap: 0;
  align-content: start;
  --leap-size: clamp(1.25rem, 4.05vw, 5.1rem);
}

@media (min-width: 1250px) {
  .ask__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.58fr);
    column-gap: clamp(2rem, 5vw, 5rem);

    align-items: start;
  }

  .ask__fig { --leap-size: var(--a1); }
}

.leap,
.ask__c {
  font-family: var(--state);
  font-weight: 900;
  font-size: var(--leap-size);
  line-height: 1.14;
  letter-spacing: -.02em;
  word-spacing: .1em;
  font-variant-numeric: tabular-nums;

  hyphens: auto;
  margin: 0;
}

.ask__c { margin-top: 0; color: var(--chalk); }

.ask__src {
  margin-top: var(--v3);
  font-family: var(--work);
  font-size: var(--t-100);
  letter-spacing: .06em;
  line-height: 1.5;
  color: var(--chalk-65);
  max-width: 52ch;
}

.ask__body { display: grid; gap: var(--v3); }
.ask__body p { font-size: var(--a5); line-height: 1.62; }

.ask__body p { color: var(--chalk-65); }

.napa__lead {
  margin: clamp(2rem, 4vw, 3rem) 0 0;
}
.napa__lead img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  background: var(--bone);
}
.napa__pair {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  gap: var(--foldgap, clamp(1.25rem, 2.5vw, 2rem));
  margin: clamp(2rem, 4vw, 3rem) 0;
}
@media (min-width: 861px) {
  .napa__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.napa__fig { margin: 0; }
.napa__lead figcaption { margin-top: .6rem; }
.napa__fig img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--bone);
}
.napa__fig figcaption,
.napa__lead figcaption {
  margin-top: .6rem;
  font-family: var(--work);
  font-size: var(--t-100);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-65);
}

.faqf__shot { margin: 0; }
.faqf__shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--bone);

  max-height: 22rem;
}

@media (max-width: 1099px) {
  .faqf__head { grid-template-columns: minmax(0, 1fr); }
  .faqf__shot { margin-top: clamp(1.25rem, 2.5vw, 1.75rem); }
}
.faqf__head .srule { margin-bottom: clamp(1.25rem, 3vw, 2rem); }
@media (min-width: 861px) {
  .faqf__head {
    display: grid;

    grid-template-columns: calc(26% + clamp(1rem, 2vw, 1.75rem)) minmax(0, 1fr);
    align-items: start;
  }
  .faqf__head .srule { margin-bottom: 0; }
  .faqf__intro { margin-left: 0; }
}
.faqf__intro h2 {
  font-family: var(--state);
  font-size: var(--t-700);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.08;
  max-width: 22ch;
  color: var(--ink);
}
.faqf__intro p {
  margin-top: clamp(1rem, 2vw, 1.4rem);
  max-width: 46ch;
  font-size: var(--t-500);
  line-height: 1.5;
  color: var(--ink-70);
  text-wrap: pretty;
}
@media (min-width: 861px) {

  .faqf__intro { margin-left: calc(26% + 2 * clamp(1rem, 2vw, 1.75rem) + 2.75rem); }
}

.faqf__grid {
  --fi: 0px;
  --q-size: var(--t-500);

  --q-pad: clamp(1.75rem, 3.6vw, 3rem);
}

.qrow {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) 1.25rem;
  column-gap: clamp(.75rem, 2vw, 1.4rem);
  align-items: start;
}

.qrow::after {
  content: '';
  position: absolute;
  left: var(--fi); right: 0; bottom: 0;
  height: 1px;
  background: var(--steel);
}
.qrow::before {
  content: '';
  position: absolute;
  inset: 0 0 0 var(--fi);
  z-index: -1;
  background: transparent;

  transition: background 2s cubic-bezier(.16, .84, .44, 1) .12s;
}

.qrow:has(.qrow__q:hover)::before,
.qrow:has(.qrow__m:hover)::before,
.qrow:has(.qrow__in:focus-visible)::before { background: var(--bone-deep); transition: background .2s var(--ease) 0s; }

.qrow__in { grid-area: 1 / 1; opacity: 0; pointer-events: none; }

.qrow__n {
  grid-column: 1; grid-row: 1;

  padding-block: calc(var(--q-pad) + .2645 * var(--q-size) - 3.31px) var(--q-pad);
  font-family: var(--work);
  font-size: var(--t-100);
  letter-spacing: .12em;
  line-height: 1.2;
  color: var(--ink-65);
  font-variant-numeric: tabular-nums;
  transition: color 2s cubic-bezier(.16, .84, .44, 1) .12s;
}
.qrow__q {
  grid-column: 2; grid-row: 1;
  padding-block: var(--q-pad);
  cursor: pointer;
}
.qrow__t {
  display: block;
  font-family: var(--state);
  font-size: var(--q-size);
  font-weight: 600;
  letter-spacing: -.018em;
  line-height: 1.18;
  color: var(--ink-65);
  transition: color 2s cubic-bezier(.16, .84, .44, 1) .12s;
  text-wrap: pretty;
}

.qrow__m {
  grid-column: 3; grid-row: 1;
  position: relative;
  justify-self: end;
  cursor: pointer;
  width: 20px; height: 20px;
  margin-top: calc(var(--q-pad) + .35em);
}
.qrow__m::after {
  content: '';
  position: absolute;
  left: 50%; top: 46%;
  width: 12px; height: 12px;
  margin: -8px 0 0 -6px;
  border-right: 2px solid var(--ink-45);
  border-bottom: 2px solid var(--ink-45);
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform .5s var(--ease), border-color 2s cubic-bezier(.16, .84, .44, 1) .12s;
}
.qrow:has(.qrow__q:hover) .qrow__m::after,
.qrow__m:hover::after { border-color: var(--ink); transition: transform .5s var(--ease), border-color .2s var(--ease) 0s; }
.qrow__in:checked ~ .qrow__m::after { transform: rotate(225deg); border-color: var(--ink); }

.qrow__a {
  grid-column: 2; grid-row: 2;
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .58s var(--ease);
}
.qrow__a > div { overflow: hidden; }
.qrow__a p {
  max-width: 44rem;
  padding-bottom: var(--q-pad);
  color: var(--ink-70);
  line-height: 1.62;
  opacity: 0;
  transform: translate3d(0, .5rem, 0);
  transition: opacity .5s var(--ease) .12s, transform .5s var(--ease) .12s;
  text-wrap: pretty;
}

.qrow__in:checked ~ .qrow__a { grid-template-rows: 1fr; }
.qrow__in:checked ~ .qrow__a p { opacity: 1; transform: none; }
.qrow__in:checked ~ .qrow__q .qrow__t { color: var(--ink); }
.qrow__in:checked ~ .qrow__n { color: var(--brand); }

.qrow:has(.qrow__q:hover) .qrow__t,
.qrow:has(.qrow__m:hover) .qrow__t { color: var(--ink-70); transition: color .2s var(--ease) 0s; }
.qrow__in:focus-visible ~ .qrow__q .qrow__t { color: var(--ink); text-decoration: underline; text-underline-offset: .3em; }

@media (min-width: 861px) {

.faqf__intro h2 {
  font-family: var(--state);
  font-size: var(--t-700);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.08;
  max-width: 22ch;
  color: var(--ink);
}
.faqf__intro p {
  margin-top: clamp(1rem, 2vw, 1.4rem);
  max-width: 46ch;
  font-size: var(--t-500);
  line-height: 1.5;
  color: var(--ink-70);
  text-wrap: pretty;
}

.faqf__grid { --fi: calc(26% + clamp(1rem, 2vw, 1.75rem)); }
  .qrow { grid-template-columns: 26% 2.75rem minmax(0, 1fr) 1.25rem; column-gap: clamp(1rem, 2vw, 1.75rem); }
  .qrow__n { grid-column: 2; }
  .qrow__q { grid-column: 3; }
  .qrow__a { grid-column: 3; }
  .qrow__m { grid-column: 4; }
}

@media (min-width: 1100px) {
  .faqf {
    display: grid;
    grid-template-columns: calc(26% + clamp(1rem, 2vw, 1.75rem)) minmax(0, 1fr);

    grid-template-rows: auto auto;
    align-items: start;
  }
  .faqf__rule            { grid-column: 1; grid-row: 1 / -1; }

  .faqf__head {
    grid-column: 2; grid-row: 1;
    display: grid;

    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: center;
  }
  .faqf__shot { margin: 0; }
  .faqf__grid            { grid-column: 2; grid-row: 2; --fi: 0px; }
  .faqf__intro           { margin-left: 0; }
  .faqf .qrow            { grid-template-columns: 2.75rem minmax(0, 1fr) 1.25rem; }
  .faqf .qrow__n         { grid-column: 1; }
  .faqf .qrow__q,
  .faqf .qrow__a         { grid-column: 2; }
  .faqf .qrow__m         { grid-column: 3; }
}

@media (min-width: 861px) {
  .jp__prose .qrow {
    grid-template-columns: 2.75rem minmax(0, 1fr) 1.25rem;
    column-gap: clamp(.75rem, 2vw, 1.4rem);
  }
  .jp__prose .qrow__n { grid-column: 1; }
  .jp__prose .qrow__q,
  .jp__prose .qrow__a { grid-column: 2; }
  .jp__prose .qrow__m { grid-column: 3; }
  .jp__prose .faqf__grid { --fi: 0px; }
}

@media (prefers-reduced-motion: reduce) {
  .qrow, .qrow__a, .qrow__a p, .qrow__t, .qrow__m::after { transition: none; }
}

.svcf {
  color: var(--chalk);

  isolation: isolate;

  --svcf-rail: 0px;
  --svcf-gap: 0px;
  --svcf-bleed-l: calc(-1 * (var(--pad) + var(--svcf-rail) + var(--svcf-gap)));

  overflow: clip;
  view-timeline-name: --svcf-pass;
  view-timeline-axis: block;
}

@media (min-width: 1100px) {
  .svcf {
    --svcf-rail: clamp(2rem, 2.6vw, 2.75rem);

    --svcf-gap: clamp(2rem, 4.2vw, 4.5rem);
    display: grid;
    grid-template-columns: var(--svcf-rail) minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    column-gap: var(--svcf-gap);
    align-items: start;
  }

  .svcf__rule  {
    grid-column: 1; grid-row: 1;

    padding-bottom: clamp(2.5rem, 7vh, 6rem);
  }
  .svcf__rule i:last-child { display: none; }
  .svcf__head  { grid-column: 2; grid-row: 1; }
  .svcf__items { grid-column: 2; grid-row: 2; }
  .svcf__foot  { grid-column: 2; grid-row: 3; }
}

.svcf__rule { --rule-ink: var(--chalk-line); }
.svcf .srule i { background: var(--chalk-line); }
.svcf .eyebrow { color: var(--chalk-65); }

.svcf__head { margin-bottom: clamp(3rem, 8vw, 7rem); }

@media (min-width: 861px) {
  .svcf__head {
    display: grid;

    grid-template-columns: clamp(3.5rem, 11.6vw, 9.5rem) minmax(0, 20rem) minmax(0, 1fr);
    column-gap: clamp(2rem, 5vw, 6rem);
    align-items: start;
  }

  .svcf__head .eyebrow {

    grid-column: 1 / 3;
    grid-row: 1;
    margin: 0;
    white-space: nowrap;
  }
  .svcf__head .svcf__t {
    grid-column: 3;
    grid-row: 1;
    padding-left: clamp(1.25rem, 8vw, 13rem);
  }

  .svcf__foot {
    display: grid;
    grid-template-columns: clamp(3.5rem, 11.6vw, 9.5rem) minmax(0, 20rem) minmax(0, 1fr);
    column-gap: clamp(2rem, 5vw, 6rem);
  }
  .svcf__foot > * {
    grid-column: 3;
    padding-left: clamp(1.25rem, 8vw, 13rem);
  }
}

.svcf__t {
  font-family: var(--state);
  font-size: var(--t-800);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -.03em;
  color: var(--chalk);
}
.svcf__t em { font-style: normal; color: var(--chalk-40); }

.svcf__items {
  counter-reset: svcf 0;

  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
}
.svcf__items::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: var(--svcf-bleed-l);
  right: calc(-1 * var(--pad));
  height: 1px;
  background: var(--chalk-line);
  pointer-events: none;
}

.svcf__item {
  display: block;
  position: relative;
  width: 100%;

  overflow: visible;
  clip-path: inset(0 -100vw);

  border-top: 0;
  color: inherit;
}
.svcf__row {
  position: relative;
  display: grid;
  gap: clamp(1.25rem, 4vw, 3.75rem);
  padding-block: clamp(2rem, 4vw, 3.75rem) clamp(2rem, 3.5vw, 3.25rem);
}

.svcf__bg {
  position: absolute;
  inset: 0 calc(-1 * var(--pad)) 0 var(--svcf-bleed-l);
  background: var(--ink-lift);
  opacity: .3;
  pointer-events: none;
}
.svcf__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }

.svcf__item::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--svcf-bleed-l);
  right: calc(-1 * var(--pad));
  height: 1px;
  background: var(--chalk-line);
  z-index: 1;
  pointer-events: none;
}

.svcf__tex {
  position: absolute;
  inset: 0;
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
  filter: grayscale(.82) contrast(1.06) brightness(.92);
}
.svcf__item:nth-child(1) .svcf__tex { background-image: url(assets/process-111111.webp); }
.svcf__item:nth-child(2) .svcf__tex { background-image: url(assets/process-888.webp); }
.svcf__item:nth-child(3) .svcf__tex { background-image: url(assets/process-222.webp); }
.svcf__item:nth-child(4) .svcf__tex { background-image: url(assets/process-101010.webp); }

.svcf__num {
  position: relative;
  justify-self: start;
  display: grid;
  place-content: center;

  width: clamp(2.25rem, 8.5vw, 7rem);
  height: clamp(2.25rem, 8.5vw, 7rem);
  border: 1px solid var(--chalk-40);
  border-radius: 50%;
  font-family: var(--state);
  font-size: clamp(var(--t-200), 1.6vw, var(--t-400));
  font-weight: 500;
  color: var(--chalk);
}
.svcf__num::before { content: counter(svcf); counter-increment: svcf 1; }

.svcf__text {
  position: relative;
  font-size: clamp(1rem, 1.4vw, 1.5rem);
  line-height: 1.45;
  letter-spacing: -.01em;
  color: var(--chalk-65);
  text-wrap: balance;
}

.svcf__more {

  --svcf-word: clamp(2rem, 11cqw, 9.5rem);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;

  padding-left: clamp(1.25rem, 8vw, 13rem);
  font-family: var(--state);
  font-weight: 600;

  container-type: inline-size;
  line-height: .95;
  letter-spacing: -.05em;
  color: var(--chalk);
}

.svcf__word {
  font-size: var(--svcf-word);
  white-space: nowrap;

  position: relative;
  display: inline-block;
}

.svcf__word::after {
  content: '';
  display: block;
  position: absolute;
  left: .085em;
  right: 0;
  bottom: 0;
  border-top: .0333em solid currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1s cubic-bezier(.16, 1, .3, 1);
}

.svcf__more svg {
  flex: none;
  position: relative;
  top: .05em;

  width: var(--svcf-word);
  height: var(--svcf-word);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.svcf__foot { margin-top: clamp(2rem, 5vw, 3.5rem); }
.svcf__brief {
  max-width: 46ch;
  font-size: clamp(1rem, 1.15vw, 1.25rem);
  line-height: 1.55;
  color: var(--chalk-65);
}

@media (min-width: 861px) {

  .svcf__row {

    grid-template-columns: clamp(3.5rem, 11.6vw, 9.5rem) minmax(0, 20rem) minmax(0, 1fr);
    column-gap: clamp(2rem, 5vw, 6rem);
    align-items: start;

  }
  .svcf__num  { margin-left: clamp(0px, 3vw, 2.5rem); }
  .svcf__text { padding-top: .35rem; }
}

@media (min-width: 861px) and (min-height: 620px) {
  .svcf__items {
    height: 100svh;
    display: grid;

    grid-template-rows: repeat(4, minmax(0, 1fr));
  }
  .svcf__item { min-height: 0; }
  .svcf__row {
    height: 100%;
    align-content: center;
    padding-block: clamp(.75rem, 2vh, 1.75rem);
  }
  .svcf__more { --svcf-word: clamp(2rem, min(11cqw, 16vh), 9.5rem); }
}

@media (hover: hover) and (pointer: fine) {

  .svcf__bg {
    opacity: 0;
    transform: scale(1.10);
    clip-path: inset(100% 0 0);
    transition:
      opacity .9s linear .15s,
      transform 0s linear 1.05s,
      clip-path .9s linear .15s;
    will-change: transform, opacity;
  }
  .svcf__item:hover .svcf__bg,
  .svcf__item:focus-visible .svcf__bg {
    opacity: .4;
    transform: scale(1);
    clip-path: inset(0);

    transition:
      opacity .9s linear,
      transform 16s linear .9s,
      clip-path .9s linear;
  }

  .svcf__more svg {
    opacity: 0;
    transform: translateX(-10%);
    transition: opacity .4s, transform .8s;
  }
  .svcf__item:hover .svcf__more svg,
  .svcf__item:focus-visible .svcf__more svg {
    opacity: 1;
    transform: translateX(0);
  }
  .svcf__item:hover .svcf__word::after,
  .svcf__item:focus-visible .svcf__word::after { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .svcf__bg { transition: opacity .2s; transform: none; clip-path: none; }
  .svcf__item:hover .svcf__bg { transform: none; }
  .svcf__more svg { transition: opacity .2s; transform: none; }
  .svcf__word::after { transition: none; }
}

.jp__src { display: none; }

.cbar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 40;
  background: var(--chalk);
  border-top: 1px solid var(--steel);
  padding: clamp(.9rem, 2vw, 1.15rem) var(--pad)
           calc(clamp(.9rem, 2vw, 1.15rem) + env(safe-area-inset-bottom));
  transform: translateY(110%);
  transition: transform .5s var(--ease);
}
.cbar--in { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .cbar { transition: none; } }

body.has-cbar .bar { transform: translateY(110%); }

body.has-cbar .ftr { padding-bottom: calc(2rem + var(--cbar-h, 0px)); }

.cbar__row {
  max-width: calc(1760px + 2 * var(--pad));
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .85rem clamp(1rem, 3vw, 2.5rem);
}
.cbar__say {
  margin: 0;
  flex: 1 1 22rem;
  min-width: 0;
  font-size: var(--t-100);
  line-height: 1.5;
  color: var(--ink-70);
}

.cbar__say a { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; }
.cbar__acts { display: flex; flex-wrap: wrap; gap: .5rem; }

.cbar__b {
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  font-size: var(--t-100);
  line-height: 1;
  cursor: pointer;

  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .6rem 1.15rem;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--chalk);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.cbar__b--ghost { background: none; color: var(--ink); }
.cbar__b:hover { background: var(--ink-70); border-color: var(--ink-70); color: var(--chalk); }
.cbar__b--ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--chalk); }
.cbar__b:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .cbar__b { transition: none; } }

.cbar__prefs {
  max-width: calc(1760px + 2 * var(--pad));
  margin: 1rem auto 0;
  padding-top: 1rem;
  border-top: 1px solid var(--steel);
}
.cbar__prefs[hidden] { display: none; }
.cbar__opt { display: flex; gap: .7rem; align-items: flex-start; padding: .5rem 0; }
.cbar__opt input { margin-top: .2rem; flex: none; width: 1rem; height: 1rem; accent-color: var(--ink); }
.cbar__opt input:disabled { opacity: .55; }
.cbar__opt span { display: block; font-size: var(--t-100); line-height: 1.5; }
.cbar__opt b { display: block; color: var(--ink); }
.cbar__opt i { font-style: normal; color: var(--ink-65); }

@media (max-width: 640px) {
  .cbar__acts { width: 100%; }
  .cbar__b { flex: 1 1 auto; }
}

@media print {

  .hdr, .nav, .bar, .ftr, .cbar,
  .jp__stick, .more, .handoff, .railoffer, .jp__end { display: none !important; }

  @page { margin: 20mm 22mm; }

  html, body {
    background: var(--paper);
    color: var(--ink);
    font-size: 11pt;
    line-height: 1.5;
  }

  .jp__h1, .prose h1 { font-size: 22pt; line-height: 1.15; margin: 0 0 .5rem; }
  .jp__prose h2, .prose h2 {
    font-size: 14pt; line-height: 1.25; margin: 1.6em 0 .5em;
  }
  .jp__prose h3, .prose h3, .faq__q h3 { font-size: 12pt; margin: 1.2em 0 .4em; }
  .prose .jp__answer { font-size: 12pt; }
  .jp__meta { font-size: 9pt; color: var(--ink-65); }
  .prose p, .prose li { font-size: 11pt; }
  .prose pre, .prose code, pre, code { font-size: 9pt; }

  .jp { display: block; max-width: none; margin: 0; padding: 0; }
  .jp__body, .jp__prose, .prose, .wrap {
    max-width: none !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
  }

  .napa .nhero__acts, .napa .ghost, .napa .aud { display: none !important; }
  .napa .nhero__note { columns: 1 !important; max-width: none !important; }
  .napa .svc4, .napa .napa__pair, .napa .nwalk__grid,
  .napa .ask__body, .napa .leap, .napa .ask__grid, .napa .split {
    display: block !important;
    max-width: none !important;
  }
  .napa .svc4__i { max-width: none !important; page-break-inside: avoid; }
  .napa .qa details { page-break-inside: avoid; }
  .napa .svc4__i h2 { font-size: 12pt; margin: 1.2em 0 .3em; }
  .napa .fric { display: block !important; max-width: none !important; }
  .napa .napa__lead img, .napa .napa__fig img,
  .napa .nhero__shot img, .napa .nwalk__shot img {
    max-width: 100%; height: auto; aspect-ratio: auto;
  }
  .napa figcaption { font-size: 9pt; color: var(--ink-65); }

  .napa .leap { display: block !important; }

  .napa .leap { font-size: 20pt !important; }
  .napa .ask__c { font-size: 14pt !important; }
  .napa .ask__src { font-size: 8pt !important; }

  h1, h2, h3 { break-after: avoid; }
  p, li, pre, .keys, .faq__q { break-inside: avoid; }

  .prose a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: .72em;
    word-break: break-all;
    color: var(--ink-65);
  }

  .keys, .faq__q, .prose pre {
    border: 1px solid var(--steel);
    padding: .75rem 1rem;
  }
  pre { white-space: pre-wrap; word-break: break-word; }

  .jp__src {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    break-inside: avoid;
    margin-top: 2rem;
    padding-top: .6rem;
    border-top: 1px solid var(--steel);
    font-size: 8.5pt;
    line-height: 1.5;
    color: var(--ink-65);
  }

  .jp__src__x { min-width: 0; }

  .jp__src__x > span { display: block; }
  .jp__src__t { font-weight: 600; color: var(--ink); }
  .jp__src__u { word-break: break-all; }

  .jp__src__bull {
    flex: none;

    height: 10mm;
    width: auto;

    margin-top: 2.125pt;
  }
}

.burger { display: none; }

@media screen and (max-width: 860px) {
  .burger {
    display: grid;
    gap: 5px;
    align-content: center;
    justify-items: end;

    width: 44px;
    height: 44px;
    margin-right: -.5rem;
    flex: none;
  }
  .burger i {
    width: 26px;
    height: 3px;
    background: var(--ink);
    transition: transform .3s var(--ease), opacity .15s linear;
  }

  .nav-open .burger i:nth-child(1) { transform: translateY(8px)  rotate(45deg); }
  .nav-open .burger i:nth-child(2) { opacity: 0; }
  .nav-open .burger i:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  .nav {
    position: fixed;

    inset: var(--header) 0 0 0;
    z-index: 19;
    display: grid;
    align-content: start;
    justify-items: start;
    gap: 0;
    padding: clamp(1.5rem, 6vw, 2.5rem) var(--pad) calc(2.5rem + env(safe-area-inset-bottom));
    background: var(--chalk);
    overflow-y: auto;

    visibility: hidden;
    opacity: 0;
    transform: translateY(-.5rem);
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s linear .25s;
  }
  .nav-open .nav {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }
  @media (prefers-reduced-motion: reduce) {
    .nav { transition: none; }
  }

  .nav .nav-hide { display: block; }

  .nav a:not(.btn) {
    font-family: var(--state);
    font-size: clamp(1.75rem, 8.5vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.15;
    color: var(--ink);
    padding-block: .5rem;
  }
  .nav a:not(.btn):hover,
  .nav a:not(.btn)[aria-current] { color: var(--brand); }

  .hdr .nav .btn {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: clamp(1.5rem, 6vw, 2.25rem);
  }

  .hero:has(.hero__grid) {
    min-height: calc(100vh - var(--header));
    min-height: calc(100svh - var(--header));
    align-content: center;
    padding-block: clamp(2rem, 6vh, 3.5rem);
  }

  .marks { padding-top: calc(var(--header) + clamp(1.25rem, 5vw, 2rem)); }

  .cost-fold { padding-top: clamp(3.5rem, 12vw, 5rem); }

  .cost .lead {
    font-family: var(--work);
    font-weight: 400;
    font-size: var(--t-300);
    line-height: 1.65;
    letter-spacing: -.003em;
  }
  .cost .lead + .lead { margin-top: 1.1rem; }

  .friction {
    font-size: clamp(3.25rem, 15.5vw, 6rem);
    line-height: .86;
    letter-spacing: -.04em;
  }
  .friction__l--b { margin-top: 0; }

  .seam { padding-block: clamp(5rem, 17vh, 8rem) clamp(3rem, 9vh, 5rem); }
  .friction__mark { margin: 0 auto clamp(1.5rem, 6vw, 2.25rem); }
  .seam__say { margin-top: clamp(2.25rem, 8vw, 3.25rem); }
}

@media screen and (max-width: 1099px) {
  .solpics {
    display: block;
    aspect-ratio: 3 / 2;
    margin-top: clamp(1.75rem, 6vw, 2.5rem);
  }
}

@media screen and (max-width: 860px) {

  .ftr__sol__cols ul { gap: 0; }
  .ftr__sol__cols { gap: 1rem clamp(1.25rem, 6vw, 2.25rem); }

  .ftr__social { justify-content: center; text-align: center; }
  .ftr__social ul { flex: 1 0 100%; justify-content: center; }

  .ftr__cta {
    margin-left: 0;
    padding: .65rem 1.15rem;
    font-size: var(--t-100);
  }
  .ftr__hint { text-align: center; }
}

@media screen and (max-width: 860px) {

  .svcf__bg { opacity: .15; }
  .svcf__text { color: var(--chalk); }
}

@media screen and (max-width: 860px) {

  .svcf__row {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: clamp(.85rem, 4vw, 1.25rem);
    row-gap: clamp(.75rem, 3.5vw, 1rem);
    padding-block: clamp(1.5rem, 6vw, 2rem);
    align-items: center;
  }
  .svcf__num  { grid-column: 1; grid-row: 1; margin-left: 0; }
  .svcf__more { grid-column: 2; grid-row: 1; padding-left: 0; gap: .75rem; }
  .svcf__text { grid-column: 1 / -1; grid-row: 2; padding-top: 0; }

  .bar { padding: .5rem var(--pad) calc(.5rem + env(safe-area-inset-bottom)); }
}

@media screen and (max-width: 1099px) {
  .help__mid { margin-right: calc(-1 * var(--pad)); }
  .help__list li {

    font-size: clamp(1.75rem, 9.6cqw, 9.5rem);
    letter-spacing: -.05em;
  }
}

@media screen and (max-width: 860px) {

  .ftr__word {
    --word-size: calc(100vw / 7.75);
    margin-inline: calc(-1 * var(--pad));
    padding-right: .04em;
  }

  .ftr__fine p:last-child {
    font-size: calc((100vw - 2 * var(--pad)) / 28.9);
    letter-spacing: -.008em;
  }
}

@media screen and (max-width: 860px) {
  .btn:not(.ftr__cta) {
    font-size: var(--t-200);
    padding: .7rem 1.2rem;
    gap: .55rem;
  }
  .btn:not(.ftr__cta)::after { width: 1.5em; height: 1.5em; }
}

@media (min-width: 861px) {
  .cta__eyebrow {
    font-size: clamp(.9375rem, .8rem + .22vw, 1.125rem);
    letter-spacing: .155em;
  }
}

.hero__next { display: none; }

@media screen and (max-width: 860px) {

  .hero .statement { font-size: clamp(3rem, 1rem + 13.4vw, 5rem); }

  .hero:has(.hero__grid) {
    grid-template-rows: 1fr auto;
    row-gap: clamp(1.5rem, 6vw, 2.5rem);

    min-height: calc(100vh - var(--header) - 4.25rem);
    min-height: calc(100svh - var(--header) - 4.25rem);
  }
  .hero__grid { align-self: center; }

  .hero__next {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .7rem;
    margin: 0;
    font-family: var(--work);
    font-size: var(--t-100);
    font-weight: 600;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--ink-70);
  }
  .hero__next i {
    width: 1px;
    height: clamp(1.75rem, 6vw, 2.75rem);
    background: var(--steel);
  }
}

@media screen and (max-width: 860px) {
  .cta { min-height: min(34rem, 66svh); }
}

@media (min-width: 861px) {

  .nav a:not(.btn) {

    font-size: .9375rem;
    font-weight: 700;
    text-underline-offset: .4em;
    text-decoration-thickness: 1px;
  }

  .nav a:not(.btn):hover,
  .nav a:not(.btn):focus-visible,
  .nav a:not(.btn)[aria-current] { text-decoration: underline; }

}

@media (min-width: 1040px) {
  .clock {

    color: var(--ink-70);
    display: inline-flex;
    align-items: center;
    margin: 0;
  }

  .clock::after {
    content: "";
    width: 1px;
    height: 1.15rem;
    margin-left: clamp(1.25rem, 2.2vw, 2rem);
    background: var(--steel);
  }
}

.mast .figure {
  max-width: none;
  text-wrap: balance;
}
.mast .reach__say,
.mast .figcap { max-width: none; }

@media (min-width: 1000px) {
  body:not(.home) main .ink.wrap {
    max-width: none;
    margin-inline: 0;
  }
  body:not(.home) main .ink.wrap > * {
    max-width: 1760px;
    margin-inline: auto;
  }
}

.faqf__intro h2 {
  font-size: clamp(2.25rem, 1.6rem + 3vw, 5rem);
}

.reach__k {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  margin-bottom: .35rem;
}
.reach__k:first-child { margin-top: 0; }
.reach__v {
  font-family: var(--state);
  font-weight: 600;
  font-size: clamp(1.375rem, 2.1vw, 2rem);
  letter-spacing: -.02em;
  line-height: 1.15;
}
.reach__v a {
  border-bottom: 1px solid var(--steel);
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.reach__v a:hover { color: var(--brand); border-bottom-color: currentColor; }
.reach__say {
  margin-top: .75rem;
  font-size: var(--t-200);
  line-height: 1.6;
  color: var(--ink-70);
  max-width: 46ch;
}

.reach__fine {
  margin-top: .75rem;
  font-size: var(--t-100);
  line-height: 1.55;
  color: var(--ink-70);
  max-width: 52ch;
}
.reach__fine b { font-weight: 600; color: var(--ink); }
.reach__fine a {
  text-decoration: underline;
  text-underline-offset: .25em;
  text-decoration-thickness: from-font;
}
.reach__sep {
  height: 1px;
  background: var(--steel);

  margin-block: clamp(1.25rem, 2.4vw, 1.75rem);
}
.reach__where {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  font-size: var(--t-200);
  color: var(--ink-70);
  max-width: 46ch;
}
@media (min-width: 861px) {
}

body.reachpage #form { padding-block: clamp(3rem, 6vw, 5.5rem) clamp(3rem, 6vw, 5rem); }

@media (min-width: 861px) and (max-height: 900px) {
  body.reachpage #form { padding-block: clamp(1.75rem, 3.5vh, 3rem) clamp(2rem, 4vh, 3.5rem); }

  body.reachpage .reach__sep { margin-block: .75rem; }
}

.mast { display: grid; gap: clamp(2rem, 4vw, 3rem); }

.mast > * { min-width: 0; }
.mast__l > * + * { margin-top: clamp(1rem, 2.4vw, 1.5rem); }
.mast__l .form { margin-top: clamp(2.5rem, 5vw, 4rem); }
.mast__say {
  font-size: var(--t-400);
  line-height: 1.45;
  color: var(--ink-70);
  max-width: 46ch;
}
.mast__l .statement { font-size: clamp(2.5rem, 5.6vw, 5rem); }

.mast__k { margin-top: 0; }
.mast__r .figure { margin-top: .45rem; }

.mast__l .mast__say { margin-top: clamp(1.25rem, 2.4vw, 1.75rem); }

@media (min-width: 861px) {

  .mast {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(2.5rem, 5vw, 5rem);
    align-items: start;
  }
  .mast__l { grid-column: 1; }
  .mast__r { grid-column: 2; }
}

h1.statement,
h1.statement--sm { font-weight: 900; }

.reach__alt { margin-top: 0; margin-bottom: clamp(.5rem, 1.2vw, .9rem); }

@media (min-width: 861px) {
  .mast .figure { font-size: clamp(2rem, 3.1vw, 2.75rem); }
  .mast .reach__say { font-size: 1.1875rem; line-height: 1.6; }
}

@media (min-width: 861px) {

  body.reachpage .mast__r .reach__sep { margin-top: clamp(2.25rem, 5vw, 5rem); }
}

.jpref { margin-top: clamp(1.25rem, 2.6vw, 1.75rem); }
.jpref__a {
  display: inline-grid;
  gap: .2rem;
  padding: .7rem 1.1rem;
  border: 1px solid var(--steel);
  border-radius: var(--r-tap);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.jpref__a:hover { border-color: var(--ink); background: var(--bone); }
.jpref__a { font-size: var(--t-200); font-weight: 600; }
.jpref__note {
  font-size: var(--t-100);
  font-weight: 400;
  color: var(--ink-70);
}

.nhero__main { display: grid; gap: var(--v3); align-content: start; }

.napa .prose p + p,
.napa .prose li + li { margin-top: var(--v2); }
.nhero__note { display: grid; gap: var(--v2); align-content: start; }

.nhero__shot { margin: var(--band) 0; }

.nhero__shot img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
  background: var(--bone);
}
@media (min-width: 861px) {
  .nhero__shot img { aspect-ratio: 12 / 5; object-fit: cover; }
}

.nhero__note { font-size: var(--a5); }
.nhero__note p { color: var(--ink); font-size: inherit; line-height: 1.5; }

.nhero__go {
  margin-top: var(--v0);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--v4);
}

.ghost {
  display: inline-flex;
  align-items: center;
  gap: var(--v1);
  font-family: var(--work);
  font-size: var(--t-100);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  border: 1px solid var(--steel);
  border-radius: 999px;
  padding: var(--v1) var(--v2);
  min-height: 44px;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.ghost:hover, .ghost:focus-visible { border-color: var(--ink); background: var(--bone); }
.ghost span { transition: transform .25s var(--ease); }
.ghost:hover span { transform: translateY(2px); }

.nhero__acts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--v0);
  margin: 0;
  padding: 0;
}
.nhero__act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  color: var(--ink-70);
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: color .25s var(--ease);
}
.nhero__act svg { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.nhero__act:hover, .nhero__act:focus-visible { color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .ghost, .ghost span, .nhero__act { transition: none; }
  .ghost:hover span { transform: none; }
}

.hero.nhero .hero__grid { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
@media (min-width: 861px) {

  .hero.nhero .hero__grid { grid-template-columns: minmax(0, 1fr); }

  .hero.nhero .nhero__note { max-width: 29em; }
}

@media (min-width: 1400px) {
  .hero.nhero .nhero__note {
    display: block;
    max-width: none;
    columns: 2;
    column-gap: var(--v5);
  }

  .hero.nhero .nhero__note > * { margin-top: var(--v2); }
  .hero.nhero .nhero__note > *:first-child { margin-top: 0; }
  .hero.nhero .nhero__note > p { orphans: 2; widows: 2; }
  .hero.nhero .nhero__go { break-inside: avoid; }
}

@media (max-width: 860px) {
  .hero.nhero { padding-bottom: var(--band); }
}

@media (max-width: 860px) {
  .napa .split .prose { max-width: 32em; }
}

@media (min-width: 861px) {
  .napa .split:not(#faq) { align-items: baseline; }
}

.split__rail > .srule {
  margin-bottom: var(--v3);
}
.split__rail > .srule .eyebrow { white-space: normal; }

.napa .split__rail .figure { font-size: var(--a1); line-height: 1.08; }

.split__rail > .srule i { display: none; }
.split__rail > .srule { grid-template-columns: minmax(0, 1fr); }

.napa { --band: clamp(2.25rem, 6vw, 4.5rem); }

.hero.nhero { row-gap: 0; }
.aud { margin-top: calc(var(--band) * 2); }
.aud__lab { color: var(--ink-65); margin: 0 0 var(--v3); }
.aud__grid {
  display: grid;
  gap: var(--v4);
  border-block: 1px solid var(--steel);
}

.aud__col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--v4);
  align-items: stretch;
  padding-block: var(--v4);
}
.aud__body { display: grid; gap: var(--v2); align-content: start; }

.aud__col h2 {
  font-family: var(--state);
  font-size: var(--t-600);
  line-height: 1.1;
  letter-spacing: -.015em;
  margin: 0;
  text-wrap: balance;
}
.aud__col p { color: var(--ink-70); max-width: 34ch; }

.aud__col h2 a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.aud__col h2 a:hover, .aud__col h2 a:focus-visible { border-bottom-color: var(--ink); }

.arw {
  display: flex;
  align-items: stretch;
  align-self: center;
  gap: .35rem;
  height: min(100%, clamp(2.25rem, 10vw, 9.25rem));
}
@media (max-width: 1023px) { .aud__col { column-gap: var(--v3); } }
.arw i {
  height: 100%;
  aspect-ratio: .58;

  clip-path: polygon(0 0, 48% 0, 100% 50%, 48% 100%, 0 100%, 52% 50%);
  background: var(--ink);
}

@media (prefers-reduced-motion: no-preference) {
  .aud__col:hover .arw i,
  .aud__col:focus-within .arw i { animation: arw-strike 1.7s both; }
  .aud__col:hover .arw i:last-child,
  .aud__col:focus-within .arw i:last-child { animation-name: arw-struck; }
}

@keyframes arw-strike {
  0%   { transform: translateX(0);   animation-timing-function: cubic-bezier(.4,0,.35,1); }
  24%  { transform: translateX(34%); animation-timing-function: linear; }
  76%  { transform: translateX(34%); animation-timing-function: cubic-bezier(.38,.28,.28,1); }
  100% { transform: translateX(0); }
}

@keyframes arw-struck {
  0%   { transform: translateX(0);   animation-timing-function: linear; }
  24%  { transform: translateX(0);   animation-timing-function: cubic-bezier(.42,.1,.32,1); }
  54%  { transform: translateX(50%); animation-timing-function: cubic-bezier(.45,0,.38,1); }
  76%  { transform: translateX(0);   animation-timing-function: linear; }
  100% { transform: translateX(0); }
}
.aud__col:focus-within::before { opacity: 1; transform: scale(1); }
.aud__go a {
  display: inline-flex;
  align-items: center;
  gap: var(--v1);
  font-family: var(--work);
  font-size: var(--t-100);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: var(--v0);
}
.aud__go a span { transition: transform .25s var(--ease); }
.aud__go a:hover, .aud__go a:focus-visible { border-bottom-color: var(--ink); }
.aud__go a:hover span { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .aud__go a span { transition: none; } .aud__go a:hover span { transform: none; } }

@media (max-width: 1023px) {
  .aud__grid { gap: 0; }
  .aud__col + .aud__col { border-top: 1px solid var(--steel); }
}
@media (min-width: 1024px) {
  .aud__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
  }

  .aud__col { padding-inline: 0 var(--v5); }
  .aud__col + .aud__col {
    border-left: 1px solid var(--steel);
    padding-inline: var(--v5) 0;
  }
}

.qcard {
  margin-top: var(--v3);
  padding: var(--v3);
  border: 1px solid var(--steel);
  border-radius: 2px;
}
.qcard__h {
  font-family: var(--work);
  font-size: var(--t-100);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-70);
  margin: 0 0 var(--v2);
}
.qcard ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--v1); }
.qcard li {
  font-size: var(--t-300);
  line-height: 1.35;
  color: var(--ink);
  padding-left: var(--v2);
  position: relative;
}

@supports (animation-timeline: view()) {

 .qcard { view-timeline-name: --qcard-pass; }
 .qcard li { padding-right: 2.75rem; }
 .qcard li::after {
   content: "";
   position: absolute;
   right: 0;
   top: 50%;
   width: 2rem;
   height: 9px;
   transform: translateY(-50%);
   background-image: linear-gradient(to right, var(--ink) 0 50%, var(--steel) 50% 100%);
   background-size: 200% 100%;
   background-position: 100% 0;
   animation: qbar-ink linear both;
   animation-timeline: --qcard-pass;
 }
 .qcard li:nth-child(1)::after { animation-range: cover 14% cover 36%; }
 .qcard li:nth-child(2)::after { animation-range: cover 31% cover 53%; }
 .qcard li:nth-child(3)::after { animation-range: cover 48% cover 70%; }
 .qcard li:nth-child(4)::after { animation-range: cover 65% cover 87%; }

 @media (prefers-reduced-motion: reduce) {
   .qcard li::after { animation: none; background-position: 0 0; }
 }
}
@keyframes qbar-ink {
  to { background-position: 0 0; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .napa__ask { view-timeline-name: --ask-pass; }
    .napa__ask::before {
      animation: ask-drift linear both;
      animation-timeline: --ask-pass;
      animation-range: cover 0% cover 100%;
    }
  }
}
@keyframes ask-drift {
  from { transform: translateY(-5%); }
  to   { transform: translateY(5%); }
}
.qcard li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: .45rem;
  height: 1px;
  background: var(--ink);
}

.fric__lead {
  margin: var(--v2) 0 0;
  font-family: var(--work);
  font-size: var(--t-100);
  letter-spacing: .06em;
  line-height: 1.5;
  color: var(--ink-65);
  max-width: 28ch;
}
.fric__lead b { font-weight: 600; color: var(--ink); }
.ink .fric__lead { color: var(--chalk-65); }
.ink .fric__lead b { color: var(--chalk); }

.fric {
  list-style: none;
  margin: var(--v3) 0 0;
  padding: 0;
  display: grid;
  gap: var(--v1) var(--v3);

  max-width: 30rem;
}
@media (min-width: 1360px) {
  .fric { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.fric li {
  position: relative;
  font-family: var(--work);
  font-size: var(--t-100);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-65);
  padding: var(--v1) 0 0 var(--v2);
  border-top: 1px solid var(--steel);
  cursor: default;
}

.fric li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05em;
  width: 5px;
  height: 5px;
  background: var(--steel);
}

.svc4 {
  list-style: none;
  margin: var(--v6) 0;
  padding: 0;
  display: grid;
  gap: var(--v4);
}

.svc4__i {
  position: relative;
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  gap: var(--v2);
  align-content: start;
  padding-top: var(--v2);
  border-top: 1px solid var(--ink);
}

.svc4__i::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;

  height: 6px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;

  transition: transform .72s cubic-bezier(.5, 0, .5, 1);
}
.svc4__i:hover::after, .svc4__i:focus-within::after { transform: scaleX(1); }

.svc4__i p:not(.svc4__n) { transition: color .72s cubic-bezier(.5, 0, .5, 1); }
.svc4__i:hover p:not(.svc4__n),
.svc4__i:focus-within p:not(.svc4__n) { color: rgba(21, 24, 27, .88); }

.js .svc4__i:nth-child(2) { transition-delay: .06s; }
.js .svc4__i:nth-child(3) { transition-delay: .12s; }
.js .svc4__i:nth-child(4) { transition-delay: .18s; }

@media (prefers-reduced-motion: reduce) {
  .svc4__i::after, .svc4__i p:not(.svc4__n) { transition: none; }
  .js .svc4__i { transition-delay: 0s; }
}
.svc4__i h2 {
  font-family: var(--state);

  font-size: var(--a3);
  line-height: 1.2;
  letter-spacing: -.005em;
  margin: 0;
  text-wrap: balance;
}
.svc4__i p { color: var(--ink-70); font-size: var(--t-200); line-height: 1.55; margin: 0; }

.svc4__n {
  margin-top: 0 !important;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--v2);
}

.svc4__pips {
  display: grid;
  grid-template-columns: repeat(2, 6px);
  gap: 3px;
  flex: none;
  align-self: center;
}
.svc4__pips i {
  width: 6px;
  height: 6px;
  background: var(--steel);
}
.svc4__i:nth-child(1) .svc4__pips i:nth-child(1),
.svc4__i:nth-child(2) .svc4__pips i:nth-child(2),
.svc4__i:nth-child(3) .svc4__pips i:nth-child(3),
.svc4__i:nth-child(4) .svc4__pips i:nth-child(4) {
  background: var(--ink);
}

@media (prefers-reduced-motion: no-preference) {
  .svc4__i:hover .svc4__pips i,
  .svc4__i:focus-within .svc4__pips i {
    animation: pip-hop 2.4s steps(1, end) infinite;
  }
  .svc4__i:hover .svc4__pips i:nth-child(1),
  .svc4__i:focus-within .svc4__pips i:nth-child(1) { animation-delay: 0s; }
  .svc4__i:hover .svc4__pips i:nth-child(2),
  .svc4__i:focus-within .svc4__pips i:nth-child(2) { animation-delay: -1.8s; }
  .svc4__i:hover .svc4__pips i:nth-child(4),
  .svc4__i:focus-within .svc4__pips i:nth-child(4) { animation-delay: -1.2s; }
  .svc4__i:hover .svc4__pips i:nth-child(3),
  .svc4__i:focus-within .svc4__pips i:nth-child(3) { animation-delay: -0.6s; }
}
@keyframes pip-hop {
  0%   { background: var(--ink); }
  25%  { background: var(--steel); }
  100% { background: var(--steel); }
}
.svc4__n a {
  font-family: var(--work);
  font-size: var(--t-100);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
}

.svc4__n a::before { content: ""; position: absolute; inset: 0; }

.svc4__n a::after {
  content: "\2192";
  display: inline-block;
  margin-left: .5em;

  transition: transform .72s cubic-bezier(.5, 0, .5, 1);
}
.svc4__i:hover .svc4__n a::after,
.svc4__i:focus-within .svc4__n a::after { transform: translateX(.42em); }
@media (prefers-reduced-motion: reduce) { .svc4__n a::after { transition: none; } }

@media (max-width: 699px) {
  .svc4__i { grid-row: auto; grid-template-rows: none; }
}
@media (min-width: 700px) {
  .svc4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, auto auto auto);
  }
}
@media (min-width: 1100px) {
  .svc4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: auto auto auto;
  }
}

.nwalk__grid { display: grid; gap: var(--v4); align-items: stretch; }
.nwalk__shot { margin: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.nwalk__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 2px;
}
.nwalk__body { display: grid; gap: var(--v2); align-content: start; }

.nwalk__body p:not(.figure) {
  font-size: var(--a5);
  line-height: 1.5;
}
.nwalk__body p { max-width: 45ch; }
@media (min-width: 861px) {
  .nwalk__grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
}

.cta__note {
  max-width: 45ch;
  margin: var(--v3) auto 0;
  color: var(--chalk-65);
  font-size: var(--t-300);
  line-height: 1.55;
}
.cta__fine {
  margin-top: var(--v2);
  font-family: var(--work);
  font-size: var(--t-100);
  letter-spacing: .06em;

  color: var(--chalk-65);
}

.wc__read { max-width: 45ch; }
.wc__read > * + * { margin-top: var(--v2); }
.wc__read h2 {
  font-family: var(--state);
  font-size: var(--a2);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.015em;
  margin-top: 0;
  text-wrap: balance;
}
.wc__read > h2 + p { margin-top: var(--v2); }
.wc__read p { color: var(--ink-70); }

.wc__read b { color: var(--ink); font-weight: 600; }

.wc__open { padding-bottom: 0; }
.wc__slug { margin: 0 0 var(--v3); }
.wc__h1 {
  max-width: 22ch;
  margin: 0 0 var(--v4);

  font-size: clamp(2.1rem, 4.9vw, 5.1rem);
  line-height: 1.06;
}
@media (min-width: 861px) { .wc__h1 { max-width: 26ch; } }
.wc__soft a { border-bottom: 1px solid var(--steel); }
.wc__soft a:hover { border-bottom-color: var(--ink); }

.wc__fig { margin: var(--v6) 0; }
.wc__fig img { width: 100%; height: auto; display: block; border-radius: 2px; }
.wc__fig figcaption {
  margin-top: .7rem;
  font-family: var(--work);
  font-size: var(--a7);
  letter-spacing: .04em;
  line-height: 1.5;
  color: var(--ink-65);
  max-width: 52ch;
}

.wc__pair { display: grid; gap: var(--v4); margin: var(--v6) 0; }
.wc__pair .wc__fig { margin: 0; }
@media (min-width: 861px) {

  .wc__pair { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: end; }
  .wc__pair--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); }
  .wc__pair--flip .wc__fig:first-child { order: 2; }
}

.wc__act { margin: var(--v5) 0 0; text-align: center; }

@media (max-width: 480px) {
  .wc__act .btn {
    max-width: 100%;
    font-size: 1rem;
    padding: .9rem 1.1rem;
    gap: .5rem;

    white-space: normal;
    align-items: flex-start;
  }

  .wc__act .btn__l { height: auto; overflow: visible; min-width: 0; }
  .wc__act .btn__l i { height: auto; }
  .wc__act .btn__l i[aria-hidden] { display: none; }
  .wc__act .btn__l::before { display: none; }
}
.wc__sign {
  margin: var(--v4) 0 0;
  text-align: center;
  font-family: var(--work);
  font-size: var(--a7);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-65);
}

@media (min-width: 861px) {
  .napa .split { display: block; }
  .napa .split__rail:empty { display: none; }
  .napa .split__rail {
    font-size: var(--a5);
    max-width: 45ch;
    margin: 0 auto clamp(1rem, 2.2vw, 1.75rem);
  }
  .napa .split .prose { max-width: 45ch; margin-inline: auto; }

  .napa .split__rail .figure { font-size: var(--a2); }
  .napa .split > .qa { width: min(100%, 45ch); margin-inline: auto; }
}

.nf { position: relative; padding-block: clamp(3.5rem, 8vw, 6rem);

  --foldgap: clamp(1.25rem, 2.5vw, 2rem);
  --fold2: calc(50% + var(--foldgap) / 2);
}
.nf--pale { background: var(--bone); }
.nf--ink  { background: var(--ink); color: var(--chalk); }
.nf--ink a { color: var(--chalk); }

.nf__meta {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--v3); margin-bottom: var(--v5);
  font-family: var(--work); font-size: var(--a7);
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-65);
}

.nf--ink .nf__meta { color: var(--chalk-65); }
.nf__meta b { font-weight: 400; font-variant-numeric: tabular-nums; }
.nf__tag { text-align: right; }
.nf__tag::before {
  content: ''; display: inline-block; width: .4em; height: .4em;
  border-radius: 50%; background: currentColor; margin-right: .7em;
  vertical-align: .12em;
}

.nf__head {
  font-family: var(--state); font-weight: 900;
  font-size: var(--a1); line-height: .98; letter-spacing: -.03em;
  max-width: 17ch; margin: 0; text-wrap: balance;
}
.nf__say {
  font-family: var(--state); font-weight: 500;

  font-size: var(--a5); line-height: 1.42; letter-spacing: -.005em;
  max-width: 46ch; margin: var(--v5) 0 0;
}
.nf__note { font-size: var(--a5); line-height: 1.62; max-width: 38ch; margin: var(--v4) 0 0; }
.nf__note > p + p { margin-top: 1em; }

@media (prefers-reduced-motion: reduce) {
  .js .nf__half--a .nf__note > p,
  .js .nf__half--b .nf__note > p { opacity: 1; transform: none; }
}
.nf--ink .nf__note { color: var(--chalk-65); }

@media (min-width: 861px) {
  .nf__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--foldgap); align-items: start; }
  .nf__say  { margin-left: 34%; }
  .nf__note { margin-left: 12%; }
}

.nover { position: relative; display: grid; gap: var(--v4); }
.nover figure { margin: 0; }
.nover img { display: block; width: 100%; height: auto; }
.nover__word {
  font-family: var(--state); font-weight: 900;
  font-size: clamp(3.25rem, 10.5vw, 11rem); line-height: .84;
  letter-spacing: -.045em; margin: 0;
  font-variant-numeric: tabular-nums;
}
.nover__cap {
  font-family: var(--work); font-size: var(--a7); line-height: 1.5;
  letter-spacing: .04em; color: var(--chalk-40); max-width: 46ch;
  margin: var(--v4) auto 0; text-align: center;
}
.nover__cap b { display: block; text-transform: uppercase; letter-spacing: .14em; color: var(--chalk); font-weight: 500; margin-bottom: .6em; }
@media (min-width: 861px) {
  .nover { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 0; }
  .nover figure { grid-column: 1; grid-row: 1; }
  .nover__word { grid-column: 2; grid-row: 1; margin-left: -26%; position: relative; z-index: 2; }
  .nover__cap  { grid-column: 1 / -1; grid-row: 2; }
}

.npil {
  display: grid; gap: clamp(.5rem, 1vw, .85rem); margin-top: var(--v6);

  --npil-scale: .8;
}

.npil__card { display: contents; }

.npil__i {
  position: relative; isolation: isolate; overflow: clip;
  background: var(--chalk);
  border: 1px solid var(--ink-15);
  border-left: 2px solid transparent;
  border-radius: 2px;
  padding: clamp(.85rem, 1.6vw, 1.25rem) clamp(1.4rem, 3vw, 2.4rem);
}

.npil__n {
  position: absolute; z-index: -1;
  right: clamp(.75rem, 2vw, 2rem); top: 50%; transform: translateY(-50%);
  font-family: var(--state); font-weight: 900;
  font-size: clamp(4.75rem, 8.2vw, 8rem); line-height: .8;
  letter-spacing: -.06em;
  color: var(--ink); opacity: .08;
  pointer-events: none; user-select: none;
}

.npil__h {
  margin: 0; font-family: var(--state); font-weight: 700;
  font-size: calc(var(--a1) * var(--npil-scale)); line-height: 1.02; letter-spacing: -.032em; color: var(--ink);
}
.npil__s {
  display: block; margin-top: .3rem;
  font-family: var(--state); font-weight: 500;
  font-size: calc(var(--a4) * var(--npil-scale)); line-height: 1.26; letter-spacing: -.012em; color: var(--ink-65);
  text-align: left; text-wrap: initial;
}
.npil__b p {
  margin: var(--v2) 0 0; font-size: var(--a6); line-height: 1.58; color: var(--ink-70);
  border-top: 1px solid var(--ink-15); padding-top: var(--v2); max-width: 60ch;
}

@media (min-width: 1100px) {

  .npil__sum { display: contents; }

  .npil__h { white-space: nowrap; }

  .npil__s { max-width: 11em; }

  .npil {
    --npil-scale: .7;
    grid-auto-rows: 1fr;
    grid-template-columns: max-content max-content minmax(0, 1fr);
  }
  .npil__i {
    display: grid; align-items: center;

    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    column-gap: clamp(2rem, 4.4vw, 4.25rem);
    padding-right: clamp(5.5rem, 8.5vw, 9rem);
  }
  .npil__s { margin-top: 0; }
  .npil__b { opacity: 0; }

  .npil__b { padding-inline: clamp(1.75rem, 4vw, 4.5rem); }
  .npil__b p { border-top: 0; padding-top: 0; margin-top: 0; max-width: 52ch; }
  @media (prefers-reduced-motion: no-preference) {
    .npil__b { transition: opacity .28s var(--ease); }
    .npil__i { transition: border-color .28s var(--ease); }
  }

  .npil__b { opacity: 0; }

  .npil__i .npil__h { color: rgba(21, 24, 27, .5); }
  .npil__i .npil__s { color: rgba(21, 24, 27, .62); }

  .npil__i .npil__h .ltr { color: rgba(21, 24, 27, .5); transition-delay: 0s; }

  .npil__i { border-left-color: transparent; }

  .npil:not(.npil--picked):not(.npil--live) .npil__i:first-child .npil__b { opacity: 1; }
  .npil:not(.npil--picked):not(.npil--live) .npil__i:first-child { border-left-color: var(--brand); }
  .npil:not(.npil--picked):not(.npil--live) .npil__i:first-child .npil__h { color: var(--ink); }
  .npil:not(.npil--picked):not(.npil--live) .npil__i:first-child .npil__s { color: var(--ink-65); }

  .npil--picked .npil__i.is-picked .npil__b,
  .npil--live   .npil__i.is-picked .npil__b { opacity: 1; }
  .npil--picked .npil__i.is-picked,
  .npil--live   .npil__i.is-picked { border-left-color: var(--brand); }
  .npil--picked .npil__i.is-picked .npil__h,
  .npil--live   .npil__i.is-picked .npil__h { color: var(--ink); }
  .npil--picked .npil__i.is-picked .npil__h .ltr,
  .npil--live   .npil__i.is-picked .npil__h .ltr,
  .npil:not(.npil--picked):not(.npil--live) .npil__i:first-child .npil__h .ltr {
    color: var(--ink);
  }
  @media (prefers-reduced-motion: no-preference) {
    .npil--picked .npil__i.is-picked .npil__h .ltr,
    .npil--live   .npil__i.is-picked .npil__h .ltr,
    .npil:not(.npil--picked):not(.npil--live) .npil__i:first-child .npil__h .ltr {
      transition-delay: calc(var(--i, 0) * 26ms);
    }
  }
  .npil--picked .npil__i.is-picked .npil__s,
  .npil--live   .npil__i.is-picked .npil__s { color: var(--ink-65); }

  @media (prefers-reduced-motion: no-preference) {

    .npil__s, .npil__h .ltr { transition: color .28s var(--ease); }
  }
}

.nf--ink .npil__i { background: var(--ink-lift-2, rgba(255,255,255,.04)); border-color: var(--chalk-line); }
.nf--ink .npil__n { color: var(--chalk); opacity: .1; }
.nf--ink .npil__h { color: var(--chalk); }
.nf--ink .npil__s { color: var(--chalk-40); }
.nf--ink .npil__b p { border-top-color: var(--chalk-line); color: var(--chalk-65); }

.nf__head--hero { font-size: var(--a0); max-width: 20ch; }

.nf--ink figcaption { color: var(--chalk-65); }
.nf--ink .qcard { border-color: var(--chalk-line); }

.nf__head + .nf__say { margin-top: var(--v4); }
.nf__turn { margin-top: var(--v6); }

.nf--ink .aud__lab { color: var(--chalk-40); }
.nf--ink .aud__grid { border-block-color: var(--chalk-line); }
.nf--ink .aud__col + .aud__col { border-top-color: var(--chalk-line); }
.nf--ink .aud__col h2 { color: var(--chalk); }
.nf--ink .aud__col p { color: var(--chalk-65); }
.nf--ink .aud__go a { color: var(--chalk); }
.nf--ink .aud__go a:hover, .nf--ink .aud__go a:focus-visible { border-bottom-color: var(--chalk); }
.nf--ink .arw i { background: var(--chalk); }

.nf__dateline {
  font-family: var(--work);
  font-size: var(--t-100);
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink-65);
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
}
.nf__dateline time { font: inherit; letter-spacing: inherit; }

@media (min-width: 861px) {
  #walk .nf__note,
  #reach .nf__note { font-size: calc(var(--a5) * 1.18); }
  #walk figcaption,
  #reach figcaption { font-size: calc(var(--t-100) * 1.15); }
}

#walk { position: relative; isolation: isolate; overflow: hidden; }
#walk::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;

  -webkit-mask-image: linear-gradient(to bottom, #000 0 340px, transparent 700px);
          mask-image: linear-gradient(to bottom, #000 0 340px, transparent 700px);
  background: url("assets/journal/first-street-napa-1500.webp") center top / 100% auto no-repeat scroll;
  opacity: .28;
  pointer-events: none;
}

#walk .nf__meta,
#walk .nf__meta b,
#walk .nf__tag,
#walk figcaption,
#walk .eyebrow { color: var(--ink); }

.nf--ink .nf__note strong { color: var(--chalk); }
.nf__note strong { font-weight: 600; }

.nf__grid { margin-top: var(--v5); }

.nf__grid--test { margin-top: var(--v6); }

@media (min-width: 861px) {

  .nmid--cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
                  column-gap: clamp(2rem, 5vw, 5rem); align-items: start; }
  .nmid--cols > div > .nf__note { max-width: none; }

#here > .wrap > .nf__note { margin-left: 0; }

.js #here [data-reveal],
.js #here [data-reveal].in { transform: none; }

  .nmid--cols > div > :first-child { margin-top: 0; }
}

.nf .nf__meta b { white-space: nowrap; }

.naud, .npil {
  --fold-open: .62s;
  --fold-ease: cubic-bezier(.65, .02, .28, 1);
}
.naud {
  margin: var(--v4) 0 0;
  border-bottom: 1px solid var(--ink-15);
}
.naud details { border-top: 1px solid var(--ink-15); }
.naud details:first-of-type { border-top: 0; }

.naud summary {
  display: grid; grid-template-columns: 1fr max-content;
  gap: clamp(1rem, 2vw, 1.5rem); align-items: center;

  padding-block: clamp(.85rem, 1.85vw, 1.65rem);
  cursor: pointer; list-style: none;
  font-family: var(--state); font-weight: 500;
  font-size: var(--a3); line-height: 1.24; letter-spacing: -.02em;

  color: rgba(21, 24, 27, .62);
}
.naud summary::-webkit-details-marker { display: none; }
.naud details[open] > summary { color: var(--ink); cursor: default; }
.naud details:not([open]) > summary:hover { color: var(--ink-70); }

.naud summary::after {
  --ch: clamp(9px, 1vw, 13px);
  content: ''; align-self: center; justify-self: end;
  width: var(--ch); height: var(--ch);
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(calc(var(--ch) * -.354)) rotate(45deg);
  opacity: .55;
}
.naud details[open] > summary::after {
  transform: translateY(calc(var(--ch) * .354)) rotate(-135deg);
}

@media (prefers-reduced-motion: no-preference) {
  .naud summary { transition: color var(--fold-open) var(--fold-ease); }
  .naud summary::after { transition: transform var(--fold-open) var(--fold-ease); }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (interpolate-size: allow-keywords) and selector(details::details-content) {
    .naud { interpolate-size: allow-keywords; }
    .naud details::details-content {
      block-size: 0; overflow: clip;
      transition: block-size var(--fold-open) var(--fold-ease),
                  content-visibility var(--fold-open) allow-discrete;
    }
    .naud details[open]::details-content { block-size: auto; }
  }
}

.naud__pane { padding-bottom: clamp(.9rem, 1.8vw, 1.35rem); }
.naud__head { display: none; }
.naud__p { margin: 0; }
.naud__p + .naud__p { margin-top: .5rem; }
.naud__k, .naud__f { display: block; font-family: var(--work); font-size: var(--a6); line-height: 1.5; }
.naud__k { color: var(--ink-70); }
.naud__f { color: var(--ink); }
.naud__lbl {
  display: block; margin-bottom: .15em;
  font-weight: 400; color: var(--ink-70);
  font-size: .78em; letter-spacing: .08em; text-transform: uppercase;
}
.naud__k, .naud__f { margin-bottom: .45em; }
.naud__f { margin-bottom: 0; }

.naud, .npil {
  --kb-char: 20ms;
  --kb-gap: 200ms;

  --kb-open: 380ms;
}

.npil {
  --kb-char: 12ms;

  --kb-open: 1080ms;
}
.naud__pane.is-typed .ltr { opacity: 0; }
.naud.in details[open] .naud__pane.is-typed .ltr {
  animation: kb-key 1ms linear both;
  animation-delay: calc(var(--kb-open)
                        + (var(--s, 0) + var(--i, 0)) * var(--kb-char)
                        + var(--l, 0) * var(--kb-gap));
}
@keyframes kb-key { from { opacity: 0 } to { opacity: 1 } }

.npil__b.is-typed { opacity: 1; }
.npil__b.is-typed .ltr { opacity: 0; }
.npil--picked .npil__i.is-picked .npil__b.is-typed .ltr,
.npil--live   .npil__i.is-picked .npil__b.is-typed .ltr,
.npil:not(.npil--picked):not(.npil--live) .npil__i:first-child .npil__b.is-typed .ltr {
  animation: kb-key 1ms linear both;
  animation-delay: calc(var(--kb-open) + var(--i, 0) * var(--kb-char));
}

@media (max-width: 1099.98px) {

  .npil__b {
    display: grid;
    grid-template-rows: minmax(0, 0fr);
  }
  .npil__b > * { overflow: hidden; min-height: 0; }
  .npil--picked .npil__i.is-picked .npil__b,
  .npil--live   .npil__i.is-picked .npil__b,
  .npil:not(.npil--picked):not(.npil--live) .npil__i:first-child .npil__b {
    grid-template-rows: minmax(0, 1fr);
  }

  .npil__s::after {
    content: '';
    display: inline-block; vertical-align: middle;
    width: 8px; height: 8px; margin-left: .6em;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: translateY(-.18em) rotate(45deg);
    opacity: .55;
  }
  .npil--picked .npil__i.is-picked .npil__s::after,
  .npil--live   .npil__i.is-picked .npil__s::after,
  .npil:not(.npil--picked):not(.npil--live) .npil__i:first-child .npil__s::after {
    transform: translateY(.1em) rotate(-135deg);
  }

  @media (prefers-reduced-motion: no-preference) {
    .npil__b { transition: grid-template-rows var(--fold-open) var(--fold-ease); }
    .npil__s::after { transition: transform var(--fold-open) var(--fold-ease); }
  }
}

@media (min-width: 861px) {

  .naud__head {
    display: grid; margin: 0 0 .5rem;
    grid-template-columns: 1fr 1fr; column-gap: clamp(1.5rem, 3vw, 2.75rem);
    font-family: var(--work); font-size: .78rem; letter-spacing: .08em;
    text-transform: uppercase; color: var(--ink-70);
  }
  .naud__p {
    display: grid; grid-template-columns: 1fr 1fr;
    column-gap: clamp(1.5rem, 3vw, 2.75rem); align-items: start;
  }
  .naud__k, .naud__f { margin-bottom: 0; }
  .naud__f { border-left: 1px solid var(--ink-15); padding-left: clamp(1rem, 2vw, 1.5rem); }
  .naud__lbl { position: absolute; width: 1px; height: 1px; overflow: hidden;
               clip-path: inset(50%); white-space: nowrap; }
}

.nf--ink .naud, .nf--ink .naud details { border-color: var(--chalk-line); }

.nf--ink .naud summary { color: var(--chalk-65); }
.nf--ink .naud details[open] > summary { color: var(--chalk); }
.nf--ink .naud__k { color: var(--chalk-65); }
.nf--ink .naud__f { color: var(--chalk); border-left-color: var(--chalk-line); }
.nf--ink .naud__head, .nf--ink .naud__lbl { color: var(--chalk-65); }

@media (max-width: 860px) {
  .nmid--cols > div { display: contents; }
  .nmid--cols { display: flex; flex-direction: column; }
  #owners .nf__head    { order: 1; }
  #owners .naud        { order: 3; }

  #owners .nf__say     { order: 4; }

  #owners .nf__note    { order: 5; }
  #owners .nfric__lead { order: 2; }
  #owners .nmid--cols > div > .nf__note:last-child { order: 6; }
}

#owners .nf__say { font-size: var(--a3); line-height: 1.24; }

@media (min-width: 861px) {

  .nf__grid > .nf__say, .nf__grid > .nf__note,
  .nf__grid > div > :first-child { margin-top: 0; }

  .nf__note--right { margin-left: var(--fold2); }
}

.nf .qa { max-width: none; }
.nf .qa details p { max-width: 45ch; }

@media (min-width: 861px) {

  .nf > .wrap > .nf__say + .nf__note { margin-left: var(--fold2); }

  .nover__cap { grid-column: 2; text-align: left; margin: var(--v4) 0 0; max-width: 40ch; }
  .nover__cap b { text-align: left; }
}

.nhero2 { display: grid; gap: var(--v4); margin-top: var(--v4); }

.nhero2__main .nf__note { max-width: none; font-size: var(--a5); line-height: 1.62; }

@media (min-width: 1000px) {
  .nhero2__main .nf__note > p { text-align: justify; }
}
.nhero2 figure { margin: 0; }
.nhero2 img { display: block; width: 100%; height: auto; }

.nhero2__rail .nf__say { font-size: clamp(3.1875rem, 1.25vw + 2.25rem, 3.9375rem); }
@media (min-width: 861px) {
  .nhero2 {

    grid-template-columns: minmax(0, 1fr) minmax(0, 1.58fr);
    column-gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
  }
  .nhero2 { align-items: start; }

  .nhero2__rail { position: sticky; top: calc(var(--header) + 2rem); }
  .nhero2 .nf__say { margin-left: 0; margin-top: var(--v4); max-width: 26ch; }

  .nhero2 .nf__head--hero { font-size: min(var(--a0), 5.35rem); line-height: 1; letter-spacing: -.045em; }
}

.napa .cta.band { padding-block: clamp(3.5rem, 8vw, 6rem); }

@media (min-width: 861px) {
  .nf__grid > .nf__head { margin-top: 0; }
}

.nf__stair { margin-top: var(--v5); display: grid; gap: var(--v5); }
.nf__stair .nf__say { margin: 0; max-width: none; }

.nf__stair .nf__head { margin: 0; max-width: 11em; }

.nf__stair > :nth-child(2) .nf__note { max-width: 59ch; line-height: 1.45; }

.nf__stair .nf__note { margin: var(--v4) 0 0; max-width: 36ch; font-size: var(--a6); line-height: 1.6; }
@media (min-width: 861px) {
  .nf__stair {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--foldgap);
    align-items: start;
  }

  .nf__stair > :nth-child(2) {

    margin-top: clamp(5.5rem, 7.6vw, 8.5rem);

    padding-left: clamp(1.25rem, 3vw, 3.25rem);
  }
}

@media (min-width: 1200px) {

  .nf__stair > :first-child > .nf__note { margin-left: calc(var(--a1) * 3.19); }
}

@media (max-width: 860px) {
  .nf__stair > :first-child > .nf__note,
  .nf__stair > :nth-child(2) > .nf__note {
    max-width: 28rem;
    margin-top: var(--v5);
  }
}

.nmid { width: min(100%, 84ch); margin: var(--v5) auto 0; font-size: var(--a5); }

.nmid .nf__head { margin: 0; max-width: none; }
@media (min-width: 861px) {

  #walk .nmid .nf__head,
  #reach .nmid .nf__head { font-size: var(--a0); }
}

.nmid .nf__say  { margin: var(--v4) 0 0; margin-left: 0; max-width: 42ch; }
.nmid .nf__note { margin: var(--v4) 0 0; margin-left: 0; max-width: 50ch; }

@media (min-width: 950px) {
  .nmid {
    width: 100%; max-width: none; margin-inline: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
  }
  .nmid .nf__head { grid-column: 1; grid-row: 1 / span 2; }
  .nmid .nf__say  { grid-column: 2; grid-row: 1; margin-top: 0; max-width: none; }
  .nmid .nf__note { grid-column: 2; grid-row: 2; max-width: 46ch; }

  #reach .nmid .nf__say  { grid-column: 1; grid-row: 2; margin-top: var(--v4); max-width: none; }
  #reach .nmid .nf__note { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }

  .nmid--qa .qa { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }

  .nmid--stat { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
  .nmid--stat .nf__note--a { grid-column: 1; grid-row: 1; margin-top: 0; max-width: 44ch; }

  .nmid--stat .nf__note--b { grid-column: 2; grid-row: 1; margin-top: 0; max-width: 48ch; }
}

.js .nmid--stat .nf__note[data-reveal],
.js .nmid--stat .nf__note[data-reveal].in {
  opacity: 1;
  transform: none;
  transition: none;
  animation: none;
}

.napa__lead { overflow: clip; }
.js .napa__lead[data-reveal] { transform: none; }
.js .napa__lead[data-reveal] img { transform: scale(1.04); }
.js .napa__lead[data-reveal].in img { transform: none; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .js .napa__lead[data-reveal] img {
      animation-name: lead-settle;
      animation-duration: auto;
      animation-fill-mode: both;
      animation-timing-function: var(--ease);
      animation-timeline: view();

      animation-range: cover 5% cover 72%;
    }
    @keyframes lead-settle {
      from { transform: scale(1.04); }
      to   { transform: none; }
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .napa__lead[data-reveal] img { transform: none; transition: none; }
}

#ai .nf__head {

  max-width: 13.5em;
  margin-inline: auto;

  font-size: min(clamp(2.33rem, 6.85vw, 8.3rem), 9.4vh);

  text-align: center;
}

@property --ngrow-n {
  syntax: '<integer>';
  initial-value: 45;
  inherits: false;
}

.ngrow {
  margin-top: var(--v6); padding-bottom: var(--v4);
  border-bottom: 1px solid rgba(240, 239, 234, .22);
}

.ngrow__pinner { display: grid; gap: clamp(.9rem, 2.2vw, 1.65rem); }

.ngrow__pinner .nf__meta { margin-bottom: 0; }

.ngrow__pinner .nfig { row-gap: var(--v3); }

.ngrow__cols {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  max-width: 72rem;
  margin-inline: auto;
  width: 100%;
}
@media (min-width: 861px) {
  .ngrow__cols {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(2rem, 5vw, 4.5rem);
  }

  @supports (grid-template-rows: subgrid) {
    .ngrow__cols {
      grid-template-rows: auto auto;
      align-items: stretch;

      column-gap: clamp(2rem, 5vw, 4.5rem);
      row-gap: clamp(1rem, 2vw, 1.75rem);
    }
    .ngrow__plot,
    .ngrow__cols .nfig {
      grid-row: 1 / span 2;
      grid-template-rows: subgrid;
    }

    .ngrow__cols .nfig { row-gap: normal; }
    .ngrow__cols .nfig__stat { align-self: end; }
    .ngrow__plot .ngrow__axis { align-self: start; }
  }
}

.ngrow__plot { display: grid; }

.ngrow__cols .nfig__src { max-width: none; }

.ngrow__pinner .ngrow__cols { margin-top: clamp(2rem, 5.5vw, 4.5rem); }
.ngrow__pinner .nf__head { margin: 0; }

.ngrow__lane {
  position: relative; container-type: inline-size;

  min-height: clamp(4rem, 34cqw, 12rem);
  display: flex; align-items: flex-end;
}

.ngrow__fig {
  font-family: var(--state); font-weight: 900; line-height: .82;
  letter-spacing: -.075em; color: var(--chalk);

  font-size: clamp(3.5rem, 40cqw, 14rem);
  font-variant-numeric: tabular-nums;
  will-change: transform;

  transform-origin: left center;
}

.ngrow__axis { position: relative; height: 3.4rem; }
.ngrow__axis::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0;
  height: 1px; background: rgba(240, 239, 234, .18);
}

.ngrow__minor {
  position: absolute; top: 0; left: var(--at);
  width: 1px; height: .55rem;
  background: rgba(240, 239, 234, .22);
  transform: translateX(-50%);
}
.ngrow__tick { position: absolute; top: 0; left: var(--at); transform: translateX(-50%); display: grid; justify-items: center; gap: .5rem; }

.ngrow__tick--start { transform: none; justify-items: start; }

.ngrow__tick--end { transform: translateX(-100%); justify-items: end; }
.ngrow__tick i { display: block; width: 1px; height: .85rem; background: rgba(240, 239, 234, .38); }

.ngrow__tick b {
  font-family: var(--work); font-size: var(--a7); font-weight: 500;
  text-transform: uppercase; letter-spacing: .18em; color: rgba(240, 239, 234, .55);
  white-space: nowrap;
}

.ngrow__tick b { color: var(--brand-lite); }
.ngrow__tick i { background: rgba(1, 192, 254, .45); }

.ngrow__tick--now i { background: var(--ember); }
.ngrow__tick--now b { color: var(--ember); }

.ngrow__fig { margin-left: auto; }

@supports (animation-timeline: view()) {

  @media (min-width: 861px) and (min-height: 900px) and (prefers-reduced-motion: no-preference) {
    .js .ngrow {

      height: 260vh;
      view-timeline-name: --fold04;
      view-timeline-axis: block;
      border-bottom: 0; padding-bottom: 0;
    }

    .js .ngrow .ngrow__pinner { position: sticky; top: 8vh; padding-bottom: var(--v4); }
    .js .ngrow .ngrow__pinner::after {
      content: ''; position: absolute; left: 0; right: 0; bottom: 0;
      height: 1px; background: rgba(240, 239, 234, .22);
      transform-origin: center;
      animation-name: ngrow-rule;
      animation-duration: auto;
      animation-fill-mode: both;
      animation-timing-function: var(--ease);
      animation-timeline: --fold04;

      animation-range: contain 14% contain 60%;
    }

    .js .ngrow .ngrow__fig {
      margin-left: 0; transform: none;
      counter-reset: ngrow var(--ngrow-n);

      animation-name: ngrow-climb;
      animation-duration: auto;
      animation-fill-mode: both;
      animation-timing-function: linear;
      animation-timeline: --fold04;

      animation-range: contain 14% contain 52%;
    }

    .js .ngrow .ngrow__tick {
      animation-name: ngrow-tick;
      animation-duration: auto;
      animation-fill-mode: both;
      animation-timing-function: var(--ease);
      animation-timeline: --fold04;
      animation-range: contain 2% contain 14%;
    }
    @keyframes ngrow-tick { from { opacity: 0; } to { opacity: 1; } }

    .js .ngrow .ngrow__axis::before {
      transform-origin: center;
      animation-name: ngrow-rule;
      animation-duration: auto;
      animation-fill-mode: both;
      animation-timing-function: var(--ease);
      animation-timeline: --fold04;
      animation-range: contain 2% contain 14%;
    }
    @keyframes ngrow-rule { from { transform: scaleX(0); } to { transform: scaleX(1); } }

    .js .ngrow .ngrow__minor {
      animation-name: ngrow-tick;
      animation-duration: auto;
      animation-fill-mode: both;
      animation-timing-function: var(--ease);
      animation-timeline: --fold04;
      animation-range: contain 6% contain 16%;
    }

    .js .ngrow .nfig[data-reveal],
    .js .ngrow .nfig[data-reveal].in { opacity: 1; transform: none; transition: none; }
    .js .ngrow .nfig {
      animation-name: ngrow-cite;
      animation-duration: auto;
      animation-fill-mode: both;
      animation-timing-function: var(--ease);
      animation-timeline: --fold04;
      animation-range: contain 52% contain 68%;
    }

    @keyframes ngrow-cite {
      from { opacity: 0; }
      to   { opacity: 1; }
    }
    .js .ngrow .ngrow__lit { display: none; }
    .js .ngrow .ngrow__fig::after { content: counter(ngrow) '%'; }

    @keyframes ngrow-climb {
      from { --ngrow-n: 6;  opacity: 1; transform: translateX(0) scale(.32); }

      to   { --ngrow-n: 45; opacity: 1; transform: translateX(calc(100cqw - 100%)) scale(1); }
    }

    .js .ngrow .nf__head {
      animation-name: ngrow-fly;
      animation-duration: auto;
      animation-fill-mode: both;
      animation-timing-function: linear;
      animation-timeline: --fold04;
      animation-range: entry 52% entry 100%;
    }
    @keyframes ngrow-fly {
      from { opacity: 0; transform: translateY(2.6rem); }
      to   { opacity: 1; transform: translateY(0); }
    }

  }
}

.nfig {
  margin: 0; display: grid; gap: var(--v4) clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.nfig__stat {
  margin: 0;
  font-family: var(--state); font-weight: 500;

  font-size: clamp(1.15rem, 1rem + .75vw, 1.75rem);
  line-height: 1.55; text-align: left; letter-spacing: -.01em;
  color: var(--chalk); text-wrap: pretty;
}

.nfig__src {
  display: grid; gap: .45em;
  border-top: 1px solid rgba(240, 239, 234, .22);
  padding-top: var(--v3); max-width: 46ch;
}

.nfig__src cite { font-style: normal; font-size: clamp(.9rem, .8rem + .28vw, 1.1rem); }
.nfig__src cite a { color: var(--chalk); text-underline-offset: .22em; }

.nfig__note { font-size: clamp(.75rem, .72rem + .1vw, .85rem); line-height: 1.6; color: rgba(240, 239, 234, .55); }

.ty .aud { margin-top: 0; margin-bottom: 0; padding-bottom: calc(var(--band) * 1.5); }

.ty .figure { font-size: var(--a0); }

.npil__eyebrow {
  margin: var(--v5) 0 var(--v3);
  font-family: var(--state); font-size: var(--a4); font-weight: 600;
  line-height: 1.2; letter-spacing: -.01em; text-transform: none;
  color: var(--ink);
}
.nf--ink .npil__eyebrow { color: var(--chalk-65); }

@media (min-width: 1100px) {
  .npil--car {

    container-type: inline-size;

    perspective: 900px;
    --car-w: 42cqw;

    --car-h: clamp(17rem, 23cqw, 22rem);

    --car-move: .95s;
    --car-ease: cubic-bezier(.42, .02, .16, 1);
    --car-r: 62cqw;
    --car-arc: 19deg;

    --car-lift: calc(var(--car-h) * .15);
    --car-tilt: 2.8deg;
    --car-bar: 3.5rem;
    --car-air: 2.75rem;
    --car-num: 4.75rem;
    display: block; position: relative;
    height: calc(var(--car-h) + var(--car-lift) + var(--car-air)
                 + var(--car-num) + var(--car-air) + var(--car-bar) + 1.5rem);
    gap: 0;
  }

  .npil--car .npil__i {
    position: absolute; inset: 0;
    display: block; padding: 0; border: 0; background: none;
    overflow: visible; pointer-events: none;
    isolation: auto; z-index: var(--z, 1);

    perspective: 900px;
  }

  .npil--car .npil__card {
    display: block; position: absolute; top: 0; left: 50%;
    width: var(--car-w); height: var(--car-h);
    box-sizing: border-box;

    padding: clamp(1.8rem, 3.5cqw, 3.1rem) clamp(1.9rem, 3.7cqw, 3.3rem);
    background: var(--ink);

    border: 1px solid rgba(240, 239, 234, .22);

    border-radius: 14px;
    overflow: clip; isolation: isolate;
    pointer-events: auto; cursor: pointer;
    transform: translateX(-50%)
               translate3d(var(--x, 0), var(--y, 0), var(--zd, 0))
               rotateY(var(--ry, 0deg)) rotate(var(--rot, 0deg));
    z-index: var(--z, 1);
  }

  .npil--car .npil__card::after {
    content: ''; position: absolute; inset: 0; z-index: 3;
    background: var(--bone);
    opacity: var(--scrim, 0);
    pointer-events: none;
  }

  .npil--car .npil__sum { opacity: var(--o, 1); }
  .npil--car .npil__n { opacity: calc(.08 * var(--o, 1)); }

  .npil--car .npil__i .npil__h,
  .npil--car .npil__i .npil__h .ltr { color: var(--chalk-65); }
  .npil--car .npil__i .npil__s { color: var(--chalk-65); }
  .npil--car.npil--picked .npil__i.is-picked .npil__h,
  .npil--car.npil--live   .npil__i.is-picked .npil__h,
  .npil--car.npil--picked .npil__i.is-picked .npil__h .ltr,
  .npil--car.npil--live   .npil__i.is-picked .npil__h .ltr,
  .npil--car:not(.npil--picked):not(.npil--live) .npil__i:first-child .npil__h,
  .npil--car:not(.npil--picked):not(.npil--live) .npil__i:first-child .npil__h .ltr { color: var(--chalk); }
  .npil--car.npil--picked .npil__i.is-picked .npil__s,
  .npil--car.npil--live   .npil__i.is-picked .npil__s,
  .npil--car:not(.npil--picked):not(.npil--live) .npil__i:first-child .npil__s { color: var(--chalk-65); }
  .npil--car .npil__b p { color: var(--chalk-65); border-top-color: var(--chalk-line); }
  .npil--car .npil__n { color: var(--chalk); }

  .npil--car .npil__n { font-size: 7rem; right: .9rem; top: 1.6rem; transform: none; opacity: .1; }

  .npil--car .npil__h { font-size: calc(var(--a2) * 1.05); line-height: 1.12; white-space: normal; }
  .npil--car .npil__s { max-width: none; font-size: calc(var(--a5) * 1.08); line-height: 1.45; margin-top: .55rem; }

  .npil--car .npil__b {
    position: static; transform: none;
    width: auto; margin-top: 1.1rem;

    padding-inline: 0;
    display: block; grid-template-rows: none;
  }
  .npil--car .npil__b p {
    margin: 0; padding-top: 1.1rem; max-width: none;
    border-top: 1px solid var(--chalk-line);

    line-height: 1.75;
  }

  .npil__bar {
    position: absolute; left: 0; right: 0;
    top: calc(var(--car-h) + var(--car-lift) + var(--car-air)
              + var(--car-num) + var(--car-air));
    height: var(--car-bar);
    display: flex; align-items: center; justify-content: center;
    gap: clamp(1rem, 2vw, 1.75rem);
  }
  .npil__nav {
    width: 3rem; height: 3rem;
    display: grid; place-items: center;
    background: var(--chalk); border: 1px solid var(--ink-30, rgba(21,24,27,.3));
    border-radius: 50%; color: var(--ink); cursor: pointer;
    transition: border-color var(--fold-open) var(--fold-ease),
                background-color var(--fold-open) var(--fold-ease);
  }
  .npil__nav:hover { border-color: var(--ink-70); background: var(--bone-deep); }

  .npil__nav::before {
    content: ''; width: 9px; height: 9px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    opacity: .7;
  }
  .npil__nav[data-car="-1"]::before { transform: translateX(2px) rotate(135deg); }
  .npil__nav[data-car="1"]::before  { transform: translateX(-2px) rotate(-45deg); }

  .npil__dots { display: flex; align-items: center; gap: .4rem; list-style: none; margin: 0; padding: 0; }
  .npil__dot {
    display: block; width: 8px; height: 8px; padding: 0;
    background: rgba(21, 24, 27, .28); border: 0; border-radius: 99px;
    cursor: pointer;
    transition: width var(--fold-open) var(--fold-ease),
                background-color var(--fold-open) var(--fold-ease);
  }
  .npil__dot[aria-current="true"] { width: 30px; background: var(--ink); }

  .npil__count {
    position: absolute; left: 0; right: 0;
    top: calc(var(--car-h) + var(--car-lift) + var(--car-air));
    height: var(--car-num);
    margin: 0; text-align: center;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
  }
  .npil__count b {
    display: block;
    font-family: var(--state); font-weight: 800;
    font-size: 3.1rem; line-height: 1; letter-spacing: -.03em;
    color: var(--ink);
  }
  .npil__count span {
    display: block; margin-top: .3rem;
    font-family: var(--work); font-size: .8rem; letter-spacing: .12em;
    text-transform: uppercase; color: var(--ink-70);
  }

  @media (prefers-reduced-motion: no-preference) {
    .npil--car .npil__card {
      transition: transform var(--car-move) var(--car-ease),
                  border-color var(--car-move) var(--car-ease);
    }
    .npil--car .npil__sum,
    .npil--car .npil__n { transition: opacity var(--car-move) var(--car-ease); }
    .npil--car .npil__card::after { transition: opacity var(--car-move) var(--car-ease); }
  }
}

.nf--ink .npil__nav { border-color: var(--chalk-line); color: var(--chalk); }
.nf--ink .npil__dot { background: var(--chalk-line); }
.nf--ink .npil__dot[aria-current="true"] { background: var(--chalk); }
.nf--ink .npil__count { color: var(--chalk-65); }

#here .pull {
  margin: var(--v4) 0 0; padding-left: clamp(1rem, 2.2vw, 1.6rem);
  border-left: 1px solid var(--ink-15);
  font-size: var(--a5); line-height: 1.45;
}
#here .pull p { margin: 0; }
#here .pull strong { font-weight: 700; }