/* redesign 8: "ai meets faith" — light page, dark video hero, verse carousel, warm browns */

/* ---------- self-hosted fonts (variable, SIL OFL — see fonts/LICENSE-OFL.txt) ---------- */

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/newsreader-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/newsreader-latin-wght-italic.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/newsreader-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1EFF, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/newsreader-latin-ext-wght-italic.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1EFF, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/outfit-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/outfit-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1EFF, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- design tokens (v3 warm browns pulled from the video) ---------- */

:root {
  --bg: #FFFFFF;
  --bg-hero: #1E1A16;
  --bg-card: #F7F2EB;
  --bg-dark: #1E1A16;
  --bg-verse-card: #FBF4E9;
  --text: #211C17;
  --text-2: #5C5044;
  --muted: #6F6357;
  --faint: #B3A794;
  --gray: #8C8072;
  --dark-text: #F7F1E8;
  --dark-soft: #B5A899;
  --dark-muted: #7A6E60;
  --accent: #F2700C;
  --accent-deep: #D95F08;
  --accent-light: #F2A468;
  --accent-pill-bg: #FCEEDF;
  --accent-rust: #B54A0C;
  --line: #E9E0D2;
  --line-soft: rgba(33, 28, 23, 0.07);
  --line-strong: rgba(33, 28, 23, 0.3);
  --line-dark: rgba(247, 241, 232, 0.1);
  --line-dark-mid: rgba(247, 241, 232, 0.35);
  --pad-x: clamp(20px, 4vw, 48px);
  --sec-x: clamp(24px, 9vw, 140px);
  --font: "Outfit", "Helvetica Neue", sans-serif;
  --serif: "Newsreader", Georgia, serif;
  --mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  height: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

body {
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.6 var(--font);
  overflow-x: clip;
}

::selection {
  background: var(--accent);
  color: #fff;
}

/* ---------- accessibility ---------- */

.skip-link {
  position: absolute;
  left: 50%;
  top: -60px;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 14px;
  text-decoration: none;
  z-index: 100;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 10px;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- topbar — dark translucent over the dark hero, light text (v3) ---------- */

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(30, 26, 22, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-dark);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* js only, at the very top of the page: bar floats over the video without its own background */
.topbar.float {
  background: transparent;
  border-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.topbar nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px var(--pad-x);
}

.brand {
  color: var(--dark-text);
  font: 600 clamp(20px, 2.4vw, 24px)/1 var(--font);
  letter-spacing: -0.01em;
  text-decoration: none;
}

.brand .bang {
  color: var(--accent);
}

.menu {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(14px, 2.6vw, 34px);
  font: 500 15px/1 var(--font);
}

.menu a {
  color: var(--dark-text);
  text-decoration: none;
  padding: 8px 2px;
  transition: color 0.2s ease;
}

.menu a:hover {
  color: var(--accent-light);
}

.lang-toggle {
  color: var(--dark-text);
  font: 700 13px/1 var(--mono);
  border: 1px solid var(--line-dark-mid);
  border-radius: 999px;
  padding: 10px 14px;
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.lang-toggle:hover {
  border-color: var(--accent-light);
  color: var(--accent-light);
}

/* ---------- hero — dark video, tall, white only fades in late (v3) ---------- */

.hero {
  position: relative;
  min-height: min(100vh, 1080px);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  background: var(--bg-hero);
}

.hero-media,
.hero-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-poster,
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.hero-video {
  opacity: 0;
  transition: opacity 0.9s ease;
}

.hero-video.on {
  opacity: 1;
}

/* white starts only at ~62% so face, cross and hand stay visible;
   many eased stops so the slope flattens toward 100% — no visible band
   at the border to the white mission section below */
.hero-scrim {
  background: linear-gradient(180deg,
      rgba(30, 26, 22, 0.35) 0%,
      rgba(30, 26, 22, 0) 34%,
      rgba(255, 255, 255, 0) 62%,
      rgba(255, 255, 255, 0.09) 70%,
      rgba(255, 255, 255, 0.28) 77%,
      rgba(255, 255, 255, 0.52) 84%,
      rgba(255, 255, 255, 0.75) 90%,
      rgba(255, 255, 255, 0.91) 95%,
      rgba(255, 255, 255, 0.98) 98%,
      #FFFFFF 100%);
}

.hero-content {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 120px var(--pad-x) clamp(28px, 4vh, 40px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}

/* soft elliptical light halo behind the copy — calms whatever the video shows
   underneath without a visible edge; the video stays fully visible around it */
.hero-content::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 60px -160px -60px;
  background: radial-gradient(ellipse 62% 58% at 50% 55%, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.4) 38%, rgba(255, 255, 255, 0.16) 58%, rgba(255, 255, 255, 0) 74%);
  pointer-events: none;
}

.kicker {
  font: 600 13px/1 var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-deep);
}


h1 {
  font: 300 clamp(46px, 8vw, 92px)/1.02 var(--serif);
  letter-spacing: -0.015em;
  max-width: 880px;
  text-shadow: 0 2px 20px rgba(255, 255, 255, 0.65);
}

h1 em,
h2 em {
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}

.hero .sub {
  font: 400 clamp(17px, 2vw, 20px)/1.55 var(--font);
  color: var(--text-2);
  max-width: 620px;
  text-wrap: pretty;
  text-shadow: 0 1px 8px rgba(255, 255, 255, 0.6);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 8px;
}

.btn {
  border-radius: 999px;
  padding: 17px 30px;
  text-decoration: none;
  font: 600 16px/1 var(--font);
}

.btn-primary {
  background: var(--accent);
  color: #fff;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.btn-primary:hover {
  box-shadow: 0 10px 30px rgba(242, 112, 12, 0.4);
  transform: translateY(-2px);
}

.btn-ghost {
  color: var(--text);
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.5);
  transition: border-color 0.25s ease, color 0.25s ease;
}

.btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent-deep);
}

