/* ==========================================================================
   NSR prototype - imagery layer (round 3)
   The page was correct but empty, and its abstract diagrams (signal bands, hairline art) did not explain themselves. Every section now carries a
   photograph that says what the section is about: stock photography under a free licence (assets/photos/CREDITS.md), the founders' own portraits,
   and one looping clip. All of it shares one grade so it reads as one set, and each slot is a single file swap when real photography exists.
   ========================================================================== */
:root {
  --grade: saturate(0.6) contrast(1.08) brightness(0.93); /* round 7: one calmer, cooler grade so the stock set reads as one family */
  --grade-hover: saturate(1.02) contrast(1.04) brightness(1);
  --grade-dim: saturate(0.5) contrast(1.04) brightness(0.6);
}

/* ---------- the frame every photograph sits in ---------------------------------------------------------------------------------- */
.ph { position: relative; margin: 0; overflow: hidden; background: var(--ph-bg, var(--obsidian)); isolation: isolate; border-radius: var(--r-card); }
.ph > img {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: var(--fx, 50%) var(--fy, 50%);
  filter: var(--grade);
  scale: 1;
  transition: scale 0.8s var(--e-out), filter 0.5s var(--e-soft);
}
/* a low Infrared glow in the lower corner, blended in softly, and a shade at the foot: the two together make a mixed set of photographs one family */
.ph::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background: radial-gradient(90% 75% at 100% 100%, rgba(255, 59, 104, 0.46), rgba(255, 59, 104, 0) 70%), linear-gradient(rgba(255, 59, 104, 0.14), rgba(255, 59, 104, 0.14));
  mix-blend-mode: soft-light;
}
.ph::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  background: linear-gradient(180deg, rgba(9, 10, 11, 0) 50%, rgba(9, 10, 11, 0.58) 100%);
  box-shadow: inset 0 0 0 1px rgba(243, 241, 236, 0.1); /* a hairline where the picture meets its soft edge, like the rim of a lens */
}
@media (hover: hover) and (pointer: fine) {
  .founder-name { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
}
@media (hover: hover) {
  .door:hover .ph > img, .door:focus-within .ph > img, .founder-ph:hover > img, .expect-ph:hover > img, .decide-ph:hover > img { scale: 1.06; filter: var(--grade-hover); }
}
html:not([data-atmos="on"]) .ph::before { display: none; }
/* a photograph of white paper is the brightest thing on a dark page, so it sits a step darker than the rest */
.ph--paper { --grade: saturate(0.7) contrast(1.08) brightness(0.8); --grade-dim: saturate(0.45) contrast(1.05) brightness(0.5); }

/* ---------- A2 doors: two photograph cards, the title set over the picture ------------------------------------------------------- */
.door-grid { border-top: 0; column-gap: calc(var(--col) * 0.9); row-gap: 56px; }
.door, .door + .door { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; align-items: start; row-gap: 20px; padding: 0; border-left: 0; }
.door-ph { grid-area: 1 / 1; width: 100%; aspect-ratio: 4 / 3; }
.door h3 { grid-area: 1 / 1; align-self: end; position: relative; z-index: 3; padding: 0 clamp(16px, 2vw, 30px) clamp(16px, 2vw, 28px); max-width: 15ch; pointer-events: none; }
.door .text-link::after { z-index: 4; }
.door p, .door .text-link { margin-left: 0; }
.door-go {
  position: absolute; z-index: 3; top: clamp(14px, 1.4vw, 22px); right: clamp(14px, 1.4vw, 22px);
  width: 56px; height: 56px; border-radius: 50%;
  color: var(--salt); border: 1px solid rgba(243, 241, 236, 0.5); background: rgba(9, 10, 11, 0.3);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background-color 0.25s var(--e-ui), border-color 0.25s var(--e-ui), color 0.25s var(--e-ui), transform 0.4s var(--e-out);
}
.door-go::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 22px; height: 22px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M4 12h16M14 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M4 12h16M14 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.door:focus-within .door-go { background: var(--infrared); border-color: var(--infrared); color: var(--carbon); transform: rotate(-45deg); }
@media (hover: hover) and (pointer: fine) { .door:hover .door-go { background: var(--infrared); border-color: var(--infrared); color: var(--carbon); transform: rotate(-45deg); } }

/* the loops inside the pillar cards exist only on a rich desktop; everywhere else the card is the still photograph */
.pillar-ph > video { display: none; }

/* ---------- A3 pillars: a strip of three photograph cards ---------------------------------------------------------------------- */
.pillar { padding: 0; border-top: 0; gap: 18px; }
.pillar-ph { width: 100%; aspect-ratio: 4 / 3; }
.pillar .pnum { display: inline-flex; align-items: center; }
.pillar .pnum::after {
  content: ""; display: inline-block; width: 72px; height: 1px; margin-left: 12px; background: var(--hair-strong);
  transform: scaleX(0.3334); transform-origin: 0 50%; /* 24px at rest, 72px when active: a transform, so nothing reflows */
  transition: transform 0.64s var(--e-ui), background-color 0.4s var(--e-ui);
}
@media (min-width: 769px) {
  html.js:not(.native) .pillars-strip { top: 0; height: 100%; padding-top: 0; align-items: center; }
  html.js:not(.native) .pillar { flex: 0 0 calc(var(--col) * 7.6); width: calc(var(--col) * 7.6); } /* round 15: the explicit width stops WebKit and Firefox measuring the strip wider (they took each card as its 32em paragraph, 120 px wider than the card, which left 480 px of empty strip and 840 px of extra pinned scroll) */
  html.js:not(.native) .pillar-list { align-items: flex-start; }
  html.js:not(.native) .pillar-ph { aspect-ratio: auto; height: clamp(170px, calc(100svh - 500px), 520px); }
  /* on a desktop each card is a short loop that plays only while its card is the active one; elsewhere (phones, touch, reduced motion) it stays the still */
  html.js:not(.native) .pillar-ph > img { display: none; }
  html.js:not(.native) .pillar-ph > video {
    display: block; position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: var(--fx, 50%) var(--fy, 50%);
    filter: var(--grade-dim); transition: filter 0.7s var(--e-soft);
  }
  html.js:not(.native) .pillar.is-active .pillar-ph > video { filter: var(--grade); }
  html.js:not(.native) .pillar.is-active .pnum::after { transform: scaleX(1); background: var(--infrared); }
}

/* ---------- A4 approach: one photograph per step, stacked in the pinned stage ---------------------------------------------------------- */
.step { display: flex; flex-direction: column; }
.step-ph { width: 100%; aspect-ratio: 16 / 9; margin-bottom: 22px; border-radius: var(--r-sheet); }
@media (min-width: 769px) {
  /* the stage is a split: the heading and the step's words stack on the left, the step's photograph fills the right, and the one signal line
     (noise, order, ticks) runs underneath as a rail */
  html.js:not(.native) .approach {
    display: grid; justify-content: normal;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: minmax(0, 1fr);
    column-gap: calc(var(--col) * 1);
  }
  html.js:not(.native) .approach .sec-head { grid-area: 1 / 1; z-index: 2; display: block; align-self: start; margin: 0; }
  html.js:not(.native) .approach .sec-head .idx { display: block; padding: 0 0 clamp(10px, 2svh, 20px); }
  html.js:not(.native) .approach .sec-head h2 { max-width: none; font-size: clamp(26px, min(3.1vw, 5.4svh), 56px); }
  html.js:not(.native) .steps { grid-area: 1 / 1 / -1 / -1; min-height: 0; }
  html.js:not(.native) .step {
    display: grid; height: 100%; min-height: 0;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: minmax(0, 1fr) auto;
    column-gap: calc(var(--col) * 1); row-gap: clamp(12px, 2svh, 22px);
  }
  html.js:not(.native) .step-ph { grid-column: 2; grid-row: 1; width: 100%; height: 100%; min-height: 0; aspect-ratio: auto; margin: 0; }
  html.js:not(.native) .step > p { grid-column: 1; grid-row: 1; align-self: end; }
  html.js:not(.native) .step strong { font-size: clamp(22px, min(2.5vw, 4.6svh), 44px); line-height: 1.04; margin-bottom: 12px; }
  html.js:not(.native) .step p .f-body { max-width: 24rem; }
}

/* ---------- A5 expect, on paper: a photograph beside the three promises ---------------------------------------------------------------- */
.expect-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: calc(var(--col) * 0.4); align-items: start; }
.expect-ph { grid-column: 8 / span 5; grid-row: 1; aspect-ratio: 4 / 5; border-radius: var(--r-pill) var(--r-pill) var(--r-card) var(--r-card); } /* an arch: a pill on top */
.expect-list { grid-column: 1 / span 6; grid-row: 1; grid-template-columns: minmax(0, 1fr); gap: clamp(30px, 5vh, 52px); }
/* on the Infrared panel the photograph keeps more of its colour: the pink chairs belong there */
.zone-signal .decide-ph { --grade: saturate(1) contrast(1.04) brightness(1); }

