/* ---------------------------------------------------------------------------
   Public site — components and page sections.
   Depends on tokens.css and base.css.
--------------------------------------------------------------------------- */

/* =========================================================== 1. Preloader  */

.preloader {
  position: fixed;
  inset: 0;
  z-index: var(--z-preloader);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(24px, 4vw, 44px);
  background: #0a0a0c;
  color: #ececf1;
  pointer-events: none;
  transition: transform .9s var(--ease-in-out);
}
.preloader[data-done="true"] { transform: translateY(-101%); }

.preloader__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
}
.preloader__wordmark { font-family: var(--font-display); font-size: 17px; }
.preloader__meta     { color: rgba(236, 236, 241, .58); }

/* The wordmark and the meta label cannot share a row at phone width. */
@media (max-width: 479px) {
  .preloader__meta { display: none; }
  .preloader__wordmark { font-size: 15px; }
  .preloader__status { font-size: 11px; letter-spacing: .16em; }
}

.preloader__body {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}
.preloader__count {
  font-family: var(--font-display);
  font-size: clamp(90px, 18vw, 220px);
  line-height: .8;
}
.preloader__status {
  padding-bottom: 14px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .2em;
  color: rgba(236, 236, 241, .5);
}

.preloader__track {
  height: 3px;
  border-radius: 2px;
  overflow: hidden;
  background: rgba(236, 236, 241, .14);
}
.preloader__bar {
  height: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* ============================================================== 2. Header  */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px var(--gutter);
  background: var(--bg);
  border-bottom: 2px solid var(--accent);
  transition: background-color var(--duration);
}

.wordmark {
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: .02em;
  white-space: nowrap;
}
.wordmark__star { color: var(--accent); }

.site-nav__list {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  list-style: none;
}

.nav-link {
  display: inline-block;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: var(--chip);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}
.nav-link:hover { background: var(--accent); color: var(--ink); }

.nav-link[aria-current="page"],
.nav-link--cta {
  background: var(--accent);
  color: var(--ink);
  font-weight: 700;
}
.nav-link[aria-current="page"]:hover,
.nav-link--cta:hover { color: var(--ink); }

.theme-toggle {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  flex: none;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--chip);
  color: var(--text);
  font-size: 15px;
  transition: background-color var(--duration-fast), color var(--duration-fast);
}
.theme-toggle:hover { background: var(--accent); color: var(--ink); }

/* ---- Hamburger ---- */

.nav-toggle {
  display: none;          /* shown by the narrow-screen block below */
  place-items: center;
  width: 40px; height: 40px;
  order: 3;               /* sits to the right of the theme toggle */
  flex: none;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--chip);
  color: var(--text);
  transition: background-color var(--duration-fast), color var(--duration-fast);
}
.nav-toggle:hover { background: var(--accent); color: var(--ink); }

.nav-toggle__bars {
  position: relative;
  display: block;
  width: 18px; height: 12px;
}
.nav-toggle__bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--duration) var(--ease-out), opacity var(--duration-fast);
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 5px; }
.nav-toggle__bars span:nth-child(3) { top: 10px; }

/* Open: the bars cross into an X. */
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.site-nav__scrim { display: none; }