.scroll-hint {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gray);
  font: 600 12px/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.2s ease;
}

.scroll-hint:hover {
  color: var(--accent-deep);
}

.scroll-hint .arrow {
  display: inline-block;
  animation: tm-bounce 2.2s ease-in-out infinite;
}

/* ---------- sections ---------- */

.section {
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(64px, 9vw, 100px) var(--sec-x);
}

h2 {
  font: 300 clamp(38px, 5vw, 58px)/1.05 var(--serif);
  letter-spacing: -0.015em;
}

/* mission — column gap deliberately smaller than the page margin (proximity rule) */

.mission-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
  gap: clamp(28px, 3.5vw, 44px);
}

.mission-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mission-text {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: clamp(0px, 1.5vw, 14px);
}

.mission-text .lead {
  font: 500 clamp(19px, 2.2vw, 22px)/1.5 var(--font);
  color: var(--text);
  text-wrap: pretty;
}

.mission-text p:not(.lead) {
  font: 400 clamp(16px, 1.8vw, 17px)/1.6 var(--font);
  color: var(--muted);
  text-wrap: pretty;
}

/* ---------- verse carousel — dark full-width section, stacked cards (v3) ---------- */

.verses {
  position: relative;
  background: var(--bg-dark);
  padding: clamp(56px, 8vw, 76px) var(--pad-x) clamp(64px, 9vw, 84px);
  overflow: hidden;
}

.verses-glow {
  position: absolute;
  left: 50%;
  top: 60%;
  transform: translate(-50%, -50%);
  width: 720px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(242, 123, 44, 0.16), transparent 65%);
  pointer-events: none;
}

.verses-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vw, 36px);
  align-items: center;
}

.verses .kicker {
  color: var(--accent-light);
}

