/* Sharp & Elk — the motion layer. Scroll drives the big moves; the pointer drives the small ones.
   Every scene has a still version under prefers-reduced-motion and without script. */

/* ---------- Page curtain (between pages) ---------- */
html.curtain-in::after {
  content: ""; position: fixed; inset: 0; z-index: 300; pointer-events: none;
  background: var(--pink);
  animation: curtain-up 420ms var(--ease-in-out) forwards;
}
@keyframes curtain-up { to { transform: translateY(-101%); } }
.curtain-out {
  position: fixed; inset: 0; z-index: 300; pointer-events: none; background: var(--pink);
  transform: translateY(101%); transition: transform 220ms var(--ease-out);
}
.curtain-out.is-on { transform: none; }

/* ---------- Cursor: a pink dot that follows with a little spring ---------- */
.cursor {
  position: fixed; left: 0; top: 0; z-index: 250; pointer-events: none;
  width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  background: var(--pink); border: 2px solid var(--black);
  will-change: transform; opacity: 0; transition: opacity 200ms ease;
}
.cursor.is-on { opacity: 1; }
.cursor i { position: absolute; inset: -2px; border-radius: 50%; background: inherit; transform: scale(1); transition: transform var(--t-enter) var(--ease-out); }
.cursor.is-link i { transform: scale(3.2); }
.cursor.is-link { border-color: transparent; }
.cursor.is-down i { transform: scale(0.7); transition-duration: 120ms; }

/* ---------- Intro: the promise, then a window opens onto the work ---------- */
.intro { position: relative; height: 230vh; background: var(--black); }
.intro__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.intro__photo {
  position: absolute; inset: 0; z-index: 1;
  clip-path: inset(54% 4% 7% 60% round 28px);
}
.intro__photo .ph { height: 100%; }
.intro__title {
  position: absolute; left: var(--m); right: var(--m); top: clamp(92px, 14vh, 150px); z-index: 2; margin: 0;
  font-family: var(--display); font-weight: 900; text-transform: uppercase; font-stretch: 90%;
  letter-spacing: -0.035em; line-height: 0.86;
  font-size: clamp(2.4rem, 0.2rem + 6.9vw, 8.5rem);
  pointer-events: none;
}
.intro__line { display: block; }
.intro__line > span { display: inline-block; }
.intro__line[data-line="2"] { padding-left: 1.4em; }
.intro__line--hot { color: var(--pink); }
.intro__foot { position: absolute; left: var(--m); bottom: clamp(28px, 6vh, 64px); z-index: 2; width: min(48%, 580px); display: grid; gap: 24px; justify-items: start; }
.intro__sub { font-size: var(--step-lead); line-height: 1.3; }
.intro__cue { display: none; }
.btn--big { min-height: 64px; padding: 0 36px; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); }

/* Load entrance: lines rise out of a mask, the window fades up */
.js .intro__line { overflow: hidden; padding-bottom: 0.07em; margin-bottom: -0.07em; }
.js .intro__line > span { transform: translateY(108%); }
.js .intro.is-ready .intro__line > span { transform: none; transition: transform 800ms var(--ease-out); }
.js .intro.is-ready .intro__line[data-line="2"] > span { transition-delay: 90ms; }
.js .intro.is-ready .intro__line[data-line="3"] > span { transition-delay: 180ms; }
.js .intro__photo { opacity: 0; }
.js .intro.is-ready .intro__photo { opacity: 1; transition: opacity 600ms var(--ease-out) 200ms; }
.js .intro__foot > * { opacity: 0; transform: translateY(20px); }
.js .intro.is-ready .intro__foot > * { opacity: 1; transform: none; transition: opacity 500ms var(--ease-out) 420ms, transform 600ms var(--ease-out) 420ms; }

@media (max-width: 760px) {
  .intro { height: 200vh; }
  .intro__photo { clip-path: inset(40% 5% 37% 34% round 20px); }
  .intro__title { top: 84px; font-size: 11.5vw; font-stretch: 78%; }
  .intro__line[data-line="2"] { padding-left: 0.6em; }
  .intro__foot { width: auto; right: var(--m); bottom: 24px; }
  .intro__sub { font-size: 1.0625rem; }
  .intro__foot .btn { width: 100%; }
}

/* ---------- Two crossing strips ---------- */
.cross { position: relative; height: clamp(170px, 20vw, 280px); overflow: hidden; background: var(--black); }
.cross__band { position: absolute; left: -12%; right: -12%; top: 50%; padding-block: 16px; margin-top: -30px; }
.cross__band--pink { background: var(--pink); color: var(--black); transform: rotate(-4deg); z-index: 2; }
.cross__band--cream { background: var(--cream); color: var(--black); transform: rotate(3.5deg); }
.cross .marquee__set span {
  font-family: var(--mono); font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em;
  font-size: clamp(0.9375rem, 0.8rem + 0.55vw, 1.375rem); white-space: nowrap; padding-inline: 0.9em;
}
.cross .marquee__set span::after { content: "●"; margin-left: 1.8em; font-size: 0.7em; vertical-align: 0.15em; }
.cross__band--cream .marquee__set span::after { color: var(--pink); }

