/* All Work Page — KMC+LUCAS */

:root {
  --aw-bg:   #f4f3ef;
  --aw-olive: #645d45;
  --aw-red:  #c21f1f;
  --aw-dark: #111111;
  --aw-ink:  #f4f3ef;
  --aw-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

body.page-all-work {
  background: var(--aw-bg);
  color: var(--aw-olive);
  font-family: 'Fustat', 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ─── Nav ────────────────────────────────────────── */
.aw-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /* Match index nav layout; fallback keeps spacing if --gutter is missing */
  padding: 40px var(--gutter, clamp(24px, 4vw, 64px)) 0;
  max-height: 120px;
  overflow: hidden;
  opacity: 1;
  pointer-events: none;
  transition:
    transform 320ms var(--aw-ease),
    opacity 220ms ease;
}

.aw-nav.is-collapsed {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

.aw-nav__logo,
.aw-nav__menu,
.aw-nav__links {
  pointer-events: auto;
}

.aw-nav__logo {
  flex-shrink: 0;
  line-height: 0;
}

.aw-nav__logo img {
  display: block;
  height: 17px;
  width: auto;
  opacity: 0.95;
  transition: opacity 0.25s;
}

.aw-nav__logo:hover img { opacity: 0.7; }

.aw-nav__links {
  display: flex;
  align-items: center;
  gap: clamp(24px, 3.3vw, 48px);
  margin-left: auto;
}

.aw-nav__link {
  font-family: 'Fustat', 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  color: #645D45;
  mix-blend-mode: normal;
  white-space: nowrap;
  transition: opacity 0.2s;
}

.aw-nav__link--active {
  color: var(--aw-red);
  mix-blend-mode: normal;
}

.aw-nav__link:hover { opacity: 0.65; }

.aw-nav__menu {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: clamp(16px, 2vw, 32px);
  mix-blend-mode: exclusion;
}

.aw-nav__menu img {
  display: block;
  filter: invert(1);
  opacity: 0.7;
}

/* ─── Page structure ─────────────────────────────── */
.all-work { position: relative; }

.aw-page {
  height: 100vh;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

.aw-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1440px;
  height: 1024px;
  transform: translate(-50%, -50%) scale(var(--aw-scale, 1));
  transform-origin: center center;
}

.aw-page--1,
.aw-page--3 {
  background: var(--aw-bg);
}

#work-hero,
#work-disposable,
#work-grid {
  scroll-margin-top: min(12vh, 120px);
}

/* ─── Section 1: Hero ────────────────────────────── */

/* WORK title: right-aligned, 170px Fustat Medium, olive */
.aw-work-title {
  position: absolute;
  right: 80px;
  top: 173px;  /* shifted down by half a WORK (170px / 2 ≈ 85px) for nav clearance */
  margin: 0;
  font-family: 'Fustat', 'Inter', sans-serif;
  font-weight: 500;
  font-size: 170px;
  line-height: 0.9;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  color: var(--aw-olive);
  text-align: right;
  z-index: 2;
}

/* Body text — two paragraphs, left side */
.aw-body {
  position: absolute;
  left: calc(20% + 267px);
  font-family: 'Fustat', 'Inter', sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 25px;
  letter-spacing: -1px;
  color: var(--aw-olive);
  z-index: 2;
}

.aw-body--1 {
  top: 496px;  /* shifted to keep relative spacing under the title */
  width: 391px;
}

.aw-body--2 {
  top: 586px;
  width: 366px;
}

.aw-body p { margin: 0; }

.aw-body__accent { color: var(--aw-red); }

/* Down arrow button */
.aw-down {
  position: absolute;
  left: 50%;
  bottom: 60px;
  transform: translateX(-50%);
  width: 62px;
  height: 62px;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  color: var(--aw-olive);
  opacity: 0.6;
  cursor: pointer;
  pointer-events: auto;
  border-radius: 50%;
  transition: opacity 0.25s var(--aw-ease), transform 0.35s var(--aw-ease);
}

.aw-down:hover,
.aw-down:focus-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(3px);
}

