/* ============================================================
   Project case-study page
   ============================================================ */
.proj-body {
  background: #fbfbfc;
  /* the accent a case study is dressed in. Rose by default; a page can switch
     the whole set with one class rather than overriding a dozen rules. */
  --accent: #e0b4b4;
  --accent-soft: #f7e9e9;
  --accent-ink: #a86a6a;
  --accent-edge: #e8c7d2;
  --accent-label: #c98ba2;
  --accent-head-a: #f7ccda;
  --accent-head-b: #fae3ea;
  --accent-head-ink: #6d3b4c;
}
.proj-body.accent-blue {
  --accent: #90b1d1;
  --accent-soft: #e9f0f8;
  --accent-ink: #4d7094;
  --accent-edge: #c3d6e8;
  --accent-label: #6f93b8;
  --accent-head-a: #cfe0ef;
  --accent-head-b: #e6eff7;
  --accent-head-ink: #33536f;
}

/* ---------- Sticky pill nav ---------- */
.proj-nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; justify-content: center;
  padding: 18px 20px;
  background: linear-gradient(#fbfbfc 72%, rgba(251, 251, 252, 0));
}
.proj-nav-inner {
  display: flex; align-items: center; gap: 6px;
  max-width: 100%; overflow-x: auto;
  padding: 5px;
  background: #f1f1f3; border-radius: 999px;
  scrollbar-width: none;
}
.proj-nav-inner::-webkit-scrollbar { display: none; }
.proj-back {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 15px; border-radius: 999px;
  background: #fff; color: var(--ink);
  font-size: 0.83rem; white-space: nowrap;
  box-shadow: 0 1px 3px rgba(20, 25, 45, 0.08);
  transition: color 0.25s;
}
.proj-back:hover { color: var(--peri); }
.proj-tabs { display: flex; gap: 2px; }
.proj-tabs a {
  padding: 8px 13px; border-radius: 999px;
  color: #8e8e95; font-size: 0.83rem; white-space: nowrap;
  transition: background 0.25s, color 0.25s;
}
.proj-tabs a:hover { color: var(--ink); }
.proj-tabs a.is-active { background: #fff; color: #11131a; box-shadow: 0 1px 3px rgba(20, 25, 45, 0.08); }

/* ---------- Layout ---------- */
.proj-wrap { max-width: 760px; margin: 0 auto; padding: 0 22px 120px; }
.proj-head { padding: clamp(24px, 4vw, 46px) 0 0; }
.proj-kicker { font-size: 0.8rem; color: #8e8e95; }
.proj-title {
  margin-top: 8px;
  font-size: clamp(1.55rem, 3vw, 2.05rem); font-weight: 500;
  color: #11131a; letter-spacing: -0.03em; line-height: 1.18;
}
/* the descriptive line the company name displaced, sized between the two */
/* the same size as the lede below it; only the company name is larger */
.proj-sub {
  margin-top: 8px;
  font-size: 0.8rem;
  line-height: 1.55;
  color: #55555e;
}
.proj-lede { margin-top: 10px; font-size: 0.8rem; line-height: 1.55; color: #6e6e77; }

/* hero + figures */
.proj-hero { margin-top: clamp(22px, 3vw, 34px); }
.shot {
  border-radius: 14px; overflow: hidden;
  display: grid; place-items: center;
}
/* the image fills the frame; the gradient only shows when there is no image */
.shot img { width: 100%; height: auto; display: block; }
.shot:not(:has(img)) { aspect-ratio: 16 / 9; }
.shot.plain { background: #f1f1f3; }
figure { margin: 0; }
figcaption { margin-top: 12px; font-size: 0.78rem; color: #9a9aa2; }

/* meta strip */
.proj-meta {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  margin-top: clamp(22px, 3vw, 34px);
  padding-bottom: clamp(22px, 3vw, 34px);
  border-bottom: 1px solid #e8e8ec;
}
.proj-meta dt { font-size: 0.82rem; font-weight: 600; color: #11131a; }
.proj-meta dd { margin: 6px 0 0; font-size: 0.82rem; color: #6e6e77; }

/* ---------- Sections ---------- */
.proj-section { padding: clamp(22px, 2.4vw, 28px) 0 0; scroll-margin-top: 80px; }
.proj-section + .proj-section > .sec-label { margin-top: 0; }
/* every section label reads the same, and warms to rose on hover.
   Scoped to the section because .proj-section p is more specific than a bare
   .sec-label and was deciding the colour instead. */
.proj-section .sec-label {
  font-size: 0.78rem; font-weight: 500;
  color: #8e8e95;
  transition: color 0.3s var(--ease);
}
.proj-section:hover .sec-label { color: var(--accent); }
.proj-section h2 {
  margin-top: 10px;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem); font-weight: 500;
  color: #11131a; letter-spacing: -0.025em; line-height: 1.25;
}
.proj-section h3 { margin-top: 26px; font-size: 0.95rem; font-weight: 600; color: #11131a; }
.proj-section p { margin-top: 12px; font-size: 0.88rem; line-height: 1.7; color: #6e6e77; }
.proj-section figure { margin-top: 24px; }
.divider { height: 1px; background: #e8e8ec; margin-top: clamp(22px, 2.4vw, 28px); }

/* numbered callouts over a screenshot */
.marked { position: relative; }
.pin {
  position: absolute; z-index: 2;
  min-width: 26px; padding: 4px 8px;
  background: #1a1c24; color: #fff;
  border-radius: 7px; font-size: 0.72rem; text-align: center;
}

/* next project */
.proj-next {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  margin-top: clamp(46px, 7vw, 76px); padding-top: 26px;
  border-top: 1px solid #e8e8ec;
  font-size: 0.88rem;
}
.proj-next a { color: #11131a; transition: color 0.25s; }
.proj-next a:hover { color: var(--peri); }

@media (max-width: 680px) {
  .proj-meta { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .proj-nav { padding: 12px 12px; }
}

/* ============================================================
   Case-study interactives
   ============================================================ */

/* --- brief strip under the hero --- */
.brief {
  margin-top: 14px; padding: 18px 20px;
  border-left: 2px solid var(--accent-edge); border-radius: 0 10px 10px 0;
  background: linear-gradient(90deg, rgba(249, 233, 238, 0.6), rgba(249, 233, 238, 0));
  font-size: 0.9rem; line-height: 1.6; color: #55555e;
}

/* --- numbered impact cards --- */
/* A vertical list rather than three wide cards: a 3 and a 1 spread across the
   full column read as less than they are. Stacked and close, the figures line
   up and the numbers carry themselves. */
.impact-grid {
  display: flex; flex-direction: column;
  margin-top: 20px; max-width: 430px;
  border-top: 1px solid #ececf0;
}
.impact {
  display: flex; align-items: baseline; gap: 16px;
  padding: 12px 2px;
  border-bottom: 1px solid #ececf0;
  transition: color 0.35s var(--ease);
}
.impact .fig {
  flex: 0 0 auto; min-width: 84px;
  font-size: 1.32rem; font-weight: 600; letter-spacing: -0.02em;
  color: #11131a; line-height: 1.2;
  transition: color 0.35s var(--ease);
}
.impact:hover .fig { color: var(--accent-ink); }
.impact .lbl { font-size: 0.85rem; line-height: 1.4; color: #6e6e77; }
@media (max-width: 680px) { .impact .fig { min-width: 72px; } }

/* --- concept cards --- */
.concept {
  margin-top: 24px; border: 1px solid #ececf0; border-radius: 16px; overflow: hidden;
  background: #fff;
  transition: box-shadow 0.4s var(--ease), border-color 0.4s;
}
.concept:hover { border-color: var(--accent-edge); box-shadow: 0 14px 36px rgba(60, 40, 50, 0.08); }
.concept-head {
  padding: 13px 20px; background: linear-gradient(90deg, var(--accent-head-a), var(--accent-head-b));
  color: var(--accent-head-ink); font-weight: 600; font-size: 0.82rem;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.concept-body { padding: 22px 20px; }
.concept-body p { margin-top: 0; }
.concept .kicker { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: #9a9aa2; }
.concept-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 16px; }
@media (max-width: 680px) { .concept-cols { grid-template-columns: 1fr; } }
.concept-cols h5 { font-size: 0.86rem; font-weight: 600; color: #11131a; }
.concept-cols ul { margin-top: 9px; display: grid; gap: 7px; }
.concept-cols li { font-size: 0.84rem; line-height: 1.5; color: #6e6e77; }
.concept-cols li b { color: #11131a; font-weight: 600; }

/* why-it-works note */
.why {
  margin-top: 16px; padding: 14px 16px; border-radius: 10px;
  background: #fbfbfc; border: 1px dashed #e4e4ea;
  font-size: 0.84rem; line-height: 1.6; color: #6e6e77;
}
.why b { color: #11131a; }

/* --- closing photo strip: the summer itself, not the slides --- */
.life { padding: clamp(26px, 3.2vw, 38px) 0 0; }
.life-intro { margin-top: 10px; font-size: 0.88rem; line-height: 1.7; color: #6e6e77; }
.life-grid {
  margin-top: 22px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.life-grid figure { margin: 0; }
.life-grid .frame {
  aspect-ratio: 1; overflow: hidden; border-radius: 12px; background: #f1f1f3;
  transition: transform 0.45s var(--spring), box-shadow 0.45s var(--ease);
}
.life-grid img { width: 100%; height: 100%; object-fit: cover; }
.life-grid figure:hover .frame {
  transform: translateY(-5px) rotate(-1.2deg) scale(1.02);
  box-shadow: 0 14px 32px rgba(60, 40, 50, 0.16);
}
.life-grid figcaption { margin-top: 9px; font-size: 0.76rem; color: #9a9aa2; }
@media (max-width: 680px) { .life-grid { grid-template-columns: repeat(2, 1fr); } }

/* --- customer-voice pull quotes --- */
.voice { margin-top: 16px; display: grid; gap: 10px; }
.voice div {
  padding: 13px 16px; border-left: 2px solid var(--accent-edge); border-radius: 0 10px 10px 0;
  background: #fcf7f9;
}
.voice b { display: block; font-size: 0.78rem; color: #11131a; }
.voice i { display: block; margin-top: 3px; font-size: 0.88rem; color: #6e6e77; }

/* --- the five-step journey line --- */
.flow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
  margin-top: 18px; padding: 14px 16px;
  border: 1px solid #ececf0; border-radius: 12px; background: #fcfcfd;
}
.flow span {
  font-size: 0.82rem; font-weight: 600; color: #11131a;
  padding: 5px 11px; border-radius: 999px; background: #f6dde5;
}
.flow em { font-style: normal; color: #c2a3ae; }

/* --- how it scales by store format --- */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 20px; }
.tier {
  padding: 16px 16px 15px; border: 1px solid #ececf0; border-radius: 12px; background: #fff;
  transition: transform 0.4s var(--ease), border-color 0.4s, box-shadow 0.4s var(--ease);
}
.tier:hover { transform: translateY(-3px); border-color: var(--accent-edge); box-shadow: 0 10px 26px rgba(60, 40, 50, 0.07); }
.tier b {
  display: block; font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-label);
}
.tier span { display: block; margin-top: 7px; font-size: 0.83rem; line-height: 1.55; color: #6e6e77; }
@media (max-width: 680px) { .tiers { grid-template-columns: 1fr; } }

/* --- animated process line: each step lights up in turn --- */
.proc {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
  margin-top: 18px; padding: 16px;
  border: 1px solid #ececf0; border-radius: 12px; background: #fcfcfd;
}
.proc { counter-reset: procstep; }
.proc span {
  font-size: 0.82rem; font-weight: 600; color: #6e6e77;
  padding: 6px 12px; border-radius: 999px; background: #f2f2f6;
  animation: proc-step 7.2s ease-in-out infinite;
}
/* numbered rather than arrowed: on a narrow column the row wraps, and the
   arrows ended up stranded at the end of each line pointing at nothing */
.proc span::before {
  counter-increment: procstep;
  content: counter(procstep) ". ";
  color: #b4b4c0; font-weight: 500;
}
.proc em { display: none; }
.proc span:nth-of-type(1) { animation-delay: 0s; }
.proc span:nth-of-type(2) { animation-delay: 1.2s; }
.proc span:nth-of-type(3) { animation-delay: 2.4s; }
.proc span:nth-of-type(4) { animation-delay: 3.6s; }
.proc span:nth-of-type(5) { animation-delay: 4.8s; }
.proc span:nth-of-type(6) { animation-delay: 6s; }
/* the active step picks up the site's rose rather than an indigo of its own */
@keyframes proc-step {
  0%, 12%, 100% { background: var(--accent-soft); color: var(--accent-ink); transform: translateY(-2px); }
  18%, 96%      { background: #f2f2f6; color: #6e6e77; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .proc span { animation: none; } }

/* --- the "what does AI say about your brand?" pivot --- */
.swap-line { display: grid; gap: 10px; margin-top: 18px; }
.swap-line div {
  padding: 13px 16px; border-radius: 10px;
  font-size: 0.9rem; line-height: 1.5;
}
.swap-line .from { background: #f6f6f8; color: #9a9aa2; text-decoration: line-through; }
.swap-line .to { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }

/* ---------- concepts side by side ---------- */
/* .concept stacks; this lays a set of them out so you can take in all of the
   options at once, which is how they were presented. */
.concept-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
  margin: clamp(18px, 2.4vw, 28px) 0;
}
.concept-row .concept { margin: 0; height: 100%; }
.concept-row .concept-body { padding-top: 0; }
.concept-row .concept-body p { font-size: 0.9rem; line-height: 1.6; }

/* a heading inside a section, under its h2 */
.sub {
  margin: clamp(26px, 3.4vw, 40px) 0 10px;
  font-size: clamp(1rem, 1.2vw, 1.12rem);
  font-weight: 500;
  color: var(--navy);
  letter-spacing: -0.02em;
}

/* ---------- a stack of slides you click through ---------- */
/* --i is each card's place in the pile; the JS rewrites --d as the depth, so
   the CSS only has to turn depth into offset, tilt and whether it shows. */
.slides {
  position: relative;
  margin: clamp(20px, 2.6vw, 30px) 0 0;
  /* no fixed ratio: the card in front gives the stack its height, so every
     picture keeps its own proportions */
  max-width: 620px;
}
.slide {
  /* 86% wide, with the remaining 14% kept on the right as the gutter the cards
     behind fan back into. Without it their transforms push past the container
     and the page scrolls sideways */
  position: absolute; top: 0; left: 0; width: 86%;
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 8px 26px rgba(40, 40, 60, 0.16);
  cursor: pointer;
  /* the ones behind slide back and up, leaving their edges showing along the
     top right. Capped at 3, since anything deeper is invisible anyway. */
  --step-x: 17px;
  --step-y: -13px;
  transform: translate(calc(min(var(--d, 0), 3) * var(--step-x)), calc(min(var(--d, 0), 3) * var(--step-y)))
             rotate(calc(min(var(--d, 0), 3) * 1.4deg + 1.6deg));
  z-index: calc(20 - var(--d, 0));
  opacity: calc(3 - var(--d, 0));
  transition: transform 0.5s cubic-bezier(0.34, 1.26, 0.64, 1), opacity 0.35s ease;
}
.slide .shot { border-radius: 0; }

/* ---------- the closer look ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 2147483000;
  display: grid; place-items: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(20, 20, 26, 0.82);
  opacity: 0;
  transition: opacity 0.22s ease;
}
.lightbox.is-open { opacity: 1; }
.lb-frame { max-width: min(1000px, 100%); max-height: 100%; }
.lightbox img { width: 100%; height: auto; max-height: 80vh; object-fit: contain; border-radius: 10px; }

/* paging through the set, so you never have to close and reopen */
.lb-arrow {
  position: absolute; top: 50%; translate: 0 -50%;
  width: 46px; height: 46px;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff; font-size: 26px; line-height: 1;
  cursor: pointer;
  transition: background 0.25s ease;
}
.lb-arrow:hover { background: rgba(255, 255, 255, 0.26); }
.lb-prev { left: clamp(10px, 2.5vw, 30px); }
.lb-next { right: clamp(10px, 2.5vw, 30px); }
.lb-count {
  position: absolute; left: 50%; bottom: 20px;
  translate: -50% 0;
  font-size: 0.78rem; color: rgba(255, 255, 255, 0.7);
}
.lightbox.is-single .lb-arrow, .lightbox.is-single .lb-count { display: none; }
.lightbox .lb-empty {
  aspect-ratio: 16 / 10; width: min(760px, 100%);
  border-radius: 10px;
  background: linear-gradient(135deg, #efe7e0, #e5e7ee);
}
.lightbox-close {
  position: absolute; top: 18px; right: 20px;
  width: 38px; height: 38px;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff; font-size: 20px; line-height: 1;
  cursor: pointer;
}
.lightbox-close:hover { background: rgba(255, 255, 255, 0.24); }

/* ---------- a compact list of questions, rose bullets ---------- */
.qs { margin: 16px 0 0; padding: 0; list-style: none; }
.qs li {
  position: relative;
  padding-left: 20px;
  font-size: 0.92rem; line-height: 1.6;
  color: #55555d;
}
.qs li + li { margin-top: 7px; }
.qs li::before {
  content: "";
  position: absolute; left: 4px; top: 0.62em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
}

/* ---------- services as a short bulleted list ---------- */
.proj-meta .tags { display: flex; flex-direction: column; gap: 4px; }
.proj-meta .tags span { position: relative; padding-left: 14px; font-size: 0.82rem; line-height: 1.4; }
.proj-meta .tags span::before {
  content: "";
  position: absolute; left: 2px; top: 0.52em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent);
}

/* ---------- the header and its cover, side by side ---------- */
.proj-top {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  /* start, not stretch: a stretched box has to mat the cover to fill it, and
     the covers are logos and framed shots that may not be cropped either */
  align-items: start;
  gap: clamp(20px, 3.2vw, 40px);
}
/* the header's own top padding plus the kicker line, so the cover starts level
   with the project name rather than with the kicker above it */
.proj-top .proj-hero {
  margin-top: calc(clamp(24px, 4vw, 46px) + 27px);
  display: flex;
}
.proj-top .proj-hero .shot { width: 100%; }
.proj-top .proj-hero .shot img { width: 100%; height: auto; }
@media (max-width: 760px) {
  .proj-top { grid-template-columns: 1fr; }
  .proj-top .proj-hero { margin-top: clamp(20px, 3vw, 30px); }
}


/* ---------- a numbered journey ---------- */
.steps { margin: clamp(18px, 2.4vw, 26px) 0 0; padding: 0; list-style: none; counter-reset: step; }
.steps li {
  position: relative;
  padding-left: 32px;
  font-size: 0.94rem; line-height: 1.62;
  color: #55555d;
}
.steps li + li { margin-top: 12px; }
.steps li::before {
  counter-increment: step;
  content: counter(step) ".";
  position: absolute; left: 4px; top: 0;
  font-weight: 600;
  color: var(--accent);
}
.steps li b { color: var(--navy); font-weight: 600; margin-right: 4px; }

/* any figure you can open full size */
[data-zoom] { cursor: pointer; margin: 0; }
[data-zoom] .shot { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease; }
[data-zoom]:hover .shot { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(40, 40, 60, 0.15); }

/* ---------- writing beside the stack ---------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(22px, 3.4vw, 52px);
  /* start, not centre: centring left a short paragraph floating in a tall row
     and opened a gap between one stack and the next */
  align-items: start;
  margin-top: clamp(14px, 1.8vw, 20px);
}
.split + .split { margin-top: clamp(14px, 1.8vw, 20px); }
/* a nudge, so the top of the pile reads level with the first line of text */
.split-media { padding-top: 4px; }
/* two stacks in one column need air between them, not between the rows */
.split-media .slides + .slides { margin-top: clamp(26px, 3.2vw, 40px); }
.split-text .steps { margin-top: clamp(16px, 2vw, 22px); }
.split-text > :first-child { margin-top: 0; }
.split-media .slides { margin-top: 0; max-width: none; }
@media (max-width: 820px) {
  .split { grid-template-columns: 1fr; }
}

/* ---------- a small gallery of pieces, each one zoomable ---------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-top: clamp(18px, 2.4vw, 26px);
}
.gallery .shot { border-radius: 8px; }
.gallery-cap {
  margin-top: 9px;
  font-size: 0.78rem; line-height: 1.5;
  color: #9a9aa2;
}

/* ---------- a pile you flip in place ---------- */
/* the arrows only appear while you are over it */
.stack-arrow {
  position: absolute; top: 50%; translate: 0 -50%;
  z-index: 30;
  width: 34px; height: 34px;
  padding: 0; border: 0; border-radius: 50%;
  /* a translucent disc, so it reads over a photograph without sitting on top
     of it like a solid button */
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(3px);
  color: rgba(28, 28, 34, 0.75); font-size: 20px; line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.slides.is-pile:hover .stack-arrow { opacity: 1; }
.stack-arrow:hover { background: rgba(255, 255, 255, 0.8); color: rgba(28, 28, 34, 0.95); }
/* flanking the card in front, which now sits to the right of the gutter */
.stack-prev { left: -16px; }
.stack-next { right: calc(14% - 22px); }
/* the card in front sits in normal flow and sets the stack's height; the rest
   stack over it. Nothing is cropped and nothing is matted: each picture is
   shown at its own proportions. */
.slide.is-front { position: relative; left: 0; margin-left: 0; margin-right: 14%; }
.slides .slide .shot { height: auto; }
.slides .slide .shot img { width: 100%; height: auto; }
/* ---------- a scatter: each picture at its own size, click one to bring it up ---------- */
.slides.is-scatter {
  /* a fan rather than a pile: wide and short, so the group sits level with the
     paragraph beside it instead of running past it */
  aspect-ratio: 1 / 0.6;
  max-width: 380px;
}
.slides.is-scatter .slide,
.slides.is-scatter .slide.is-front {
  /* placed individually, so mixed proportions sit together rather than being
     forced into one frame */
  position: absolute;
  left: var(--x); top: var(--y); width: var(--w);
  margin-left: 0;
  transform: none;
  rotate: var(--r);
  opacity: 1;
}
/* the fan gets the stacks' arrows too, out at its own edges rather than
   tucked against a gutter it does not have */
.slides.is-scatter .stack-arrow { display: block; }
.slides.is-scatter .stack-prev { left: -18px; }
.slides.is-scatter .stack-next { right: -18px; }
.slides.is-scatter:hover .stack-arrow { opacity: 1; }

/* clicking one brings it forward; there is nothing to open. It lifts and
   straightens on the way, so the fan moves the way the stacks do rather than
   just swapping which card is on top. */
.slides.is-scatter .slide {
  cursor: pointer;
  transition: translate 0.45s var(--spring), rotate 0.45s var(--spring),
              box-shadow 0.4s var(--ease);
}
.slides.is-scatter .slide:hover {
  translate: 0 -7px;
  box-shadow: 0 14px 30px rgba(40, 40, 60, 0.2);
}
.slides.is-scatter .slide.is-front {
  translate: 0 -10px;
  /* most of the way upright, but not all: it should still read as a photo in
     a fan rather than a card in a slot */
  rotate: calc(var(--r) * 0.35);
  box-shadow: 0 18px 38px rgba(40, 40, 60, 0.22);
}
/* the fan runs the height of the whole block, heading included. The width has
   to be stated: every card inside is absolutely positioned, so as a flex item
   it would size to zero content and disappear. */
.split-tall { align-items: stretch; }
.split-tall .split-media { display: flex; align-items: center; }
.split-tall .split-media .slides { width: 100%; }

/* hovering the pile opens it up, so the card behind is easy to aim at */
.slides.is-pile:not(.is-scatter):hover .slide {
  --step-x: 26px;
  --step-y: -19px;
}

/* ---------- a short list of what came of it ---------- */
.wins { margin: clamp(16px, 2vw, 22px) 0 0; padding: 0; list-style: none; }
.wins li {
  position: relative;
  padding-left: 20px;
  font-size: 0.86rem; line-height: 1.65;
  color: #6e6e77;
}
.wins li + li { margin-top: 11px; }
.wins li::before {
  content: "";
  position: absolute; left: 3px; top: 0.66em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
}
.wins b { color: #11131a; font-weight: 600; }

/* a quiet note under a stack that does not open */
.media-note {
  margin-top: 9px;
  font-size: 0.74rem;
  color: #9a9aa2;
}

/* a project name that goes somewhere: the arrow is the affordance, since an
   underline under a 37px heading reads as a mistake */
.proj-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s var(--ease);
}
.proj-title a:hover { color: var(--accent-ink); }
.proj-title .ext {
  display: inline-block;
  margin-left: 0.18em;
  font-size: 0.42em;
  vertical-align: 0.9em;
  color: var(--accent-label);
  translate: 0 0;
  transition: translate 0.3s var(--spring), color 0.3s var(--ease);
}
.proj-title a:hover .ext { translate: 2px -2px; color: var(--accent-ink); }

/* a link out of a section, in the accent rather than the body grey */
.proj-section .proj-link { margin-top: 22px; }
.proj-link a {
  font-size: 0.92rem; color: var(--accent-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-edge);
  padding-bottom: 2px;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.proj-link a:hover { color: var(--ink); border-bottom-color: var(--accent-ink); }
.proj-link .ext {
  display: inline-block; margin-left: 0.25em; font-size: 0.8em;
  transition: translate 0.3s var(--spring);
}
.proj-link a:hover .ext { translate: 2px -2px; }

/* ---------- TroyLabs / TAO / LACI: three brands on one page ---------- */
.proj-body.accent-orgs {
  --accent: #9aa6bb; --accent-soft: #eef1f6; --accent-ink: #5b6a83;
  --accent-edge: #cdd5e2; --accent-label: #7d8ba3;
  --accent-head-a: #dde4ee; --accent-head-b: #eef2f7; --accent-head-ink: #3d4a61;
}
/* one role per line, and the column widened so none of them wrap */
.proj-body.accent-orgs .proj-meta { grid-template-columns: 1.7fr 0.9fr 1.1fr; }
.proj-meta .roles { display: flex; flex-direction: column; gap: 5px; }
.proj-meta .roles span { font-size: 0.8rem; line-height: 1.4; white-space: nowrap; }
@media (max-width: 720px) {
  .proj-body.accent-orgs .proj-meta { grid-template-columns: repeat(2, 1fr); }
  .proj-meta .roles span { white-space: normal; }
}
/* the disciplines keep their bullets, in grey rather than the accent */
.proj-meta .tags-grey span::before { background: var(--gray8); opacity: 0.5; }

/* each organisation answers in its own colour */
.org {
  color: inherit; text-decoration: none;
  transition: color 0.25s var(--ease);
}
.org-troylabs:hover { color: #e2652c; }
.org-tao:hover      { color: #2c3f68; }
.org-laci:hover     { color: #4ea3e0; }

/* the role and dates under each section heading */
.proj-section .role-line {
  margin-top: 10px; margin-bottom: 20px;
  font-family: var(--mono, "Space Mono", monospace);
  font-size: 0.78rem; letter-spacing: 0.02em;
  color: var(--accent-label);
}

/* A stack is as tall as its tallest card, not just the one in front. With the
   cards absolutely positioned, a wide picture in front left the portraits
   behind it hanging 480px into the next section. One grid cell holds them all,
   so the container takes the maximum and nothing is cropped. */
.slides.is-pile { display: grid; align-items: start; }
.slides.is-pile > .slide {
  grid-area: 1 / 1;
  position: relative; top: auto; left: auto;
  width: 86%; margin-left: 0; margin-right: 14%;
}

/* Three names on one line: at the shared title size they wrapped after TAO,
   which broke the trio in half. Smaller and held on one line, each answers in
   its own colour and links out. */
.proj-title.title-orgs {
  display: flex; flex-wrap: nowrap; align-items: baseline; gap: 0.3em;
  font-size: clamp(1.05rem, 2vw, 1.42rem);
  white-space: nowrap;
}
.proj-title.title-orgs .dot { color: #b9b9c2; font-weight: 400; }
@media (max-width: 820px) {
  .proj-title.title-orgs { flex-wrap: wrap; white-space: normal; }
}

/* A funnel is not a sequence of steps, so these carry no numbers: the figure
   leads and the unit follows it. */
.proc.is-metrics span::before { content: none; }
.proc.is-metrics span { font-weight: 400; color: #8a8a93; }
.proc.is-metrics b { font-weight: 600; font-size: 0.94rem; color: #11131a; letter-spacing: -0.01em; }

/* Wide documents read across the column rather than down a third of it: a
   brand board squeezed into the media column of a split is unreadable. */
.board-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 2vw, 22px);
  margin-top: clamp(18px, 2.4vw, 28px);
}
.board { margin: 0; }
.board .shot {
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(20, 25, 45, 0.12);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.board:hover .shot { transform: translateY(-4px); box-shadow: 0 16px 38px rgba(20, 25, 45, 0.18); }
@media (max-width: 680px) { .board-row { grid-template-columns: 1fr; } }

/* A stack of portrait photographs fills the media column twice as tall as a
   landscape one and towers over the paragraph beside it, so it is capped and
   centred instead. */
.split-media .slides.is-portrait {
  max-width: 235px;
  margin-left: auto; margin-right: auto;
}
/* a wide collage on its own, held back from the full column */
.board-wide { max-width: 520px; margin-top: clamp(18px, 2.4vw, 26px); }