/* ---------- Readout: the problem, one word at a time ---------- */
.readout { position: relative; height: 240vh; }
.readout__stage { position: sticky; top: 0; height: 100svh; display: grid; align-items: center; padding-inline: var(--m); }
.readout__text {
  font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: -0.03em; line-height: 0.95;
  font-size: clamp(2rem, 0.5rem + 4.7vw, 6rem); max-width: 20ch; text-wrap: balance;
}
.js .readout__text .rw { opacity: 0.13; transition: opacity 160ms linear, color 160ms linear; }
.js .readout__text .rw.on { opacity: 1; }
.js .readout__text .rw.hot.on { color: var(--pink-deep); }
.problem { padding-top: 0; }
.problem .problem__text p { font-size: var(--step-lead); line-height: 1.35; max-width: 40ch; }
@media (max-width: 760px) {
  .readout { height: 200vh; }
  .readout__text { font-size: 9.6vw; font-stretch: 80%; }
}

/* ---------- Track: how a job runs, sideways ---------- */
.track { position: relative; height: 340vh; background: var(--black); }
.track__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.track__rail { position: relative; display: flex; align-items: center; gap: clamp(48px, 7vw, 140px); height: 100%; padding-inline: var(--m) 12vw; width: max-content; }
.track__intro { flex: none; width: min(42vw, 600px); position: relative; z-index: 2; }
.track__intro .h2 { font-size: clamp(3rem, 1rem + 6vw, 8rem); line-height: 0.86; }
.track__hint { margin-top: 28px; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.14em; font-size: var(--step-label); color: var(--pink); }
.track__list { display: flex; gap: clamp(48px, 7vw, 140px); align-items: center; position: relative; z-index: 2; }
.tcard {
  flex: none; position: relative;
  width: min(76vw, 1000px); height: min(70svh, 640px); border-radius: 36px;
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(20px, 3vw, 48px); padding: clamp(24px, 3vw, 52px);
}
.tcard--cream { background: var(--cream); color: var(--black); --ink: var(--black); --muted: var(--cream-muted); --ph: var(--cream-ph); }
.tcard--pink { background: var(--pink); color: var(--black); --ink: var(--black); --muted: var(--pink-muted); --ph: var(--pink-ph); }
.tcard__text { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.tcard h3 { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(2.25rem, 0.8rem + 3.8vw, 5rem); line-height: 0.88; letter-spacing: -0.035em; text-wrap: balance; }
.tcard p { font-size: var(--step-lead); line-height: 1.3; max-width: 26ch; }
.tcard .ph { aspect-ratio: auto; height: 100%; border-radius: 22px; }
.tcard .ph__label b { color: var(--black); }
.track__thread { position: absolute; left: 0; top: 50%; width: 100%; height: 240px; transform: translateY(-50%); z-index: 1; overflow: visible; pointer-events: none; }
.track__thread .thread { fill: none; stroke: var(--pink); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 18 16; vector-effect: non-scaling-stroke; }
@media (max-width: 760px) {
  .track__intro { width: 78vw; }
  .tcard { width: 84vw; height: 74svh; grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .tcard .ph { min-height: 0; }
  .tcard p { font-size: 1.0625rem; }
}
.track--static { height: auto; }
.track--static .track__stage { position: relative; height: auto; overflow: visible; }
.track--static .track__rail { flex-direction: column; align-items: stretch; width: auto; height: auto; padding-block: var(--section); transform: none !important; }
.track--static .track__list { flex-direction: column; }
.track--static .tcard { width: 100%; height: auto; min-height: 60svh; transform: none !important; }
.track--static .track__thread, .track--static .track__hint { display: none; }

/* ---------- Stack: services as cards that pile up ---------- */
.stack { padding-block: var(--section); }
.stack__head { margin-bottom: clamp(40px, 5vw, 72px); row-gap: 18px; align-items: end; }
.stack__head h2 { grid-column: 1 / span 8; font-size: clamp(3rem, 1rem + 6vw, 8rem); line-height: 0.86; }
.stack__head p { grid-column: 9 / -1; max-width: 32ch; }
.stack__list { padding-inline: var(--m); display: grid; gap: 7vh; }
.scard {
  position: sticky; top: calc(9vh + var(--k, 0) * 28px);
  min-height: 78svh; border-radius: 40px;
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(24px, 3vw, 56px); padding: clamp(28px, 3.6vw, 64px);
  transform-origin: 50% 0;
}
.scard:nth-child(1) { --k: 0; } .scard:nth-child(2) { --k: 1; } .scard:nth-child(3) { --k: 2; } .scard:nth-child(4) { --k: 3; }
.scard.svc::before { display: none; }
.scard--black { background: var(--black); color: var(--cream); --ink: var(--cream); --muted: var(--dark-muted); --ph: var(--dark-ph); --accent: var(--pink); --accent-ink: var(--black); }
.scard--pink { background: var(--pink); color: var(--black); --ink: var(--black); --muted: var(--pink-muted); --ph: var(--pink-ph); --accent: var(--black); --accent-ink: var(--cream); }
.scard__body { display: flex; flex-direction: column; justify-content: flex-end; gap: 20px; }
.scard .svc__tag { color: var(--accent); }
.scard__name { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(2.75rem, 0.6rem + 6vw, 8rem); line-height: 0.84; letter-spacing: -0.04em; text-wrap: balance; }
.scard p { font-size: var(--step-lead); line-height: 1.3; max-width: 30ch; }
.scard .ph { aspect-ratio: auto; height: 100%; min-height: 280px; border-radius: 26px; }
.scard--pink .ph__label b { color: var(--black); }
.scard .svc__pick { background: var(--accent); color: var(--accent-ink); }
.scard--black .svc__pick input { accent-color: var(--black); }
.scard .link { text-decoration-color: var(--accent); }
.stack__cta { margin-top: 8vh; }
@media (max-width: 860px) {
  .stack__head h2, .stack__head p { grid-column: 1 / -1; }
  .scard { grid-template-columns: 1fr; grid-template-rows: 1fr auto; min-height: 84svh; top: calc(6vh + var(--k, 0) * 14px); border-radius: 28px; }
  .scard .ph { min-height: 26svh; order: -1; }
  .scard p { font-size: 1.0625rem; }
}

/* ---------- Voices: the giant quote mark turns as you scroll ---------- */
.voices { position: relative; overflow: hidden; }
.voices > :not(.voices__mark) { position: relative; z-index: 1; }
.voices__mark {
  position: absolute; right: -3vw; top: -9vw; z-index: 0; pointer-events: none;
  font-family: var(--display); font-weight: 900; font-size: 52vw; line-height: 1; color: var(--pink-shade);
}
.js .cascade .cw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.js .cascade .cw > span { display: inline-block; transform: translateY(110%) rotate(4deg); transform-origin: 0 100%; }
.js .cascade.is-in .cw > span { transform: none; transition: transform 480ms var(--ease-out); transition-delay: calc(var(--ci, 0) * 32ms); }

/* ---------- Finale: the line grows to fill the screen ---------- */
.finale { position: relative; height: 220vh; }
.finale__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; grid-template-rows: 1fr auto; padding: clamp(72px, 9vh, 110px) var(--m) clamp(28px, 5vh, 56px); }
.finale__title {
  align-self: center; margin: 0;
  font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: -0.04em; line-height: 0.82;
  font-size: clamp(3.5rem, 0.6rem + 12.8vw, 15rem);
}
.finale__title span { display: block; }
.finale__title span:nth-child(2) { padding-left: 0.9em; }
.finale__title span:nth-child(3) { color: var(--cream); }
.finale__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px 40px; }
.finale__foot p { font-size: var(--step-lead); line-height: 1.3; max-width: 30ch; }
.finale__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.finale__phone { font-weight: 700; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.25em; }
@media (max-width: 760px) {
  .finale { height: 190vh; }
  .finale__title { font-size: 17vw; font-stretch: 78%; }
  .finale__title span:nth-child(2) { padding-left: 0.4em; }
  .finale__foot p { font-size: 1.0625rem; }
  .finale__actions .btn { width: 100%; }
}