/* without js the stage is a plain vertical list — all verses stay readable */
.verses-stage {
  position: relative;
  width: 100%;
  max-width: 960px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.verse-card {
  width: min(560px, 100%);
  background: var(--bg-verse-card);
  border-radius: 24px;
  padding: clamp(28px, 4.5vw, 44px) clamp(28px, 5vw, 48px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.verse-quote {
  font: 400 clamp(20px, 2.6vw, 27px)/1.4 var(--serif);
  font-style: italic;
  color: #2A231C;
  text-wrap: pretty;
}

.verse-source {
  font: 600 13px/1 var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-rust);
}

/* js only: cards overlap in a depth stack, arrows rotate them.
   all three share one grid cell, so the stage is always exactly as tall
   as the tallest card — no fixed height that drifts out of proportion */
.js .verses-stage {
  display: grid;
  gap: 0;
}

.js .verse-card {
  grid-area: 1 / 1;
  justify-self: center;
  align-self: center;
  transition: transform 0.55s cubic-bezier(0.22, 0.8, 0.3, 1), opacity 0.55s ease;
}

.js .verse-card.off-0 {
  transform: none;
  z-index: 3;
  opacity: 1;
}

.js .verse-card.off-1 {
  transform: translateX(44%) scale(0.76);
  z-index: 1;
  opacity: 0.45;
}

.js .verse-card.off-2 {
  transform: translateX(-44%) scale(0.76);
  z-index: 1;
  opacity: 0.45;
}

/* fourth card: hidden behind the stack until it rotates forward */
.js .verse-card.off-3 {
  transform: scale(0.6);
  z-index: 0;
  opacity: 0;
}

.verses-nav {
  display: none;
}

.js .verses-nav {
  display: flex;
  gap: 14px;
}

.verse-btn {
  width: 52px;
  height: 52px;
  /* bottom padding lifts the glyph toward the optical center */
  padding: 0 0 4px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-dark-mid);
  background: transparent;
  color: var(--dark-text);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.verse-btn:hover {
  border-color: var(--accent-light);
  color: var(--accent-light);
}

/* services */

.services {
  padding-bottom: clamp(64px, 9vw, 90px);
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vw, 36px);
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
}

.section-title {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.section-sub {
  font: 400 16px/1.5 var(--font);
  color: var(--muted);
  max-width: 340px;
  text-wrap: pretty;
}

/* max two columns like the mock — auto-fit with 300px created 3+1 orphan rows on wide screens */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
  gap: 16px;
}

.card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: clamp(24px, 3vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 170px;
}

.card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-num {
  font: 700 14px/1 var(--mono);
  color: var(--faint);
}

.ai-pill {
  font: 800 11px/1 var(--mono);
  letter-spacing: 0.14em;
  color: var(--accent-deep);
  border: 1px solid rgba(242, 112, 12, 0.4);
  border-radius: 999px;
  padding: 6px 10px;
  background: var(--accent-pill-bg);
}

.card h3 {
  font: 600 clamp(22px, 2.4vw, 26px)/1.15 var(--font);
  letter-spacing: -0.01em;
  color: var(--text);
}

.card p {
  font: 400 16px/1.55 var(--font);
  color: var(--muted);
  text-wrap: pretty;
}

/* ---------- featured software banner ----------
   full-width card below the 2x2 grid — deliberately different shape so software
   reads as a product-grade offering, not as service card no. 5 */

.feature-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: clamp(24px, 3vw, 32px);
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}

.feature-copy {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.feature-copy h3 {
  font: 600 clamp(22px, 2.4vw, 26px)/1.15 var(--font);
  letter-spacing: -0.01em;
  color: var(--text);
}

.feature-copy h3 em {
  font-style: italic;
  color: var(--accent-deep);
}

.feature-copy p {
  font: 400 16px/1.55 var(--font);
  color: var(--muted);
  text-wrap: pretty;
}

.feature-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin-top: 4px;
}

.feature-tags li {
  font: 600 12px/1 var(--mono);
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 10px;
  background: var(--bg);
}

/* stylised browser window, built from plain boxes — honest hint, not a fake screenshot */

.feature-mock {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(33, 28, 23, 0.08);
}

.mock-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-verse-card);
}

.mock-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line-strong);
}

.mock-url {
  height: 10px;
  width: 40%;
  margin-left: 8px;
  border-radius: 999px;
  background: var(--line);
}

.mock-body {
  display: grid;
  grid-template-columns: 64px 1fr;
}

.mock-side {
  border-right: 1px solid var(--line);
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mock-item {
  height: 8px;
  border-radius: 4px;
  background: var(--line);
}

.mock-item.on {
  background: var(--accent);
}

.mock-main {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mock-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 2px;
}

.mock-kpi {
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-card);
}

.mock-kpi.hot {
  background: var(--accent-pill-bg);
  border-color: rgba(242, 112, 12, 0.35);
}