/* ---------- A7 decide: a poster heading across the Infrared panel, the photograph and the words side by side beneath it ------------------------------------------ */
.decide-grid { row-gap: 0; border-top: 0; padding-top: 0; }
.decide h2 { grid-column: 1 / -1; grid-row: 1; max-width: none; font-size: clamp(30px, 5.6vw, 104px); line-height: 1.02; }
.decide-ph { grid-column: 1 / span 6; grid-row: 2; aspect-ratio: 4 / 3; margin-top: clamp(32px, 6vh, 64px); border-radius: var(--r-sheet); }
.decide-body { grid-column: 8 / span 5; grid-row: 2; margin-top: clamp(32px, 6vh, 64px); }

/* ---------- A8 leadership: the story on the left, one profile per founder on the right, then the coast ------------------------------------------ */
.founders { padding-bottom: 0; }
@media (min-width: 1025px) {
  .founders-grid { align-items: start; }
  .founders-text { grid-column: 1 / span 5; }
  .leaders { grid-column: 6 / span 7; }
}
.leaders { display: grid; gap: clamp(36px, 6vh, 64px); }
.leader { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); column-gap: clamp(20px, 2.4vw, 40px); align-items: start; }
@media (min-width: 1025px) { .leader:nth-child(2) { margin-left: clamp(0px, 5vw, 88px); } } /* the pair stays staggered, as the two portraits always were */
.leader-body { display: grid; gap: 14px; justify-items: start; }
.leader-name { margin: 0; }
.leader-body .f-body { max-width: 34em; }
.founder-ph { aspect-ratio: 4 / 5; border-radius: var(--r-pill) var(--r-pill) var(--r-card) var(--r-card); }
.founder-ph > img { filter: grayscale(1) contrast(1.08) brightness(1); }
.leader:nth-child(2) .founder-ph > img { filter: grayscale(1) contrast(1.12) brightness(1.22); } /* the second portrait is a darker, softer frame: lift it so the pair sits in one light */
/* credentials: soft rounded rows, a label and a line each (Manrope 600 over Manrope 400, the site's own label and body roles) */
.cred-list { display: grid; gap: 8px; width: 100%; margin: 6px 0 0; padding: 0; list-style: none; }
.cred-list li { display: grid; gap: 2px; padding: 11px 18px 12px; border: 1px solid var(--hair-strong); border-radius: 18px; font-size: 14.5px; line-height: 1.38; color: var(--meta); }
.cred-list b { font-family: var(--f-index); font-weight: var(--w-label); font-size: 14.5px; line-height: 1.3; color: var(--fg); }
/* the About page's longer profile: what each founder leads, as a short list with an accent dash (labels use the site's small label role) */
.leader-sub { margin: 8px 0 0; }
.lead-list { display: grid; gap: 6px; width: 100%; margin: 0; padding: 0; list-style: none; }
.lead-list li { position: relative; padding-left: 20px; font-size: 15.5px; line-height: 1.4; color: var(--fg); }
.lead-list li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 10px; height: 1.5px; background: var(--accent); }
.founder-name {
  position: absolute; z-index: 3; left: 50%; transform: translateX(-50%); bottom: 16px; margin: 0; padding: 7px 14px; border-radius: var(--r-pill);
  background: rgba(9, 10, 11, 0.55);
  font-family: var(--f-index); font-weight: var(--w-label); font-size: 11.5px; line-height: 1.2; color: var(--salt); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
}
@media (hover: none), (pointer: coarse) { .founder-name { background: rgba(9, 10, 11, 0.72); } }
.place-ph { width: calc(100% + var(--pad-x) * 2 - 28px); margin: clamp(56px, 10vh, 112px) calc(var(--pad-x) * -1 + 14px) 28px; height: clamp(300px, 64svh, 640px); background: var(--carbon); border-radius: var(--r-sheet); } /* a rounded card with a margin, not a band running into the panel's edges */
.place-ph > img { filter: saturate(0.98) contrast(1.05) brightness(1.04); }
.place-ph::after { background: linear-gradient(180deg, rgba(9, 10, 11, 0) 60%, rgba(9, 10, 11, 0.5) 100%); }