/* ---------- Still versions ---------- */
.no-js .intro, .intro--static { height: auto; }
.no-js .intro__stage, .intro--static .intro__stage { position: relative; height: auto; min-height: 100svh; display: grid; grid-template-rows: auto auto auto; gap: 32px; padding: 120px var(--m) 48px; }
.no-js .intro__photo, .intro--static .intro__photo { position: relative; inset: auto; clip-path: none !important; height: 50svh; order: 3; }
.no-js .intro__title, .intro--static .intro__title, .no-js .intro__foot, .intro--static .intro__foot { position: relative; inset: auto; left: auto; top: auto; bottom: auto; width: auto; }
.no-js .readout, .readout--static, .no-js .finale, .finale--static { height: auto; }
.no-js .readout__stage, .readout--static .readout__stage { position: relative; height: auto; padding-block: var(--section) 48px; }
.no-js .finale__stage, .finale--static .finale__stage { position: relative; height: auto; min-height: 90svh; }
.no-js .track { height: auto; }
.no-js .track__stage { position: relative; height: auto; overflow-x: auto; }

@media (prefers-reduced-motion: reduce) {
  .cursor, .curtain-out { display: none; }
  html.curtain-in::after { animation: none; display: none; }
  .js .intro__line > span, .js .intro__foot > *, .js .cascade .cw > span { transform: none !important; opacity: 1 !important; }
  .js .intro__photo { opacity: 1; }
  .js .readout__text .rw { opacity: 1; }
  .scard { transform: none !important; }
}
/* Keep the placeholder label inside the small window at the start */
.intro__photo .ph { justify-content: flex-end; text-align: right; padding: clamp(18px, 4.5vw, 64px); }
.intro__photo .ph__label { justify-items: end; }
.tcard .ph__label, .scard .ph__label { font-size: var(--step-small); line-height: 1.4; max-width: 36ch; }
@media (max-width: 760px) {
  .intro__photo .ph { align-items: center; padding-right: calc(5% + 18px); }
}
/* Placeholder labels stay readable on every card colour */
.scard--black .ph__label b { color: var(--pink); }
.scard--black .ph__label span { color: var(--dark-muted); }
.tcard--pink .ph__label span, .scard--pink .ph__label span { color: var(--black); }
/* The read-out stays heavy and huge, in sentence case so 25 words read easily */
.readout__text { text-transform: none; letter-spacing: -0.035em; line-height: 1; }