.mock-line {
  height: 8px;
  border-radius: 4px;
  background: var(--line);
}

.mock-line.short {
  width: 60%;
}

@media (max-width: 860px) {
  .feature-card {
    grid-template-columns: 1fr;
  }
}

/* ---------- showcase: expanding video accordion ----------
   three panels with slanted cuts via clip-path; the active panel grows.
   posters render immediately, videos lazy-load when the strip scrolls close. */

.showcase {
  padding-top: clamp(8px, 2vw, 16px);
  padding-bottom: clamp(24px, 4vw, 40px);
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vw, 36px);
}

.mstrip {
  --cut: clamp(26px, 4vw, 44px);
  display: flex;
  height: clamp(240px, 34vw, 440px);
}

.mpanel {
  position: relative;
  flex: 1;
  min-width: 0;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  overflow: hidden;
  border-radius: 0;
  clip-path: polygon(var(--cut) 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%);
  margin-left: calc(-1 * var(--cut) + 4px);
  transition: flex 0.5s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.mpanel:first-child {
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%);
  margin-left: 0;
  border-radius: 12px 0 0 12px;
}

.mpanel:last-child {
  clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%);
  border-radius: 0 12px 12px 0;
}

.mpanel.on {
  flex: 2.4;
}

.mpanel img,
.mpanel video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mpanel video {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.mpanel video.playing {
  opacity: 1;
}

/* inactive panels dim slightly so the active one reads as "open" */
.mpanel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(30, 26, 22, 0.35);
  transition: background 0.4s ease;
  pointer-events: none;
}

.mpanel.on::after {
  background: rgba(30, 26, 22, 0);
}

/* narrow screens: rotate the strip — vertical stack, cuts run top-to-bottom */
@media (max-width: 560px) {

  .mstrip {
    flex-direction: column;
    height: 440px;
  }

  .mpanel {
    clip-path: polygon(0 var(--cut), 100% 0, 100% calc(100% - var(--cut)), 0 100%);
    margin-left: 0;
    margin-top: calc(-1 * var(--cut) + 4px);
  }

  .mpanel:first-child {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), 0 100%);
    margin-top: 0;
    border-radius: 12px 12px 0 0;
  }

  .mpanel:last-child {
    clip-path: polygon(0 var(--cut), 100% 0, 100% 100%, 0 100%);
    border-radius: 0 0 12px 12px;
  }
}

/* ---------- workflow: asset-first pipeline grid ----------
   numbered stills in a 6-column grid; the portrait character sheet spans two rows,
   wide sheets span half or full width. thumbs are cover-cropped, clicking opens
   the untouched file in the lightbox dialog. */

.workflow {
  padding-top: clamp(8px, 2vw, 16px);
  /* same bottom rhythm as .services and .works, so the white space under the
     fold line matches the one the services card leaves to the showcase */
  padding-bottom: clamp(64px, 9vw, 90px);
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vw, 36px);
}

.workflow-lead {
  font: 400 17px/1.6 var(--font);
  color: var(--text-2);
  max-width: 560px;
  text-wrap: pretty;
}

/* the fold: collapsed, the wrap ends inside the second grid row so the tall
   character sheet still reads. --wcut is the share of that row that stays
   visible, js measures the row live and turns the share into a pixel height */
.wgrid-wrap {
  --wcut: 0.42;
  position: relative;
}

.js .wgrid-wrap {
  overflow: hidden;
  transition: max-height 0.55s cubic-bezier(0.22, 0.8, 0.3, 1);
}

/* fully unfolded: no clipping at all, so focus rings on the last row stay whole */
.js .wgrid-wrap.is-open {
  max-height: none;
  overflow: visible;
}

.wgrid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(14px, 2vw, 22px);
}

/* the fold row: a hairline the toggle straddles. the button is out of flow, so
   the white space below the line is nothing but the two section paddings.
   without js there is nothing to fold, so the whole row stays away */
.wfold {
  display: none;
  position: relative;
  height: 1px;
  /* unfolded the line keeps its distance to the last caption; folded it sits
     right on the cut edge, so the pill overlaps the clipped row on purpose */
  margin-top: clamp(30px, 3vw, 34px);
  background: var(--line);
}

