/* Sections — one persistent canvas world; content floats over it as a single body. */

/* --- The world: fixed surface canvas behind everything --- */
.pt-world { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
html:not(.js) .pt-world { display: none; }

/* --- Hero: pinned dark stage over the world. Fully opaque veil — the
       semi-transparent version let the world's mesh/contour rows bleed
       through as faint horizontal streaks. 320vh scroll run for the pinned
       "We source." / "You decide." sequence; no-JS keeps a solid dark hero. --- */
.pt-hero { position: relative; z-index: 1; height: 100svh; background: var(--dark); }
html.js .pt-hero { height: calc(100svh + 220vh);
  background: linear-gradient(to bottom, #1a1a19 0, #151514 45%, #181817 100%); }
.pt-hero__stage { position: sticky; top: 0; height: 100svh; min-height: 620px; }
/* topology-style hero: giant two-line headline bottom-left, short description
   to its right on the same baseline, hairline footer rule beneath both */
.pt-hero__inner { position: relative; height: 100%; display: flex;
  flex-direction: row; align-items: flex-end; justify-content: space-between;
  gap: clamp(24px, 4vw, 80px); padding: 0 var(--gutter) clamp(72px, 11vh, 130px); }
.pt-hero__inner h1 { color: var(--white); max-width: 12ch; flex: 0 1 auto;
  font-size: clamp(46px, 8.5vw, 140px); line-height: 0.95; letter-spacing: -0.005em;
  text-shadow: 0 2px 6px rgba(21, 21, 21, 0.22), 0 8px 40px rgba(21, 21, 21, 0.3); }
.pt-hero__sub { margin: 0 0 0.6em; max-width: 26ch; flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.92); font-size: clamp(17px, 1.5vw, 23px); line-height: 1.35;
  text-shadow: 0 1px 3px rgba(21, 21, 21, 0.3), 0 4px 18px rgba(21, 21, 21, 0.35); }
/* hero footer: hairline rule, wordmark left, explore cue right — white mono
   over the dark hero, same treatment as the nav */
.pt-hero__foot { position: absolute; bottom: 0; left: var(--gutter); right: var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 0 20px; border-top: 1px solid rgba(255, 255, 255, 0.28); }
.pt-hero__foot .mono, .pt-hero__foot a { color: rgba(255, 255, 255, 0.8); }
.pt-hero__foot a:hover { color: var(--white); }
/* pinned statements: swapped in by scroll progress while the stage holds;
   h1 scale, centered in the viewport. JS drives opacity/motion. */
.pt-hero__say h2 { position: absolute; left: var(--gutter); right: var(--gutter);
  top: 50%; margin-top: -0.5em; text-align: center; color: var(--white); opacity: 0;
  text-shadow: 0 2px 6px rgba(21, 21, 21, 0.28), 0 8px 40px rgba(21, 21, 21, 0.38);
  font-size: clamp(30px, 4.8vw, 72px); line-height: 0.92; letter-spacing: -0.01em;
  will-change: transform, opacity; }
html:not(.js) .pt-hero__say { display: none; }
@media (prefers-reduced-motion: reduce) { .pt-hero__say { display: none; } }

/* --- Editorial core: near-opaque dark body with tall soft fades at both ends,
       so the world shows through the seams and nothing reads as a hard section cut --- */
.pt-core { position: relative; z-index: 1; background: var(--dark); }
html.js .pt-core { background: linear-gradient(to bottom,
  rgba(21, 21, 21, 0) 0, rgba(21, 21, 21, 0.97) 16vh,
  rgba(21, 21, 21, 0.97) calc(100% - 22vh), rgba(21, 21, 21, 0) 100%); }

/* About: two numbered blocks, staggered; left indent clears the window edge,
   right keeps the standard gutter (the shorthand's 0 used to zero both) */
.pt-about { padding: clamp(96px, 16vh, 200px) var(--gutter) clamp(64px, 10vh, 140px) clamp(48px, 8vw, 160px); }
.pt-about__block { max-width: 520px; margin-bottom: clamp(80px, 14vh, 180px); }
.pt-about__block--right { margin-left: auto; }
.pt-about__block h3 { color: var(--bone); margin-bottom: 20px; }
.pt-about__block p { font-family: var(--mono); font-size: 13px; line-height: 1.7; color: var(--bone-2); }

/* --- Criteria: sticky giant title left, scrolling list right --- */
.pt-split { display: grid; grid-template-columns: minmax(0, 15fr) minmax(0, 13fr);
  gap: clamp(32px, 6vw, 120px); padding-bottom: clamp(120px, 18vh, 260px); }
.pt-split__titlewrap { position: relative; }
.pt-split__title { position: sticky; top: 34vh; }
.pt-split__title .mono { display: block; margin-bottom: 18px; color: var(--mid); }

/* --- Pilot steps: staggered numbered entries --- */
.pt-pilot { display: flex; flex-direction: column; gap: clamp(72px, 12vh, 150px);
  padding-bottom: clamp(120px, 18vh, 240px); }

/* --- Fit + quote --- */
.pt-fit-sec { padding-bottom: clamp(120px, 18vh, 240px); }
.pt-fit-sec .pt-rule { margin-bottom: clamp(48px, 8vh, 96px); }
.pt-quote-sec { padding-bottom: clamp(120px, 18vh, 240px); display: flex; justify-content: center; }
.pt-quote-sec .pt-quote { text-align: center; }
.pt-quote-sec .pt-quote p { margin-inline: auto; }

/* --- Close: transparent over the brightened world; opaque fallback without JS --- */
.pt-close { position: relative; z-index: 1; min-height: 92svh; display: flex;
  align-items: center; justify-content: center; text-align: center; background: #edebe6; }
html.js .pt-close { background: transparent; }
.pt-close__inner { position: relative; z-index: 1; display: flex; flex-direction: column;
  align-items: center; gap: 32px; padding: 0 var(--gutter); }
.pt-close__inner h2 { color: var(--dark); max-width: 22ch; font-size: clamp(20px, 2vw, 30px); line-height: 1.18; letter-spacing: -0.005em; }
.pt-close__foot { position: absolute; bottom: 0; left: 0; right: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px var(--gutter); }
.pt-close__foot, .pt-close__foot a { font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase; color: rgba(21, 21, 21, 0.55); }
.pt-close__foot a:hover { color: var(--dark); }
.pt-close__foot nav { display: flex; gap: 22px; }

@media (max-width: 900px) {
  .pt-split { grid-template-columns: 1fr; }
  .pt-split__title { position: static; margin-bottom: 56px; }
  .pt-about__block--right { margin-left: 0; }
  .pt-hero__inner { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 20px; }
  .pt-hero__sub { margin-bottom: 0; }
}