/* Page layout for livsnall.com. Components come from components.css, values from tokens.css.
   Mobile-first: base styles are for phones, min-width queries add space as the screen grows. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--gallery-ground); color: var(--warm-black);
  font: 400 17px/28px var(--font-sans); -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--warm-black); outline-offset: 2px; box-shadow: 0 0 0 2px var(--highlight-green); }

.skip-link { position: absolute; left: 16px; top: -48px; z-index: 10; }
.skip-link:focus { top: 16px; }

/* ---------- layout ---------- */
.container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .container { padding: 0 32px; } }
@media (min-width: 1200px) { .container { padding: 0 48px; } }
.section { padding-top: 64px; padding-bottom: 64px; }
@media (min-width: 992px) { .section { padding-top: 96px; padding-bottom: 96px; } }

/* ---------- fluid type (README › Responsive) ---------- */
.t-display { margin: 0; font-family: var(--font-display); font-weight: 500; font-feature-settings: "kern", "calt";
  font-size: clamp(92px, 55.38px + 9.765vw, 196px); line-height: clamp(96px, 65.01px + 8.263vw, 184px); /* Line display: +30% then +20% → 92 / 196 */ letter-spacing: 0; }
.t-h1 { margin: 0; font-weight: 500; font-size: clamp(46px, 35.08px + 2.911vw, 77px); line-height: clamp(48px, 36.73px + 3.005vw, 80px); letter-spacing: -0.031em; }
.t-h2 { margin: 0; font-weight: 500; font-size: clamp(36px, 27.55px + 2.254vw, 60px); line-height: clamp(40px, 31.55px + 2.254vw, 64px); letter-spacing: -0.027em; }
.t-h3 { margin: 0; font-weight: 500; font-size: clamp(28px, 21.66px + 1.690vw, 46px); line-height: clamp(32px, 26.37px + 1.502vw, 48px); letter-spacing: -0.022em; }
.t-h4 { margin: 0; font: 500 22px/24px var(--font-sans); letter-spacing: -0.2px; }
.t-lead { margin: 0; font: 400 22px/32px var(--font-sans); }
.t-small { font: 400 13px/16px var(--font-sans); }
.t-eyebrow { margin: 0; font: 500 13px/16px var(--font-sans); letter-spacing: .8px; text-transform: uppercase; }

/* ---------- header: mark left, links right, on the ground ---------- */
.site-header { padding-top: 24px; }
.site-nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.site-nav__home { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-left: -6px; border-radius: var(--radius-control); }
.site-nav__home img { width: 32px; height: 32px; }
.site-nav__links { display: flex; gap: 8px; margin: 0 -8px 0 0; padding: 0; list-style: none; }
.site-nav__link { display: inline-block; padding: 14px 8px; font: 500 13px/16px var(--font-sans); letter-spacing: .8px; text-transform: uppercase;
  color: var(--warm-black); text-decoration: none; }
.site-nav__link:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-nav__link[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* ---------- hero: straight on the ground ---------- */
.hero { display: flex; flex-direction: column; gap: 24px; padding-top: clamp(64px, 40px + 8vw, 160px); padding-bottom: clamp(64px, 40px + 8vw, 160px); }
.hero__lead { max-width: 20em; color: var(--warm-black); }
.hero__squiggle { align-self: flex-start; margin-top: clamp(24px, 12px + 4vw, 80px); padding: 4px 8px; margin-left: -8px;
  color: var(--warm-black); text-decoration: none; border-radius: var(--radius-control);
  /* 〰 isn't in Instrument Sans or Line, so it falls back to a system font. U+FE0E asks for the plain-text glyph, not the emoji. */
  font: 400 46px/1 "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans CJK JP", "Segoe UI Symbol", sans-serif; }
.hero__squiggle:hover span { display: inline-block; transform: translateY(3px); transition: transform 200ms ease; }

/* ---------- work ---------- */
.section-head { display: flex; flex-direction: column; gap: 16px; margin-bottom: 32px; }
@media (min-width: 768px) { .section-head { flex-direction: row; align-items: flex-end; justify-content: space-between; margin-bottom: 48px; } }
.section-head .t-eyebrow { color: var(--deep-grey); }
.section-head { margin-bottom: 24px; }
.work-grid { display: grid; gap: 24px; grid-template-columns: 1fr; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .work-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; } }

/* project card additions: a logo on white, and a summary line */
.pf-card__media--logo { aspect-ratio: 16 / 10; background: var(--white); display: grid; place-items: center; border-bottom: var(--outline-default) solid var(--warm-black); }
.pf-card__media--logo img { width: auto; height: auto; max-width: 52%; max-height: 34%; object-fit: contain; }
.pf-card:hover .pf-card__media--logo img, .pf-card.is-hover .pf-card__media--logo img { transform: none; }
.logo-placeholder { font: 500 13px/16px var(--font-sans); letter-spacing: .8px; text-transform: uppercase; color: var(--deep-grey);
  padding: 8px 12px; border: 1px dashed var(--soft-plum); border-radius: 4px; }
.pf-card__summary { margin: 4px 0 0; font: 400 13px/16px var(--font-sans); color: var(--deep-grey); }
.pf-card { height: 100%; }
.pf-card__body { flex: 1; }