/* ---------- The work: four real jobs, staggered on cream ---------- */
.work { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 5vw, 80px); padding-inline: var(--m); }
.work__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 18px; align-items: end; }
.work__head h2 { grid-column: 1 / span 8; font-size: clamp(3rem, 1rem + 6vw, 8rem); line-height: 0.86; }
.work__head p { grid-column: 9 / -1; max-width: 32ch; }
.work__list { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: clamp(48px, 6vw, 96px); }
.work__item a { display: grid; gap: 12px; text-decoration: none; color: inherit; }
.work__item figure { margin: 0; overflow: hidden; border-radius: 28px; }
.work__item .ph { border-radius: 28px; transition: transform var(--t-move) var(--ease-out); }
.work__item--a { grid-column: 1 / span 8; } .work__item--a .ph { --ar: 3 / 2; }
.work__item--b { grid-column: 9 / -1; margin-top: 22vh; } .work__item--b .ph { --ar: 4 / 5; }
.work__item--c { grid-column: 2 / span 5; } .work__item--c .ph { --ar: 4 / 3; }
.work__item--d { grid-column: 8 / span 4; margin-top: 4vh; } .work__item--d .ph { --ar: 4 / 5; }
.work__name { font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: -0.03em; line-height: 0.92; font-size: clamp(1.75rem, 1rem + 2.2vw, 3.5rem); text-wrap: balance; }
.work__what { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.12em; font-size: var(--step-label); color: var(--muted); }
.work__all { justify-self: start; }
@media (hover: hover) and (pointer: fine) {
  .work__item a:hover .ph { transform: scale(1.03); }
  .work__item a:hover .work__name { color: var(--pink); }
  .work__name { transition: color var(--t-hover) ease; }
}
@media (max-width: 860px) {
  .work__head h2, .work__head p { grid-column: 1 / -1; }
  /* One column, staggered left and right; no drift, so names never collide */
  .work__list { grid-template-columns: minmax(0, 1fr); row-gap: 44px; }
  .work__item { grid-column: 1 !important; margin-top: 0 !important; transform: none !important; }
  .work__item--b, .work__item--d { width: 82%; }
  .work__item--c { width: 82%; margin-left: auto; }
  .work__item--b .ph, .work__item--d .ph { --ar: 4 / 3; }
  .work__name { font-size: clamp(1.625rem, 7.5vw, 2.25rem); }
}

/* ---------- Critique fixes ---------- */
/* The services button keeps its pill: no grid squeeze, label on one line */
.stack__cta { padding-inline: var(--m); }
.stack__cta .btn { white-space: nowrap; }
@media (max-width: 560px) {
  .stack__cta .btn { width: 100%; white-space: normal; text-align: center; padding-block: 14px; line-height: 1.2; }
}
/* Tags and links keep the card's accent, whichever card is active */
.scard.svc.is-active .svc__tag { color: var(--accent); }
.scard.svc.is-active .link { text-decoration-color: var(--accent); }
/* Focus stays visible on the tick-box pills */
.scard .svc__pick input:focus-visible { outline-color: var(--accent-ink); }
.scard .svc__pick:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 3px; }
/* Over a link the cursor becomes a ring, so labels stay readable */
.cursor.is-link i { background: transparent; box-shadow: inset 0 0 0 0.8px var(--pink); }
.cursor.is-link { background: transparent; }

/* Phone: the four tabs wrap instead of running off the edge; service text comes before the photo */
@media (max-width: 860px) {
  .places__steps { display: flex; flex-wrap: wrap; gap: 4px 14px; }
  .places__copy { min-width: 0; }
  .scard { grid-template-rows: auto 1fr; }
  .scard .ph { order: 0; min-height: 18svh; }
}
@media (max-width: 760px) {
  .tcard h3 { font-size: clamp(1.75rem, 8.4vw, 2.5rem); }
}

/* ---------- Mini header: comes back when you scroll up ---------- */
.minibar {
  position: fixed; top: 10px; left: var(--m); right: var(--m); z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 8px 8px 8px 20px; border-radius: 999px;
  background: rgb(10 10 8 / 0.92); color: var(--cream);
  transform: translateY(calc(-100% - 60px)); transition: transform var(--t-move) var(--ease-out);
}
.minibar.is-on { transform: none; box-shadow: var(--lift-2), var(--rim); }
.minibar__name img { display: block; width: 128px; height: auto; }
.minibar__links { display: flex; align-items: center; gap: clamp(12px, 2vw, 28px); font-size: 0.9375rem; }
.minibar__links a:not(.btn) { color: var(--cream); text-decoration: none; padding-block: 10px; }
.minibar .btn { white-space: nowrap; }
.minibar__call { display: none; background: var(--cream); color: var(--black); }
@media (hover: hover) and (pointer: fine) { .minibar__links a:not(.btn):hover { color: var(--pink); } }
@media (max-width: 760px) {
  .minibar__name img { width: 104px; }
  .minibar__links a.minibar__page { display: none; }
  .minibar__call { display: inline-flex; }
  .minibar__links { gap: 6px; }
  .minibar { padding-left: 16px; }
  .minibar .btn { padding-inline: 16px; }
}
@media (prefers-reduced-motion: reduce) { .minibar { transition: none; } }

