/* ==========================================================================
   Crown Creatives: Work page
   HERO      light; title + stats, then a "wall" of real screenshots drifting past
   FEATURED  black; the wedding dance network in a laptop + phone, tilts with the pointer
   GRID      every project as a browser card; on hover the phone version slides up
   ========================================================================== */

.nav-main a[aria-current="page"] { background-size: 100% 2px; }

/* ---------- Hero ---------- */
.wh { position: relative; overflow: clip; padding: calc(var(--header-h) + clamp(28px, 6vh, 64px)) 0 0; }
.crumbs { margin-bottom: clamp(28px, 5vh, 48px); font-size: 13px; color: var(--ink-soft); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--gold-text); }
.crumbs span[aria-hidden] { margin: 0 8px; opacity: .5; }
.wh__title { font-size: clamp(48px, 8.4vw, 136px); line-height: .9; letter-spacing: -.055em; }
.wh__row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px clamp(32px, 6vw, 96px); align-items: end; margin-top: clamp(28px, 5vh, 48px); }
.wh__row .lede { margin: 0; color: var(--ink-soft); }
.wh__stats { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1.5px solid var(--ink); }
.wh__stats li { padding: 16px 0 0; font-size: 14px; color: var(--ink-soft); }
.wh__stats li + li { padding-left: 18px; border-left: 1px solid var(--rule); }
.wh__stats b { display: block; font: 700 clamp(30px, 3.2vw, 46px)/1 var(--display); letter-spacing: -.04em; color: var(--ink); }

.wh__wall { margin-top: clamp(48px, 8vh, 88px); display: grid; gap: 14px; transform: rotate(-3deg) scale(1.08); transform-origin: 50% 0; padding-bottom: clamp(40px, 6vh, 72px); }
.wh__row-img { display: flex; gap: 14px; width: max-content; animation: wall 70s linear infinite; }
.wh__row-img--rev { animation-direction: reverse; animation-duration: 85s; }
.wh__row-img img {
  width: clamp(240px, 24vw, 360px); height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top;
  border-radius: 10px; box-shadow: 0 0 0 1px var(--rule), 0 20px 40px -24px rgba(12, 12, 14, .35);
}
@keyframes wall { to { transform: translateX(-50%); } }
.wh__wall:hover .wh__row-img { animation-play-state: paused; }