/* ---------- footer: on the ground, set off by a rule ---------- */
.site-footer { margin-top: 32px; }
.footer__inner { display: grid; gap: 24px; padding-top: 64px; padding-bottom: 32px; border-top: var(--outline-default) solid var(--warm-black); }
@media (min-width: 992px) { .footer__inner { padding-top: 96px; } }
.site-footer .t-eyebrow { color: var(--deep-grey); }
.footer__mail { font-weight: 500; font-size: 28px; line-height: 32px; letter-spacing: -0.6px; color: var(--warm-black);
  text-decoration: none; overflow-wrap: anywhere; justify-self: start; }
.footer__mail:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.footer__bottom { display: flex; flex-wrap: wrap; gap: 16px 24px; justify-content: space-between; align-items: center; padding-top: 48px; color: var(--deep-grey); }
.footer__links { display: flex; gap: 24px; }

/* =====================================================================
   Case study template
   ===================================================================== */
.cs-back { margin-top: 48px; }
/* Back links: the arrow nudges left on hover, the way it points */
.cs-back:hover svg, .talk__back:hover svg { transform: translateX(-3px); }
.cs-intro { display: grid; gap: 24px; padding-top: 32px; padding-bottom: 64px; }
.cs-intro .t-lead { max-width: 24em; color: var(--deep-grey); }
.cs-meta { display: grid; gap: 24px; margin: 16px 0 0; }
@media (min-width: 768px) { .cs-meta { grid-template-columns: 2fr 1fr; max-width: 720px; } }
.cs-meta dt { font: 500 13px/16px var(--font-sans); letter-spacing: .8px; text-transform: uppercase; color: var(--deep-grey); margin-bottom: 8px; }
.cs-meta dd { margin: 0; font: 400 13px/24px var(--font-sans); }
.cs-meta ul { margin: 0; padding: 0; list-style: none; }

/* two-column chapter: sticky label left, content right */
.cs-chapter { display: grid; gap: 32px; padding-top: 64px; padding-bottom: 64px; border-top: var(--outline-default) solid var(--warm-black); }
@media (min-width: 992px) {
  .cs-chapter { grid-template-columns: minmax(200px, 1fr) minmax(0, 2fr); gap: 48px; padding-top: 96px; padding-bottom: 96px; }
  .cs-chapter__label { position: sticky; top: 32px; align-self: start; }
}
.cs-chapter__label { display: grid; gap: 24px; }
.cs-toc { display: none; margin: 0; padding: 0; list-style: none; }
@media (min-width: 992px) { .cs-toc { display: grid; gap: 4px; } }
.cs-toc a { display: grid; grid-template-columns: 28px 1fr; gap: 4px; padding: 4px 0; font: 400 13px/16px var(--font-sans); color: var(--deep-grey); text-decoration: none; }
.cs-toc a:hover { color: var(--warm-black); text-decoration: underline; text-underline-offset: 3px; }
.cs-toc a.is-active { color: var(--warm-black); font-weight: 500; }
.cs-toc span { font-weight: 500; }
.cs-chapter__body { display: grid; gap: 64px; min-width: 0; }

/* prose */
.cs-block { display: grid; gap: 16px; max-width: 42em; scroll-margin-top: 32px; }
.cs-block p { margin: 0; }
.cs-block h3 { margin: 0; font: 500 13px/16px var(--font-sans); letter-spacing: .8px; text-transform: uppercase; color: var(--deep-grey); }
.cs-step__num { font: 500 13px/16px var(--font-sans); letter-spacing: .8px; color: var(--deep-grey); }
.cs-block .cs-step__title { margin: 0; text-transform: none; color: var(--warm-black); font: 500 28px/32px var(--font-sans); letter-spacing: -0.6px; }
@media (min-width: 768px) { .cs-block .cs-step__title { font-size: 36px; line-height: 40px; letter-spacing: -1px; } }
.cs-quote { margin: 8px 0; font: 500 22px/32px var(--font-sans); color: var(--deep-grey); }
@media (min-width: 768px) { .cs-quote { letter-spacing: -0.2px; } } /* quotes match card titles: 22px Medium */
.cs-quote small { display: block; font: 500 13px/16px var(--font-sans); letter-spacing: .8px; text-transform: uppercase; color: var(--deep-grey); margin-bottom: 8px; }

/* impact stat */
.cs-stat { display: grid; gap: 8px; padding-top: 24px; border-top: var(--outline-default) solid var(--warm-black); }
.cs-stat__value { font: 500 clamp(60px, 36.41px + 6.291vw, 127px)/1 var(--font-sans); letter-spacing: -0.03em; margin: 0; }
.cs-stat__label { font: 400 13px/16px var(--font-sans); color: var(--deep-grey); }

/* chains: "A → B → C" rendered as tags */
.cs-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 16px; list-style: none; background: var(--white); border-radius: var(--radius-control); }
.cs-flow li { display: contents; }
.cs-flow li + li::before { content: "→"; color: var(--deep-grey); font: 400 13px/16px var(--font-sans); }
.cs-flow .pf-tag { cursor: default; }
.cs-flow .pf-tag:hover { transform: none; box-shadow: none; }

/* stepped timeline (05) */
.cs-steps { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: s; }
@media (min-width: 768px) { .cs-steps { grid-template-columns: repeat(5, 1fr); } }
.cs-steps li { counter-increment: s; display: grid; gap: 8px; align-content: start; padding: 16px; background: var(--white); border: var(--outline-default) solid var(--warm-black); border-radius: var(--radius-control);
  font: 500 13px/16px var(--font-sans); }