.aw-down:focus-visible {
  outline: 2px solid var(--aw-red);
  outline-offset: 4px;
}

.aw-down:disabled {
  opacity: 0.3;
  cursor: wait;
  transform: translateX(-50%);
}

.aw-down__svg {
  display: block;
  width: 100%;
  height: auto;
  animation: aw-down-nudge 2.4s var(--aw-ease) infinite;
}

@keyframes aw-down-nudge {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(5px); }
}

@media (prefers-reduced-motion: reduce) {
  .aw-down__svg { animation: none; }
}

/* ─── Section 1 exit transition ──────────────────── */
#work-hero {
  transition:
    transform 0.55s var(--aw-ease),
    opacity 0.55s var(--aw-ease),
    filter 0.5s ease;
}

#work-hero.aw-s1-exit {
  transform: translateY(-1.25vh) scale(0.985);
  opacity: 0.82;
  filter: blur(5px);
}

.aw-page-transition {
  position: fixed;
  inset: 0;
  z-index: 350;
  background: var(--aw-red);
  clip-path: inset(100% 0 0 0);
  pointer-events: none;
  visibility: hidden;
  transition: clip-path 0.52s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: clip-path;
}

.aw-page-transition.is-on {
  visibility: visible;
  pointer-events: all;
}

.aw-page-transition.is-on.is-covered {
  clip-path: inset(0 0 0 0);
}

@media (prefers-reduced-motion: reduce) {
  #work-hero.aw-s1-exit {
    transform: none;
    opacity: 1;
    filter: none;
  }
  .aw-page-transition { transition-duration: 0.01ms; }
}

/* ─── Scroll-reveal animations ───────────────────── */
[data-aw-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s var(--aw-ease), transform 0.9s var(--aw-ease);
}

[data-aw-reveal].is-in {
  opacity: 1;
  transform: translateY(0);
}

.aw-work-title[data-aw-reveal].is-in { transition-delay: 0s; }
.aw-body--1[data-aw-reveal].is-in    { transition-delay: 0.1s; }
.aw-body--2[data-aw-reveal].is-in    { transition-delay: 0.18s; }

/* ─── Section 2: Disposable ──────────────────────── */
/* Pinning is handled by GSAP ScrollTrigger in work-disposable.js.
   We only set z-order so #work_2 slides up over #work-disposable cleanly. */
/* No position:relative on #work-disposable — let GSAP's pin-spacer handle stacking.
   Forcing relative here interacts badly with pinType:transform on release. */
#work-disposable { z-index: 1; }
#work-grid   { position: relative; z-index: 2; }

.aw-page--3 {
  overflow: visible;
  --aw-w3-progress: 0;
}

/* Frame deco (Figma 1016:454): gray rect (mix-blend-difference) + dark blocks.
   The 1440×1024 stage is the design canvas; child positions match Figma px.
   NOTE: no z-index here — adding one creates a stacking context that would
   sandbox the blend and render the rect as plain #d5d5d5. Natural source
   order (frame after text in HTML) keeps deco on top. */