/* ---------- Shared browser chrome ---------- */
.wk__chrome { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #f1f0ec; border-bottom: 1px solid rgba(12, 12, 14, .08); }
.wk__chrome i { width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; }
.wk__chrome i:nth-child(2) { background: #febc2e; } .wk__chrome i:nth-child(3) { background: #28c840; }
.wk__chrome span { flex: 1; margin: 0 40px 0 14px; padding: 3px 10px; border-radius: 6px; background: #fff; font-size: 11px; color: #6b6a66; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Featured ---------- */
.feat__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px clamp(40px, 6vw, 100px); align-items: center; }
.feat__copy .h-col { margin-bottom: 22px; }
.feat__copy > p { color: var(--ink-soft); max-width: 48ch; }
.feat__facts { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 30px 0; }
.feat__facts li { padding-top: 14px; border-top: 1px solid var(--rule); font-size: 13px; line-height: 1.45; color: var(--ink-soft); }
.feat__facts b { display: block; margin-bottom: 4px; font: 700 26px/1 var(--display); letter-spacing: -.03em; color: var(--gold-text); }
.feat__svc { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 26px; }
.feat__stage { --rx: 0deg; --ry: 0deg; position: relative; perspective: 1600px; padding: 0 9% 9% 0; }
.feat__laptop {
  border-radius: 12px; overflow: hidden; background: #fff;
  transform: rotateY(calc(-10deg + var(--ry))) rotateX(calc(4deg + var(--rx)));
  transition: transform 1s var(--ease-out);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 60px 120px -40px rgba(255, 122, 47, .35), 0 40px 80px -30px rgba(0, 0, 0, .8);
}
.feat__laptop img { display: block; width: 100%; height: auto; }
.feat__phone {
  position: absolute; right: 0; bottom: 0; width: 24%; height: auto;
  border-radius: 22px; border: 6px solid #1c1c20;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8);
  transform: translateY(calc(var(--rx) * -2)) rotate(4deg);
  transition: transform 1s var(--ease-out);
}

/* ---------- Grid ---------- */
.wk-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: clamp(36px, 6vh, 60px); }
.js .wk-filter { display: flex; }
.wk-filter { flex-wrap: wrap; gap: 8px; }
.wk-filter button {
  padding: 9px 16px; border: 0; border-radius: 99px; background: none; cursor: pointer;
  box-shadow: inset 0 0 0 1.5px var(--ink); font-size: 14px; font-weight: 600;
  transition: background .25s, color .25s;
}
.wk-filter button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.wk-filter button:hover:not([aria-pressed="true"]) { background: var(--tint); }
.wk-grid { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(36px, 5vw, 64px) clamp(20px, 3vw, 40px); }
.wk { transition: opacity .4s, transform .5s var(--ease-out); }
.wk.is-out { display: none; }
.wk__link { display: block; text-decoration: none; }
.wk__shot {
  position: relative; border-radius: 12px; overflow: hidden; background: #fff;
  box-shadow: 0 0 0 1px var(--rule), 0 30px 60px -36px rgba(12, 12, 14, .45);
  transition: transform .7s var(--ease-out), box-shadow .7s var(--ease-out);
}
.wk__shot > img:not(.wk__phone) { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; transition: transform 1.2s var(--ease-out); }
.wk__phone {
  position: absolute; right: 5%; bottom: -60%; width: 22%; height: auto;
  border-radius: 16px; border: 5px solid #1c1c20; box-shadow: 0 24px 40px -16px rgba(0, 0, 0, .6);
  transition: bottom .8s var(--ease-out);
}
.wk__link:hover .wk__shot, .wk__link:focus-visible .wk__shot { transform: translateY(-6px); box-shadow: 0 0 0 1px var(--rule), 0 40px 70px -34px rgba(194, 65, 12, .45); }
.wk__link:hover .wk__shot > img:not(.wk__phone) { transform: scale(1.04); }
.wk__link:hover .wk__phone, .wk__link:focus-visible .wk__phone { bottom: 6%; }
.wk__meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 20px; padding-top: 20px; }
.wk__sector { grid-column: 1 / -1; margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); }
.wk__meta h3 { font-size: clamp(22px, 2vw, 28px); letter-spacing: -.035em; }
.wk__blurb { grid-column: 1 / -1; margin: 4px 0 0; color: var(--ink-soft); font-size: 16px; max-width: 56ch; }
.wk__svc { grid-column: 1; margin: 6px 0 0; font-size: 13px; font-weight: 600; }
.wk__visit {
  grid-column: 2; grid-row: 2; align-self: center;
  font-size: 13px; font-weight: 600; white-space: nowrap;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size .45s var(--ease-out);
}
.wk__link:hover .wk__visit { background-size: 100% 1.5px; color: var(--gold-text); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .wh__row, .feat__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .wk-grid { grid-template-columns: minmax(0, 1fr); }
  .wh__stats b { font-size: 28px; }
  .feat__facts { grid-template-columns: 1fr 1fr 1fr; }
  .wk__phone { bottom: 6%; width: 20%; }                 /* no hover on phones: always shown */
  .wk__meta { grid-template-columns: minmax(0, 1fr); }
  .wk__visit { grid-column: 1; grid-row: auto; margin-top: 8px; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .wh__row-img { animation: none; }
}

/* ==========================================================================
   CASE STUDY PAGES (work/*.html)
   HERO      light; title + meta, then the site itself in a big laptop + phone (tilts)
   BRIEF     the lede, the brief, what we built
   SECTIONS  black; four iconic sections of the live site, each framed and captioned
   NEXT      the next project, then back to all work
   ========================================================================== */
.cs-hero { position: relative; overflow: clip; padding: calc(var(--header-h) + clamp(20px, 4vh, 48px)) 0 clamp(48px, 7vh, 90px); }
.cs-hero .crumbs { margin: clamp(56px, 9vh, 100px) 0 clamp(16px, 3vh, 32px); }
.cs-hero::before {                       /* soft orange glow behind the device */
  content: ""; position: absolute; left: 10%; right: 10%; top: 10%; height: 70%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 122, 47, .16), transparent);
}
.cs-hero__head { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 32px clamp(32px, 6vw, 96px); align-items: end; }
.cs-hero__title { font-size: clamp(36px, 4.4vw, 72px); line-height: .95; letter-spacing: -.05em; }
.cs-meta { margin: 0; display: grid; border-top: 1.5px solid var(--ink); }
.cs-meta > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.cs-meta dt { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); padding-top: 2px; }
.cs-meta dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.cs-meta a { color: var(--gold-text); text-decoration: none; }
.cs-meta a:hover { text-decoration: underline; }
.cs-stage { --rx: 0deg; --ry: 0deg; position: relative; width: min(84vw, 1240px, calc((100svh - var(--header-h) - 110px) * 1.6)); min-width: min(84vw, 560px); margin: 0 auto; perspective: 2000px; }
.cs-laptop {
  border-radius: 14px; overflow: hidden; background: #fff;
  transform: rotateX(calc(4deg + var(--rx))) rotateY(var(--ry));
  transform-origin: 50% 100%;
  transition: transform 1s var(--ease-out);
  box-shadow: 0 0 0 1px var(--rule), 0 80px 140px -60px rgba(12, 12, 14, .45), 0 40px 80px -40px rgba(194, 65, 12, .25);
}
.cs-laptop img { display: block; width: 100%; height: auto; }
/* the water layer (js/water.js) sits exactly over the screenshot, below the browser bar */
.cs-laptop { position: relative; }
.cs-laptop .water { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; aspect-ratio: 1200 / 750; display: block; cursor: crosshair; }
.cs-phone {
  position: absolute; right: -3%; bottom: -8%; width: 19%; height: auto;
  border-radius: 26px; border: 7px solid #1c1c20; box-shadow: 0 40px 80px -24px rgba(0, 0, 0, .55);
  transform: translateY(calc(var(--rx) * -3)) rotate(3deg); transition: transform 1s var(--ease-out);
}
.js .cs-laptop { animation: cs-rise 1.4s var(--ease-out) both; }
.js .cs-phone { animation: cs-rise 1.4s var(--ease-out) .25s both; }
@keyframes cs-rise { from { opacity: 0; translate: 0 60px; } }