/* ---------- Audit fixes ---------- */
/* The compositor hint is only on while a scene is near the screen (motion.js adds .is-live) */
.is-live :is(.intro__photo, .intro__line, .intro__foot, .track__rail, .tcard, .scard, .finale__title span, .finale__foot, .voices__mark, .places__layer, .places__mark, [data-parallax]),
.is-live .marquee { will-change: transform; }

/* Pause control for everything that moves on its own */
.motion-toggle {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px;
  border: 2px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer;
  font-family: var(--mono); font-size: var(--step-label); text-transform: uppercase; letter-spacing: 0.12em;
  transition: border-color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.motion-toggle::before { content: ""; width: 10px; height: 12px; border-inline: 3px solid currentColor; box-sizing: border-box; }
.motion-toggle[aria-pressed="true"]::before { width: 0; height: 0; border: 0; border-left: 10px solid currentColor; border-block: 6px solid transparent; }
.motion-toggle:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .motion-toggle:hover { border-color: var(--pink); } }
@media (prefers-reduced-motion: reduce) { .motion-toggle { display: none; } }

/* Big headings never run off the screen, even with text enlarged */
.display, .h2, .page-head h1, .contact__intro h1, .thanks h1, .service h2, .case__text h2,
.intro__title, .finale__title, .scard__name, .tcard h3, .work__name, .places__copy h2, .readout__text { overflow-wrap: anywhere; }

/* Thumb-sized targets for links that stand on their own */
.link, .finale__phone, .site-foot__line a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 760px) {
  .site-foot__line { gap: 0 24px; }
  .site-foot__line ul { gap: 0 24px; }
}
body { overflow-wrap: break-word; }
.set__chain { overflow-wrap: anywhere; }
.set__chain li { min-width: 0; max-width: 100%; }
.scard .svc__tag { white-space: normal; }
.scard__body { min-width: 0; }

/* ---------- Depth: a quiet lift, so pieces sit on the page instead of printed flat on it ---------- */
/* Buttons and pills rest slightly raised and settle when pressed */
.btn, .svc__pick, .motion-toggle { box-shadow: var(--lift-1); }
.btn { transition: transform var(--t-press) var(--ease-out), translate var(--t-move) var(--ease-out), background-color var(--t-hover) ease, box-shadow var(--t-hover) ease; }
.btn.is-pulling { transition: transform var(--t-press) var(--ease-out), translate 120ms var(--ease-out), background-color var(--t-hover) ease, box-shadow var(--t-hover) ease; }
.btn:active, .svc__pick:active { box-shadow: 0 1px 1px rgb(var(--shadow-rgb) / 0.2); }
@media (hover: hover) and (pointer: fine) { .btn:hover { box-shadow: var(--lift-2); } }
.btn--ink { box-shadow: var(--lift-1), var(--rim); }

/* Pictures stand off the page; picture slots inside cards are pressed into them */
.work__item figure, .case__main .ph, .case__second .ph, .problem__photo .ph, .step .ph { box-shadow: var(--lift-2), var(--rim), inset 0 0 0 1px rgb(255 255 255 / 0.035); }
.work__item figure .ph { box-shadow: none; }
.work__item figure { transition: box-shadow var(--t-move) var(--ease-out), transform var(--t-move) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .work__item a:hover figure { box-shadow: var(--lift-3); transform: translateY(-3px); } }
.tcard .ph, .scard .ph { box-shadow: var(--well); }

/* Cards: the stacked services cast onto the card beneath; the step cards float over the dark field */
.scard { box-shadow: 0 -2px 6px rgb(var(--shadow-rgb) / 0.10), 0 -18px 40px -18px rgb(var(--shadow-rgb) / 0.45), var(--lift-2); }
.scard--black { box-shadow: 0 -2px 6px rgb(var(--shadow-rgb) / 0.10), 0 -18px 40px -18px rgb(var(--shadow-rgb) / 0.45), var(--lift-2), var(--rim); }
.tcard { box-shadow: 0 30px 70px -24px rgb(0 0 0 / 0.85), 0 0 0 1px rgb(255 255 255 / 0.04), inset 0 -3px 0 rgb(0 0 0 / 0.06); }

/* The mock-ups in "One look. Four places." read as objects */

/* The hero window gets an edge while it is still small */
.intro__photo .ph { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06), var(--rim); }

@media (prefers-reduced-motion: reduce) { .work__item a:hover figure, .work__item a:hover .ph { transform: none; } .btn { translate: none !important; } }

/* ---------- Typesetting ----------
   Roles: display (Archivo 900 capitals, condensed only where space is tight) · subhead (Archivo 800, sentence case)
   · lead (Space Grotesk 400) · body (Space Grotesk 400, 17-19px) · small (Space Grotesk 15-16px) · label (Space Mono capitals, tracked) */
h1, h2, h3 { text-wrap: balance; }
p, li, dd, figcaption, blockquote { text-wrap: pretty; }

/* Labels stay labels, even inside the big service cards */
.scard .svc__tag { font-size: var(--step-label); line-height: 1.5; letter-spacing: 0.12em; max-width: none; }

/* The opening line keeps a readable measure in every layout */
.intro__sub { max-width: 34ch; }

/* "Fair questions" is a section heading like the others, not a question */
.faq__title { grid-column: 1 / -1; font-size: var(--step-head); line-height: 0.9; letter-spacing: -0.025em; margin-bottom: clamp(28px, 3vw, 40px); }

