/*
  WALEE PORTFOLIO — EDITABLE CSS

  Change a section's base styles below. Its tablet/mobile adjustments appear
  directly after that same section, so you can see every rule that affects it.
  Section 01 contains the shared colors and page gutter.

  style.css applies to every page. Case studies also load case-study.css.
*/

/* 01. GLOBAL: FONTS, COLORS AND PAGE SPACING ----------------------------- */
@font-face {
  font-family: "Clash Display";
  src: url("assets/clash-display-500.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Clash Display";
  src: url("assets/clash-display-600.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Clash Display";
  src: url("assets/clash-display-700.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: Inter;
  src: url("assets/inter-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --paper: #fafafa;
  --ink: #1f2022;
  --muted: #8b8c90;
  --green: #0be746;
  --gutter: clamp(22px, 5.1vw, 220px);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: auto;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font-family: "Clash Display", Arial, sans-serif;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

a:focus-visible {
  outline: 2px solid #2465ec;
  outline-offset: 4px;
}

.wrap {
  padding-inline: var(--gutter);
}

/* Narrow-screen page gutter */
@media (max-width: 600px) {
  :root {
    --gutter: 22px;
  }
}

/* 02. HEADER: MINIMAL STICKY NAVIGATION -------------------------------- */
.site-header { min-height: 110px; }
.mini-nav { position: absolute; z-index: 100; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: clamp(26px, 5vw, 80px); min-height: 106px; padding: 20px var(--gutter); background: rgb(250 250 250 / 95%); backdrop-filter: blur(12px); font: 400 clamp(12px, 1.25vw, 20px)/1.2 Inter, Arial, sans-serif; text-transform: uppercase; }
.mini-nav a { display: flex; align-items: center; gap: .28em; min-height: 44px; color: #969696; text-decoration: none; transition: color .25s; }
.mini-nav a:is(:hover,:focus-visible,.is-active) { color: #202020; }
.mini-nav a.is-active { font-weight: 700; }
.eyes { position: fixed; top: 35px; right: var(--gutter); z-index: 101; display: flex; gap: 4px; pointer-events: none; }
.eye { position: relative; width: 22px; height: 32px; overflow: hidden; border: 1.5px solid var(--ink); background: white; border-radius: 50%; }
.pupil { position: absolute; left: 50%; top: 50%; width: 10px; height: 12px; border-radius: 50%; background: #111; transform: translate(calc(-50% + var(--eye-x, 0px)), calc(-50% + var(--eye-y, 2px))); transition: transform 80ms linear; }
@media (max-width: 600px) {
 .site-header { min-height: 86px; }
 .mini-nav { min-height: 80px; padding-block: 12px; gap: 24px; font-size: 10px; padding-right: 70px; }
 .eyes { top: 27px; gap: 2px; }
 .eye { width: 16px; height: 24px; }
 .pupil { width: 8px; height: 10px; }
}

/* 03. HERO: PHOTO, ROLE AND HEADLINE ------------------------------------- */
.hero {
  min-height: 100svh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* The identity block contains the photo, floating Z, and role label. */
.hero-main {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: clamp(38px, 7vh, 100px);
}

.identity {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: clamp(10px, 1.4vw, 24px);
  width: max-content;
  margin-bottom: clamp(22px, 3.2vh, 52px);
}

.profile {
  position: relative;
  width: 180px;
  aspect-ratio: 180 / 217;
  overflow: hidden;
  border-radius: 13px;
  background: #252525;
}

.profile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(var(--photo-x, 0px), var(--photo-y, 0px)) scale(1.04);
  transition: transform 0.2s ease-out;
}

.profile:hover {
  animation: profile-shake 0.52s ease-in-out 2;
}

@keyframes profile-shake {
  0%,
  100% {
    transform: translate(0, 0) rotate(0);
  }

  25% {
    transform: translate(-2px, 1px) rotate(-1deg);
  }

  50% {
    transform: translate(2px, -1px) rotate(1deg);
  }

  75% {
    transform: translate(-1px, 1px) rotate(-0.5deg);
  }
}

/* The Z moves in a gentle loop, independent of the photo hover. */
.z-mark {
  position: absolute;
  z-index: 1;
  top: -14%;
  left: clamp(143px, 5.65vw, 275px);
  width: clamp(40px, 4.6vw, 170px);
  height: auto;
  animation: z-drift 4.5s ease-in-out infinite;
  filter: drop-shadow(0 3px 3px rgb(0 0 0 / 10%));
}

@keyframes z-drift {
  0%,
  100% {
    transform: translateY(0) rotate(-6deg);
  }

  50% {
    transform: translateY(-8px) rotate(6deg);
  }
}

.identity p {
  margin: 0 0 2px;
  font-size: clamp(12px, 1.4vw, 62px);
  line-height: 1.02;
  font-weight: 100;
}

/* The supplied blue SVG leads to contact and turns gently on hover. */
.role-action {
  display: inline-flex;
  padding: 0;
  margin-left: 0.2em;
  border: 0;
  background: none;
  cursor: pointer;
  vertical-align: middle;
}

.role-action img {
  width: 58px;
  height: auto;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.role-action:hover img,
.role-action:focus-visible img {
  transform: rotate(-12deg) scale(1.04);
}

/* H1 scales smoothly from narrow phones to extra-large displays. */
.hero h1 {
  width: 100%;
  margin: 0;
  font-size: clamp(52px, calc(4.4vw + 21px), 270px);
  line-height: 1.08;
  font-weight: 400;
}

.star {
  display: inline-block;
  width: 0.82em;
  height: 0.82em;
  margin-inline: 0.015em;
  vertical-align: -0.07em;
  transform-origin: center;
  animation: star-turn 10s linear infinite;
}

/* A slow full rotation for the icon between "Design" and "director". */
@keyframes star-turn {
  to {
    transform: rotate(360deg);
  }
}

/* Mobile hero */
@media (max-width: 600px) {
  .hero {
    min-height: 100svh;
  }

  .hero-main {
    padding-bottom: clamp(45px, 10vh, 85px);
  }

  .identity {
    margin-bottom: 28px;
  }

  .profile {
    width: 62px;
  }

  .role-action img {
    width: 21px;
  }

  .hero h1 {
    line-height: 1.095;
    letter-spacing: -0.069em;
  }
}

/* Narrow phones */
@media (max-width: 360px) {
  .identity p {
    font-size: 14px;
  }
}

/* 04. ABOUT: BIOGRAPHY AND SCROLL COLOR ---------------------------------- */
.about {
  padding-top: clamp(75px, 12vh, 170px);
  padding-bottom: clamp(120px, 16vh, 230px);
}

.about-copy {
  max-width: 80vw;
  font-family: Inter, Arial, sans-serif;
  font-size: clamp(18px, 2.2vw, 84px);
  line-height: 1.3;
  font-weight: 500;
}

.about-copy p {
  margin: 0 0 0.8em;
}

.muted {
  color: var(--muted);
  font-weight: 440;
}

.about-word {
  color: #b3b3b3;
  transition: color 0.52s ease;
}

.about-word.is-lit {
  color: var(--ink);
}

/* Tablet about */
@media (max-width: 850px) {
  .about-copy {
    max-width: 100%;
  }
}

/* Mobile about */
@media (max-width: 600px) {
  .about {
    padding-block: 75px 110px;
  }

  .about-copy {
    font-size: clamp(18px, 5vw, 24px);
    line-height: 1.28;
  }
}

/* 05. PROJECTS: CARDS STACK IN SCROLL ORDER ---------------------------- */
.work-heading { text-align: center; margin-bottom: clamp(35px, 4vw, 70px); }
.work-heading h2 { margin: 0; font-size: clamp(35px, 4vw, 80px); line-height: 1.12; font-weight: 600; }
.work-heading h2 span { color: #b3b3b3; }
.work-heading p { margin: 7px 0 0; font-size: clamp(14px, 1.3vw, 22px); font-weight: 400; }
.project-list { padding: 0 var(--gutter) 18vh; isolation: isolate; }
.project-card { position: sticky; top: 116px; margin-bottom: clamp(16px, 2vw, 32px); }
.project-card:last-child { margin-bottom: 0; }
.project { position: relative; display: block; overflow: hidden; height: min(52.2vw, calc(100svh - 140px)); background: #ededed; border-radius: clamp(8px, .8vw, 14px); }
.project img, .project-video { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s cubic-bezier(.2,.8,.2,1); }
.project-video { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.project-video.is-playing { opacity: 1; }
.project:is(:hover,:focus-visible) :is(img,video) { transform: scale(1.025); }
.project:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.work-index { padding-top: clamp(75px, 8vw, 140px); padding-bottom: clamp(65px, 8vw, 145px); }
.work-index h1 { margin: 0 0 clamp(30px, 3vw, 48px); font-size: clamp(32px, 3vw, 52px); font-weight: 600; line-height: 1.15; }
.work-index-list { margin: 0; padding: 0; list-style: none; }
.work-index-list li { border-bottom: 1px solid #777; font-size: clamp(22px, 2vw, 34px); font-weight: 500; line-height: 1.3; }
.work-index-list li > * { display: block; padding: 14px 0; text-decoration: none; }
.work-index-list a { transition: padding-left .3s, color .3s; }
.work-index-list a:is(:hover,:focus-visible) { padding-left: 12px; color: #777; }
@media (max-width: 600px) {
 .project-card { top: 90px; }
 .project { height: min(52.2vw, calc(100svh - 110px)); }
 .work-index { padding-top: 48px; }
 .work-index-list li > * { padding-block: 13px; }
}
@media (prefers-reduced-motion: reduce) {
 .project-card { position: relative; top: auto; }
 .project:is(:hover,:focus-visible) :is(img,video) { transform: none; }
 .project-list { padding-bottom: 0; }
}

/* 06. CLIENTS: INTRO, CTA AND MOVING LOGO CARDS ------------------------- */
/* This section appears only in clients.html. Its cards retain replaceable PNGs. */
.clients {
  min-height: 100svh;
  padding-bottom: clamp(110px, 10vw, 220px);
}

.clients-header {
  padding-inline: 0;
}

.clients-content {
  max-width: 1260px;
  margin-top: clamp(70px, 8vh, 135px);
  margin-left: clamp(0px, 5.8vw, 130px);
}

.clients-statement {
  max-width: 24em;
  margin: 0;
  font-size: clamp(24px, 2vw, 42px);
  font-weight: 200;
  line-height: 1.12;
  /* letter-spacing: -0.052em; */
  text-wrap: balance;
}

.clients-statement span {
  color: #000000;
}

/* Dark pill, with an arrow that changes direction and color on hover. */
.clients-cta {
  display: inline-flex;
  align-items: center;
  gap: clamp(18px, 1.8vw, 35px);
  margin-top: clamp(31px, 2.5vw, 50px);
  padding: 4px 4px 4px 23px;
  border: 1px solid var(--ink);
  border-radius: 100px;
  background: var(--ink);
  color: white;
  font-family: Inter, Arial, sans-serif;
  font-size: clamp(15px, 1vw, 19px);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  transition:
    background 0.4s ease,
    color 0.4s ease,
    transform 0.4s ease,
    box-shadow 0.4s ease;
}

.clients-cta-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: clamp(43px, 2.4vw, 52px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: white;
  color: var(--ink);
  transition:
    background 0.4s ease,
    color 0.4s ease,
    transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.clients-cta-icon svg {
  width: 22px;
  height: 22px;
}

.clients-cta:hover,
.clients-cta:focus-visible {
  background: white;
  color: var(--ink);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgb(0 0 0 / 10%);
}

.clients-cta:hover .clients-cta-icon,
.clients-cta:focus-visible .clients-cta-icon {
  background: var(--ink);
  color: white;
  transform: rotate(-45deg);
}

/* Full-bleed logo row. JavaScript repeats the six-card group for a clean loop. */
.client-loop {
  overflow: hidden;
  margin: clamp(75px, 5.5vw, 120px) calc(-1 * var(--gutter)) 0;
}

.client-loop-track,
.client-loop-group {
  display: flex;
  align-items: center;
  width: max-content;
}

.client-loop-track.is-ready {
  animation: client-logo-loop 90s linear infinite;
}

.client-loop:hover .client-loop-track,
.client-loop:focus-within .client-loop-track {
  animation-play-state: paused;
}

.client-loop-group {
  flex: none;
  gap: 12px;
  padding-right: 12px;
}

.client-logo-card {
  display: grid;
  flex: none;
  place-items: center;
  width: clamp(205px, 12.2vw, 280px);
  height: clamp(145px, 8.3vw, 190px);
  overflow: hidden;
  border-radius: 18px;
  background: #f5f5f6;
  transition:
    background 0.35s ease,
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

.client-logo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.client-logo-link {
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.client-logo-link:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -5px;
  border-radius: inherit;
}

.client-logo-card:hover {
  background: #ededee;
  transform: translateY(-5px);
  box-shadow: 0 12px 26px rgb(0 0 0 / 8%);
}

@keyframes client-logo-loop {
  to {
    transform: translateX(-50%);
  }
}

/* Mobile clients */
@media (max-width: 600px) {
  .clients {
    padding-bottom: 110px;
  }

  .clients-content {
    margin-top: 90px;
    margin-left: 0;
  }

  .clients-statement {
    font-size: clamp(31px, 7.6vw, 42px);
  }

  .clients-cta {
    margin-top: 32px;
  }

  .client-loop {
    margin-top: 78px;
  }

  .client-logo-card {
    width: 190px;
    height: 140px;
    border-radius: 16px;
  }
}

/* 07. FOOTER: CONTACT AND MOVING CAPABILITY STRIP ------------------------ */
/* Contact block follows the supplied layout; the capabilities flow below. */
.footer {
  overflow: hidden;
  background: var(--paper);
}

.footer-main {
  padding: clamp(95px, 6.4vw, 145px) var(--gutter)
    clamp(72px, 4vw, 105px);
}

.footer-question {
  margin: 0 0 clamp(20px, 1.2vw, 30px);
  font-size: clamp(12px, 1.4vw, 28px);
  font-weight: 200;
  line-height: 1.2;
}

.footer-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.18em;
  max-width: 100%;
  font-size: clamp(46px, 4.9vw, 90px);
  font-weight: 500;
  line-height: 1.04;
  /* letter-spacing: -0.055em; */
  text-decoration: none;
}

.footer-cta-text {
  transition: transform 0.35s ease;
}

.footer-cta:hover .footer-cta-text,
.footer-cta:focus-visible .footer-cta-text {
  transform: scale(0.985);
}

.footer-cta-arrow {
  width: 0.3em;
  height: 0.3em;
  flex: none;
  background: currentColor;
  -webkit-mask: url("assets/arrow-small.svg") center / contain no-repeat;
  mask: url("assets/arrow-small.svg") center / contain no-repeat;
  opacity: 0;
  transform: translate(-0.12em, 0.12em);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.footer-cta:hover .footer-cta-arrow,
.footer-cta:focus-visible .footer-cta-arrow {
  opacity: 1;
  transform: translate(0, 0);
}

.socials {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(18px, 2.8vw, 65px);
  margin-top: clamp(18px, 3vw, 48px);
  font-size: clamp(10px, 1vw, 26px);
  font-weight: 500;
}

.socials a {
  position: relative;
  text-decoration: none;
}

.socials a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -4px;
  left: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s ease;
}

.socials a:hover::after,
.socials a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* One editable row is cloned in script.js for a seamless continuous loop. */
.footer-marquee {
  overflow: hidden;
  border-top: 1px solid var(--ink);
}

.marquee-track,
.marquee-group {
  display: flex;
  width: max-content;
  align-items: center;
}

.marquee-track.is-ready {
  animation: footer-marquee 55s linear infinite;
}

.marquee-group {
  flex: none;
  min-height: clamp(120px, 8.3vw, 190px);
}

.marquee-item {
  display: inline-flex;
  flex: none;
  align-items: center;
  padding-left: clamp(32px, 2.4vw, 56px);
  font-family: Inter, Arial, sans-serif;
  font-size: clamp(20px, 2.5vw, 30px);
  font-weight: 300;
  line-height: 1;
  /* letter-spacing: -0.055em; */
  white-space: nowrap;
}

.marquee-item:nth-child(odd) {
  font-family: "Clash Display", Arial, sans-serif;
  font-weight: 300;
}

.marquee-item::after {
  content: "•";
  margin-left: clamp(32px, 2.4vw, 56px);
  font-size: 0.55em;
  font-weight: 300;
}

@keyframes footer-marquee {
  to {
    transform: translateX(-50%);
  }
}

/* Mobile footer */
@media (max-width: 600px) {
  .footer-main {
    padding: 88px var(--gutter) 76px;
  }

  .footer-question {
    font-size: 17px;
  }

  .footer-cta {
    font-size: clamp(42px, 10vw, 66px);
  }

  .socials {
    gap: 16px 28px;
    margin-top: 52px;
    font-size: 18px;
  }

  .marquee-group {
    min-height: 100px;
  }

  .marquee-item {
    font-size: 42px;
  }
}

/* 08. SCROLL REVEAL ------------------------------------------------------ */
/* Locomotive Scroll adds .is-inview when an element enters the screen. */
@media (prefers-reduced-motion: no-preference) {
  [data-scroll]:not(.is-inview) {
    opacity: 0;
    transform: translateY(70px);
  }

  [data-scroll].is-inview {
    opacity: 1;
    transform: translateY(0);
    transition:
      opacity 1s cubic-bezier(0.2, 0.8, 0.2, 1),
      transform 1.15s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .project[data-scroll]:not(.is-inview) {
    opacity: 0.3;
    transform: translateY(95px) scale(0.975);
  }

  .project[data-scroll].is-inview {
    transition-duration: 1.1s;
  }
}

/* 09. REDUCED MOTION ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .client-loop {
    overflow-x: auto;
  }

  .client-loop-track.is-ready {
    animation: none;
  }

  .footer-marquee {
    overflow-x: auto;
  }

  .marquee-track.is-ready {
    animation: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }

  [data-scroll] {
    opacity: 1 !important;
    transform: none !important;
  }

  .about-word {
    color: var(--ink) !important;
  }
}

/* Subtle depth on the INNER cover preserves the outer sticky geometry. */
.project-card { perspective: 1400px; }
.project { transform-origin: center top; transform: translateY(var(--press-y, 0px)) scale(var(--press-scale, 1)) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); filter: brightness(var(--press-light, 1)); transition: transform .3s cubic-bezier(.2,.7,.2,1), filter .3s ease; }
.project img, .project-video { transform: translate(var(--media-x, 0px), var(--media-y, 0px)) scale(1.018); }
.project:is(:hover,:focus-visible) :is(img,video) { transform: translate(var(--media-x, 0px), var(--media-y, 0px)) scale(1.035); }
.work-index-list li { position: relative; }
.work-index-list li > span { cursor: default; }
.work-index-list li > * { transition: padding-left .4s cubic-bezier(.2,.8,.2,1), color .3s; }
.work-index-list li:is(:hover,:focus-within) > * { padding-left: 12px; }
.work-index-list li.reveal-pending { opacity: 0; transform: translateY(22px); }
.work-index-list li { transition: opacity .7s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.work-preview { position: fixed; z-index: 90; top: 0; left: 0; width: clamp(200px, 27vw, 400px); aspect-ratio: 4 / 3; pointer-events: none; visibility: hidden; opacity: 0; transform: translate3d(var(--preview-x, 0px), var(--preview-y, 0px), 0) rotate(var(--preview-angle, 0deg)) scale(.9); transition: opacity .22s, visibility .22s, transform .35s cubic-bezier(.18,.8,.25,1); }
.work-preview.is-visible { visibility: visible; opacity: 1; transform: translate3d(var(--preview-x, 0px), var(--preview-y, 0px), 0) rotate(var(--preview-angle, 0deg)) scale(1); }
.work-preview img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; box-shadow: 0 20px 55px rgb(0 0 0 / 12%); }
@media (hover: none), (max-width: 600px) { .work-preview { display: none; } }
@media (prefers-reduced-motion: reduce) {
 .project, .project img, .project-video { transform: none !important; filter: none !important; }
 .work-index-list li.reveal-pending { opacity: 1; transform: none; }
 .work-preview { transition: none; }
}

/* Work / Clients composition from the supplied reference. */
.combined-work { padding-bottom: clamp(160px, 18vw, 320px); }
.combined-intro { padding-top: clamp(100px, 13vw, 270px); text-align: center; }
.combined-intro h1 { margin: 0; font: 500 clamp(36px, 5.05vw, 92px)/1.08 "Clash Display", Arial, sans-serif; letter-spacing: -.055em; text-transform: uppercase; }
.combined-intro p { margin: clamp(24px, 2vw, 36px) auto 0; font: 400 clamp(14px, 1.22vw, 22px)/1.25 Inter, Arial, sans-serif; }
.combined-cta { display: inline-block; margin-top: clamp(35px, 4.5vw, 80px); font: 400 clamp(14px, 1.08vw, 19px) Inter, Arial, sans-serif; text-decoration: none; transition: transform .3s ease, opacity .3s ease; }
.combined-cta:hover { transform: translateY(-3px); opacity: .55; }
.teams { margin-top: clamp(80px, 8vw, 145px); }
.teams h2, .combined-projects h2 { margin: 0 0 24px; font-size: clamp(23px, 2vw, 37px); letter-spacing: -.035em; font-weight: 600; }
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #8e8e8e; border-left: 1px solid #8e8e8e; }
.team-cell { display: flex; align-items: center; justify-content: center; min-width: 0; aspect-ratio: 1.68; padding: 18px; border-right: 1px solid #8e8e8e; border-bottom: 1px solid #8e8e8e; text-decoration: none; transition: background .3s, transform .3s; }
.team-cell:is(:hover,:focus-visible) { background: #ececec; }
.team-cell img { width: min(78%, 230px); height: 75%; object-fit: contain; mix-blend-mode: multiply; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.team-cell:hover img { transform: scale(1.055); }
.team-wordmark { font-size: clamp(18px, 2.05vw, 37px); font-weight: 700; letter-spacing: -.06em; }
.team-wordmark.apna { color: #07bea5; }
.team-wordmark.daal { color: #ff641d; font-weight: 700; }
.team-final { justify-content: flex-start; padding-left: 18%; font: 500 clamp(12px, 1.1vw, 20px) Inter, Arial, sans-serif; }
.combined-projects { margin-top: clamp(145px, 15vw, 275px); }
.combined-projects h2 { margin-bottom: 4px; }
.combined-projects .work-index-list li { display: flex; justify-content: space-between; align-items: center; gap: 20px; font-size: clamp(19px, 1.7vw, 30px); }
.combined-projects .work-index-list li > :first-child { flex: 1; padding-block: clamp(20px, 2.2vw, 38px); }
.combined-projects .work-index-list .project-kind { flex: none; color: #888; font: 400 clamp(11px, 1.02vw, 18px) Inter, Arial, sans-serif; text-align: right; }
.combined-projects .work-index-list li:is(:hover,:focus-within) .project-kind { color: #1f2022; }
@media (max-width: 700px) {
  .combined-intro { padding-top: 100px; }
  .combined-intro h1 { font-size: clamp(35px, 8vw, 58px); }
  .desktop-break { display: none; }
  .combined-intro p { max-width: 48ch; line-height: 1.45; }
  .teams { margin-top: 100px; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .team-cell { aspect-ratio: 1.45; padding: 12px; }
  .team-final { padding-left: 14px; }
  .combined-projects { margin-top: 140px; }
  .combined-projects .work-index-list li { align-items: baseline; }
  .combined-projects .work-index-list .project-kind { max-width: 43%; line-height: 1.3; }
}

/* Fine, stationary grain across pages; it never intercepts pointer input. */
body::after { content: ""; position: fixed; inset: 0; z-index: 999; pointer-events: none; opacity: .12; background-image: url("assets/noise.svg"); background-repeat: repeat; background-size: 180px 180px; }
@media (prefers-reduced-motion: reduce) { .combined-cta:hover, .team-cell:hover img { transform: none; } }

/* 10. SELECTED WORKS V2: STACKED PROJECT DECK ---------------------------- */
/* Each card = dark shell with an info bar + cover. Cards pin a little lower
   than the previous one (--stack-step) so the deck reads like stacked tabs.
   Per-card accent colour is set inline in index.html (style="--accent:..."). */
.work { --stack-top: clamp(84px, 9vh, 116px); --stack-step: clamp(10px, 1vw, 16px); --bar: clamp(62px, 4.8vw, 88px); }
.work-heading h2 sup { margin-left: .18em; color: #b3b3b3; font-size: .38em; font-weight: 500; vertical-align: super; letter-spacing: 0; }
.work-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: clamp(22px, 2.2vw, 36px); }
.work-jump a { display: inline-flex; align-items: center; gap: .6em; padding: .7em 1.15em; border: 1px solid #d6d6d8; border-radius: 99px; font: 500 clamp(12px, .95vw, 16px)/1 Inter, Arial, sans-serif; text-decoration: none; transition: background .3s, color .3s, border-color .3s, transform .3s; }
.work-jump a span { color: #9a9a9e; font-size: .85em; font-variant-numeric: tabular-nums; transition: color .3s; }
.work-jump a:is(:hover,:focus-visible) { background: var(--ink); border-color: var(--ink); color: #fff; transform: translateY(-2px); }
.work-jump a:is(:hover,:focus-visible) span { color: #9a9a9e; }

.project-card { top: calc(var(--stack-top) + var(--i, 0) * var(--stack-step)); margin-bottom: clamp(26px, 3vw, 48px); scroll-margin-top: calc(var(--stack-top) + var(--i, 0) * var(--stack-step)); }
.project-shell { position: relative; padding: clamp(6px, .55vw, 10px); border-radius: clamp(16px, 1.4vw, 26px); background: #151618; color: #f5f5f5; box-shadow: 0 -1px 0 rgb(255 255 255 / 4%) inset, 0 40px 80px -40px rgb(0 0 0 / 55%); transform-origin: center top; transform: translateY(var(--press-y, 0px)) scale(var(--press-scale, 1)); filter: brightness(var(--press-light, 1)); transition: transform .3s cubic-bezier(.2,.7,.2,1), filter .3s ease; }
.project-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: clamp(12px, 1.6vw, 28px); height: var(--bar); padding: 0 clamp(8px, 1vw, 18px) clamp(4px, .4vw, 8px) clamp(10px, 1.1vw, 20px); }
.project-num { display: inline-flex; align-items: baseline; gap: 2px; font: 500 clamp(13px, 1vw, 17px)/1 Inter, Arial, sans-serif; font-variant-numeric: tabular-nums; color: #f5f5f5; }
.project-num small { color: #6f7075; font-size: .82em; }
.project-num::before { content: ""; align-self: center; width: .62em; height: .62em; margin-right: .7em; border-radius: 50%; background: var(--accent, var(--green)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent, #0be746) 22%, transparent); }
.project-name { min-width: 0; margin: 0; overflow: hidden; font: 500 clamp(22px, 2.3vw, 44px)/1 "Clash Display", Arial, sans-serif; letter-spacing: -.02em; white-space: nowrap; text-overflow: ellipsis; }
.project-tags { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.project-tags li { padding: .55em .95em; border: 1px solid rgb(255 255 255 / 16%); border-radius: 99px; color: #c9c9cd; font: 400 clamp(11px, .82vw, 14px)/1 Inter, Arial, sans-serif; white-space: nowrap; }
.project-cta { display: inline-flex; align-items: center; gap: 12px; padding: 5px 5px 5px 18px; border-radius: 99px; background: #fff; color: var(--ink); font: 500 clamp(12px, .9vw, 15px)/1 Inter, Arial, sans-serif; text-decoration: none; white-space: nowrap; transition: background .35s, color .35s; }
.project-cta i { display: grid; place-items: center; width: clamp(30px, 2.3vw, 40px); aspect-ratio: 1; border-radius: 50%; background: var(--accent, var(--ink)); color: #fff; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.project-cta svg { width: 45%; height: 45%; }
.project-cta:is(:hover,:focus-visible), .project-card:has(.project:hover) .project-cta { background: var(--accent, #fff); color: #fff; }
.project-cta:is(:hover,:focus-visible) i, .project-card:has(.project:hover) .project-cta i { background: #fff; color: var(--ink); transform: rotate(45deg); }
.project { height: min(calc(52.2vw - var(--bar)), calc(100svh - var(--stack-top) - var(--bar) - 5 * var(--stack-step) - 24px)); border-radius: clamp(10px, 1vw, 18px); transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); filter: none; background: #222; }
.project::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 6%); pointer-events: none; }

/* Mouse-following label over covers (desktop). Created by interactions.js. */
.cursor-pill { position: fixed; z-index: 95; top: 0; left: 0; display: grid; place-items: center; width: 104px; height: 104px; margin: -52px 0 0 -52px; border-radius: 50%; background: var(--pill-bg, #fff); color: var(--ink); font: 600 13px/1.1 Inter, Arial, sans-serif; text-align: center; pointer-events: none; opacity: 0; transform: translate3d(var(--cx, -200px), var(--cy, -200px), 0) scale(.3); transition: opacity .25s ease, transform .18s cubic-bezier(.2,.8,.2,1), background .3s; box-shadow: 0 16px 40px rgb(0 0 0 / 22%); }
.cursor-pill.is-on { opacity: 1; transform: translate3d(var(--cx), var(--cy), 0) scale(1); }
.cursor-pill span { max-width: 70px; }
@media (hover: none), (max-width: 900px) { .cursor-pill { display: none; } }

@media (max-width: 900px) {
  .project-tags { display: none; }
  .project-bar { grid-template-columns: auto minmax(0, 1fr) auto; }
}
@media (max-width: 600px) {
  .work { --stack-top: 78px; --stack-step: 8px; --bar: 56px; }
  .project-cta { padding-left: 5px; }
  .project-cta span { display: none; }
  .project-name { font-size: 20px; }
  .project { height: min(calc(62vw), calc(100svh - 170px)); }
  .work-jump { gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .project-shell { transform: none !important; filter: none !important; }
  .cursor-pill { display: none; }
}

/* 11. WORK / CLIENTS V2: KINETIC HERO -------------------------------------- */
/* Words rise from a mask on load (work-page.js adds .is-ready to <html>).
   A pill inside the headline cycles project covers; five covers float at the
   edges and follow the mouse (data-depth). Without JS everything is static. */
.hero-kinetic { position: relative; min-height: min(100svh, 1100px); display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: clamp(110px, 10vw, 200px); padding-bottom: clamp(60px, 6vw, 120px); }
.hero-kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 clamp(22px, 2.4vw, 40px); padding: 9px 16px; border: 1px solid #dcdcde; border-radius: 99px; background: rgb(255 255 255 / 70%); font: 500 clamp(11px, .85vw, 14px)/1 Inter, Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.hero-kicker .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgb(11 231 70 / 60%); animation: kicker-ping 2s ease-out infinite; }
@keyframes kicker-ping { to { box-shadow: 0 0 0 10px rgb(11 231 70 / 0%); } }
.hero-kinetic h1 { position: relative; z-index: 2; margin: 0; font: 500 clamp(36px, 5.6vw, 104px)/1.02 "Clash Display", Arial, sans-serif; letter-spacing: -.055em; text-transform: uppercase; }
.hero-kinetic .hl { display: inline-block; white-space: nowrap; }
.hero-kinetic .w { display: inline-block; overflow: hidden; padding: .04em .02em .08em; margin: -.04em -.02em -.08em; vertical-align: top; }
.hero-kinetic .w > span { display: inline-block; }
.hero-pill { position: relative; display: inline-block; width: 1.9em; height: .82em; margin: 0 .02em; overflow: hidden; border-radius: 99px; vertical-align: .02em; background: #e6e6e8; box-shadow: inset 0 0 0 2px rgb(0 0 0 / 6%); }
.hero-pill img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.15); }
.hero-pill img:first-child { opacity: 1; transform: none; }
.hero-spin { display: inline-block; width: .72em; height: .72em; vertical-align: -.02em; margin: 0 .04em; }
.hero-spin img { width: 100%; height: 100%; animation: star-turn 8s linear infinite; }
.hero-copy { position: relative; z-index: 2; margin: clamp(24px, 2.2vw, 40px) auto 0; font: 400 clamp(14px, 1.22vw, 22px)/1.4 Inter, Arial, sans-serif; color: #55565a; }
.hero-actions { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(18px, 3vw, 54px); margin-top: clamp(30px, 3.4vw, 60px); }
.hero-cta { --x: 0px; --y: 0px; display: inline-flex; align-items: center; gap: 16px; padding: 6px 6px 6px 26px; border-radius: 99px; background: var(--ink); color: #fff; font: 500 clamp(14px, 1vw, 18px)/1 Inter, Arial, sans-serif; text-decoration: none; transform: translate(var(--x), var(--y)); transition: transform .35s cubic-bezier(.2,.8,.2,1), background .3s, box-shadow .3s; box-shadow: 0 14px 34px -12px rgb(0 0 0 / 40%); }
.hero-cta i { display: grid; place-items: center; width: clamp(42px, 3vw, 54px); aspect-ratio: 1; border-radius: 50%; background: var(--green); color: var(--ink); transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.hero-cta svg { width: 44%; height: 44%; }
.hero-cta:is(:hover,:focus-visible) i { transform: rotate(45deg) scale(1.06); }
.hero-stats { display: flex; gap: clamp(16px, 2vw, 34px); margin: 0; padding: 0; list-style: none; font: 400 clamp(12px, .95vw, 16px)/1 Inter, Arial, sans-serif; color: #77787c; }
.hero-stats b { display: block; margin-bottom: 6px; color: var(--ink); font: 500 clamp(24px, 2.2vw, 40px)/1 "Clash Display", Arial, sans-serif; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.hero-stats li + li { padding-left: clamp(16px, 2vw, 34px); border-left: 1px solid #dcdcde; }
.hero-scroll { position: absolute; bottom: clamp(18px, 3vw, 40px); left: 50%; width: 26px; height: 42px; margin-left: -13px; border: 1.5px solid #b9b9bd; border-radius: 99px; }
.hero-scroll span { position: absolute; top: 8px; left: 50%; width: 4px; height: 8px; margin-left: -2px; border-radius: 4px; background: var(--ink); animation: scroll-hint 1.8s cubic-bezier(.6,0,.3,1) infinite; }
@keyframes scroll-hint { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 80% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }
.hero-floats { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero-float { --mx: 0px; --my: 0px; position: absolute; width: clamp(120px, 12vw, 230px); aspect-ratio: 16 / 10; border-radius: clamp(10px, .9vw, 16px); overflow: hidden; background: #ddd; box-shadow: 0 30px 60px -24px rgb(0 0 0 / 38%); transform: translate(var(--mx), var(--my)) rotate(var(--r)); transition: transform .9s cubic-bezier(.2,.8,.2,1); }
.hero-float img { width: 100%; height: 100%; object-fit: cover; }
.hero-float.f1 { left: -1%; top: 22%; }
.hero-float.f2 { right: -2%; top: 16%; width: clamp(130px, 13vw, 250px); }
.hero-float.f3 { left: 4%; bottom: 10%; width: clamp(110px, 10vw, 200px); }
.hero-float.f4 { right: 5%; bottom: 8%; }
.hero-float.f5 { left: 44%; top: clamp(70px, 7vw, 120px); width: clamp(80px, 7vw, 130px); opacity: .9; }

/* Load choreography: only when JS marks the page ready and motion is allowed. */
@media (prefers-reduced-motion: no-preference) {
  .js-kinetic .hero-kinetic .w > span { transform: translateY(110%) rotate(6deg); transition: transform 1.1s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--d) * 70ms + 150ms); }
  .js-kinetic .hero-kinetic :is(.hero-pill, .hero-spin) { transform: scale(0) rotate(-30deg); transition: transform .9s cubic-bezier(.34,1.56,.64,1); transition-delay: calc(var(--d) * 70ms + 250ms); }
  .js-kinetic .hero-kinetic :is(.hero-kicker, .hero-copy, .hero-actions, .hero-scroll) { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform 1s cubic-bezier(.16,1,.3,1); }
  .js-kinetic .hero-kinetic .hero-copy { transition-delay: .95s; } .js-kinetic .hero-kinetic .hero-actions { transition-delay: 1.1s; } .js-kinetic .hero-kinetic .hero-scroll { transition-delay: 1.4s; }
  .js-kinetic .hero-kinetic .hero-float { opacity: 0; transform: translate(var(--mx), calc(var(--my) + 60px)) rotate(calc(var(--r) * 3)) scale(.85); transition: transform 1.3s cubic-bezier(.16,1,.3,1), opacity .9s ease; }
  .js-kinetic .hero-kinetic .hero-float:nth-child(n) { transition-delay: calc(700ms + var(--fi, 0) * 110ms), calc(700ms + var(--fi, 0) * 110ms); }
  .is-ready .hero-kinetic .w > span, .is-ready .hero-kinetic :is(.hero-pill, .hero-spin) { transform: none; }
  .is-ready .hero-kinetic :is(.hero-kicker, .hero-copy, .hero-actions, .hero-scroll) { opacity: 1; transform: none; }
  .is-ready .hero-kinetic .hero-float { opacity: 1; transform: translate(var(--mx), var(--my)) rotate(var(--r)); }
  .is-settled .hero-kinetic .hero-float { transition: transform .9s cubic-bezier(.2,.8,.2,1); transition-delay: 0s; }
}
@media (max-width: 900px) { .hero-float.f5, .hero-float.f2, .hero-float.f1 { display: none; } .hero-float.f3 { left: -4%; bottom: 3%; } .hero-float.f4 { right: -4%; bottom: 5%; } }
@media (max-width: 700px) { .hero-kinetic .hl { white-space: normal; } .hero-kinetic { min-height: auto; padding-bottom: 110px; } .hero-floats { display: none; } .hero-scroll { display: none; } }

/* 12. WORK / CLIENTS V2: TEAMS GRID ---------------------------------------- */
/* Each cell floods with its brand colour from the cursor position (--mx/--my),
   the logo turns white (unless .keep), and the name + "Visit" slide in. */
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 30px; margin-bottom: clamp(18px, 1.8vw, 30px); }
.section-head h2 { margin: 0 !important; }
.section-head h2 sup { color: #a2a3a7; font-size: .5em; font-weight: 500; letter-spacing: 0; }
.section-head p { margin: 0; color: #88898d; font: 400 clamp(12px, .95vw, 16px)/1.3 Inter, Arial, sans-serif; }
.team-grid { grid-template-columns: repeat(3, 1fr); border-radius: 0; }
.team-cell { position: relative; overflow: hidden; aspect-ratio: 1.75; padding: 0; isolation: isolate; color: var(--ink); }
.team-cell::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--brand); clip-path: circle(0% at var(--mx, 50%) var(--my, 50%)); transition: clip-path .7s cubic-bezier(.2,.8,.2,1); }
.team-cell:is(:hover,:focus-visible)::before { clip-path: circle(150% at var(--mx, 50%) var(--my, 50%)); }
.team-cell:is(:hover,:focus-visible) { background: transparent; }
.team-logo { display: grid; place-items: center; width: 100%; height: 100%; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.team-cell img { width: min(62%, 240px); height: 62%; object-fit: contain; mix-blend-mode: multiply; transition: filter .45s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.team-cell:is(:hover,:focus-visible) .team-logo { transform: translateY(-8%) scale(.92); }
.team-cell:is(:hover,:focus-visible) img { mix-blend-mode: normal; filter: brightness(0) invert(1); }
.team-cell.keep:is(:hover,:focus-visible) img { filter: none; }
.team-cell.keep img { width: min(46%, 190px); }
.team-cell .team-wordmark { font-size: clamp(22px, 2.3vw, 42px); transition: color .4s; }
.team-cell:is(:hover,:focus-visible) .team-wordmark { color: #fff; }
.team-num { position: absolute; top: clamp(12px, 1.2vw, 20px); left: clamp(14px, 1.3vw, 22px); color: #9fa0a4; font: 500 clamp(11px, .8vw, 13px)/1 Inter, Arial, sans-serif; font-variant-numeric: tabular-nums; transition: color .4s; }
.team-meta { position: absolute; left: clamp(14px, 1.3vw, 22px); bottom: clamp(12px, 1.2vw, 20px); display: grid; gap: 4px; font-family: Inter, Arial, sans-serif; opacity: 0; transform: translateY(12px); transition: opacity .4s, transform .5s cubic-bezier(.2,.8,.2,1); }
.team-meta b { font: 500 clamp(15px, 1.2vw, 20px)/1 "Clash Display", Arial, sans-serif; }
.team-meta em { font-style: normal; font-size: clamp(11px, .8vw, 13px); opacity: .75; }
.team-go { position: absolute; right: clamp(12px, 1.2vw, 20px); bottom: clamp(12px, 1.2vw, 20px); display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px 8px 14px; border-radius: 99px; background: rgb(255 255 255 / 92%); color: var(--ink); font: 500 clamp(11px, .8vw, 13px)/1 Inter, Arial, sans-serif; opacity: 0; transform: translateY(12px) scale(.9); transition: opacity .4s, transform .5s cubic-bezier(.2,.8,.2,1); }
.team-go:empty { display: none; }
.team-go svg { width: 14px; height: 14px; }
.team-cell:is(:hover,:focus-visible) :is(.team-meta, .team-go) { opacity: 1; transform: none; }
.team-cell:not(.dark-text):is(:hover,:focus-visible) :is(.team-meta, .team-num) { color: #fff; }
.team-cell.dark-text:is(:hover,:focus-visible) .team-num { color: #263B2A; }
.team-cell.dark-text .team-meta { color: #263B2A; }
.team-final { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding-left: clamp(18px, 2.4vw, 44px); }
.team-final-text { font: 500 clamp(20px, 2vw, 38px)/1.05 "Clash Display", Arial, sans-serif; letter-spacing: -.03em; transition: color .4s; }
.team-final .team-go { opacity: 1; transform: none; background: var(--ink); color: #fff; }
.team-final:is(:hover,:focus-visible) .team-final-text { color: #fff; }
.team-final:is(:hover,:focus-visible) .team-go { background: var(--green); color: var(--ink); }
@media (hover: none) { .team-meta { opacity: 1; transform: none; } .team-cell .team-logo { transform: translateY(-8%) scale(.9); } }
@media (max-width: 700px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .team-cell { aspect-ratio: 1.3; }
  .team-final { grid-column: 1 / -1; aspect-ratio: 2.8; }
  .team-go { display: none; }
  .team-final .team-go { display: inline-flex; position: static; margin-top: 12px; }
}

/* 13. WORK / CLIENTS V2: PROJECT ROWS --------------------------------------- */
/* Row = number · name · kind · actions. An ink band sweeps up on hover.
   .row-live with an empty href is hidden, so adding a URL makes it appear. */
.work-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.work-filters button { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border: 1px solid #d6d6d8; border-radius: 99px; background: transparent; color: var(--ink); font: 500 clamp(12px, .9vw, 15px)/1 Inter, Arial, sans-serif; cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
.work-filters button sup { color: #9a9a9e; font-size: .75em; }
.work-filters button:hover { border-color: var(--ink); }
.work-filters button.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.work-rows { border-top: 1px solid #1f2022; }
.combined-projects .work-rows li { position: relative; display: grid; grid-template-columns: clamp(38px, 4vw, 70px) minmax(0, 1fr) minmax(0, auto) auto; align-items: center; gap: clamp(12px, 2vw, 36px); padding: 0 clamp(8px, 1vw, 18px); border-bottom: 1px solid #c9c9cc; font-size: clamp(22px, 2.4vw, 44px); isolation: isolate; transition: opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1), color .35s; }
.combined-projects .work-rows li::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: scaleY(0); transform-origin: bottom; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.combined-projects .work-rows li:is(:hover,:focus-within)::before { transform: scaleY(1); }
.combined-projects .work-rows li:is(:hover,:focus-within) { color: #fff; }
.combined-projects .work-rows li > * { display: block; padding: 0; }
.combined-projects .work-rows li:is(:hover,:focus-within) > * { padding-left: 0; }
.row-num { color: #9a9a9e; font: 500 clamp(11px, .85vw, 14px)/1 Inter, Arial, sans-serif; font-variant-numeric: tabular-nums; }
.row-name { padding-block: clamp(20px, 2.1vw, 36px) !important; overflow: hidden; font-weight: 500; letter-spacing: -.035em; line-height: 1.05; text-decoration: none; white-space: nowrap; text-overflow: ellipsis; outline-offset: -2px; transition: transform .5s cubic-bezier(.2,.8,.2,1) !important; }
.combined-projects .work-rows li:is(:hover,:focus-within) .row-name { transform: translateX(clamp(8px, 1vw, 18px)); }
.combined-projects .work-rows .project-kind { color: #888; font: 400 clamp(11px, .95vw, 16px)/1.3 Inter, Arial, sans-serif; text-align: right; }
.combined-projects .work-rows li:is(:hover,:focus-within) .project-kind { color: #bdbdc1; }
.row-actions { display: flex !important; gap: 6px; justify-content: flex-end; min-width: clamp(90px, 13vw, 230px); }
.row-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border: 1px solid #c9c9cc; border-radius: 99px; font: 500 clamp(11px, .85vw, 14px)/1 Inter, Arial, sans-serif; text-decoration: none; white-space: nowrap; transition: background .3s, color .3s, border-color .3s, transform .3s; }
.row-btn svg { width: 13px; height: 13px; transition: transform .35s; }
.row-live[href=""] { display: none; }
.combined-projects .work-rows li:is(:hover,:focus-within) .row-btn { border-color: rgb(255 255 255 / 35%); color: #fff; }
.combined-projects .work-rows li:is(:hover,:focus-within) .row-live { background: var(--green); border-color: var(--green); color: var(--ink); }
.row-btn:is(:hover,:focus-visible) { transform: translateY(-2px); }
.row-live:is(:hover,:focus-visible) svg { transform: rotate(45deg); }
.row-case:is(:hover,:focus-visible) { background: #fff; color: var(--ink) !important; }
.work-rows li.is-filtered { display: none !important; }
.work-preview img { border-radius: 14px; box-shadow: 0 30px 70px -20px rgb(0 0 0 / 35%); }
@media (max-width: 700px) {
  .combined-projects .work-rows li { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; font-size: 22px; }
  .combined-projects .work-rows .project-kind { grid-column: 2 / 3; margin-top: -14px; padding-bottom: 16px !important; text-align: left; }
  .row-actions { grid-column: 3; grid-row: 1 / span 2; min-width: 0; flex-direction: column; align-items: flex-end; }
  .row-name { padding-bottom: 18px !important; }
}
.combined-projects .work-rows a.row-name:is(:hover,:focus-visible) { color: inherit; padding-left: 0; }

/* Requested update: Home edge-to-edge, full-screen project stack. */
body[data-page="home"] .hero-pill { vertical-align: -.04em; }
body[data-page="home"] .project-list { padding: 0; }
body[data-page="home"] .project-card { position: sticky; top: 0; margin: 0; height: 100svh; scroll-margin-top: 0; perspective: none; z-index: calc(var(--i) + 1); }
body[data-page="home"] .project-shell { display: flex; flex-direction: column; height: 100%; padding: 0; border-radius: 0; transform: none; filter: none; box-shadow: none; }
body[data-page="home"] .project-bar { flex: 0 0 var(--bar); padding: 0 var(--gutter); }
body[data-page="home"] .project { flex: 1; min-height: 0; height: auto; border-radius: 0; transform: none; }
body[data-page="home"] .project img,
body[data-page="home"] .project video { width: 100%; height: 100%; object-fit: cover; transform: none; }
@media (max-width: 600px) {
 body[data-page="home"] .project img,
 body[data-page="home"] .project video { object-fit: contain; }
}
@media (prefers-reduced-motion: reduce) {
 body[data-page="home"] .project-card { position: relative; }
}

/* Home projects: clean visual-only cards, without title bars or pills. */
body[data-page="home"] .project-shell { background: #fafafa; }
body[data-page="home"] .project { background: #fafafa; }

/* Video banners remain visible when paused or reduced motion is enabled. */
body[data-page="home"] .project-video { opacity: 1; }

/* Dstudio remains a display-only project until its replacement is ready. */
.project-coming-soon { cursor: default; }
.cursor-pill.is-coming-soon { width: 240px; height: 64px; margin: -32px 0 0 -120px; border-radius: 8px; }
.cursor-pill.is-coming-soon span { max-width: none; white-space: nowrap; }
body[data-page="home"] .project-coming-soon:focus-visible::after { content: "COMING SOON! new project"; inset: auto; bottom: 28px; left: 50%; transform: translateX(-50%); padding: 18px 22px; background: #fafafa; color: #1f2022; border-radius: 8px; white-space: nowrap; font: 500 13px/1.3 Inter,sans-serif; }
@media (hover: none), (max-width: 900px) {
 body[data-page="home"] .project-coming-soon::after { content: "COMING SOON! new project"; inset: auto; bottom: 28px; left: 50%; transform: translateX(-50%); padding: 18px 22px; background: #fafafa; color: #1f2022; border-radius: 8px; white-space: nowrap; font: 500 13px/1.3 Inter,sans-serif; }
}

/* Work hero: natural casing and a gentle fade on entry. */
body[data-page="clients"] .hero-kinetic h1 { text-transform: none; }
@media (prefers-reduced-motion: no-preference) {
 body[data-page="clients"] .hero-kinetic h1 { animation: work-title-fade 1.2s ease-out .12s both; }
}
@keyframes work-title-fade { from { opacity: 0; } to { opacity: 1; } }
.row-coming-soon { display: inline-block; font: 500 clamp(11px,.85vw,14px)/1.3 Inter,Arial,sans-serif; color: inherit; opacity: .7; white-space: nowrap; }