.js .wgrid-wrap.is-collapsed + .wfold {
  margin-top: 0;
}

/* same curve as the fold itself, so line and grid edge move as one */
.js .wfold {
  transition: margin-top 0.55s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.js .wfold:not([hidden]) {
  display: block;
}

.wmore-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 15px 32px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--muted);
  font: 400 12px/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.25s ease, color 0.25s ease;
}

.wmore-btn:hover {
  border-color: var(--accent);
  color: var(--accent-deep);
}

.wcell {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wcell--character {
  grid-row: span 2;
}

.wcell--storyboard-1,
.wcell--storyboard-2 {
  grid-column: span 3;
}

.wcell--quality-difference {
  grid-column: span 6;
}

.wthumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  border: 0;
  padding: 0;
  background: var(--bg-card);
  border-radius: 12px;
  overflow: hidden;
  cursor: zoom-in;
}

.wcell--character .wthumb {
  aspect-ratio: auto;
  flex: 1;
  min-height: 0;
}

.wcell--quality-difference .wthumb {
  aspect-ratio: 8 / 3;
}

.wthumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.wcell--quality-difference .wthumb img {
  object-position: top;
}

.wthumb:hover img,
.wthumb:focus-visible img {
  transform: scale(1.03);
}

.wcell figcaption {
  font: 600 12px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.wnum {
  font-weight: 700;
  color: var(--faint);
}

@media (max-width: 700px) {

  .wgrid {
    grid-template-columns: 1fr 1fr;
  }

  .wcell,
  .wcell--storyboard-1,
  .wcell--storyboard-2,
  .wcell--quality-difference {
    grid-column: span 2;
  }

  .wcell--character {
    grid-column: span 1;
    grid-row: span 2;
  }

  /* robe and cyber arm sit next to the tall character sheet */
  .wcell--robe,
  .wcell--cyber-arm {
    grid-column: span 1;
  }

  .wcell--robe .wthumb,
  .wcell--cyber-arm .wthumb {
    aspect-ratio: 1 / 1;
  }

  .wcell--quality-difference .wthumb {
    aspect-ratio: 16 / 10;
  }
}

/* ---------- workflow lightbox ---------- */

.lightbox {
  /* the global margin reset kills the ua centering, restore it */
  margin: auto;
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(94vw, 1400px);
  max-height: 92vh;
  overflow: visible;
}

.lightbox::backdrop {
  background: rgba(30, 26, 22, 0.82);
}

.lightbox img {
  display: block;
  max-width: 100%;
  max-height: 88vh;
  border-radius: 12px;
}

.lightbox-close {
  position: absolute;
  top: -14px;
  right: -14px;
  z-index: 1;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--bg);
  color: var(--text);
  font: 400 20px/1 var(--font);
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(30, 26, 22, 0.35);
}

/* works */

.works {
  padding-top: clamp(8px, 2vw, 16px);
  padding-bottom: clamp(64px, 9vw, 90px);
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 4vw, 32px);
}

.works .section-title {
  gap: 14px;
}

.tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.tile {
  display: block;
  width: 100px;
  height: 100px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.tile:hover,
.tile:focus-visible {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 8px 24px rgba(242, 112, 12, 0.2);
}

.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: filter 0.25s ease;
}

/* unified tile look — pick ONE modifier class on .tiles in index.php:
   tiles--bw (black & white), tiles--soft (lighter grey), tiles--duo (orange duotone).
   color returns on hover/focus so the originals stay one interaction away */
.tiles--bw .tile img { filter: grayscale(1); }
.tiles--soft .tile img { filter: grayscale(1) contrast(0.72) brightness(1.14); }

/* orange duotone via blend: dark pixels take the accent, light ones stay white —
   plain sepia filters only ever produce brown here */
.tiles--duo .tile { background: var(--accent); }
.tiles--duo .tile img { filter: grayscale(1); mix-blend-mode: screen; }

.tiles--bw .tile:hover img,
.tiles--bw .tile:focus-visible img,
.tiles--soft .tile:hover img,
.tiles--soft .tile:focus-visible img,
.tiles--duo .tile:hover img,
.tiles--duo .tile:focus-visible img {
  filter: none;
  mix-blend-mode: normal;
}