/*
  Five pills plus the wordmark and two buttons need about 820px. Below that the
  links move into a panel rather than a scrolling rail, which would push the
  last item — CONTACT, the one that matters — off the edge of the screen.
*/
@media (max-width: 819px) {
  /* Header padding is tighter here, so its height differs from the desktop token. */
  :root { --mobile-header-height: 62px; }

  .site-header { padding: 12px var(--gutter); }
  .wordmark { font-size: 17px; margin-right: auto; }

  .nav-toggle { display: grid; }

  /*
    The panel slides out from *behind* the header, so the wordmark and the close
    button stay visible and tappable while it is open.

    The panel is a descendant of the header, so it cannot be pushed below its
    own ancestor with z-index — the header's stacking context already contains
    it. Instead the header's own controls are lifted above it from inside that
    same context: scrim 1, panel 2, controls 3.
  */
  .site-header > .wordmark,
  .site-header > .nav-toggle,
  .site-header > .theme-toggle {
    position: relative;
    z-index: 3;
  }

  .site-nav {
    position: fixed;
    inset: 0 0 auto;
    z-index: 2;
    padding: calc(var(--mobile-header-height) + 14px) var(--gutter) 22px;
    background: var(--surface);
    border-bottom: 2px solid var(--accent);
    box-shadow: var(--shadow-soft);

    /* Collapsed by default; slides down from behind the header. */
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform var(--duration-slow) var(--ease-out),
                visibility 0s linear var(--duration-slow);
  }
  .site-nav[data-open="true"] {
    transform: none;
    visibility: visible;
    transition: transform var(--duration-slow) var(--ease-out), visibility 0s;
  }

  .site-nav__list {
    flex-direction: column;
    gap: 8px;
  }

  /* Full-width rows read as a menu; pill-width ones read as stray chips. */
  .nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    border-radius: var(--radius);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .04em;
  }
  .nav-link::after {
    content: '→';
    opacity: .45;
    font-weight: 400;
  }
  .nav-link--cta::after { content: '↗'; opacity: 1; }

  .site-nav__scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, .6);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration);
  }
  .site-nav__scrim[data-open="true"] { opacity: 1; pointer-events: auto; }
}

/* Below 380px the wordmark and two buttons are still tight. */
@media (max-width: 379px) {
  .wordmark { font-size: 15px; }
  .site-header { gap: 10px; }
}

/* =============================================================== 3. Hero   */

.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(60px, 7vh, 90px) var(--gutter-wide) 56px;
}
.hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--page-max);
  margin-inline: auto;
}

.hero__eyebrows {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 26px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: var(--tracking-label);
}
.hero__eyebrow-row { overflow: hidden; }
.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero__eyebrow-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: dt-pulse 2s infinite;
  flex: none;
}
.hero__eyebrow-dot--delayed { animation-delay: .4s; }

.hero__title {
  position: relative;
  z-index: 2;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-hero);
  line-height: .87;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.hero__line {
  display: block;
  overflow: hidden;
  padding-right: .08em;
}
.hero__char { display: inline-block; }
.hero__line--glitch > span { display: inline-block; animation: dt-glitch 6s steps(1, end) infinite 2.5s; }
.hero__char--outline {
  color: transparent;
  -webkit-text-stroke: 2.5px var(--accent);
}
.hero__char--arrow {
  font-size: .42em;
  vertical-align: middle;
  color: var(--accent);
  transform: rotate(12deg);
}

/*
  Hero rhythm.

  The headline is its own beat; the introduction and the two buttons are a
  single unit — a claim and the two ways to act on it. So the break after the
  headline is deliberately larger than the one before the buttons, which keeps
  the copy reading as one block rather than three loose pieces.

  Archivo Black sits high in its line box and the introduction carries leading
  above its first line, so the boxes are set a few pixels tighter than the
  optical gap they produce.
*/
.hero__body {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  flex-wrap: wrap;
  /*
    Scales with the headline. Archivo Black at line-height .87 leaves more empty
    box beneath its glyphs the larger it gets, so a fixed margin produces an
    optical gap that shrinks exactly where the type is biggest and needs most.
  */
  margin-top: clamp(40px, 5.6vw, 76px);   /* headline → copy */
}
.hero__copy { max-width: 470px; }
.hero__intro {
  margin-bottom: 26px;    /* copy → buttons */
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--muted);
}
.hero__intro strong { color: var(--text); font-weight: 700; }
.hero__intro .accent { color: var(--accent); }

.hero__badges { display: flex; gap: 10px; margin-top: 40px; flex-wrap: wrap; }

.hero__scroll-hint {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
}
.hero__scroll-bar {
  width: 2px; height: 54px;
  background: var(--accent);
  animation: dt-scroll-hint 2.2s var(--ease-in-out) infinite;
}
.hero__scroll-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .26em;
  color: var(--faint);
}

/* -- Hero portrait ------------------------------------------------------- */

.hero__portrait {
  position: relative;
  z-index: 1;
  flex: none;
  width: clamp(290px, 35vw, 470px);
  margin-left: auto;
  /* Pulls the portrait up into the headline on wide screens, and out of the
     way entirely once the layout wraps. */
  margin-top: clamp(-300px, calc((820px - 100vw) * 1.2), 0px);
}