/* ---------- A10 closing: a clip behind the type -------------------------------------------------------------------------------------------- */
.closing-media { position: absolute; inset: 0; z-index: 0; background: var(--carbon); }
.closing-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.95) brightness(0.95); }
.closing-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, var(--carbon) 0%, rgba(9, 10, 11, 0) 24%, rgba(9, 10, 11, 0) 70%, var(--carbon) 100%),
    linear-gradient(90deg, rgba(9, 10, 11, 0.86) 0%, rgba(9, 10, 11, 0.5) 42%, rgba(9, 10, 11, 0) 82%);
}

/* ---------- tablet and phone ------------------------------------------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .expect-ph { grid-column: 1 / span 12; grid-row: 1; aspect-ratio: 16 / 9; margin-bottom: 36px; }
  .expect-list { grid-column: 1 / span 12; grid-row: 2; }
  .decide-ph { grid-column: 1 / span 12; grid-row: 2; }
  .decide-body { grid-column: 1 / span 12; grid-row: 3; }
}
@media (max-width: 768px) {
  .door-grid { grid-template-columns: 1fr; row-gap: 44px; }
  .door-ph { aspect-ratio: 5 / 4; }
  .door h3 { font-size: clamp(20px, 5.4vw, 26px); }
  .door-go { width: 48px; height: 48px; }
  .pillar { gap: 14px; }
  .pillar-list { gap: 40px; }
  .step { margin-bottom: 8px; }
  .step-ph { aspect-ratio: 5 / 4; }
  .leaders { margin-top: 36px; gap: 48px; }
  .leader { grid-template-columns: 1fr; row-gap: 22px; }
  .founder-ph { width: min(100%, 300px); }
  .place-ph { height: 38svh; margin-top: 44px; }
  .decide-ph { margin-top: 28px; margin-bottom: 8px; }
  .closing { min-height: 82svh; }
}
@media (prefers-reduced-motion: reduce) {
  .ph > img, .door-go { transition: none; }
}
html.no-js .ph { background: var(--obsidian); }

/* ---------- keep the page inside the panel ----------------------------------------------------------------------------------------------------
   ScrollSmoother writes position:fixed; width:100%; height:100% onto the wrapper as inline styles, which silently undoes the frame inset. Until now
   nothing painted near the edges, but full-bleed photographs and the clip would show over the frame and past the panel's rounded corners. These
   !important rules beat the inline styles, so the wrapper is the panel again and clips its content to it. */
