/* ==========================================================================
   Homepage — scroll-driven layout
   Pinned hero → statement slides over it → stacked case-study cards.
   Motion is driven by js/main.js; everything degrades to a static page.
   ========================================================================== */

.stat-big {
  font-size: clamp(48px, 5vw, 72px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
}

.display {
  font-size: clamp(56px, 10vw, 140px); /* "SELECTED WORK." ≈ 8.2× font-size wide; 140px fits the 1168px content width */
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.9;
  text-transform: uppercase;
}

/* ---------- Hero (pinned) ---------- */
.top-stack { position: relative; }

.intro {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  z-index: 0;
}
.intro-bg {
  position: absolute;
  inset: 0;
  border-radius: 0;
  will-change: transform;
}
.intro-bg::after {
  /* darken toward the bottom so the type stays readable */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(17,16,13,.55) 0%, rgba(17,16,13,.2) 40%, rgba(17,16,13,.9) 100%);
}
/* Flickering grid + W monogram; colours follow the theme (read by js/main.js) */
.intro-bg {
  --flicker-bg: #d0c5ab;
  --flicker-mark: #e6dcc4;
}
.flicker-grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  /* sit above the readability wash (.intro-bg::after) so the grid isn't washed out */
  z-index: 1;
}
.intro-inner {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  /* "safe": if the content is ever taller than the screen, overflow downward instead of under the header */
  justify-content: safe flex-end;
  gap: 28px;
  padding-top: 120px;
  padding-bottom: 120px;
  will-change: transform, opacity;
}
.intro h1 {
  font-size: clamp(48px, 8.4vw, 128px);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.045em;
  max-width: 12ch;
}
.intro-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.intro-stat { display: flex; align-items: flex-end; gap: 20px; }
.intro-stat .eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  line-height: 1.6;
  padding-bottom: 6px;
}

/* ---------- Statement (slides over hero) ---------- */
.statement {
  position: relative;
  z-index: 1;
  height: 320vh;
  background: var(--bg);
}
.statement-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.statement-sticky .container { position: relative; z-index: 1; }
.statement .eyebrow { margin-bottom: 20px; }
.statement-text {
  font-size: clamp(34px, 5.6vw, 80px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.035em;
  max-width: 18ch;
}
.statement-text .w { color: var(--ink-faint); transition: color .3s ease; }
.statement-text .w.on { color: var(--ink); }
.statement-sub {
  margin-top: 28px;
  font-family: var(--font-alt);
  font-size: 22px;
  color: var(--ink-muted);
}

/* Floating images that drift up past the statement at different speeds */
.float {
  position: absolute;
  z-index: 2;
  will-change: transform;
  box-shadow: 0 30px 60px rgba(0,0,0,.45);
}
.float {
  margin: 0;
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface);
}
.float img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.float-1 { left: 4%;  top: 100%; width: clamp(200px, 28vw, 400px); aspect-ratio: 16 / 10; }
.float-2 { right: 5%; top: 100%; width: clamp(180px, 24vw, 340px); aspect-ratio: 4 / 3; }
.float-3 { left: 36%; top: 100%; width: clamp(180px, 22vw, 320px); aspect-ratio: 16 / 10; }
.float-4 { right: 24%; top: 100%; width: clamp(160px, 20vw, 290px); aspect-ratio: 16 / 10; }
.float-5 { left: 14%; top: 100%; width: clamp(170px, 22vw, 320px); aspect-ratio: 16 / 10; }
.float-6 { right: 8%; top: 100%; width: clamp(180px, 24vw, 340px); aspect-ratio: 16 / 10; }
/* Interactive & immersive projects */
.float-7  { left: 52%; top: 100%; width: clamp(180px, 22vw, 320px); aspect-ratio: 16 / 10; }
.float-8  { left: 6%;  top: 100%; width: clamp(170px, 21vw, 300px); aspect-ratio: 16 / 10; }
.float-9  { right: 34%; top: 100%; width: clamp(180px, 23vw, 330px); aspect-ratio: 16 / 10; }
.float-10 { left: 22%; top: 100%; width: clamp(170px, 22vw, 310px); aspect-ratio: 16 / 10; }