.hero__seal {
  position: absolute;
  top: -64px; left: -64px;
  z-index: 2;
  width: 200px; height: 200px;
  overflow: visible;
  animation: dt-spin 26s linear infinite;
}
.hero__seal text {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .32em;
  fill: var(--accent);
}

.hero__portrait-outline {
  position: absolute;
  inset: 16px -16px -16px 16px;
  border: 2px dashed rgba(255, 77, 28, .55);
  border-radius: 300px 300px 24px 24px;
}
.hero__portrait-frame {
  position: relative;
  border-radius: 300px 300px 24px 24px;
  overflow: hidden;
  box-shadow: var(--shadow-glow);
}
.hero__portrait-frame img {
  width: 100%;
  aspect-ratio: 4 / 5.2;
  object-fit: cover;
  object-position: top;
  filter: grayscale(.25) contrast(1.06);
}
.hero__portrait-wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, rgba(255, 77, 28, .18), transparent 45%, rgba(10, 10, 12, .4));
}

.hero__float-badge {
  position: absolute;
  top: 56px; left: -42px;
  z-index: 2;
  padding: 12px 18px;
  border-radius: 12px;
  background: var(--pop);
  color: #0a0a0c;
  font-family: var(--font-display);
  font-size: 15px;
  animation: dt-float 5s ease-in-out infinite;
}

.hero__play {
  position: absolute;
  bottom: 30px; right: -20px;
  z-index: 2;
  width: 74px; height: 74px;
}
.hero__play svg { width: 100%; height: 100%; animation: dt-spin 12s linear infinite; }
.hero__play span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #0a0a0c;
  font-size: 22px;
}

/* ======================================================== 4. Page headers  */

.page-header {
  position: relative;
  overflow: hidden;
  border-bottom: 2px solid var(--accent);
}
.page-header__inner {
  position: relative;
  z-index: 1;
  max-width: var(--page-max);
  margin-inline: auto;
  padding: var(--hero-y) var(--gutter);
}
.page-header__ghost {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
}
.page-header__ghost span {
  font-family: var(--font-display);
  font-size: var(--text-ghost);
  line-height: 1;
  white-space: nowrap;
  user-select: none;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(236, 236, 241, .08);
}
.page-header__title {
  margin: 0 0 22px;
  font-family: var(--font-display);
  font-size: var(--text-h1);
  line-height: .94;
  text-transform: uppercase;
}
.page-header__lede { max-width: 520px; }

/* ============================================================ 5. Buttons   */

.btn {
  display: inline-block;
  padding: 16px 30px;
  border: none;
  border-radius: var(--radius);
  font-size: var(--text-base);
  font-weight: 700;
  text-align: center;
  transition: box-shadow var(--duration) var(--ease-out),
              background-color var(--duration-fast),
              border-color var(--duration-fast),
              transform var(--duration-fast);
}

.btn--primary {
  background: var(--accent);
  color: var(--ink);
  box-shadow: var(--shadow-hard);
}
.btn--primary:hover,
.btn--primary:focus-visible { box-shadow: var(--shadow-hard-hover); color: var(--ink); }

.btn--ghost {
  padding: 14px 30px;
  border: 2px solid var(--line);
  background: transparent;
  font-weight: 500;
}
.btn--ghost:hover { border-color: var(--accent); }

.btn--lg { padding: 18px 34px; font-size: 15.5px; }
.btn--sm { padding: 11px 20px; font-size: 13.5px; }

.link-underline {
  padding-bottom: 4px;
  border-bottom: 2px solid var(--accent);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .1em;
  white-space: nowrap;
}

.back-link {
  display: inline-block;
  margin-bottom: 22px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  color: var(--faint);
}

/* ============================================================== 6. Chips   */

.chip {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--chip);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
}
.chip--outline {
  border: 1.5px solid var(--accent);
  background: transparent;
  color: var(--accent-text);
}
.chip--muted {
  border: 1.5px solid var(--line);
  background: transparent;
  color: var(--muted);
}
.chip--solid { background: var(--pop); color: var(--bg); }
.chip--tilt-left  { transform: rotate(-2deg); }
.chip--tilt-right { transform: rotate(1.5deg); }