/* Quotes hang their opening mark so the words line up */
.quote blockquote p, .case__text blockquote .lead { text-indent: -0.42em; }
.cascade .cw, .cascade .cw > span { text-indent: 0; }

/* Numbers that get compared or read out sit on even widths */
.ph__label b, .finale__phone, .direct a, .site-foot__line, .minibar__call { font-variant-numeric: tabular-nums; }

/* Form text never drops below 16px on a phone */
.check { font-size: 1rem; }

/* ---------- Polish ---------- */
/* A phone number never breaks across two lines */
a[href^="tel:"] { white-space: nowrap; }

/* ---------- Animation pass ---------- */
/* Every pressable pill squeezes a little when pressed */
.svc__pick, .check, .menu-btn { transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease, box-shadow var(--t-hover) ease; }
.svc__pick:active, .check:active, .menu-btn:active { transform: scale(0.97); }

/* The services button label re-forms through a light blur instead of jumping */
[data-svc-cta-label] { display: inline-block; transition: filter 180ms var(--ease-out), opacity 180ms var(--ease-out); }
[data-svc-cta-label].is-swapping { filter: blur(2px); opacity: 0.4; transition-duration: 110ms; }

/* Form errors drop in rather than appear */
.error:not(:empty) { animation: error-in 180ms var(--ease-out); }
@keyframes error-in { from { opacity: 0; transform: translateY(-4px); } }

@media (prefers-reduced-motion: reduce) {
  [data-svc-cta-label].is-swapping { filter: none; }
  @keyframes error-in { from { opacity: 0; } }
}
/* After the hero entrance, its button drops the entrance delay so press and hover respond at once */
.js .intro.is-settled .intro__foot > .btn { transition: transform var(--t-press) var(--ease-out), translate var(--t-move) var(--ease-out), background-color var(--t-hover) ease, box-shadow var(--t-hover) ease; }
.js .intro.is-settled .intro__foot > .btn.is-pulling { transition: transform var(--t-press) var(--ease-out), translate 120ms var(--ease-out), background-color var(--t-hover) ease, box-shadow var(--t-hover) ease; }
.js .intro.is-settled .intro__foot > .btn:active { transform: scale(0.96); }

/* ---------- QA pass ---------- */
/* The still "One look. Four places." must not keep the phone's 400vh scroll height */
.places.places--static { height: auto; }
.places.places--static .places__stage { min-height: 0; }
/* Every link reacts to the pointer: the logo dims a touch, links inside sentences thicken their underline in the accent */
.site-head__name img { transition: opacity var(--t-hover) ease; }
a:not([class]) { transition: text-decoration-color var(--t-hover) ease, color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) {
  .site-head__name:hover img { opacity: 0.72; }
  a:not([class]):hover { text-decoration-color: var(--accent); text-decoration-thickness: 0.14em; }
  .pinkfield a:not([class]):hover, .field a:not([class]):hover { text-decoration-thickness: 0.18em; }
}
/* The message box grows with what's typed, up to half the screen, then scrolls */
textarea.input { field-sizing: content; min-height: 9.5em; max-height: 50vh; }