/* ---------- Impact ---------- */
.impact {
  position: relative;
  z-index: 1;
  background: var(--bg);
  padding: var(--section) 0;
}
.impact-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.impact-item { padding: 8px 32px 8px 0; }
.impact-item + .impact-item { padding-left: 32px; border-left: 1px solid var(--line); }
.impact-item:nth-child(2) { transition-delay: .08s; }
.impact-item:nth-child(3) { transition-delay: .16s; }
.impact-item:nth-child(4) { transition-delay: .24s; }
.impact-item .value {
  font-size: clamp(36px, 3.8vw, 56px);
  white-space: nowrap;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 18px;
}
.impact-item h3 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin-bottom: 22px;
}
.impact-item p { font-size: 16px; color: var(--ink-muted); }

/* ---------- Selected work: stacked cards ---------- */
.work { position: relative; z-index: 1; background: var(--bg); }
.work-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-bottom: 24px;
}
.work-head .display { flex-basis: 100%; }
.work-head .index { display: flex; align-items: center; gap: 20px; padding-bottom: 12px; }
.work-head .num { font-size: 26px; font-weight: 600; color: var(--ink-muted); }

.work-panel {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  background: var(--bg);
  display: flex;
  align-items: center;
}
.work-panel-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  height: min(78vh, 640px);
  transform-origin: center top;
  will-change: transform;
}
.work-media {
  display: block;
  height: 100%;
  transition: filter .4s ease;
}
.work-media:hover { filter: brightness(1.15); }
.work-media--img { border-radius: 4px; overflow: hidden; background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.work-media--img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; transition: transform .6s ease; }
.work-media--img:hover { filter: none; }
.work-media--img:hover img { transform: scale(1.03); }
.work-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 4px 0;
}
.work-num {
  font-size: clamp(48px, 5vw, 72px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink-soft);
}
.work-info h3 {
  font-size: clamp(26px, 2.6vw, 36px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-top: 20px;
  max-width: 16ch;
}
.work-meta { display: flex; flex-direction: column; gap: 20px; }
.work-meta p { color: var(--ink-soft); font-size: 19px; }

/* ---------- Capabilities ---------- */
.capabilities {
  position: relative;
  z-index: 1;
  background: var(--bg);
  padding: var(--section) 0 clamp(48px, 6vw, 72px);
}
.cap-grid { display: grid; grid-template-columns: repeat(6, 1fr); }
.cap-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 4px 12px;
  font-size: 16px;
  line-height: 1.35;
  color: var(--ink-soft);
}
.cap-item + .cap-item { border-left: 1px solid var(--line); }
.cap-item svg {
  width: 33px;
  height: 33px;
  stroke: var(--ink);
  stroke-width: 1.2;
  fill: none;
  overflow: visible;
  transition: transform .4s cubic-bezier(.22, 1, .36, 1);
}
/* Icons draw themselves in when the row scrolls into view (paths use pathLength="1"),
   one after another; on hover they lift and redraw */
.cap-item svg * { stroke-dasharray: 1; stroke-dashoffset: 1; }
.cap-grid.is-visible .cap-item svg * { animation: cap-draw 1.1s cubic-bezier(.65, 0, .35, 1) forwards; }
.cap-grid.is-visible .cap-item:nth-child(2) svg * { animation-delay: .12s; }
.cap-grid.is-visible .cap-item:nth-child(3) svg * { animation-delay: .24s; }
.cap-grid.is-visible .cap-item:nth-child(4) svg * { animation-delay: .36s; }
.cap-grid.is-visible .cap-item:nth-child(5) svg * { animation-delay: .48s; }
.cap-grid.is-visible .cap-item:nth-child(6) svg * { animation-delay: .6s; }
.cap-grid.is-visible .cap-item:hover svg * { animation: cap-redraw .8s cubic-bezier(.65, 0, .35, 1) both; }
.cap-item:hover svg { transform: translateY(-5px) scale(1.08); }
.cap-item--spin:hover svg { transform: translateY(-5px) scale(1.08) rotate(90deg); transition-duration: .8s; }
@keyframes cap-draw { to { stroke-dashoffset: 0; } }
@keyframes cap-redraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .cap-item svg * { stroke-dasharray: none; stroke-dashoffset: 0; animation: none !important; }
  .cap-item:hover svg { transform: none; }
}