.cs-steps li::before { content: "0" counter(s); font: 500 10px/16px var(--font-sans); letter-spacing: .8px; color: var(--deep-grey); }
.cs-steps li:last-child { background: var(--highlight-green); }

/* principles grid (03) */
.cs-principles { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 600px) { .cs-principles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .cs-principles { grid-template-columns: repeat(4, 1fr); } }
.cs-principles li { display: grid; gap: 12px; align-content: start; padding: 16px; background: var(--white); border: var(--outline-default) solid var(--warm-black); border-radius: var(--radius-control); }
.cs-principles .pf-tag { justify-self: start; background: var(--warm-black); color: var(--white); cursor: default; }
.cs-principles .pf-tag:hover { transform: none; box-shadow: none; }
.cs-principles strong { font: 500 17px/24px var(--font-sans); }
.cs-principles span { font: 400 13px/16px var(--font-sans); color: var(--deep-grey); }

/* feature: text + image, side by side from 768px */
.cs-feature { display: grid; gap: 24px; align-items: center; scroll-margin-top: 32px; }
@media (min-width: 768px) { .cs-feature { grid-template-columns: 1fr 1fr; gap: 32px; } .cs-feature--flip .cs-figure { order: -1; } }
.cs-feature .cs-block h3 { font: 500 22px/24px var(--font-sans); letter-spacing: -0.2px; text-transform: none; color: var(--warm-black); }

/* figures & image placeholders */
.cs-figure { margin: 0; display: grid; gap: 8px; min-width: 0; }
.cs-figure img { width: 100%; height: auto; border-radius: var(--radius-control); background: var(--mist-plum); }
.cs-figure figcaption { font: 500 10px/16px var(--font-sans); letter-spacing: .8px; text-transform: uppercase; color: var(--deep-grey); }
.cs-figure--bleed { margin-top: 0; }
.cs-figure--bleed figcaption { padding: 0 16px; }
@media (min-width: 768px) { .cs-figure--bleed figcaption { padding: 0 32px; } }
@media (min-width: 1200px) { .cs-figure--bleed figcaption { padding: 0 max(48px, calc((100vw - 1280px) / 2 + 48px)); } }
.cs-figure--bleed img, .cs-figure--bleed .img-slot { border-radius: 0; }
.img-slot { display: grid; place-items: center; gap: 4px; padding: 24px; aspect-ratio: var(--ratio, 4 / 3); background: var(--mist-plum); border-radius: var(--radius-control);
  text-align: center; color: var(--deep-grey); font: 400 13px/16px var(--font-sans); }
.img-slot code { font: 500 10px/16px var(--font-sans); letter-spacing: .8px; text-transform: uppercase; color: var(--warm-black); }

/* end-of-case navigation */
.cs-next { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; padding-top: 32px; padding-bottom: 64px; border-top: var(--outline-default) solid var(--warm-black); }
.cs-next__link { display: grid; gap: 4px; text-decoration: none; text-align: right; margin-left: auto; }
.cs-next__link span { font: 500 13px/16px var(--font-sans); letter-spacing: .8px; text-transform: uppercase; color: var(--deep-grey); }
.cs-next__link strong { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; font: 500 28px/32px var(--font-sans); letter-spacing: -0.6px; }
.cs-next__link svg { width: 28px; height: 28px; transition: transform var(--pf-ease); }
.cs-next__link:hover strong { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.cs-next__link:hover svg { transform: translateX(4px); }

/* hero photo */
.cs-figure--bleed img { display: block; width: 100%; height: auto; max-height: 85vh; object-fit: cover; }

/* carousel: native horizontal scroll with snap; buttons step one slide */
.cs-carousel { display: grid; gap: 16px; min-width: 0; }
.cs-carousel__track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 16px; margin: 0; padding: 0; list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: none; border-radius: var(--radius-control); }
.cs-carousel__track::-webkit-scrollbar { display: none; }
.cs-carousel__slide { scroll-snap-align: start; min-width: 0; }
.cs-carousel img { border: var(--outline-default) solid var(--warm-black); }
.cs-zoom { display: block; border-radius: var(--radius-control); cursor: zoom-in; }
.cs-carousel__controls { display: flex; align-items: center; gap: 8px; }
.cs-carousel__count { font-weight: 500; margin-right: auto; }
.cs-carousel__hint { color: var(--deep-grey); margin-right: 8px; }
@media (max-width: 599px) { .cs-carousel__hint { display: none; } }
@media (prefers-reduced-motion: reduce) { .cs-carousel__track { scroll-behavior: auto; } }

/* Project pages sit on white (plum reads cleaner there); home and About keep the grey ground.
   Anything that was white-on-grey flips to grey-on-white so it still reads as a surface. */
body.page-project { background: var(--white); }
.page-project .cs-flow { background: var(--gallery-ground); }
.page-project .cs-principles li, .page-project .cs-steps li:not(:last-child) { background: var(--gallery-ground); }
.page-project .img-slot { background: var(--gallery-ground); }
.cs-figure figcaption a { color: var(--warm-black); }

/* looping screen recordings (converted from GIF) */
.cs-video { position: relative; }
.cs-video video { display: block; width: 100%; height: auto; border-radius: var(--radius-control); background: var(--gallery-ground); border: var(--outline-default) solid var(--gallery-ground); }
.cs-video__toggle { position: absolute; right: 8px; bottom: 8px; height: 32px; padding: 0 12px; font: 500 13px/16px var(--font-sans);
  color: var(--white); background: var(--warm-black); border: 0; border-radius: var(--radius-pill); cursor: pointer; opacity: .85; }
