/* Components — nav, arrow button, numbered entries, criteria list, fit panels. */

/* --- Nav: wordmark left, mono uppercase links right --- */
.pt-nav { position: fixed; inset: 0 0 auto 0; z-index: 40; display: flex;
  align-items: center; justify-content: space-between; padding: 22px var(--gutter);
  text-shadow: 0 1px 3px rgba(21, 21, 21, 0.3); }
.pt-nav__brand { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 500; color: var(--white); }
.pt-nav__brand img { height: 18px; filter: invert(1); }
.pt-nav__links { display: flex; gap: 28px; }
.pt-nav__links a { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--white); transition: color var(--t-micro) ease-out; }
.pt-nav__links:has(a:hover) a { color: var(--mid); }
.pt-nav__links:has(a:hover) a:hover { color: var(--white); }

/* --- Button: bordered, text slides right, left arrow slides in --- */
.pt-btn { position: relative; display: inline-flex; align-items: center; gap: 14px;
  padding: 22px 30px; border: 1px solid var(--edge); border-radius: 999px;
  font-size: 15px; overflow: hidden; cursor: pointer; background: transparent; color: var(--white);
  transition: border-color var(--t-micro) ease-out; }
.pt-btn:hover { border-color: rgba(255, 255, 255, 0.6); }
.pt-btn__text { transition: transform var(--t-micro) var(--ease-power); }
.pt-btn__arrow { display: block; width: 14px; transition: transform var(--t-micro) var(--ease-power), opacity var(--t-micro) var(--ease-power); }
.pt-btn__arrow--left { position: absolute; left: 30px; transform: translateX(-42px); opacity: 0; }
.pt-btn:hover .pt-btn__text { transform: translateX(26px); }
.pt-btn:hover .pt-btn__arrow--right { transform: translateX(42px); opacity: 0; }
.pt-btn:hover .pt-btn__arrow--left { transform: translateX(0); opacity: 1; }
.pt-btn--dark { color: var(--dark); border-color: rgba(21, 21, 21, 0.35); }
.pt-btn--dark:hover { border-color: rgba(21, 21, 21, 0.7); }

/* --- Arrow link: arrow loops out and back on hover --- */
.pt-arrowlink { display: inline-flex; align-items: baseline; gap: 12px; }
.pt-arrowlink .pt-alarrow { display: inline-block; overflow: hidden; width: 0.62em; height: 0.62em; }
.pt-arrowlink .pt-alarrow svg { width: 100%; height: 100%; }
@keyframes arrow-loop { 0% { transform: translate(0, 0); } 49% { transform: translate(120%, -120%); opacity: 1; }
  50% { transform: translate(-120%, 120%); opacity: 0; } 51% { opacity: 1; } 100% { transform: translate(0, 0); } }
.pt-arrowlink:hover .pt-alarrow svg { animation: arrow-loop var(--t-move) var(--ease-power); }

/* --- Numbered section label: mono, offset, gray --- */
.pt-num { font-family: var(--mono); font-size: 12px; color: var(--mid);
  display: inline-block; transform: translateY(-1.4em); margin-right: 14px; }

/* --- Criteria list rows (right column of the sticky split) --- */
.pt-crit { display: flex; flex-direction: column; gap: clamp(64px, 9vh, 110px); }
.pt-crit__item h3 { color: var(--white); margin-bottom: 14px; }
.pt-crit__item p { color: var(--bone-2); font-size: 16.5px; line-height: 1.45; max-width: 44ch; margin-bottom: 14px; }
.pt-crit__item .mono { color: var(--mid); }

/* --- Staggered numbered entries (pilot steps) --- */
.pt-step { max-width: 460px; }
.pt-step h3 { color: var(--bone); }
.pt-step p { font-family: var(--mono); font-size: 13px; line-height: 1.65; color: var(--mid); margin-top: 16px; }
.pt-step--right { margin-left: auto; }

/* --- Fit panels: corner-bracketed, no boxes --- */
.pt-fit { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); }
.pt-fit__col { padding-top: 24px; }
.pt-fit__col .mono--caps { color: var(--mid); display: block; margin-bottom: 28px; }
.pt-fit__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.pt-fit__col li { font-size: 17px; line-height: 1.4; color: var(--bone-2); padding-left: 22px; position: relative; }
.pt-fit__col li::before { content: ''; position: absolute; left: 0; top: 0.52em; width: 7px; height: 1px; background: var(--mid); }
.pt-fit__col--out li { color: var(--mid); }

/* --- Quote block: statement, mono attribution --- */
.pt-quote p { font-family: var(--mono); font-size: 13px; line-height: 1.65; color: var(--bone-2); max-width: 52ch; }
.pt-quote cite { display: block; margin-top: 18px; font-family: var(--mono); font-style: normal;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mid); }

@media (max-width: 820px) {
  .pt-nav__links { gap: 16px; }
  .pt-fit { grid-template-columns: 1fr; }
  .pt-step--right { margin-left: 0; }
}

/* --- Word-split hero intro (reference: per-word tweened rise) --- */
@keyframes pt-word-in { from { opacity: 0; transform: translateY(0.4em); } }
@keyframes pt-fade-in { from { opacity: 0; transform: translateY(16px); } }
html.js .pt-hero__inner h1 .pt-w { display: inline-block;
  animation: pt-word-in 0.8s var(--ease-out3) both; animation-delay: calc(200ms + 110ms * var(--i)); }
html.js .pt-hero__sub { animation: pt-fade-in 0.9s var(--ease-out3) both 850ms; }
html.js .pt-hero__tag { animation: pt-fade-in 0.9s var(--ease-out3) both 1000ms; }

/* --- Group reveals: children rise with a stagger (reference: line-split tweens) --- */
html.js .reveal-group > * { opacity: 0; transform: translateY(26px);
  transition: opacity var(--t-move) var(--ease-out3), transform var(--t-move) var(--ease-out3); }
html.js .reveal-group.is-in > * { opacity: 1; transform: none; }
html.js .reveal-group > *:nth-child(2) { transition-delay: 90ms; }
html.js .reveal-group > *:nth-child(3) { transition-delay: 180ms; }
html.js .reveal-group > *:nth-child(4) { transition-delay: 270ms; }
html.js .reveal-group > *:nth-child(n+5) { transition-delay: 360ms; }

/* --- Nav backdrop: appears only while dark content runs beneath the nav --- */
.pt-navbg { position: fixed; top: 0; left: 0; right: 0; height: 72px; z-index: 39;
  background: rgba(21, 21, 21, 0.72); backdrop-filter: blur(10px); opacity: 0;
  pointer-events: none; transition: opacity var(--t-micro) ease-out; }
.pt-navbg.is-on { opacity: 1; }

/* --- Unseen scrollbar: visible only while scrolling --- */
.pt-sb { position: fixed; top: 8px; bottom: 8px; right: 5px; width: 2px; z-index: 50;
  opacity: 0; pointer-events: none; transition: opacity var(--t-micro) ease-out; }
.pt-sb.show { opacity: 1; }
.pt-sb__thumb { position: absolute; top: 0; width: 100%; height: 64px;
  background: rgba(155, 155, 155, 0.9); border-radius: 2px; }