.cs-brief__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px clamp(40px, 7vw, 120px); align-items: start; }
.cs-brief__grid .cs-lede { margin: 0; color: var(--ink); font: 700 clamp(26px, 2.8vw, 42px)/1.12 var(--display); letter-spacing: -.035em; }
.cs-h { font-size: 13px; font-family: var(--font); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-text); margin: 0 0 12px; }
.cs-brief__grid p + .cs-h { margin-top: 36px; }
.cs-brief__grid p { color: var(--ink-soft); font-size: 18px; }

.cs-secs .h-col { margin-bottom: clamp(48px, 8vh, 90px); }
.cs-sec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: 28px clamp(32px, 5vw, 80px); align-items: start; margin: 0 0 clamp(64px, 11vh, 130px); }
.cs-sec:last-child { margin-bottom: 0; }
.cs-sec:nth-of-type(even) { grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr); }
.cs-sec:nth-of-type(even) .cs-sec__cap { order: 2; }
.cs-sec__cap { position: sticky; top: calc(var(--header-h) + 32px); }
.cs-sec__n { display: block; font: 700 clamp(48px, 5vw, 80px)/1 var(--display); letter-spacing: -.05em; color: var(--gold); margin-bottom: 14px; }
.cs-sec__cap h3 { font-size: clamp(22px, 2vw, 30px); letter-spacing: -.035em; margin-bottom: 12px; }
.cs-sec__cap p { color: var(--ink-soft); margin: 0; }
.cs-sec__shot { border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 50px 100px -40px rgba(0, 0, 0, .9); }
.cs-sec__shot img { display: block; width: 100%; height: auto; }

.cs-next { padding: clamp(84px, 13vh, 150px) 0 clamp(60px, 9vh, 100px); }
.cs-next__link {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 36%); align-items: center; gap: 12px 40px;
  padding-block: clamp(28px, 4vh, 44px); border-block: 1.5px solid var(--ink); text-decoration: none;
}
.cs-next__link .label { grid-column: 1; margin: 0; }
.cs-next__name { grid-column: 1; font: 700 clamp(36px, 5.6vw, 92px)/.95 var(--display); letter-spacing: -.05em; transition: color .3s; }
.cs-next__name .arr { display: inline-block; transition: transform .5s var(--ease-out); }
.cs-next__link img { grid-column: 2; grid-row: 1 / span 2; width: 100%; height: auto; border-radius: 10px; box-shadow: 0 30px 60px -30px rgba(12, 12, 14, .5); transition: transform .7s var(--ease-out); }
.cs-next__link:hover .cs-next__name { color: var(--gold-text); }
.cs-next__link:hover .cs-next__name .arr { transform: translateX(10px); }
.cs-next__link:hover img { transform: translateY(-6px) rotate(-1.5deg); }
.cs-next__all { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px; margin-top: 32px; }

@media (max-width: 900px) {
  .cs-hero__head, .cs-brief__grid { grid-template-columns: minmax(0, 1fr); }
  .cs-sec, .cs-sec:nth-of-type(even) { grid-template-columns: minmax(0, 1fr); }
  .cs-sec:nth-of-type(even) .cs-sec__cap { order: 0; }
  .cs-sec__cap { position: static; }
  .cs-stage { width: 88vw; }
  .cs-phone { width: 24%; right: -2%; }
  .cs-next__link { grid-template-columns: minmax(0, 1fr); }
  .cs-next__link img { grid-column: 1; grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .js .cs-laptop, .js .cs-phone { animation: none; }
}