.cs-video__toggle:hover { opacity: 1; }
.cs-feature video { max-height: 640px; width: auto; max-width: 100%; margin-inline: auto; }
.cs-video { width: fit-content; max-width: 100%; justify-self: center; }

/* =====================================================================
   About
   ===================================================================== */
.about-hero { display: grid; gap: 32px; padding-top: clamp(64px, 40px + 8vw, 160px); }
.about-hero__text { display: grid; gap: 16px; align-content: end; }
.about-hero__journey { margin: 8px 0 0; font: 400 22px/32px var(--font-sans); }
.about-hero__journey .arrow { color: var(--deep-grey); margin: 0 4px; }
.about-photo { order: -1; }
.about-photo picture img, .about-photo__slot { width: clamp(208px, 156px + 13vw, 364px); aspect-ratio: 1; border-radius: 50%; object-fit: cover; filter: grayscale(1); }
.about-photo__slot { display: grid; place-items: center; background: var(--mist-plum); color: var(--deep-grey); font: 500 10px/16px var(--font-sans); letter-spacing: .8px; text-transform: uppercase; }
@media (min-width: 768px) {
  .about-hero { grid-template-columns: 1fr auto; align-items: end; }
  .about-photo { order: 0; }
  .about-hero .hero__squiggle { grid-column: 1 / -1; }
}
.about-body { padding-top: 32px; padding-bottom: 96px; }
.about-body__col { display: grid; gap: 48px; max-width: 42em; }
.about-block { display: grid; gap: 16px; }
.about-block p { margin: 0; }
.about-block__title { margin: 0; font: 500 22px/24px var(--font-sans); letter-spacing: -0.2px; }
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tag-list .pf-tag { cursor: default; background: var(--white); }
.tag-list .pf-tag:hover { transform: none; box-shadow: none; }
.about-cta { justify-self: start; }