.tag-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* ============================================================ 7. Marquees  */

.marquee {
  position: relative;
  z-index: 3;
  overflow: hidden;
  white-space: nowrap;
  padding: 12px 0;
  background: var(--accent);
  color: #0a0a0c;
}
.marquee__track {
  display: flex;
  width: max-content;
  will-change: transform;
}
.marquee__track.is-looping {
  animation: dt-loop var(--loop-duration, 20s) linear infinite;
}
/*
  The trailing padding is the gap to the next group. Carrying it inside the
  group makes the group's own width the exact repeat distance, so the seam is
  invisible — a between-groups `gap` would leave the loop half a gap short.
*/
.marquee__group {
  display: flex;
  align-items: center;
  gap: 40px;
  padding-right: 40px;
  font-family: var(--font-display);
  font-size: 20px;
  text-transform: uppercase;
  white-space: nowrap;
}

.logo-strip {
  overflow: hidden;
  white-space: nowrap;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}
.logo-strip__track {
  display: flex;
  width: max-content;
  will-change: transform;
}
.logo-strip__track.is-looping {
  animation: dt-loop var(--loop-duration, 30s) linear infinite;
}
.logo-strip__group {
  display: flex;
  align-items: center;
  gap: 64px;
  padding-right: 64px;
}
.logo-strip img {
  height: 40px;
  width: auto;
  opacity: .7;
  filter: var(--logofilter);
  transition: opacity var(--duration-fast);
}
.logo-strip a:hover img { opacity: 1; }

/* ====================================================== 8. Scroll scenes   */

.scene { position: relative; }
.scene__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: #0a0a0c;
  color: #ececf1;
}
.scene__bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  filter: grayscale(.4) contrast(1.05);
}
.scene__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 55%, rgba(10, 10, 12, .25), rgba(10, 10, 12, .88) 78%);
}
/* Offset below the sticky header so the scene's chrome is not hidden by it. */
.scene__label  { position: absolute; top: calc(var(--header-height) + 22px); left: var(--gutter-wide); color: var(--accent);
                 font-size: 12.5px; font-weight: 700; letter-spacing: var(--tracking-chrome); }
.scene__dots   { position: absolute; top: calc(var(--header-height) + 22px); right: var(--gutter-wide); display: flex; gap: 8px; }
.scene__dot    { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--accent); }

.scene__word {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  opacity: 0;
}
.scene__word-text {
  font-family: var(--font-display);
  font-size: var(--text-scene);
  line-height: .9;
  text-transform: uppercase;
}
.scene__word-text--outline { color: transparent; -webkit-text-stroke: 3px #ececf1; }
.scene__word-text--outline .scene__stop { -webkit-text-stroke: 3px var(--accent); }
.scene__word-text--accent  { color: var(--accent); }
.scene__word-text--accent .scene__stop { color: #ececf1; }
.scene__stop { color: var(--accent); }

.scene__caption {
  margin-top: 18px;
  font-size: clamp(15px, 1.6vw, 19px);
  letter-spacing: .04em;
  color: rgba(236, 236, 241, .75);
}
.scene__hint {
  position: absolute;
  bottom: 30px; left: 50%;
  transform: translateX(-50%);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .26em;
  color: rgba(236, 236, 241, .45);
}

/* ============================================================= 9. Cards    */

.card {
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  transition: border-color var(--duration-fast), transform var(--duration) var(--ease-out);
}
.card:hover { border-color: var(--accent); color: inherit; }
.card__body { padding: 18px 20px; }
.card__kicker {
  margin-bottom: 6px;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--accent-text);
  text-transform: uppercase;
}
.card__title { font-size: 17.5px; font-weight: 700; line-height: 1.35; }
.card__excerpt { margin-top: 10px; font-size: 14.5px; line-height: 1.65; color: var(--muted); }

.card--lift:hover { transform: translateY(-6px); }

.card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--chip);
}
.card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}
.card:hover .card__media img { transform: scale(1.08); }