/* ---------- Contact CTA ---------- */
.cta { position: relative; z-index: 1; background: var(--bg); padding-bottom: 120px; }
.cta-card {
  display: grid;
  grid-template-columns: 3fr 1fr;
  background: var(--surface);
  border-radius: 4px;
  overflow: hidden;
}
.cta-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 48px;
  padding: clamp(32px, 4vw, 56px);
}
.cta .section-head { grid-column: 1 / -1; margin-bottom: 0; }
.cta h2 {
  font-family: var(--font-alt);
  font-size: clamp(36px, 4.4vw, 60px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.cta p { color: var(--ink-soft); font-family: var(--font-alt); font-size: 19px; margin-bottom: 28px; }
.cta-image {
  position: relative;
  min-height: 280px;
  background: #ecebe8 url("../assets/images/cta/keyboard.jpg") center 60% / cover no-repeat;
}

.site-footer { position: relative; z-index: 1; background: var(--bg); padding-bottom: 110px; }

/* ---------- Reduced motion: no pinning tricks, just a calm page ---------- */
@media (prefers-reduced-motion: reduce) {
  .intro, .statement-sticky, .work-panel { position: relative; }
  .statement { height: auto; padding: var(--section) 0; }
  .statement-sticky { height: auto; }
  .statement-text .w { color: var(--ink); }
  .float { display: none; }
}

/* ---------- Responsive ---------- */
/* Short desktop windows (e.g. a laptop browser with toolbars and display scaling):
   size the hero headline by height too, so it never runs up behind the header */
@media (max-height: 820px) and (min-width: 761px) {
  .intro-inner { gap: 18px; padding-top: 96px; padding-bottom: 104px; }
  .intro h1 { font-size: clamp(40px, min(8.4vw, 11svh), 128px); }
  .intro .stat-big { font-size: clamp(40px, 8svh, 72px); }
  /* the statement paragraph too, keeping it clear of the floating nav at the bottom */
  .statement-sticky { padding: 40px 0 90px; box-sizing: border-box; }
  .statement .eyebrow { margin-bottom: 14px; }
  .statement-text { font-size: clamp(30px, min(5.6vw, 8.4svh), 80px); }
  .statement-sub { margin-top: 18px; font-size: 18px; }
}

@media (max-width: 1024px) {
  .impact-grid { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .impact-item:nth-child(3) { padding-left: 0; border-left: 0; }
  .cap-grid { grid-template-columns: repeat(3, 1fr); row-gap: 32px; }
  .cap-item:nth-child(4) { border-left: 0; }
}

@media (max-width: 760px) {
  .intro-inner { padding-bottom: 110px; }

  .statement { height: 260vh; }
  .float-3 { left: 30%; }

  .impact-grid { grid-template-columns: 1fr; row-gap: 32px; }
  .impact-item,
  .impact-item + .impact-item { padding: 0 0 32px; border-left: 0; border-bottom: 1px solid var(--line); }

  .work-panel-inner {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    gap: 20px;
    height: min(74svh, 620px);
  }
  /* keep card content clear of the floating nav */
  .work-panel { align-items: flex-start; padding-top: 4svh; }
  .work-info { gap: 16px; }
  .work-info h3 { margin-top: 8px; }
  .work-num { font-size: 40px; }

  .cap-grid { grid-template-columns: repeat(2, 1fr); }
  .cap-item:nth-child(odd) { border-left: 0; }
  .cap-item:nth-child(4) { border-left: 1px solid var(--line); }

  .section-head { flex-wrap: wrap; }

  .cta-card { grid-template-columns: 1fr; }
  .cta-body { grid-template-columns: 1fr; }
  .cta-image { min-height: 320px; background-position: center 62%; }
}

/* Count-up numbers keep a steady width while digits change */
[data-count] { font-variant-numeric: tabular-nums; }

/* ---------- Light theme ---------- */
:root[data-theme="light"] .intro-bg::after {
  background: linear-gradient(180deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,.25) 40%, rgba(255,255,255,.94) 100%);
}
:root[data-theme="light"] .intro-bg {
  --flicker-bg: #161616;
  --flicker-mark: #161616;
}
:root[data-theme="light"] .float { box-shadow: 0 30px 60px rgba(60,50,30,.22); }

/* Hero "View selected work" arrow nudges right to draw the eye; settles on hover */
.link-arrow--nudge svg { animation: nudge 1.6s cubic-bezier(.45, 0, .25, 1) infinite; }
.link-arrow--nudge:hover svg,
.link-arrow--nudge:focus-visible svg { animation: none; transform: translateX(6px); }
@keyframes nudge {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(8px); }
  55% { transform: translateX(0); }
  70% { transform: translateX(4px); }
  85% { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .link-arrow--nudge svg { animation: none; }
}