/* CV: white band, timelines */
.about-cv { background: var(--white); padding: 64px 0; }
@media (min-width: 992px) { .about-cv { padding: 96px 0; } }
.about-cv__grid { display: grid; gap: 48px; }
@media (min-width: 768px) { .about-cv__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .about-cv__grid { grid-template-columns: 1.2fr 1.2fr 1fr; } }
.about-cv__title { margin-bottom: 24px; }
.about-cv .tag-list .pf-tag { background: var(--gallery-ground); }
.about-cv__links { padding-top: 48px; }
.timeline { position: relative; margin: 0; padding: 0 0 0 24px; list-style: none; display: grid; gap: 24px; }
.timeline::before { content: ""; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 1px; background: var(--soft-plum); }
.timeline__item { position: relative; }
.timeline__item::before { content: ""; position: absolute; left: -24px; top: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--white); border: 1px solid var(--warm-black); }
.timeline__item:first-child::before { background: var(--highlight-green); }
.timeline__org { margin: 0 0 4px; font: 500 13px/16px var(--font-sans); letter-spacing: .8px; }
.timeline__role { margin: 0; font: 500 13px/24px var(--font-sans); }
.timeline__date { margin: 0 0 4px; font: 400 13px/16px var(--font-sans); color: var(--deep-grey); }
.footer__links { flex-wrap: wrap; }
.about-photo picture img { height: auto; display: block; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* "Top Designer!" badge — Liv's three SVG layers; only the text ring moves (anticlockwise, like the original GIF) */
.about-photo { position: relative; justify-self: start; width: fit-content; }
.badge { position: absolute; right: -18%; bottom: -12%; width: 60%; aspect-ratio: 315 / 321; pointer-events: none; }
.badge img { position: absolute; max-width: none; }
.badge__ring { inset: 0; width: 100%; height: 100%; animation: badge-spin 25.3s linear infinite; }
.badge__star { left: 50%; top: 50%; width: 76.5%; height: auto; transform: translate(-50%, -50%); }
.badge__label { left: 50%; top: 50%; width: 60%; height: auto; transform: translate(-50%, -50%); }
@keyframes badge-spin { to { transform: rotate(-360deg); } }
@media (prefers-reduced-motion: reduce) { .badge__ring { animation: none; } }
@media (min-width: 768px) { .badge { right: auto; left: -20%; bottom: -10%; } }
@media (max-width: 767px) { .about-photo { margin-bottom: 16px; } }

/* =====================================================================
   Let's talk
   ===================================================================== */
.talk { display: grid; gap: 48px; padding-top: clamp(64px, 40px + 8vw, 160px); padding-bottom: 96px; }
@media (min-width: 992px) { .talk { grid-template-columns: 1fr 1fr; column-gap: 64px; align-items: start; } .talk__back { grid-column: 1 / -1; } }
.talk__intro { display: grid; gap: 24px; }
.talk__mail { justify-self: start; font-weight: 500; font-size: clamp(28px, 21.66px + 1.690vw, 46px); line-height: 1.1; letter-spacing: -0.022em;
  color: var(--warm-black); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; overflow-wrap: anywhere; }
.talk__mail:hover { text-decoration-thickness: 2px; }
.talk__lead { max-width: 22em; color: var(--deep-grey); }
.talk__form { display: grid; gap: 24px; padding: 24px; background: var(--white); border-radius: var(--radius-control); }
@media (min-width: 768px) { .talk__form { padding: 32px; } }
.talk__submit { justify-self: start; }
.talk__status p { margin: 0; font: 400 13px/24px var(--font-sans); }
.talk__ok { padding: 12px 16px; background: var(--highlight-green); color: var(--warm-black); border-radius: var(--radius-control); font-weight: 500 !important; }
.talk__err { color: var(--error-red); }
.talk__err a { color: inherit; }
.talk__back { justify-self: start; }

/* =====================================================================
   Case-study diagrams (Checkout, Member Login, Cross-Sell)
   All built in HTML: real text, readable by screen readers, no sideways scroll.
   ===================================================================== */
.cs-eyebrow { margin: 0; font: 500 13px/16px var(--font-sans); letter-spacing: .8px; text-transform: uppercase; color: var(--deep-grey); }
.cs-block ul.cs-list { margin: 0; padding-left: 24px; }
.cs-diagram { margin: 0; display: grid; gap: 16px; min-width: 0; }
.cs-diagram > figcaption { font: 500 10px/16px var(--font-sans); letter-spacing: .8px; text-transform: uppercase; color: var(--deep-grey); }
.cs-card { padding: 16px; background: var(--gallery-ground); border: var(--outline-default) solid var(--warm-black); border-radius: var(--radius-control); }
@media (min-width: 768px) { .cs-card { padding: 24px; } }

/* Numbered/labelled cards: reuses cs-principles look */
.cs-principles--3 { }
@media (min-width: 1200px) { .cs-principles--3 { grid-template-columns: repeat(3, 1fr); } }
.cs-principles p { margin: 0; font: 400 13px/24px var(--font-sans); color: var(--deep-grey); }
.cs-principles .cs-arrows { margin: 0; padding: 0; list-style: none; font: 400 13px/24px var(--font-sans); color: var(--deep-grey); }

/* Funnel: segmented bars (Member Login 01) */
.cs-funnel { display: grid; gap: 24px; margin: 0; padding: 0; list-style: none; }
.cs-funnel__row { display: grid; gap: 8px; }
.cs-funnel__text { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; font: 400 13px/16px var(--font-sans); color: var(--deep-grey); }
.cs-funnel__text strong { font: 500 22px/24px var(--font-sans); letter-spacing: -0.2px; color: var(--warm-black); margin-right: 4px; }
.cs-funnel__bar { display: flex; height: 24px; border-radius: var(--radius-control); overflow: hidden; background: var(--white); border: var(--outline-default) solid var(--warm-black); }
.cs-funnel__bar span { width: var(--w); background: var(--soft-plum); }
.cs-funnel__bar span + span { background: var(--white); border-left: var(--outline-default) solid var(--warm-black); }
.cs-funnel__row:last-child .cs-funnel__bar span:first-child { background: var(--highlight-green); }
.cs-funnel__result { padding: 16px; border-radius: var(--radius-control); background: var(--highlight-green); color: var(--warm-black); font: 500 17px/24px var(--font-sans); }
.cs-funnel__result small { display: block; margin-bottom: 4px; font: 500 10px/16px var(--font-sans); letter-spacing: .8px; text-transform: uppercase; }

/* KPI cards with a status (Member Login 05, 08) */
.cs-kpis { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 600px) { .cs-kpis { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .cs-kpis { grid-template-columns: repeat(4, 1fr); } }
.cs-kpi { display: grid; gap: 8px; align-content: start; padding: 16px; background: var(--gallery-ground); border-radius: var(--radius-control); }
.cs-kpi__status { justify-self: start; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: var(--radius-pill);
  font: 500 10px/16px var(--font-sans); letter-spacing: .8px; text-transform: uppercase; background: var(--highlight-green); color: var(--warm-black); }
.cs-kpi__status::before { content: "✓"; font-size: 12px; }
.cs-kpi--fail .cs-kpi__status { background: var(--error-red); color: var(--white); }
.cs-kpi--fail .cs-kpi__status::before { content: "✕"; }
.cs-kpi__label { margin: 8px 0 0; font: 500 13px/16px var(--font-sans); }
.cs-kpi__value { margin: 0; font: 500 36px/40px var(--font-sans); letter-spacing: -1px; font-variant-numeric: tabular-nums; }

/* Comparison table (Member Login summary, Cross-Sell outcome) */
.cs-table { width: 100%; border-collapse: collapse; font: 400 13px/24px var(--font-sans); }
@media (min-width: 768px) { .cs-table { font-size: 17px; line-height: 24px; } }
.cs-table caption { text-align: left; padding-bottom: 16px; font: 500 10px/16px var(--font-sans); letter-spacing: .8px; text-transform: uppercase; color: var(--deep-grey); caption-side: bottom; padding: 16px 0 0; }
.cs-table th, .cs-table td { padding: 12px 8px; text-align: left; vertical-align: top; border-bottom: var(--outline-default) solid var(--mist-plum); overflow-wrap: anywhere; }
.cs-table th:first-child, .cs-table td:first-child { padding-left: 0; }
.cs-table thead th { font: 500 10px/16px var(--font-sans); letter-spacing: .8px; text-transform: uppercase; color: var(--deep-grey); border-bottom-color: var(--warm-black); }
@media (min-width: 768px) { .cs-table thead th { font-size: 13px; } }
.cs-table tbody th { font-weight: 500; }
.cs-table .is-win { background: color-mix(in srgb, var(--highlight-green) 35%, var(--white)); }
.cs-table .is-lose { color: var(--error-red); }

/* Versus (Member Login 07) */
.cs-versus { display: grid; gap: 8px; align-items: stretch; margin: 0; padding: 0; list-style: none; }
@media (min-width: 600px) { .cs-versus { grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; } }
.cs-versus__item { display: grid; gap: 4px; padding: 16px; border-radius: var(--radius-control); background: var(--gallery-ground); }
.cs-versus__item strong { font: 500 22px/24px var(--font-sans); letter-spacing: -0.2px; }
.cs-versus__item span { font: 400 13px/16px var(--font-sans); color: var(--deep-grey); }
.cs-versus__item--next { background: var(--highlight-green); }
.cs-versus__item--next span { color: var(--warm-black); }
.cs-versus__vs { justify-self: center; font: 500 13px/16px var(--font-sans); letter-spacing: .8px; text-transform: uppercase; color: var(--deep-grey); }

/* Problem → capability map (Checkout 03) */
.cs-map { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cs-map li { display: grid; gap: 4px; padding: 16px; background: var(--gallery-ground); border-radius: var(--radius-control); }
@media (min-width: 768px) { .cs-map li { grid-template-columns: 1fr 24px 1fr; align-items: center; gap: 16px; } }
.cs-map__from { font: 500 17px/24px var(--font-sans); }
.cs-map__arrow { color: var(--deep-grey); font: 400 17px/24px var(--font-sans); }
@media (max-width: 767px) { .cs-map__arrow { transform: rotate(90deg); width: 24px; text-align: center; } }
.cs-map__to { font: 400 13px/24px var(--font-sans); color: var(--deep-grey); }
@media (min-width: 768px) { .cs-map__to { font-size: 17px; } }

/* North star → capabilities → roadmap (Checkout 05) */
.cs-tiers { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; justify-items: stretch; }
.cs-tier { display: grid; gap: 12px; padding: 16px; border-radius: var(--radius-control); background: var(--gallery-ground); }
@media (min-width: 768px) { .cs-tier { grid-template-columns: 160px 1fr; align-items: center; padding: 24px; } }
.cs-tier + .cs-tier { margin-top: 40px; position: relative; }
.cs-tier + .cs-tier::before { content: "↓"; position: absolute; top: -36px; left: 50%; transform: translateX(-50%); font: 400 22px/32px var(--font-sans); color: var(--deep-grey); }
.cs-tier__label { font: 500 13px/16px var(--font-sans); letter-spacing: .8px; text-transform: uppercase; color: var(--deep-grey); }
.cs-tier__body { font: 500 22px/32px var(--font-sans); letter-spacing: -0.2px; }
@media (min-width: 768px) { .cs-tier__body { font-size: 28px; line-height: 32px; letter-spacing: -0.4px; } }
.cs-tier--star { background: var(--highlight-green); }
.cs-tier--star .cs-tier__label { color: var(--warm-black); }
.cs-tier .tag-list .pf-tag { background: var(--white); }
.cs-tier .cs-flow { background: transparent; padding: 0; }
.cs-tier .cs-flow .pf-tag { background: var(--white); }

/* Outcome checklist (Checkout 06) */
.cs-checks { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 600px) { .cs-checks { grid-template-columns: repeat(2, 1fr); } }
.cs-checks li { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--gallery-ground); border-radius: var(--radius-control); font: 500 17px/24px var(--font-sans); }
.cs-checks li::before { content: "✓"; flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--highlight-green); color: var(--warm-black); font: 500 13px/1 var(--font-sans); }

/* Small metric pairs (Checkout 06, Cross-Sell features) */
.cs-metrics { display: flex; flex-wrap: wrap; gap: 16px 32px; margin: 0; }
.cs-metrics div { display: grid; gap: 0; }
.cs-metrics dt { order: 2; font: 400 13px/16px var(--font-sans); color: var(--deep-grey); }
.cs-metrics dd { order: 1; margin: 0; font: 500 36px/40px var(--font-sans); letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.cs-metrics dd small { display: block; font: 400 13px/16px var(--font-sans); letter-spacing: 0; color: var(--deep-grey); }

/* Lead-in label for a feature (e.g. "Complete it") */
.cs-kicker { justify-self: start; }
.cs-feature .cs-kicker, .cs-block .cs-kicker { cursor: default; }
.cs-kicker:hover { transform: none; box-shadow: none; }
.cs-principles .cs-arrows li { display: block; padding: 0; background: none; border: 0; border-radius: 0; }
@media (min-width: 1200px) { .cs-principles { grid-template-columns: repeat(4, minmax(0, 1fr)); } .cs-principles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cs-principles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cs-principles .pf-tag { max-width: 100%; }
.cs-feature .cs-block .cs-step__title { font: 500 28px/32px var(--font-sans); letter-spacing: -0.6px; }
@media (min-width: 768px) { .cs-feature .cs-block .cs-step__title { font-size: 36px; line-height: 40px; letter-spacing: -1px; } }
.cs-figure--top img { object-position: top; }
.cs-figure--full img { max-height: none; object-fit: contain; }

/* Journey map: current vs proposed (Checkout 01).
   Phones/tablets: stages run down the page, Current and Proposed side by side.
   Wide screens: stages run across, like the original map. */
.cs-jm { gap: 32px; }
.jm { display: grid; gap: 16px; }
.jm-head h4 { margin: 0; font: 500 22px/24px var(--font-sans); letter-spacing: -0.2px; }
.jm-head p { margin: 4px 0 0; font: 400 13px/24px var(--font-sans); color: var(--deep-grey); }
.jm-grid { display: grid; grid-template-columns: 88px minmax(0,1fr) minmax(0,1fr); gap: 8px; margin: 0; padding: 0; list-style: none; }
.jm-stage { grid-column: 1; grid-row: calc(var(--s) + 1); align-self: start; padding-top: 12px; font: 500 10px/16px var(--font-sans); letter-spacing: .8px; text-transform: uppercase; color: var(--deep-grey); overflow-wrap: anywhere; }
.jm-row { grid-row: 1; grid-column: calc(var(--r) + 1); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.jm-row span { font: 500 17px/24px var(--font-sans); }
.jm-row small { font: 400 13px/16px var(--font-sans); color: var(--deep-grey); }
.jm-row--new small { background: var(--highlight-green); color: var(--warm-black); padding: 0 6px; border-radius: var(--radius-pill); font-weight: 500; }
.jm-cell { grid-row: calc(var(--s) + 1); grid-column: calc(var(--r) + 1); min-width: 0; padding: 12px; border-radius: var(--radius-control); background: var(--gallery-ground); }
.jm-cell[style*="--r:2"] { background: var(--white); border: var(--outline-default) solid var(--warm-black); }
.jm-cell strong { display: block; font: 500 13px/16px var(--font-sans); }
.jm-num { display: block; margin-bottom: 4px; font: 500 22px/24px var(--font-sans); color: var(--deep-grey); }
.jm-num--sub { font-size: 13px; line-height: 16px; margin-bottom: 0; }
.jm-cell ul { margin: 6px 0 0; padding: 0; list-style: none; font: 400 10px/16px var(--font-sans); color: var(--deep-grey); }
.jm-cell ul li::before { content: "→ "; }
.jm-cell li.jm-new { display: inline-block; margin-top: 4px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--highlight-green); color: var(--warm-black); font-weight: 500; }
.jm-cell li.jm-new::before { content: "+ "; }
.jm-sub { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--soft-plum); }
.jm-cell--gone { display: grid; place-items: center; background: transparent !important; border: 1px dashed var(--soft-plum) !important; color: var(--deep-grey); font: 400 17px/24px var(--font-sans); }
@media (min-width: 1200px) {
  .jm-grid { grid-template-columns: 80px repeat(6, minmax(0, 1fr)); }
  .jm-stage { grid-row: 1; grid-column: calc(var(--s) + 1); padding-top: 0; }
  .jm-row { grid-column: 1; grid-row: calc(var(--r) + 1); flex-direction: column; align-items: flex-start; padding-top: 12px; }
  .jm-cell { grid-column: calc(var(--s) + 1); grid-row: calc(var(--r) + 1); }
}

/* Two prototypes side by side (Checkout 02) */
.cs-videos { display: grid; gap: 32px; }
@media (min-width: 768px) { .cs-videos { grid-template-columns: 1fr 1fr; } }
.cs-videos .cs-video video { max-height: 600px; width: auto; max-width: 100%; margin-inline: auto; }
.cs-videos figcaption { text-align: center; }

/* Capability map with close-ups (Checkout 03) */
.cs-map--img li { align-items: center; }
.cs-map__img { display: block; margin-top: 8px; }
.cs-map__img img { width: 100%; max-width: 280px; height: auto; border-radius: var(--radius-control); border: var(--outline-default) solid var(--mist-plum); background: var(--white); }
@media (min-width: 768px) {
  .cs-map--img li { grid-template-columns: 1fr 24px 1fr 200px; }
  .cs-map__img { margin-top: 0; }
}

/* Zoomable figure + lightbox */
.cs-zoom { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 16px; }
.cs-zoom img { display: block; width: 100%; height: auto; border-radius: 16px; background: var(--gallery-ground); }
.cs-zoom__hint { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--radius-pill);
  background: var(--white); color: var(--warm-black); border: var(--outline-default) solid var(--warm-black); font: 500 13px/16px var(--font-sans); }
.cs-zoom:hover .cs-zoom__hint { background: var(--highlight-green); }
.cs-lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--white); color: var(--warm-black); }
.cs-lightbox::backdrop { background: rgba(35, 18, 18, .6); }
.cs-lightbox[open] { display: grid; grid-template-rows: auto 1fr; }
.cs-lightbox__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; border-bottom: var(--outline-default) solid var(--mist-plum); }
.cs-lightbox__hint { margin: 0; font: 400 13px/16px var(--font-sans); color: var(--deep-grey); }
.cs-lightbox__view { overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; display: grid; place-items: center; padding: 16px; }
.cs-lightbox__view img { display: block; width: min(1600px, 100%); height: auto; border-radius: 16px; }
@media (max-width: 991px) { .cs-lightbox__view { place-items: start; } .cs-lightbox__view img { width: 1100px; max-width: none; } }
@media (min-width: 992px) { .cs-lightbox__hint { visibility: hidden; } }
.cs-chapter__body > .cs-video video { max-height: 600px; width: auto; max-width: 100%; }
.cs-lightbox__view { align-content: center; }