.card__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(10, 10, 12, .25);
}
.play-button {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--accent);
  color: #0a0a0c;
  font-size: 17px;
}
.play-button--lg { width: 64px; height: 64px; font-size: 22px; }
.play-button--xl { width: 68px; height: 68px; font-size: 24px; }

/* Hatched placeholder used wherever a cover image has not been uploaded. */
.placeholder-media {
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(-45deg, var(--chip) 0 18px, transparent 18px 36px);
}
.placeholder-media__label {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--faint);
}

.grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
/* Grid items default to min-width:auto, which refuses to shrink below their
   longest unbreakable run — one pasted URL would widen the whole column. */
.grid > * { min-width: 0; }
.grid--tight { gap: 18px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--wide  { gap: 56px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid--stills { gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.section-head__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-h2-lg);
  text-transform: uppercase;
}

/* ========================================================= 10. Work list   */

.work-list {
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 6vw, 80px);
}
.work-item {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 40px;
  align-items: center;
}
/* Every second entry mirrors, so the eye zig-zags down the page. */
.work-item--reverse { direction: rtl; }
.work-item--reverse > * { direction: ltr; }

.work-item__media {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
}
.work-item__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.work-item__index {
  position: absolute;
  top: 16px; left: 16px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  background: var(--pop);
  color: var(--bg);
  font-family: var(--font-display);
  font-size: 13px;
  transform: rotate(-3deg);
}
.work-item__title {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.05;
  text-transform: uppercase;
}
.work-item__excerpt { margin-bottom: 22px; font-size: var(--text-md); line-height: 1.7; color: var(--muted); }

/* ====================================================== 11. Project detail */

.project-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 18px;
  max-width: 800px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.project-meta__label {
  margin-bottom: 6px;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--faint);
  text-transform: uppercase;
}
.project-meta__value { font-size: 15.5px; font-weight: 700; }

.player {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: #000;
}
.player iframe { width: 100%; height: 100%; border: 0; }

.note-card {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.note-card__title {
  margin-bottom: 14px;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: .16em;
  color: var(--accent-text);
}
.note-card p { font-size: 15.5px; line-height: 1.7; color: var(--muted); }

.directors-note { max-width: var(--article-max); margin-inline: auto; text-align: center; }
.directors-note__quote {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.8vw, 30px);
  line-height: 1.3;
}

.next-project {
  display: block;
  padding: clamp(56px, 8vw, 110px) 20px;
  border-top: 2px solid var(--accent);
  background: var(--surface);
  text-align: center;
  overflow: hidden;
  transition: background-color var(--duration);
}
.next-project:hover { background: var(--bg); }
.next-project__kicker {
  margin-bottom: 18px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--tracking-chrome);
  color: var(--accent-text);
}
.next-project__title {
  font-family: var(--font-display);
  font-size: clamp(34px, 6vw, 84px);
  line-height: 1;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 2px var(--text);
}

/* ========================================================= 12. Stats band  */

.stats-band {
  border-block: 2px solid var(--accent);
  background: var(--surface);
}
.stats-band__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
  max-width: var(--page-max);
  margin-inline: auto;
  padding: clamp(48px, 6vw, 72px) var(--gutter);
}
.stat__value {
  font-family: var(--font-display);
  font-size: clamp(48px, 5vw, 68px);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.stat__label {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--muted);
  text-transform: uppercase;
}

/* ========================================================== 13. Services   */

.service-card {
  display: flex;
  flex-direction: column;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--surface);
  transition: border-color var(--duration-fast), transform var(--duration) var(--ease-out);
}
.service-card:hover { border-color: var(--accent); transform: translateY(-4px); }
.service-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}
.service-card__number {
  font-family: var(--font-display);
  font-size: 34px;
  color: var(--accent);
  line-height: 1;
}
.service-card__glyph { font-size: 24px; color: var(--faint); }
.service-card__title {
  margin-bottom: 12px;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1.15;
  text-transform: uppercase;
}
.service-card__body { flex: 1; margin-bottom: 20px; font-size: 15px; line-height: 1.7; color: var(--muted); }