html.js:not(.native) #smooth-wrapper { top: var(--frame) !important; right: var(--frame) !important; bottom: var(--frame) !important; left: var(--frame) !important; width: auto !important; height: auto !important; }
/* reduced motion on a desktop: the content scrolls in the document, so it takes the frame as a margin instead */
@media (min-width: 769px) {
  html.native #smooth-wrapper { margin: 0 var(--frame); }
}


/* ---------- the marquee: the eyebrow's own words, running across the top of the first section ---------------------------------------------------------- */
.doors { padding-top: clamp(40px, 7vh, 84px); }
.marquee { position: relative; overflow: hidden; margin: 0 calc(var(--pad-x) * -1) clamp(44px, 8vh, 92px); padding: 0.06em 0; font-size: clamp(30px, 4.2vw, 68px); line-height: 1.1; }
.marquee-track { display: flex; align-items: center; width: max-content; font-family: var(--f-display); font-weight: var(--hero-wght); font-stretch: var(--disp-wdth); letter-spacing: var(--ls-display); white-space: nowrap; will-change: transform; }
.mq { color: var(--fg); }
.mq-o { color: rgba(184, 188, 186, 0.42); color: color-mix(in srgb, var(--fg) 40%, transparent); }
.mq-dot { flex: none; width: 0.2em; height: 0.2em; margin: 0 0.44em; border: 2px solid var(--infrared); border-radius: 50%; }
@media (max-width: 768px) { .marquee { font-size: clamp(28px, 8.2vw, 46px); margin-bottom: 36px; } }

html.no-js .marquee { display: none; }