/* =====================================================================
   Calmer reading: case-study story text uses three styles only —
   step number, title, body and the plum pull quote. Emphasis comes from space.
   ===================================================================== */
/* 2. Quote lead-ins ("The question shifted again") read as body text, not a label */
.cs-quote small { font: 400 17px/28px var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--warm-black); margin-bottom: 8px; }

/* 3. Bold standalone sentences become body weight, set apart by space */
.cs-block p:has(> strong:only-child) { margin-top: 24px; }
.cs-block p > strong:only-child { font-weight: 400; }
.cs-block > .cs-step__title + p:has(> strong:only-child),
.cs-feature .cs-block > h3 + p:has(> strong:only-child) { margin-top: 0; }

/* Two weights only (Regular 400 + Medium 500): browser "bold" maps to Medium */
strong, b, th, dt { font-weight: 500; }

/* About: four text tiers only — display, 22 (lead regular / heading medium),
   body 17 (warm-black or deep-grey) and the small uppercase label shared with tags. */
.about-intro { font: 400 17px/28px var(--font-sans); }
.about-block__title, .about-cv__title { font: 500 22px/32px var(--font-sans); letter-spacing: -0.2px; }
.timeline { gap: 24px; }
.timeline__org { margin: 0 0 4px; font: 500 10px/16px var(--font-sans); letter-spacing: .8px; text-transform: uppercase; color: var(--warm-black); }
.timeline__role { margin: 0; font: 400 17px/24px var(--font-sans); }
.timeline__date { margin: 0 0 8px; font: 400 17px/24px var(--font-sans); color: var(--deep-grey); }
.timeline__item::before { top: 3px; }