.service-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 22px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  transition: border-color var(--duration-fast), transform var(--duration) var(--ease-out);
}
.service-row:hover { border-color: var(--accent); transform: translateX(8px); }
.service-row__title { display: block; margin-bottom: 5px; font-size: var(--text-lg); font-weight: 700; }
.service-row__text  { display: block; font-size: 14px; color: var(--muted); }
.service-row__arrow { flex: none; font-size: 22px; color: var(--accent-text); }

.process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}
.process-step {
  padding-top: 20px;
  border-top: 2px solid var(--accent);
}
.process-step__number {
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--accent-text);
}
.process-step__title { margin-bottom: 8px; font-size: var(--text-md); font-weight: 700; }
.process-step__text  { font-size: 14.5px; line-height: 1.6; color: var(--muted); }

/* ======================================================= 14. Testimonials  */

.quote-card {
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg);
  transition: transform var(--duration) var(--ease-out), border-color var(--duration-fast);
}
.quote-card:hover { transform: rotate(0deg) !important; border-color: var(--accent); }
.quote-card__stars { margin-bottom: 12px; font-size: 20px; color: var(--accent-text); letter-spacing: 2px; }
.quote-card__text  { margin-bottom: 18px; font-size: var(--text-base); line-height: 1.65; color: var(--muted); }
.quote-card__author { font-size: 14.5px; font-weight: 700; }
.quote-card__role   { margin-top: 2px; font-size: 13px; color: var(--faint); }

/* ============================================================ 15. About    */

.portrait-frame { position: relative; }
.portrait-frame__outline {
  position: absolute;
  inset: -10px;
  border: 2px dashed var(--accent);
  border-radius: 24px;
  transform: rotate(2deg);
}
.portrait-frame img {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 4.6;
  object-fit: cover;
  border-radius: var(--radius-xl);
  transform: rotate(-1.2deg);
}
.portrait-frame__badge {
  position: absolute;
  bottom: 18px; right: -18px;
  padding: 12px 18px;
  border-radius: 12px;
  background: var(--accent);
  color: #0a0a0c;
  font-family: var(--font-display);
  font-size: 14px;
  transform: rotate(3deg);
}

.prose p { margin-bottom: 22px; font-size: 17px; line-height: 1.7; color: var(--muted); }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--text); font-weight: 700; }

.timeline { display: flex; flex-direction: column; }
.timeline__item {
  display: grid;
  grid-template-columns: 150px 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left var(--duration) var(--ease-out);
}
.timeline__item:hover { padding-left: 12px; }
.timeline__period {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--accent-text);
}
.timeline__role { font-size: var(--text-md); font-weight: 700; }
.timeline__org  { margin-top: 3px; font-size: 14px; color: var(--muted); }
.timeline__mark { color: var(--accent-text); }

@media (max-width: 640px) {
  .timeline__item { grid-template-columns: 1fr auto; }
  .timeline__period { grid-column: 1 / -1; }
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 28px;
}
.contact-grid__label {
  margin-bottom: 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  color: var(--faint);
  text-transform: uppercase;
}
.contact-grid__value { font-size: 15.5px; font-weight: 700; }

/* ============================================================= 16. Blog    */

.post-header__meta {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.post-header__byline {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  color: var(--faint);
  text-transform: uppercase;
}
.post-header__title {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-size: clamp(34px, 5.5vw, 72px);
  line-height: 1;
  text-transform: uppercase;
}

.post-cover {
  aspect-ratio: 16 / 7;
  margin-bottom: 40px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
}
.post-cover img { width: 100%; height: 100%; object-fit: cover; }

.post-lead { margin-bottom: 12px; font-size: 19px; line-height: 1.75; }

/* Rich text from the editor. Selectors stay generic because the markup is
   author-controlled, not template-controlled. */
.post-body { font-size: var(--text-md); line-height: 1.8; color: var(--muted); }
.post-body > * + * { margin-top: 20px; }
.post-body h2 {
  margin-top: 34px;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--text);
}
.post-body h2::before { content: '✦ '; color: var(--accent-text); }
.post-body h3 {
  margin-top: 28px;
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text);
}
.post-body a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.post-body ul, .post-body ol { padding-left: 1.35em; }
.post-body li + li { margin-top: 8px; }
.post-body img { border-radius: var(--radius); margin-block: 28px; }
.post-body figure { margin: 28px 0; }
.post-body figcaption { margin-top: 10px; font-size: 13.5px; color: var(--faint); text-align: center; }
.post-body blockquote {
  margin: 28px 0;
  padding: 20px 24px;
  border-left: 4px solid var(--accent);
  background: var(--surface);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--text);
}
.post-body pre {
  padding: 18px;
  overflow-x: auto;
  border-radius: var(--radius);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 13.5px;
}
.post-body code { font-family: var(--font-mono); font-size: .92em; }
.post-body hr { margin: 36px 0; border: 0; border-top: 1px solid var(--line); }
.post-body table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.post-body th, .post-body td { padding: 10px 12px; border: 1px solid var(--line); text-align: left; }