.works-note {
  font: 500 14px/1 var(--mono);
  color: var(--faint);
}

/* contact — dark contrast section, full width */

.contact {
  background: var(--bg-dark);
  color: var(--dark-text);
}

.contact-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(72px, 10vw, 100px) var(--sec-x) clamp(56px, 8vw, 72px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}

.contact .kicker {
  color: var(--accent-light);
}

.contact h2 {
  font-size: clamp(44px, 7vw, 78px);
  line-height: 1;
  color: var(--dark-text);
}

.contact-text {
  font: 400 18px/1.5 var(--font);
  color: var(--dark-soft);
}

.mail {
  margin-top: 8px;
  font: 700 clamp(18px, 3vw, 24px)/1.3 var(--mono);
  color: var(--accent);
  word-break: break-word;
}

.mail-hint {
  font: 400 13px/1.5 var(--font);
  color: var(--dark-muted);
}

/* social profile row in the contact block, hidden by php when no url is set */

.social {
  margin-top: 26px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

.social-link {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-dark-mid);
  border-radius: 999px;
  color: var(--dark-soft);
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.social-link svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.social-link:hover {
  color: var(--bg-dark);
  background: var(--accent);
  border-color: var(--accent);
  transform: translateY(-2px);
}

.social-link:focus-visible {
  color: var(--accent-light);
  border-color: var(--accent);
}

/* ---------- footer (inside the dark block on the start page) ---------- */

.footer {
  border-top: 1px solid var(--line-dark);
}

.footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 26px var(--sec-x);
  font: 400 14px/1.5 var(--font);
  color: var(--dark-muted);
  flex-wrap: wrap;
}

.footer a {
  color: var(--accent-light);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer a:hover {
  color: var(--accent);
}

/* light footer variant for the legal page */

.footer-light {
  border-top: 1px solid var(--line);
}

.footer-light .footer-inner {
  color: var(--muted);
}

.footer-light a {
  color: var(--accent-deep);
}

.footer-light a:hover {
  color: var(--accent);
}

/* ---------- legal page (light topbar variant — no dark hero behind it) ---------- */

.legal-page .topbar {
  position: sticky;
  background: rgba(255, 255, 255, 0.78);
  border-bottom: 1px solid var(--line-soft);
}

.legal-page .brand,
.legal-page .menu a,
.legal-page .lang-toggle {
  color: var(--text);
}

.legal-page .menu a:hover {
  color: var(--accent);
}

.legal-page .lang-toggle {
  border-color: var(--line-strong);
}

.legal-page .lang-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.legal-main {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(48px, 8vw, 90px) var(--pad-x) clamp(64px, 10vw, 110px);
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 7vw, 72px);
}

.legal-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.legal-main h1 {
  font: 300 clamp(42px, 7vw, 72px)/1.05 var(--serif);
  letter-spacing: -0.015em;
  text-shadow: none;
}

.legal-section {
  border-top: 1px solid var(--line);
  padding-top: 40px;
}

.legal-section h2 {
  font-size: clamp(28px, 4vw, 40px);
  margin-bottom: 22px;
}

.legal-text h3 {
  font: 700 14px/1.4 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 22px 0 6px;
}

.legal-text h3:first-child {
  margin-top: 0;
}

.legal-text p {
  font: 400 17px/1.65 var(--font);
  color: var(--text-2);
  margin-bottom: 6px;
}

.legal-page .footer-inner {
  max-width: 820px;
  padding: 26px var(--pad-x);
}

/* ---------- scroll reveals (js only — content stays visible without js) ---------- */

.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.js .reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- animations ---------- */

@keyframes tm-bounce {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(6px);
  }
}

/* ---------- reduced motion: static poster, no animations ---------- */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  .hero-video {
    display: none;
  }

  .scroll-hint .arrow {
    animation: none;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .verse-card {
    transition: none;
  }

  .js .wgrid-wrap,
  .js .wfold {
    transition: none;
  }

  /* accordion: posters only, no video playback, no grow animation */
  .mpanel,
  .mpanel video,
  .mpanel::after {
    transition: none;
  }

  .mpanel video {
    display: none;
  }
}