.aw-w3-frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* (Removed: full-stage cream ::before backdrop — was rendering as the
   white rectangle visible above the text. Blend now resolves against
   the section's own cream background.) */
#work-disposable .aw-stage { isolation: isolate; background: var(--aw-bg); }
/* Both z-index: auto so source order applies — stack first, frame after,
   meaning frame paints on top of text and mix-blend-difference can read it. */
#work-disposable .aw-w3-stack { z-index: auto; }
#work-disposable .aw-w3-frame { z-index: auto; }
.aw-w3-frame > * {
  position: absolute;
  display: block;
}
/* Gray rect — mix-blend-difference inverts the disposable text where overlapped */
.aw-w3-frame__rect {
  left: 182px;
  top: 311px;            /* 1041 - 730 (figma section starts at ~730) */
  width: 1079px;
  height: 402px;
  background: #ffffff;     /* white + difference: cream-on-text inside, near-black on cream outside */
  mix-blend-mode: difference;
}
/* Vertical bars (35×273) at section mid-height */
.aw-w3-frame__bar {
  width: 35px;
  height: 273px;
  background: #201d13;
  top: 713px;            /* 1443 - 730 */
  will-change: transform, opacity;
}
.aw-w3-frame__bar--l { left: 147px; }
.aw-w3-frame__bar--r { right: 147px; }
/* Large bottom corner blocks (76×138) */
.aw-w3-frame__lg {
  width: 76px;
  height: 138px;
  background: #201d13;
  top: 986px;            /* 1716 - 730 */
  will-change: transform, opacity;
}
.aw-w3-frame__lg--l { left: 71px; }
.aw-w3-frame__lg--r { right: 71px; }
/* Small upper-side accent blocks (38×56) */
.aw-w3-frame__sm {
  width: 38px;
  height: 56px;
  background: #201d13;
  top: 657px;            /* 1387 - 730 */
  will-change: transform, opacity;
}
.aw-w3-frame__sm--l { left: 109px; }
.aw-w3-frame__sm--r { right: 109px; }

.aw-w3-stack {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1352px;        /* 901 × 1.5 — enlarged disposable text */
  max-width: 93.86%;    /* 62.57 × 1.5 */
  transform: translate(-50%, -50%) translateY(40px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.75s var(--aw-ease), transform 0.95s var(--aw-ease);
}

.aw-w3-stack.is-in {
  opacity: 1;
  transform: translate(-50%, -50%) translateY(0);
}

.aw-w3-img {
  display: block;
  width: 100%;
  height: auto;
  transform: translateY(calc((1 - var(--aw-w3-progress, 0)) * 24px)) scale(1.125);  /* was 1.5; ×0.75 */
  transform-origin: center center;
  transition: none;
  /* Re-map the text artwork to BLACK. With bg-block set to #FFFFFF and
     mix-blend-difference: outside the rect the text reads as black on
     cream; inside the rect it inverts to ~cream (|FF-00| = #FFF). */
  filter: brightness(0);
}

@media (prefers-reduced-motion: reduce) {
  .aw-w3-stack {
    opacity: 1;
    transform: translate(-50%, -50%);
    transition: none;
  }
  .aw-w3-img { transform: scale(1.5); }
}

/* ─── Section 3: Work grid (dark) ───────────────── */
.aw-page--2 {
  background: var(--aw-dark);
  color: var(--aw-ink);
  height: auto;
  min-height: 100vh;
  overflow: visible;
  position: relative;
}

/* Frame decoration at top of work_2 */
.aw-frame-deco {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1440px;
  height: 280px;
  transform: translateX(-50%) scale(var(--aw-scale, 1));
  transform-origin: center top;
  pointer-events: none;
  z-index: 1;
}

/* Vertical bars */
.aw-frame__bar {
  position: absolute;
  top: 0;
  width: 35px;
  height: 273px;
  background: rgba(244, 243, 239, 0.06);
  display: block;
}

.aw-frame__bar--left  { left: 182px; }
.aw-frame__bar--right { left: calc(182px + 1079px - 35px); }

/* L-bracket corners (4px lines) */
.aw-frame__bracket {
  position: absolute;
  display: block;
}

.aw-frame__bracket::before,
.aw-frame__bracket::after {
  content: '';
  position: absolute;
  background: rgba(244, 243, 239, 0.35);
}

/* Top-left bracket */
.aw-frame__bracket--tl { left: 182px; top: 0; }
.aw-frame__bracket--tl::before { width: 60px; height: 2px; top: 0; left: 0; }
.aw-frame__bracket--tl::after  { width: 2px; height: 60px; top: 0; left: 0; }

/* Top-right bracket */
.aw-frame__bracket--tr { left: calc(182px + 1079px); top: 0; }
.aw-frame__bracket--tr::before { width: 60px; height: 2px; top: 0; right: 0; left: auto; transform: translateX(-100%); }
.aw-frame__bracket--tr::after  { width: 2px; height: 60px; top: 0; right: 0; left: auto; transform: translateX(-100%); }

/* Bottom-left bracket */
.aw-frame__bracket--bl { left: 182px; top: 273px; }
.aw-frame__bracket--bl::before { width: 60px; height: 2px; top: 0; left: 0; }
.aw-frame__bracket--bl::after  { width: 2px; height: 60px; top: 0; left: 0; transform: translateY(-100%); }

/* Bottom-right bracket */
.aw-frame__bracket--br { left: calc(182px + 1079px); top: 273px; }
.aw-frame__bracket--br::before { width: 60px; height: 2px; top: 0; right: 0; left: auto; transform: translateX(-100%); }
.aw-frame__bracket--br::after  { width: 2px; height: 60px; top: 0; right: 0; left: auto; transform: translateX(-100%) translateY(-100%); }

/* ─── Work cards v2 (Figma 699-480..485) ────────── */
.aw-cards-v2 {
  position: relative;
  z-index: 2;
  max-width: 1370px;
  margin: 0 auto;
  padding: 320px clamp(20px, 4vw, 36px) 120px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.aw-card-v2 {
  position: relative;
  display: block;
  width: 100%;
  text-decoration: none;
  color: var(--aw-ink);
}

/* Per-card aspect ratios (image height drives card height) */
.aw-card-v2--ssv      { aspect-ratio: 1369 / 442; }
.aw-card-v2--aloe     { aspect-ratio: 1369 / 371; }
.aw-card-v2--stanford { aspect-ratio: 1368 / 436; }
.aw-card-v2--re       { aspect-ratio: 1369 / 435; }
.aw-card-v2--q3d      { aspect-ratio: 1369 / 496; }
.aw-card-v2--winery   { aspect-ratio: 1370 / 412; }

.aw-card-v2__media {
  position: absolute;
  top: 0;
  left: 0;
  width: 57.49%;
  height: 100%;
  overflow: hidden;
  background: rgba(244, 243, 239, 0.04);
}

.aw-card-v2__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  mix-blend-mode: exclusion;
  transition: transform 0.6s var(--aw-ease), filter 0.4s var(--aw-ease);
}

.aw-card-v2__img {
  position: absolute;
  inset: 0;
}

.aw-card-v2:hover .aw-card-v2__media img {
  transform: scale(1.03);
  mix-blend-mode: normal;
}

.aw-card-v2--ssv .aw-card-v2__img--color {
  opacity: 0;
  transition: opacity 0.45s var(--aw-ease), transform 0.6s var(--aw-ease);
}

.aw-card-v2--ssv:hover .aw-card-v2__img--bw {
  opacity: 0;
}

.aw-card-v2--ssv:hover .aw-card-v2__img--color {
  opacity: 1;
  transform: scale(1.03);
}

.aw-card-v2--aloe .aw-card-v2__img--color {
  opacity: 0;
  transition: opacity 0.45s var(--aw-ease), transform 0.6s var(--aw-ease);
}

.aw-card-v2--aloe:hover .aw-card-v2__img--bw {
  opacity: 0;
}

.aw-card-v2--aloe:hover .aw-card-v2__img--color {
  opacity: 1;
  transform: scale(1.03);
}

.aw-card-v2--q3d .aw-card-v2__img--color {
  opacity: 0;
  transition: opacity 0.45s var(--aw-ease), transform 0.6s var(--aw-ease);
}

.aw-card-v2--q3d:hover .aw-card-v2__img--bw {
  opacity: 0;
}

.aw-card-v2--q3d:hover .aw-card-v2__img--color {
  opacity: 1;
  transform: scale(1.03);
}

.aw-card-v2--winery .aw-card-v2__img--color {
  opacity: 0;
  transition: opacity 0.45s var(--aw-ease), transform 0.6s var(--aw-ease);
}

.aw-card-v2--winery:hover .aw-card-v2__img--bw {
  opacity: 0;
}

.aw-card-v2--winery:hover .aw-card-v2__img--color {
  opacity: 1;
  transform: scale(1.03);
}

.aw-card-v2--stanford .aw-card-v2__img--color {
  opacity: 0;
  transition: opacity 0.45s var(--aw-ease), transform 0.6s var(--aw-ease);
}

.aw-card-v2--stanford:hover .aw-card-v2__img--bw {
  opacity: 0;
}

.aw-card-v2--stanford:hover .aw-card-v2__img--color {
  opacity: 1;
  transform: scale(1.03);
}

.aw-card-v2--re .aw-card-v2__img--color {
  opacity: 0;
  transition: opacity 0.45s var(--aw-ease), transform 0.6s var(--aw-ease);
}

.aw-card-v2--re:hover .aw-card-v2__img--bw {
  opacity: 0;
}

.aw-card-v2--re:hover .aw-card-v2__img--color {
  opacity: 1;
  transform: scale(1.03);
}

.aw-card-v2__info {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Title — base styles (per-card position via modifier) */
.aw-card-v2__title {
  position: absolute;
  margin: 0;
  font-family: 'Fustat', sans-serif;
  font-weight: 600;
  font-size: clamp(20px, 3.29vw, 45px);
  line-height: 1.133;
  letter-spacing: -0.05em;
  color: rgba(244, 243, 239, 0.5);
  text-align: left;
  transition: color 0.3s var(--aw-ease);
}

.aw-card-v2__title span {
  display: block;
  white-space: nowrap;
}

.aw-card-v2:hover .aw-card-v2__title { color: rgba(244, 243, 239, 0.95); }

/* Category — base styles (per-card position via modifier) */
.aw-card-v2__category {
  position: absolute;
  right: 0;
  margin: 0;
  padding-right: clamp(8px, 0.6vw, 12px);
  font-family: 'Fustat', sans-serif;
  font-weight: 600;
  font-size: clamp(13px, 1.46vw, 20px);
  line-height: 0.85;
  letter-spacing: -0.05em;
  text-transform: capitalize;
  color: rgba(244, 243, 239, 0.5);
  text-align: right;
  white-space: nowrap;
  transition: color 0.3s var(--aw-ease), transform 0.3s var(--aw-ease);
}

/* Description — base styles (per-card position via modifier) */
.aw-card-v2__desc {
  position: absolute;
  margin: 0;
  font-family: 'Fustat', sans-serif;
  font-weight: 600;
  font-size: clamp(10px, 0.88vw, 12px);
  line-height: 1.42;
  letter-spacing: -0.05em;
  color: rgba(244, 243, 239, 0.5);
  transition: color 0.3s var(--aw-ease), transform 0.3s var(--aw-ease);
}

.aw-card-v2--ssv:hover .aw-card-v2__title,
.aw-card-v2--ssv:hover .aw-card-v2__category,
.aw-card-v2--ssv:hover .aw-card-v2__desc {
  color: rgba(244, 243, 239, 0.98);
  transform: scale(1.03);
  transform-origin: left center;
}

.aw-card-v2--aloe:hover .aw-card-v2__title,
.aw-card-v2--aloe:hover .aw-card-v2__category,
.aw-card-v2--aloe:hover .aw-card-v2__desc {
  color: rgba(244, 243, 239, 0.98);
  transform: scale(1.03);
  transform-origin: left center;
}

.aw-card-v2--q3d:hover .aw-card-v2__title,
.aw-card-v2--q3d:hover .aw-card-v2__category,
.aw-card-v2--q3d:hover .aw-card-v2__desc {
  color: rgba(244, 243, 239, 0.98);
  transform: scale(1.03);
  transform-origin: left center;
}

.aw-card-v2--winery:hover .aw-card-v2__title,
.aw-card-v2--winery:hover .aw-card-v2__category,
.aw-card-v2--winery:hover .aw-card-v2__desc {
  color: rgba(244, 243, 239, 0.98);
  transform: scale(1.03);
  transform-origin: left center;
}

.aw-card-v2--ssv:hover .aw-card-v2__category {
  transform-origin: right center;
}

.aw-card-v2--aloe:hover .aw-card-v2__category {
  transform-origin: right center;
}

.aw-card-v2--q3d:hover .aw-card-v2__category {
  transform-origin: right center;
}

.aw-card-v2--winery:hover .aw-card-v2__category {
  transform-origin: right center;
}

/* ── Per-card positions (Figma exact percentages) ── */

/* SSV (1369×442) */
.aw-card-v2--ssv .aw-card-v2__title    { top: 6.79%;  left: 59.24%; right: 19.14%; }
.aw-card-v2--ssv .aw-card-v2__category { top: 10.41%; }
.aw-card-v2--ssv .aw-card-v2__desc     { top: 33.48%; left: 59.46%; right: 24.11%; }

/* Aloe (1369×371) */
.aw-card-v2--aloe .aw-card-v2__title    { top: 0;      left: 59.24%; right: 19.14%; }
.aw-card-v2--aloe .aw-card-v2__category { top: 4.31%; }
.aw-card-v2--aloe .aw-card-v2__desc     { top: 70%; left: 59.31%; right: 24.25%; }

/* Stanford (1368×436) */
.aw-card-v2--stanford .aw-card-v2__title    { top: 0;      left: 59.21%; right: 19.15%; }
.aw-card-v2--stanford .aw-card-v2__category { top: 3.67%; }
.aw-card-v2--stanford .aw-card-v2__desc     { top: 52.29%; left: 59.21%; right: 24.34%; }

/* 272 Fountain Grass / Real estate (1369×435) */
.aw-card-v2--re .aw-card-v2__title    { top: 0;      left: 59.21%; right: 19.15%; }
.aw-card-v2--re .aw-card-v2__category { top: 3.69%; }
.aw-card-v2--re .aw-card-v2__desc     { top: 29.03%; left: 59.28%; right: 24.27%; }

/* Q3D (1369×496) */
.aw-card-v2--q3d .aw-card-v2__title    { top: 0;      left: 59.24%; right: 19.14%; }
.aw-card-v2--q3d .aw-card-v2__category { top: 3.02%; }
.aw-card-v2--q3d .aw-card-v2__desc     { top: 35.69%; left: 59.24%; right: 24.32%; }

/* Winery / Elliston (1370×412) */
.aw-card-v2--winery .aw-card-v2__title    { top: 0;      left: 59.20%; right: 19.20%; }
.aw-card-v2--winery .aw-card-v2__category { top: 3.64%; }
.aw-card-v2--winery .aw-card-v2__desc     { top: 55.34%; left: 59.20%; right: 24.38%; }

@media (max-width: 720px) {
  .aw-card-v2 { aspect-ratio: auto; min-height: 320px; }
  .aw-card-v2__media { position: relative; width: 100%; height: 220px; }
  .aw-card-v2__info  { position: relative; padding: 18px 16px 24px; }
  .aw-card-v2__title,
  .aw-card-v2__category,
  .aw-card-v2__desc {
    position: static;
    inset: auto;
    text-align: left;
    margin: 0 0 14px;
    white-space: normal;
  }
}

/* ─── Work footer (Figma 699-477 + 895-465) ──────── */
.work-footer {
  position: relative;
  z-index: 2;
  max-width: 1370px;
  margin: 0 auto;
  /* Tighter shell + corner only — tagline typography unchanged */
  padding: clamp(30px, 4.5vw, 65px) clamp(10px, 2vw, 18px) clamp(30px, 4vw, 50px);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 20px;
}

.work-footer.js-work-footer-top {
  cursor: pointer;
}

.work-footer.js-work-footer-top:focus-visible {
  outline: 2px solid rgba(244, 243, 239, 0.6);
  outline-offset: 4px;
}

.work-footer__tagline {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Fustat', sans-serif;
  font-weight: 600;
  font-size: clamp(14px, 1.4vw, 20px);
  line-height: 1.25;
  letter-spacing: -0.05em;
  color: rgba(244, 243, 239, 0.7);
  margin: 0;
  text-align: center;
}

.work-footer__corner-art {
  position: absolute;
  right: clamp(10px, 2vw, 18px);
  bottom: clamp(6px, 1.4vw, 17px);
  width: clamp(90px, 12vw, 180px);
  height: auto;
  display: block;
}

.work-footer__back {
  display: inline-flex;
  align-items: center;
  gap: clamp(7px, 0.8vw, 12px);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: rgba(244, 243, 239, 0.85);
  font-family: 'Fustat', sans-serif;
  font-weight: 600;
  font-size: clamp(14px, 1.6vw, 22.5px);
  letter-spacing: -0.05em;
  text-transform: capitalize;
  line-height: 1;
  transition: opacity 0.25s var(--aw-ease), transform 0.3s var(--aw-ease);
}

.work-footer__back:hover { opacity: 0.7; }
.work-footer__back:hover .work-footer__back-icon { transform: translateY(-1.5px); }

.work-footer__back-icon {
  display: inline-flex;
  width: clamp(32px, 3.5vw, 50px);
  height: clamp(32px, 3.5vw, 50px);
  transition: transform 0.3s var(--aw-ease);
}

.work-footer__back-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

@media (max-width: 720px) {
  .work-footer {
    grid-template-columns: 1fr;
    gap: 14px;
    text-align: left;
  }
  .work-footer__corner-art {
    right: 10px;
    bottom: 5px;
    width: min(31vw, 140px);
  }
}

/* Footer on cream pages (case-* / ssv) */
.work-footer--light {
  background: var(--aw-dark);
  color: var(--aw-ink);
  max-width: none;
  width: 100%;
  margin: 0;
  padding-left: clamp(40px, 8vw, 120px);
  padding-right: clamp(40px, 8vw, 120px);
}

/* ─── Legacy work grid (kept hidden) ─────────────── */
.aw-work-grid--legacy {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 200px 40px 140px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 28px;
}

.aw-card {
  display: block;
  color: var(--aw-ink);
  text-decoration: none;
}

.aw-card__media {
  overflow: hidden;
  border-radius: 3px;
}

.aw-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--aw-ease);
}

.aw-card:hover .aw-card__media img {
  transform: scale(1.035);
}

.aw-card__title {
  font-family: 'Fustat', 'Inter', sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.22;
  letter-spacing: -0.03em;
  margin: 20px 0 0;
  color: var(--aw-ink);
}

.aw-card__body {
  font-family: "Inria Serif", ui-serif, Georgia, serif;
  font-size: 18px;
  line-height: 1.6;
  opacity: 0.75;
  margin: 8px 0 0;
  color: var(--aw-ink);
}

/* Rise animation for cards */
.aw-rise-group {
  opacity: 1;
  transform: none;
}

.aw-rise-group .aw-rise-piece {
  --aw-rise-step: 0;
  opacity: 0;
  transform: translate3d(0, 40px, 0);
  transition:
    opacity 0.62s var(--aw-ease),
    transform 0.88s var(--aw-ease);
  transition-delay: calc(var(--aw-rise-step) * 0.12s);
}

.aw-rise-group.is-in .aw-rise-piece {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
  .aw-rise-group .aw-rise-piece {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

#work-grid .aw-card .aw-card__media.aw-rise-piece { --aw-rise-step: 0; }
#work-grid .aw-card .aw-card__title.aw-rise-piece  { --aw-rise-step: 1; }
#work-grid .aw-card .aw-card__body.aw-rise-piece   { --aw-rise-step: 2; }

/* Card grid placements — editorial zigzag */
.aw-card--1 { grid-column: 1 / 7; margin-bottom: 80px; }
.aw-card--1 .aw-card__media { aspect-ratio: 16 / 9; }

.aw-card--2 { grid-column: 8 / 13; margin-top: 140px; margin-bottom: 60px; }
.aw-card--2 .aw-card__media { aspect-ratio: 16 / 9; }

.aw-card--3 { grid-column: 2 / 8; margin-bottom: 90px; }
.aw-card--3 .aw-card__media { aspect-ratio: 16 / 9; }

.aw-card--4 { grid-column: 1 / 6; margin-bottom: 60px; }
.aw-card--4 .aw-card__media { aspect-ratio: 16 / 9; }

.aw-card--5 { grid-column: 7 / 12; margin-top: 100px; margin-bottom: 60px; }
.aw-card--5 .aw-card__media { aspect-ratio: 16 / 9; }

.aw-card--6 { grid-column: 3 / 11; margin-bottom: 40px; }
.aw-card--6 .aw-card__media { aspect-ratio: 16 / 9; }

/* ─── Let's Talk badge ───────────────────────────── */
.aw-talk {
  position: fixed;
  right: clamp(18px, 2.2vw, 34px);
  bottom: clamp(18px, 2.2vw, 34px);
  display: block;
  width: clamp(88px, 8.75vw, 126px);
  height: clamp(88px, 8.75vw, 126px);
  z-index: 102;
  transition: transform 0.3s var(--aw-ease);
}

.aw-talk:hover { transform: scale(1.07) rotate(15deg); }

.aw-talk img {
  display: block;
  width: 100%;
  height: 100%;
}

/* ─── Responsive ─────────────────────────────────── */
@media (max-width: 900px) {
  .aw-work-grid {
    padding: 100px 24px 80px;
    column-gap: 20px;
  }
  .aw-card--1,
  .aw-card--3,
  .aw-card--6 { grid-column: 1 / -1; }
  .aw-card--2 { grid-column: 3 / -1; margin-top: 0; }
  .aw-card--4 { grid-column: 1 / 7; }
  .aw-card--5 { grid-column: 7 / -1; margin-top: 60px; }
  .aw-card__title { font-size: 20px; }
  .aw-card__body  { font-size: 16px; }
}

@media (max-width: 1023px) {
  .aw-nav {
    padding-top: 24px;
  }

  .aw-nav__links { display: none; }

  .aw-nav__menu { margin-left: auto; }
}

@media (max-width: 600px) {
  .aw-work-grid {
    padding: 80px 20px 60px;
    grid-template-columns: 1fr;
    row-gap: 48px;
  }
  .aw-card--1,
  .aw-card--2,
  .aw-card--3,
  .aw-card--4,
  .aw-card--5,
  .aw-card--6 {
    grid-column: 1 / -1;
    margin-top: 0;
    margin-bottom: 0;
  }
  .aw-card__title { font-size: 20px; }
  .aw-card__body  { font-size: 15px; }
}

/* ─── Phone (≤768px) ───────────────────────────────────────────
   The 1440 hero canvas scales to ~0.27 on a phone, which makes its body copy
   unreadable; and the "We do not create disposable advertising" scrollytelling
   doesn't translate to a small screen. So: reflow the hero as readable flow,
   and drop the disposable section entirely. ── */
@media (max-width: 768px) {
  /* Remove the disposable statement section on phones */
  #work-disposable {
    display: none;
  }

  /* Hero: stop scaling the canvas; lay title + copy out in normal flow */
  #work-hero {
    height: auto;
    min-height: auto;
    overflow: visible;
  }
  #work-hero .aw-stage {
    position: static;
    width: 100%;
    height: auto;
    transform: none;
    padding: 116px clamp(24px, 6vw, 40px) 56px;
  }
  #work-hero .aw-work-title {
    position: static;
    right: auto;
    top: auto;
    font-size: clamp(72px, 24vw, 120px);
    line-height: 0.9;
    text-align: left;
    margin: 0 0 28px;
  }
  #work-hero .aw-body {
    position: static;
    left: auto;
    top: auto;
    width: 100%;
    font-size: clamp(18px, 5vw, 21px);
    line-height: 1.55;
    letter-spacing: -0.01em;
    margin: 0 0 22px;
  }
  /* Phones scroll naturally, so the jump arrow under the hero copy is redundant. */
  #work-hero .aw-down {
    display: none;
  }
}