.pull-quote {
  margin: 44px 0;
  padding: 28px 30px;
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  background: var(--surface);
}
.pull-quote p {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(18px, 2.4vw, 24px);
  line-height: 1.4;
  color: var(--text);
}

.author-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.author-card img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: top; }
.author-card__name { font-size: var(--text-base); font-weight: 700; }
.author-card__role { font-size: 13px; color: var(--faint); }

.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 48px;
}
.related-card {
  display: block;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  transition: border-color var(--duration-fast), transform var(--duration) var(--ease-out);
}
.related-card:hover { border-color: var(--accent); transform: translateY(-4px); }
.related-card__kicker {
  margin-bottom: 8px;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  color: var(--accent-text);
  text-transform: uppercase;
}
.related-card__title { font-size: 16.5px; font-weight: 700; line-height: 1.35; }

.empty-state {
  margin-top: 48px;
  padding: clamp(32px, 5vw, 56px);
  border: 2px dashed var(--line);
  border-radius: var(--radius-xl);
  text-align: center;
}
.empty-state__title {
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 32px);
  text-transform: uppercase;
}
.empty-state__text { margin-bottom: 24px; font-size: 15.5px; color: var(--muted); }

.pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 48px;
  flex-wrap: wrap;
}
.pagination__link {
  display: grid;
  place-items: center;
  min-width: 42px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 700;
}
.pagination__link:hover { border-color: var(--accent); }
.pagination__link[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--ink); }

.filter-rail {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

/* ============================================================ 17. Contact  */

.contact-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(32px, 5vw, 56px);
  align-items: start;
}

.field { display: block; }
.field__label {
  display: block;
  margin-bottom: 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  color: var(--faint);
  text-transform: uppercase;
}
.field__control {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: var(--text-base);
  transition: border-color var(--duration-fast);
}
.field__control::placeholder { color: var(--faint); }
.field__control:focus { border-color: var(--accent); outline: none; }
.field__control[aria-invalid="true"] { border-color: var(--danger); }
textarea.field__control { resize: vertical; min-height: 140px; line-height: 1.6; }

.field__error {
  display: block;
  margin-top: 7px;
  font-size: 13px;
  color: var(--danger);
}
.field__hint { display: block; margin-top: 7px; font-size: 13px; color: var(--faint); }

.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.choice-row { display: flex; gap: 10px; flex-wrap: wrap; }
.choice {
  position: relative;      /* anchors the visually-hidden input inside the chip */
  padding: 11px 18px;
  cursor: pointer;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  transition: border-color var(--duration-fast), color var(--duration-fast);
}
.choice:hover { border-color: var(--accent); color: var(--accent-text); }
/* The real radio stays in the accessibility tree and keeps keyboard focus, but
   the chip is what's painted. Sized to the chip so a click anywhere hits it. */
.choice input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.choice:has(input:checked) { border-color: var(--accent); color: var(--accent-text); }
.choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Honeypot — off-screen rather than display:none, which some bots detect. */
.honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0;
}

.contact-rail { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
.contact-rail__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  transition: border-color var(--duration-fast), transform var(--duration) var(--ease-out);
}
.contact-rail__item:hover { border-color: var(--accent); transform: translateX(6px); }
.contact-rail__label {
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  color: var(--faint);
  text-transform: uppercase;
}
.contact-rail__value { font-size: 15.5px; font-weight: 700; }