/* ---------- Real pictures ---------- */
/* The <picture> wrapper steps aside so the image keeps the placeholder's place in every grid */
.ph-pic { display: contents; }
.ph-pic > source { display: none; }  /* never let the source line take a grid cell */
.ph.ph--img { padding: 0; width: 100%; object-fit: cover; display: block; color: transparent; }
.ph.ph--img.ph--contain { object-fit: contain; padding: clamp(16px, 6%, 48px); }
/* Logos and cut-out garments sit on a tile that suits them, whatever the section colour */
.ph--audacieux { background: var(--black); }
.ph--award-pr { background: var(--cream); }
.ph--gard-jacket, .ph--gard-hoodie, .ph--altitude-hoodie, .ph--tf-cap-navy { background: var(--cream-ph); }
.ph--gard-cap { background: #fff; }
.scard--pink .ph--gard-jacket, .tcard--pink .ph--tf-cap-navy { background: var(--cream); }
/* On a phone the hero photo keeps the crew in frame */
@media (max-width: 760px) { .intro__photo .ph--img { object-position: 75% 50% !important; } }
/* The closing photo on About and Case studies fills its section, wrapper or not */
.closer > .ph-pic > .ph { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; }
@media (max-width: 760px) { .closer > .ph-pic > .ph { position: relative; inset: auto; height: 70svh; } }
/* Photos inside the service and step cards fill the space the card gives them; they never set the card's height */
.scard .ph.ph--img, .tcard .ph.ph--img { contain: size; height: 100%; min-height: 0; }
.scard .ph.ph--img { min-height: 280px; }
@media (max-width: 860px) { .scard .ph.ph--img { min-height: 22svh; } }

/* ---------- One look, four places: realistic mock-ups ----------
   Everything inside the canvas is sized in container units (cqw), so the mock-ups scale crisply at any size. */
.places__canvas { container-type: inline-size; }
.places__layer { display: grid; place-items: center; }
.places__layer [data-target] { display: block; position: absolute; }

/* 1 · Logo: a page from the brand guidelines */
.pl-brand { position: relative; width: 92cqw; height: 92cqw; border-radius: 3cqw; background: #111110; box-shadow: 0 4cqw 9cqw -3cqw rgb(0 0 0 / 0.85), inset 0 0 0 1px rgb(255 255 255 / 0.07);
  display: grid; grid-template-rows: auto 1fr auto auto; padding: 5cqw; color: var(--cream); }
.pl-brand__meta { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 2.1cqw; letter-spacing: 0.14em; text-transform: uppercase; color: #8d897f; }
.pl-logo__spot { left: 12%; top: 16%; width: 76%; height: 40%; }
.pl-logo__word { width: 56%; justify-self: center; align-self: end; margin-bottom: 6cqw; }
.pl-brand__foot { display: flex; justify-content: space-between; align-items: end; border-top: 1px solid rgb(255 255 255 / 0.1); padding-top: 3.4cqw; }
.pl-brand__swatches { display: flex; gap: 1.6cqw; }
.pl-brand__swatches i { width: 7cqw; height: 7cqw; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16); }
.pl-brand__type { display: grid; gap: 0.6cqw; text-align: right; }
.pl-brand__type b { font-family: var(--display); font-weight: 900; font-size: 4.2cqw; line-height: 1; letter-spacing: -0.02em; }
.pl-brand__type span { font-family: var(--mono); font-size: 1.9cqw; letter-spacing: 0.1em; text-transform: uppercase; color: #8d897f; }

/* 2 · Workwear: a navy tee shot flat on a light surface */
.pl-flat { position: relative; width: 92cqw; height: 92cqw; border-radius: 3cqw; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 35%, #f3f0e8 0%, #e4dfd3 70%, #d8d2c4 100%); box-shadow: 0 4cqw 9cqw -3cqw rgb(0 0 0 / 0.85); }
.pl-flat__tee { position: absolute; left: 6cqw; top: 5cqw; width: 80cqw; height: 80cqw; filter: drop-shadow(0 1.6cqw 1.6cqw rgb(40 30 20 / 0.28)) drop-shadow(0 0.3cqw 0.3cqw rgb(40 30 20 / 0.25)); }
.pl-shirt__spot { left: 54.3%; top: 29.8%; width: 9.6%; height: 5.2%; }
.pl-flat__tag { position: absolute; left: 5cqw; bottom: 4cqw; font-family: var(--mono); font-size: 2cqw; letter-spacing: 0.12em; text-transform: uppercase; color: #6d675b; }

/* 3 · Gear portal: a current phone with the storefront open */
.pl-phone__frame { position: relative; width: 47cqw; height: 96cqw; border-radius: 7.4cqw; padding: 1.4cqw;
  background: linear-gradient(145deg, #3a3a3e, #121214 40%, #2a2a2e 75%, #0e0e10); box-shadow: 0 5cqw 10cqw -3cqw rgb(0 0 0 / 0.9), inset 0 0 0 0.35cqw #4a4a50; }
.pl-phone__btn { position: absolute; right: -0.5cqw; width: 0.6cqw; border-radius: 0 0.4cqw 0.4cqw 0; background: #2e2e32; }
.pl-phone__btn--a { top: 22cqw; height: 9cqw; } .pl-phone__btn--b { top: 34cqw; height: 6cqw; }
.pl-phone__screen { position: relative; height: 100%; border-radius: 6.2cqw; background: #faf8f3; color: var(--black); overflow: hidden;
  display: grid; grid-template-rows: repeat(8, auto); align-content: start; padding: 0 3.4cqw 2cqw; }
.pl-phone__status { display: flex; justify-content: space-between; align-items: center; height: 7cqw; padding: 0 1.4cqw; font-size: 2.1cqw; font-family: var(--text); }
.pl-phone__status b { font-weight: 700; }
.pl-phone__island { position: absolute; left: 50%; top: 1.5cqw; width: 13cqw; height: 3.9cqw; margin-left: -6.5cqw; border-radius: 2cqw; background: #050505; }
.pl-phone__icons { display: flex; gap: 0.8cqw; align-items: end; }
.pl-phone__icons i { display: block; width: 1.1cqw; height: 1.6cqw; border-radius: 0.2cqw; background: #111; }
.pl-phone__icons i:nth-child(2) { height: 1.2cqw; } .pl-phone__icons i:nth-child(3) { width: 3.6cqw; height: 1.7cqw; border-radius: 0.5cqw; }
.pl-phone__app { display: flex; justify-content: space-between; align-items: center; padding: 1.8cqw 0.4cqw 2.2cqw; border-bottom: 1px solid #ece8de; }
.pl-phone__brand { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: 2.5cqw; letter-spacing: -0.01em; }
.pl-phone__cart { position: relative; width: 4cqw; height: 3.4cqw; border: 0.45cqw solid #111; border-top-width: 0.7cqw; border-radius: 0 0 0.8cqw 0.8cqw; }
.pl-phone__cart i { position: absolute; right: -1.8cqw; top: -2.4cqw; min-width: 2.6cqw; height: 2.6cqw; border-radius: 2cqw; background: var(--pink); color: #000; font-style: normal; font-weight: 700; font-size: 1.6cqw; display: grid; place-items: center; }
.pl-phone__tile { position: relative; aspect-ratio: 1; margin-top: 2.4cqw; border-radius: 3cqw; background: radial-gradient(110% 90% at 50% 35%, #f3f0e8, #e2ddd0); overflow: hidden; }
.pl-phone__tile svg { position: absolute; inset: 4% 6% 2%; width: 88%; height: 94%; filter: drop-shadow(0 0.8cqw 0.8cqw rgb(40 30 20 / 0.25)); }
.pl-phone__spot { left: 54.4%; top: 31.6%; width: 9.7%; height: 5.3%; }
.pl-phone__name { margin-top: 2.6cqw; font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: 3.6cqw; line-height: 1; letter-spacing: -0.01em; }
.pl-phone__sub { margin-top: 0.8cqw; font-size: 1.9cqw; line-height: 1.3; color: #6d675b; }
.pl-phone__sizes { display: flex; gap: 1.2cqw; margin-top: 2.2cqw; }
.pl-phone__sizes i { flex: 1; font-style: normal; text-align: center; font-weight: 700; font-size: 1.9cqw; padding: 1.1cqw 0; border-radius: 99cqw; background: #ece8de; }
.pl-phone__sizes i.on { background: #111; color: #faf8f3; }
.pl-phone__buy { margin-top: 2cqw; text-align: center; font-weight: 700; font-size: 2.4cqw; padding: 2cqw 0; border-radius: 99cqw; background: var(--pink); color: #000; box-shadow: 0 0.8cqw 1.6cqw -0.6cqw rgb(251 4 164 / 0.6); }
.pl-phone__tabs { display: flex; justify-content: space-around; margin-top: 2.4cqw; padding-top: 2cqw; border-top: 1px solid #ece8de; }
.pl-phone__tabs i { width: 3.2cqw; height: 3.2cqw; border-radius: 1cqw; background: #d9d4c8; }
.pl-phone__tabs i.on { background: #111; }

/* 4 · Website: a browser window with the site open */
.pl-web__frame { width: 98cqw; border-radius: 2cqw; overflow: hidden; background: #1c1c1e; box-shadow: 0 5cqw 10cqw -3cqw rgb(0 0 0 / 0.9), inset 0 0 0 1px rgb(255 255 255 / 0.08); }
.pl-web__chrome { display: flex; align-items: end; gap: 3cqw; padding: 1.6cqw 2.2cqw 0; }
.pl-web__lights { display: flex; gap: 1cqw; padding-bottom: 1.6cqw; }
.pl-web__lights i { width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: #ff5f57; }
.pl-web__lights i:nth-child(2) { background: #febc2e; } .pl-web__lights i:nth-child(3) { background: #28c840; }
.pl-web__tab { font-size: 1.8cqw; color: #e8e6e1; background: #2c2c2f; padding: 1.2cqw 4cqw 1.3cqw 2.2cqw; border-radius: 1.2cqw 1.2cqw 0 0; }
.pl-web__url { background: #2c2c2f; padding: 1.1cqw 2.2cqw 1.4cqw; }
.pl-web__url span { display: block; font-size: 1.8cqw; color: #b9b6ae; background: #1c1c1e; border-radius: 1.2cqw; padding: 0.9cqw 2.4cqw; }
.pl-web__url span::before { content: ""; display: inline-block; width: 1.1cqw; height: 1.3cqw; margin-right: 1.2cqw; border: 0.3cqw solid #8d897f; border-radius: 0.3cqw; vertical-align: -0.15cqw; }
.pl-web__site { background: #0f0f0e; color: #f4f1ea; }
.pl-web__nav { position: relative; display: flex; align-items: center; gap: 3cqw; padding: 2.2cqw 3.4cqw; font-size: 1.8cqw; }
.pl-web__logo { position: relative !important; width: 13cqw; height: 6cqw; margin-right: auto; }
.pl-web__nav span { color: #c9c5bc; }
.pl-web__nav em { font-style: normal; font-weight: 700; padding: 1cqw 2.2cqw; border-radius: 99cqw; background: var(--pink); color: #000; }
.pl-web__hero { position: relative; height: 38cqw; overflow: hidden; }
.pl-web__hero img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; display: block; }
.pl-web__hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(10 10 8 / 0.85) 0%, rgb(10 10 8 / 0.35) 55%, rgb(10 10 8 / 0) 100%); }
.pl-web__copy { position: absolute; left: 3.4cqw; top: 50%; transform: translateY(-50%); z-index: 1; display: grid; gap: 1.4cqw; justify-items: start; max-width: 44cqw; }
.pl-web__copy b { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: 5.6cqw; line-height: 0.9; letter-spacing: -0.02em; }
.pl-web__copy span { font-size: 1.9cqw; color: #d8d4cb; }
.pl-web__copy em { font-style: normal; font-weight: 700; font-size: 1.8cqw; padding: 1cqw 2.4cqw; border-radius: 99cqw; background: #f4f1ea; color: #000; }
.pl-web__strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqw; padding: 2.2cqw 3.4cqw 3cqw; }
.pl-web__strip span { height: 8cqw; border-radius: 1.2cqw; background: #1d1d1b; display: flex; align-items: end; padding: 1.4cqw; }
.pl-web__strip b { font-size: 1.8cqw; font-weight: 700; }

/* The scene swaps between mock-ups closer to each midpoint, so two are rarely half-visible at once */