/* Home icon: underline on hover, matching the nav links */
.site-nav__home { position: relative; }
.site-nav__home::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 1px; height: 1px; background: var(--warm-black); opacity: 0; }
.site-nav__home:hover::after { opacity: 1; }

/* Case-study heroes: held to the content width (sharper, calmer on wide screens) */
.cs-figure--bleed { width: 100%; max-width: 1280px; margin-left: auto; margin-right: auto; padding: 0 16px; }
@media (min-width: 768px) { .cs-figure--bleed { padding: 0 32px; } }
@media (min-width: 1200px) { .cs-figure--bleed { padding: 0 48px; } }
.cs-figure--bleed img, .cs-figure--bleed .img-slot { border-radius: var(--radius-control); }
.cs-figure--bleed figcaption { padding: 0 !important; }

/* Home tiles: client logo + project name in Autaut, centred on white */
.pf-card__media--logo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4%; }
.pf-card__media--logo img { width: auto; height: auto; max-width: 62%; max-height: 24%; object-fit: contain; }
.tile-adidas img { max-height: 40%; max-width: 34%; }
.tile-dunelm img { max-height: 30%; max-width: 40%; }
.tile-name { font: 400 clamp(17px, 2.4vw, 36px)/1.2 var(--font-sans); letter-spacing: -0.01em; color: var(--deep-grey); }
.work-card__meta { margin: 8px 0 0; font: 500 10px/16px var(--font-sans); letter-spacing: .8px; text-transform: uppercase; color: var(--deep-grey); }
.work-card__meta span { margin: 0 4px; }

