@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --accent-warm: #4bc8f0;
  color-scheme: dark;
  background: #000;
  color: #fff;
  font-family: "Instrument Sans", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
body { margin: 0; }
[hidden] { display: none !important; }

.rd-page {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 80px 28px;
  overflow: hidden;
  background: #000;
}

.rd-note { width: min(100%, 360px); transform: translateY(-8px); }
.rd-brand { position: relative; width: 240px; max-width: 100%; aspect-ratio: 400 / 67; }
.rd-original { display: block; width: 100%; height: auto; }
.rd-canvas { position: absolute; pointer-events: none; opacity: 0; }

h1 {
  font-family: "Newsreader", Georgia, serif;
  font-optical-sizing: auto;
  max-width: 310px;
  margin: 27px 0 0;
  font-size: 21px;
  line-height: 1.7;
  font-weight: 400;
  letter-spacing: 0;
  text-wrap: pretty;
}

.rd-links { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 25px; margin-top: 0; }
.rd-links a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: #fff;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 400;
  text-decoration: none;
}
.rd-links a:hover { color: var(--accent-warm); }
.rd-links a:focus-visible { outline: 1px solid #4bc8f0; outline-offset: 5px; }

@media (pointer: coarse) { .rd-links a { min-height: 44px; } }

/* Solar background: brand geometry and logo choreography remain unchanged. */
.rd-page { display: flex; align-items: center; min-height: 100svh; padding: 130px 11%; isolation: isolate; }
.rd-note { transform: translateY(-14px); }
h1 { max-width: none; white-space: nowrap; }
.rd-divider { width: 48px; height: 0; margin: 36px 0; border: 0; border-top: 1px solid var(--accent-warm); }
.rd-description { max-width: 350px; margin: 0; color: #fff; font-size: 14px; line-height: 1.7; text-wrap: pretty; }
.solar-motion { position: absolute; inset: 0; z-index: -3; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity 1s ease; }
.solar-motion.is-ready { opacity: 1; }
.solar-motion::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.35); pointer-events: none; }
.solar-frame { position: absolute; inset: 0; mask-image: linear-gradient(90deg,transparent,#000 9%); -webkit-mask-image: linear-gradient(90deg,transparent,#000 9%); }
.solar-motion video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); filter: url(#reforge-blue); }
.solar-fade { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg,#000 0%,#000 31%,rgba(0,0,0,.98) 37%,rgba(0,0,0,.88) 44%,rgba(0,0,0,.5) 54%,rgba(0,0,0,.12) 67%,transparent 82%); pointer-events: none; }
.solar-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg,rgba(0,0,0,.72),transparent 26%,transparent 84%,rgba(0,0,0,.13)); pointer-events: none; }
.solar-caption { position: absolute; right: 36px; bottom: 30px; max-width: calc(100% - 72px); text-align: right; font-size: 11.5px; line-height: 1.65; color: #fff; letter-spacing: .015em; }
.solar-caption p { margin: 0; }
.solar-credit { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 5px; }
.solar-credit a,.solar-toggle { font: inherit; font-size: 11px; color: #fff; text-decoration: none; }
.solar-toggle { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 0; background: transparent; padding: 0; cursor: pointer; }
.solar-toggle svg { display: block; flex-shrink: 0; }
.solar-icon-play { display: none; }
.solar-toggle[aria-pressed="true"] .solar-icon-pause { display: none; }
.solar-toggle[aria-pressed="true"] .solar-icon-play { display: block; }
.solar-credit a:hover { color: var(--accent-warm); }
.solar-toggle { color: var(--accent-warm); }
.solar-toggle:hover { color: #ff987c; }
.solar-toggle:disabled { visibility: hidden; }
.solar-credit a:focus-visible,.solar-toggle:focus-visible { outline: 1px solid #4bc8f0; outline-offset: 5px; }
@media (min-width:1500px) { .rd-page { padding-left: 15%; } }
@media (max-width:700px) {
  .rd-page { min-height: max(760px,100svh); align-items: flex-start; padding: 120px 32px 320px; }
  .rd-note { transform: none; }
  h1 { font-size: clamp(11px,3.6vw,21px); }
  .solar-motion { left: 0; top: 32%; width: 100%; height: 68%; }
  .solar-fade { background: linear-gradient(180deg,#000 0%,#000 32%,rgba(0,0,0,.95) 41%,rgba(0,0,0,.5) 56%,transparent 73%); }
  .solar-shade { background: linear-gradient(0deg,rgba(0,0,0,.85),transparent 27%); }
  .solar-caption { right: 28px; left: 28px; bottom: 24px; max-width: none; }
}
@media (pointer:coarse) { .solar-toggle { min-width: 44px; } .solar-toggle,.solar-credit a { min-height: 44px; display: inline-flex; align-items: center; } }
@media (prefers-reduced-motion:reduce) { .solar-motion { transition: none; } }

/* Team expands in place; the entire identity moves as one unit. */
.rd-page { display: block; padding: 0; min-height: max(100svh,var(--panel-page-height,0px)); transition: min-height 1.05s cubic-bezier(.22,.8,.24,1); }
.rd-content { position: absolute; top: 50svh; left: 11%; width: min(660px,78%); transform: translateY(calc(-50% - 14px - var(--intro-shift,0px))); transition: transform 1.05s cubic-bezier(.22,.8,.24,1); }
.rd-note { transform: none; }
.solar-motion { bottom: auto; height: 100svh; }
.team-scrim { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; background: linear-gradient(90deg,#000 0%,rgba(0,0,0,.98) 53%,rgba(0,0,0,.88) 65%,rgba(0,0,0,.30) 83%,transparent); transition: opacity .9s ease; }
.rd-page.is-panel-open .team-scrim { opacity: 1; }
.rd-links button,.rd-nav-label { display: inline-flex; align-items: center; min-height: 32px; border: 0; padding: 0; background: transparent; color: #fff; font: inherit; font-size: 13px; line-height: 1.5; }
.rd-links button { cursor: pointer; }
.rd-links button:hover { color: var(--accent-warm); }
.rd-links button:focus-visible,.team-social a:focus-visible { outline: 1px solid #4bc8f0; outline-offset: 5px; }
.rd-links button[aria-expanded="true"] { color: #fff; text-decoration: underline; text-decoration-color: var(--accent-warm); text-decoration-thickness: auto; text-underline-offset: 6px; }
.rd-nav-label { cursor: default; }
.rd-team,.rd-portfolio { position: absolute; top: calc(100% + 36px); left: 0; width: 100%; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(16px); transition: opacity .2s ease,transform .8s cubic-bezier(.22,.8,.24,1),visibility 0s .8s; }
.rd-page.is-team-open .rd-team,.rd-page.is-portfolio-open .rd-portfolio { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition: opacity .65s ease .24s,transform .85s cubic-bezier(.22,.8,.24,1) .15s,visibility 0s; }
.team-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 40px; max-width: 500px; }
.team-member { min-width: 0; text-align: center; display: flex; flex-direction: column; }
.team-portrait { position: relative; flex-shrink: 0; width: 72px; height: 72px; margin: 0 auto; overflow: hidden; border-radius: 50%; }
.team-avatar { display: block; width: 100%; height: 100%; object-fit: cover; }
.team-portrait-alex .team-avatar { position: absolute; width: 182.24%; height: auto; max-width: none; left: -39.55%; top: -5.22%; }
.team-member h3 { margin: 13px 0 5px; color: #fff; font: 400 18px/1.2 "Newsreader", Georgia, serif; letter-spacing: -.015em; font-optical-sizing: auto; }
.team-role { margin: 0 0 20px; color: #fff; font-size: 13px; line-height: 1.5; }
.team-bio { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; text-align: left; }
.team-bio li { border-left: 1px solid var(--accent-warm); padding-left: 10px; color: #fff; font-size: 13px; line-height: 1.55; }
.team-statement { max-width: 500px; margin-top: 28px; text-align: center; }
.team-divider { width: 48px; height: 0; margin: 0 auto 24px; border: 0; border-top: 1px solid var(--accent-warm); }
.team-statement p { margin: 0; color: #fff; font-size: 13px; line-height: 1.85; text-wrap: pretty; }
.team-contact { display: inline-flex; align-items: center; min-height: 32px; margin-top: 14px; color: var(--accent-warm); font-size: 13px; line-height: 1.5; text-decoration: none; }
.team-contact:hover { color: #ff987c; }
.team-contact:focus-visible { outline: 1px solid var(--accent-warm); outline-offset: 5px; }
@media (pointer:coarse) { .team-contact { min-height: 44px; } }
.team-social { display: flex; justify-content: center; gap: 16px; margin-top: auto; padding-top: 20px; }
.team-social a { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; min-height: 24px; color: #fff; }
.team-social a:hover { color: var(--accent-warm); }
.team-social svg { display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (min-width:1500px) { .rd-content { left: 15%; width: min(660px,70%); } }
@media (max-width:700px) {
  .rd-content { top: 120px; left: 32px; right: 32px; width: auto; transform: translateY(calc(0px - var(--intro-shift,0px))); }
  .rd-team,.rd-portfolio { top: calc(100% + 36px); }
  .team-grid { grid-template-columns: 1fr; gap: 42px; }
  .team-member { width: min(100%,240px); margin: 0 auto; }
  .team-portrait { width: 64px; height: 64px; }
  .team-role { margin-bottom: 20px; }
  .team-scrim { background: rgba(0,0,0,.88); }
  .solar-motion { top: 32svh; height: 68svh; }
}
@media (pointer:coarse) { .rd-links button,.team-social a { min-height: 44px; } }
@media (prefers-reduced-motion:reduce) { .rd-content,.rd-page,.rd-team,.rd-portfolio,.rd-page.is-team-open .rd-team,.rd-page.is-portfolio-open .rd-portfolio,.team-scrim { transition: none; } }

/* Text-only portfolio; each name is the company link. */
.portfolio-grid { display: grid; grid-template-columns: repeat(4,max-content); gap: 18px 64px; width: max-content; max-width: 100%; margin: 0; padding: 0; list-style: none; }
.portfolio-grid li { min-width: 0; }
.portfolio-grid a { display: flex; align-items: center; min-height: 44px; color: #fff; font-size: 13px; line-height: 1.5; font-weight: 400; letter-spacing: -.01em; text-decoration: none; transition: color .2s ease; }
.portfolio-grid a:hover { color: var(--accent-warm); }
.portfolio-grid a:focus-visible { outline: 1px solid var(--accent-warm); outline-offset: 5px; }
@media (max-width:700px) { .portfolio-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px 20px; width: 100%; } .portfolio-grid a { font-size: 13px; } }
@media (prefers-reduced-motion:reduce) { .portfolio-grid a { transition: none; } }

/* One compact identity and introduction anchors the left side. */
.rd-note > .rd-description { margin-top: 32px; }

.team-intro { max-width: 500px; margin: 0 0 30px; color: #fff; font-size: 13px; line-height: 1.85; text-align: center; text-wrap: pretty; }
.team-statement .team-contact { margin-top: 0; }

/* A quiet, persistent New York location and local clock. */
.site-footer { position: absolute; left: 11%; right: 36px; bottom: 30px; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.site-footer .solar-caption { position: static; max-width: none; }
.location-caption { flex-shrink: 0; color: #fff; font-size: 13px; line-height: 1.65; }
.location-caption p { display: flex; align-items: center; gap: 6px; margin: 0; letter-spacing: .015em; }
.location-pin { display: block; flex-shrink: 0; color: var(--accent-warm); }
.location-separator { color: var(--accent-warm); }
.location-datetime { display: flex; align-items: center; gap: 8px; margin-top: 7px; font-size: 13px; font-variant-numeric: tabular-nums; }
@media (min-width:1500px) { .site-footer { left: 15%; } }
@media (max-width:700px) { .site-footer { left: 28px; right: 28px; bottom: 24px; flex-direction: column; align-items: stretch; gap: 18px; } }

/* On wide monitors, bring the composition inward without changing smaller windows.
   Continuous at 1920px; every extra 4px of viewport adds 1px beyond the existing 15% inset. */
@media (min-width:1920px) {
  .rd-content,.site-footer { left: calc(40vw - 480px); }
}

/* Footage on hold: one centered composition on a plain black page. */
.rd-page.is-centered .rd-content {
  left: 50%; right: auto; width: min(660px,calc(100% - 64px)); text-align: center;
  transform: translate(-50%,calc(-50% - 14px - var(--intro-shift,0px)));
}
.rd-page.is-centered .rd-note { width: 100%; }
.rd-page.is-centered .rd-brand,.rd-page.is-centered .rd-description { margin-inline: auto; }
.rd-page.is-centered .rd-divider { margin-inline: auto; }
.rd-page.is-centered .rd-links { justify-content: center; }
.rd-page.is-centered .team-grid,.rd-page.is-centered .team-statement,.rd-page.is-centered .portfolio-grid { margin-inline: auto; }
.rd-page.is-centered .portfolio-grid a { justify-content: center; }
.rd-page.is-centered .site-footer { left: 32px; right: 32px; align-items: center; justify-content: center; }
.rd-page.is-centered .location-caption { display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center; white-space: nowrap; }
.rd-page.is-centered .location-datetime { margin-top: 0; }
.rd-page.is-centered .location-caption p,.rd-page.is-centered .location-datetime { justify-content: center; }
@media (max-width:700px) {
  .rd-page.is-centered .site-footer { left: 16px; right: 16px; }
  .rd-page.is-centered .rd-content { transform: translate(-50%,calc(0px - var(--intro-shift,0px))); }
}