.contact-portrait { position: relative; }
.contact-portrait__outline {
  position: absolute;
  inset: -10px;
  border: 2px dashed var(--accent);
  border-radius: 20px;
  transform: rotate(-2deg);
}
.contact-portrait img {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 4.2;
  object-fit: cover;
  object-position: top;
  border-radius: var(--radius-lg);
}
.contact-portrait__badge {
  position: absolute;
  bottom: 16px; left: -16px;
  padding: 11px 16px;
  border-radius: 12px;
  background: var(--accent);
  color: #0a0a0c;
  font-family: var(--font-display);
  font-size: 13px;
  transform: rotate(-3deg);
}

/* Inline result banner shown after a form submission. */
.alert {
  padding: 16px 20px;
  margin-bottom: 24px;
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--surface);
  font-size: 14.5px;
  line-height: 1.6;
}
.alert--success { border-left-color: var(--ok); }
.alert--error   { border-left-color: var(--danger); }
.alert--warning { border-left-color: var(--warn); }

/* ============================================================= 18. CTA     */

.cta {
  overflow: hidden;
  border-top: 2px solid var(--accent);
  background: var(--surface);
}
.cta__inner {
  max-width: var(--page-max);
  margin-inline: auto;
  padding: var(--section-y) var(--gutter) 40px;
}
.cta__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 56px;
}
.cta__title {
  max-width: 760px;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 62px);
  line-height: 1;
  text-transform: uppercase;
}
.cta__button { flex: none; }

/* ============================================================ 19. Footer   */

.site-footer__details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 28px;
  padding: 32px 0;
  border-block: 1px solid var(--line);
}
.site-footer__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 28px;
  font-size: 13px;
  color: var(--faint);
}
.site-footer__socials { display: flex; gap: 14px; font-size: 15.5px; font-weight: 700; flex-wrap: wrap; }

.footer-ghost {
  margin-bottom: -30px;
  font-family: var(--font-display);
  font-size: clamp(120px, 22vw, 300px);
  line-height: .78;
  text-align: center;
  white-space: nowrap;
  user-select: none;
  color: transparent;
  -webkit-text-stroke: 2px var(--line);
}

/* ========================================================== 20. Error page */

.error-page {
  display: grid;
  place-items: center;
  min-height: 62vh;
  padding: var(--section-y) var(--gutter);
  text-align: center;
}
.error-page__code {
  font-family: var(--font-display);
  font-size: clamp(80px, 18vw, 200px);
  line-height: .85;
  color: transparent;
  -webkit-text-stroke: 3px var(--accent);
}
.error-page__message { margin: 20px 0 32px; font-size: var(--text-lg); color: var(--muted); }


/* ===================================================== 21. Narrow screens */

/*
  Several badges and frames deliberately hang outside their container to break
  the grid. Below ~480px there is no room for that overhang, so they tuck back
  inside rather than pushing the page sideways.
*/
@media (max-width: 639px) {
  /*
    Stacked vertically, the portrait sits directly under the buttons, and the
    rotating seal — anchored to the portrait's top-left corner — rides up over
    them. There is no room to move it to, and the arch, dashed outline, badge
    and play button already carry the frame, so it steps aside.
  */
  .hero__seal { display: none; }

  .hero__portrait { margin-top: 40px; }

  /* Pin the badge to the arch's shoulder rather than letting it cross the face. */
  .hero__float-badge { top: 18px; }
}

@media (max-width: 479px) {
  .portrait-frame__badge   { right: 0; }
  .portrait-frame__outline { inset: -6px; }
  .contact-portrait__badge { left: 0; }
  .contact-portrait__outline { inset: -6px; }

  .hero__float-badge       { left: 0; font-size: 13px; padding: 10px 14px; }
  .hero__play              { right: 0; width: 60px; height: 60px; }
  .hero__portrait-outline  { inset: 12px -8px -8px 12px; }

  .work-item__index        { top: 12px; left: 12px; }

  /* The stacked-tilt cards read as accidental at phone width. */
  .chip--tilt-left,
  .chip--tilt-right,
  .quote-card              { transform: none !important; }
}

/* Tables, code and diagrams may scroll; the page itself never does. */
.scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}