/* 404: "usability test" */
.nf { display: grid; gap: 48px; padding-top: clamp(64px, 40px + 8vw, 160px); padding-bottom: 96px; align-items: start; }
@media (min-width: 992px) { .nf { grid-template-columns: 1.2fr 1fr; column-gap: 64px; } }
.nf-text { display: grid; gap: 24px; }
.nf-eyebrow { color: var(--deep-grey); }
.nf .t-lead { max-width: 24em; }
.nf-cta { justify-self: start; }
.nf-card { padding: 24px; background: var(--white); border-radius: var(--radius-control); }
@media (min-width: 992px) { .nf-card { margin-top: 48px; } }
.nf-card .t-eyebrow { color: var(--deep-grey); margin-bottom: 16px; }
.nf-rows { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.nf-rows li { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 16px; font: 400 17px/24px var(--font-sans); }
.nf-bar { height: 16px; border: 1px solid var(--warm-black); border-radius: var(--radius-pill); }
.nf-fail { color: var(--error-red); }
.nf-rec { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--mist-plum); font: 500 17px/28px var(--font-sans); }
.nf-ok { display: inline-block; margin-left: 4px; padding: 0 8px; border-radius: var(--radius-pill); background: var(--highlight-green); font: 500 10px/20px var(--font-sans); letter-spacing: .8px; text-transform: uppercase; vertical-align: middle; }

/* Case-study intro: subheader sits close to its title */
.cs-intro .t-h1 + .t-lead { margin-top: -16px; }

/* Numbered sections: double the space above each one (64px gap + 64px) */
.cs-chapter__body > [id^="s0"]:not(:first-child) { margin-top: 64px; }
@media (max-width: 767px) { .cs-chapter__body > [id^="s0"]:not(:first-child) { margin-top: 48px; } }

/* Checkout outcome: give the checklist room above and below */
.cs-block .cs-checks { margin: 24px 0; }

/* Bigger badge (+20%): on tablets, tuck it in so it never touches the subtitle */
@media (min-width: 768px) and (max-width: 991px) { .badge { left: -8%; bottom: -14%; } }

/* About: pin the heading to the top so "Hi I’m Liv" sits on the same line as the Home and Let’s talk headings */
@media (min-width: 768px) { .about-hero { align-items: start; } .about-hero__text { align-self: start; align-content: start; } }