:root {
  --paper: #fcfaf5;
  --ink: #242620;
  --muted: #676860;
  --accent: #fe2b67;
  --pink: #fa6f96;
  --sun: #fdb014;
  --pink-soft: #fa6f9622;
  --pink-line: #fa6f9680;
  --line: #deded5;
  --radius: 24px;
  --shadow: inset 0 1px 0 #ffffff, 0 2px 4px #332b2608, 0 12px 20px -14px #66554e35, 0 24px 54px -28px #66554e45;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --header-space: 104px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
body { margin: 0; overflow-x: clip; background: var(--paper); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
button, summary { cursor: pointer; }
button { border: 0; }
img { display: block; max-width: 100%; height: auto; }
::selection { background: #fdb01466; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
[hidden] { display: none !important; }
.skip-link { position: fixed; top: -80px; left: 20px; padding: 14px 20px; background: var(--ink); color: white; z-index: 10; }
.skip-link:focus { top: 12px; }
.header, main, footer { width: min(1200px, calc(100% - 112px)); margin-inline: auto; }
.header { min-height: 88px; padding: 12px 24px; margin-top: 16px; position: sticky; top: 16px; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 24px; border: 1px solid #ffffff; border-radius: var(--radius); background: linear-gradient(135deg, #fffef9e6, #fcf8f0cc); backdrop-filter: blur(24px) saturate(1.2); box-shadow: var(--shadow); }
.wordmark { font-size: 27px; font-weight: 650; letter-spacing: -1.2px; min-height: 44px; display: inline-flex; align-items: center; }
.brand-dot { color: var(--accent); }
.brand-flower { width: .62em; height: auto; margin-left: .12em; align-self: center; margin-top: .1em; }
nav { display: flex; gap: 28px; }
.nav-link { font-size: 14px; padding: 15px 18px; min-width: 44px; min-height: 44px; display: grid; place-items: center; text-align: center; position: relative; color: var(--muted); border-radius: 999px; transition: background .25s, color .25s, box-shadow .3s, transform .3s var(--ease); }
.nav-link::after { content: ""; position: absolute; bottom: 6px; left: 24%; right: 24%; height: 2px; border-radius: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.nav-link:is(:hover, :focus-visible) { color: var(--ink); background: var(--pink-soft); box-shadow: inset 0 1px 0 #ffffffb3, 0 4px 10px -8px #fe2b6744; }
.nav-link.active { color: var(--ink); }
.nav-link:is(:hover, :focus-visible) { transform: translateY(-2px); }
.nav-link:active { transform: translateY(1px) scale(.97); }
.nav-link:is(:hover, :focus-visible)::after, .nav-link.active::after { transform: scaleX(1); }
.resume-note { font-size: 13px; color: var(--muted); }
.resume-note span { display: block; font-size: 11px; margin-top: 4px; color: var(--muted); }
section, #intro { scroll-margin-top: 130px; }
.hero { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 36px; min-height: calc(100svh - var(--header-space)); }
.eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 1.8px; font-weight: 600; color: var(--muted); margin: 0 0 25px; line-height: 1.6; }
.hero .eyebrow { display: flex; align-items: center; justify-content: center; gap: 10px; letter-spacing: 1.2px; }
.ms-logo { flex-shrink: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
h1 { font-size: clamp(20px, 2.2vw, 30px); font-weight: 450; letter-spacing: -.8px; line-height: 1.35; margin: 0; text-wrap: balance; }
h1 em { font-family: Georgia, "Times New Roman", serif; font-weight: 400; color: var(--accent); letter-spacing: -.5px; white-space: nowrap; }
.hero-copy h1, .hero-copy h1 em { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 400; }
.hero-copy { order: 1; position: relative; z-index: 4; max-width: 760px; }
.social-button { --surface-light: #ffffffcc; position: relative; width: 56px; height: 56px; display: grid; place-items: center; color: var(--ink); border: 1px solid #ffffff; border-radius: 50%; background: linear-gradient(145deg, #ffffff, #f6eeea); box-shadow: var(--shadow); transition: transform .35s var(--ease), color .25s, box-shadow .3s, background .25s; }
.social-button svg { position: relative; }
.social-button:is(:hover, :focus-visible) { color: var(--accent); background: linear-gradient(145deg, #ffffff, color-mix(in srgb, var(--pink) 22%, white)); transform: translateY(-4px); box-shadow: inset 0 1px 0 #ffffff, 0 4px 8px #332b2612, 0 18px 28px -12px #fe2b6755; }
.social-button:active { transform: translateY(0) scale(.94); }
.hero-stage { order: 2; display: flex; justify-content: center; width: 100%; margin-top: auto; padding-top: 24px; }
.hero-visual { position: relative; z-index: 1; margin: 0; min-width: 0; width: min(100%, 640px, max(280px, calc((100svh - 346px) * 1.07))); }
.hero-scene { position: relative; }
.callout { position: absolute; z-index: 5; display: grid; place-items: center; width: 148px; height: 91px; padding: 0 22px 3px; background: url("assets/bubble.png") center / 100% 100% no-repeat; color: #1d1c1a; font: 500 22px/1.05 -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; letter-spacing: -.3px; text-align: center; text-wrap: balance; pointer-events: none; user-select: none; opacity: 0; transform: translateY(8px) scale(.88); transition: opacity .3s ease, transform .45s var(--ease); }
.callout.show { opacity: 1; transform: none; }
.callout[data-pos="left"] { left: -4%; top: 6%; rotate: -4deg; }
.callout[data-pos="right"] { right: -2%; top: 0; rotate: 3deg; }
.hero-scene img { pointer-events: none; user-select: none; }
.hero-portrait { display: grid; width: 100%; translate: -9% 0; transform-origin: 50% 80%; transition: transform .6s var(--ease); }
.portrait-frame { grid-area: 1 / 1; width: 100%; height: auto; opacity: 0; will-change: opacity; backface-visibility: hidden; animation-duration: 10s; animation-timing-function: step-end; animation-iteration-count: infinite; }
.frame-rest { opacity: 1; animation-name: hold-rest; }
.frame-grin { animation-name: hold-grin; }
.frame-wow { animation-name: hold-wow; }
.frame-shades { animation-name: hold-shades; }
.frame-shades-wow { animation-name: hold-shades-wow; }
.hero-visual:hover .hero-portrait { transform: translateY(-3px); }
.hero-bottom { order: 3; position: relative; z-index: 4; width: 100%; display: flex; justify-content: flex-end; gap: 20px; color: var(--muted); font-size: 11px; text-align: left; padding: 0 0 14px; border-top: 1px solid var(--line); }
.hero-bottom a { display: flex; align-items: center; gap: 20px; min-height: 40px; }
.hero-bottom a span { transition: transform .3s var(--ease); }
.hero-bottom a:is(:hover, :focus-visible) span { transform: translateY(3px); }
.hero-bottom a:active, footer a:active { opacity: .7; }
.section { position: relative; isolation: isolate; padding-block: 64px; border-bottom: 1px solid var(--line); }
.section-doodle { position: absolute; z-index: -1; width: 30px; pointer-events: none; user-select: none; opacity: .5; animation: doodle-drift 26s ease-in-out infinite; }
.section-star { right: -20px; top: 35%; animation-delay: -7s; }
.section-flower { left: -20px; bottom: 15%; animation-delay: -16s; animation-duration: 30s; }
.demos .section-star { top: 16%; }
.section.projects { padding-top: 36px; }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 42px; }
h2 { font-size: clamp(30px, calc(3.6vw - 2px), 44px); font-weight: 500; letter-spacing: -1.7px; line-height: 1.12; margin: 0; }
.section-heading > p { font-size: 14px; line-height: 1.75; color: var(--muted); max-width: 280px; margin: 0 0 3px; }
.work-toolbar { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin-bottom: 28px; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; }
.filter { background: transparent; border: 1px solid transparent; padding: 12px 17px; min-height: 44px; border-radius: 30px; font-size: 12px; color: var(--muted); transition: background .2s, border-color .2s, transform .2s, box-shadow .2s; }
.filter span { margin-left: 7px; font-size: 10px; }
.filter:is(:hover, :focus-visible) { background: #f0ece4; transform: translateY(-2px); box-shadow: 0 6px 12px -8px #66554e55; }
.filter.active { border-color: var(--pink-line); color: var(--ink); background: var(--pink-soft); box-shadow: 0 3px 9px #fa6f9626; }
.filter:active { transform: scale(.96); }
.result-count { color: var(--muted); font-size: 11px; }
.project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.project-card { position: relative; isolation: isolate; min-width: 0; display: flex; flex-direction: column; padding: 10px 10px 12px; border: 1px solid #eeeae1; background: linear-gradient(145deg, #fffefaed, #fff8f4e6); border-radius: 32px; box-shadow: var(--shadow); transition: transform .45s var(--ease), box-shadow .4s, border-color .3s; animation: card-arrive .4s var(--ease) both; }
.project-art { flex: 1; min-height: 150px; position: relative; border-radius: var(--radius); display: grid; place-items: center; overflow: hidden; }
.sand { background: #efe7d8; }
.blush { background: #f0e3e2; }
.sage { background: #e5e9df; }
.lilac { background: #e8e5ec; }
.stone { background: #e9e6df; }
.project-number { position: absolute; top: 20px; left: 22px; color: #65655f; font-size: 11px; }
.art-symbol { font-size: 62px; color: #77776b; transition: transform .35s; font-weight: 300; }
.asset-note { position: absolute; bottom: 22px; font-size: 11px; color: #61615b; }
.project-card:is(:hover, :focus-within) .art-symbol { transform: translateY(-5px) rotate(-4deg) scale(1.06); }
.project-card:is(:hover, :focus-within) { --lift: -7px; border-color: var(--pink-line); box-shadow: inset 0 1px 0 #ffffff, 0 6px 12px #332b2610, 0 28px 55px -24px #66554e55; }
.project-card:active { --lift: -2px; }
.project-caption { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 14px; }
.project-caption .badge { order: -1; }
h3 { font-size: 13px; font-weight: 500; letter-spacing: 0; margin: 0; padding: 6px 12px; border-radius: 20px; background: var(--ink); color: var(--paper); transition: background .25s; }
.project-card:is(:hover, :focus-within) h3 { background: var(--accent); }
.badge { font-size: 11px; border: 1px solid #b9b9af; border-radius: 20px; padding: 5px 10px; flex-shrink: 0; transition: background .25s, border-color .25s; }
.project-card:is(:hover, :focus-within) .badge { background: var(--pink-soft); border-color: var(--pink-line); }
.project-meta { margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.project-card .project-caption, .project-card .project-meta { margin-inline: 8px; }
.demo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.demo-card { aspect-ratio: 1.2; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; background: #f6f3ec; color: var(--muted); }
.demo-index { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; }
.demo-line { width: 28px; height: 1px; background: #a7a598; align-self: center; }
.demo-card p { font-size: 11px; margin: 0; }
.journey { display: grid; grid-template-columns: 1fr 1fr; gap: 8%; }
.sketch-stamp { display: inline-grid; place-items: center; width: 60px; height: 60px; margin-bottom: 26px; border: 1px solid #ffffff; border-radius: 22px; background: linear-gradient(145deg, #ffffff, color-mix(in srgb, var(--pink) 16%, white)); box-shadow: var(--shadow); transform: rotate(-9deg); }
.sketch-stamp img { width: 30px; opacity: .7; transition: transform .6s var(--ease); }
.journey-intro:hover .sketch-stamp img { transform: rotate(25deg) scale(1.08); }
.journey-note { max-width: 290px; font: italic 18px/1.6 Georgia, "Times New Roman", serif; color: var(--muted); margin: 24px 0 0; }
details { border-top: 1px solid var(--line); }
details:last-of-type { border-bottom: 1px solid var(--line); }
summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; list-style: none; padding: 23px 10px; font-size: 15px; min-height: 44px; border-radius: 16px; transition: background .25s; }
summary:is(:hover, :focus-visible) { background: var(--pink-soft); }
summary::-webkit-details-marker { display: none; }
summary span { color: var(--accent); font-size: 22px; transition: transform .2s; }
details[open] summary span { transform: rotate(45deg); }
details p { font-size: 14px; line-height: 1.8; color: var(--muted); margin: 0 0 24px; max-width: 430px; }
.profile-note { font-size: 12px; color: var(--muted); line-height: 1.6; margin: 24px 0 0; }
footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 20px; align-items: center; padding-block: 30px; font-size: 12px; }
.footer-note { color: var(--muted); }
footer a { padding-block: 12px; min-height: 44px; display: flex; align-items: center; gap: 22px; }
footer a span { transition: transform .2s; }
footer a:is(:hover, :focus-visible) span { transform: translateY(-3px); }
.hero-actions { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 26px; }
.hero-atmosphere { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.spark { --dx: 5px; --dy: 8px; --rot: 3deg; --dur: 11s; --delay: 0s; width: 28px; opacity: .6; animation: spark-float var(--dur) ease-in-out var(--delay) infinite; }
.spark-1 { left: 25%; top: 40%; width: 42px; opacity: .95; --dx: 6px; --dy: 9px; --dur: 12s; --delay: -2s; }
.spark-2 { right: 22%; top: 33%; width: 46px; opacity: .95; --dx: -6px; --dy: 8px; --rot: 4deg; --dur: 14s; --delay: -7s; }
.spark-3 { left: 8%; top: 30%; width: 28px; opacity: .8; --dx: 4px; --dy: 7px; --dur: 10s; --delay: -5s; }
.spark-4 { right: 8%; top: 64%; width: 26px; opacity: .8; --dx: -5px; --dy: 7px; --dur: 13s; --delay: -9s; }
.spark-5 { left: 13%; top: 17%; width: 24px; opacity: .7; --dx: 4px; --dy: 6px; --dur: 9s; --delay: -1s; }
.spark-6 { left: 31%; top: 62%; width: 26px; opacity: .85; --dx: 5px; --dy: 8px; --rot: 3deg; --dur: 11s; --delay: -6s; }
.spark-7 { right: 31%; top: 68%; width: 28px; opacity: .85; --dx: -5px; --dy: 8px; --rot: 3deg; --dur: 12s; --delay: -10s; }
.spark-8 { left: 12%; top: 58%; width: 34px; opacity: .9; --dx: 6px; --dy: 9px; --dur: 15s; --delay: -4s; }
.spark-9 { right: 13%; top: 50%; width: 32px; opacity: .9; --dx: -6px; --dy: 8px; --dur: 13s; --delay: -8s; }
.spark-10 { right: 5%; top: 6%; width: 30px; opacity: .85; --dx: -4px; --dy: 7px; --dur: 10s; --delay: -3s; }
.spark-11 { left: 20%; top: 48%; width: 38px; opacity: .85; --dx: 5px; --dy: 9px; --dur: 14s; --delay: -11s; }
.spark-12 { right: 6%; top: 40%; width: 38px; opacity: .85; --dx: -5px; --dy: 8px; --dur: 12s; --delay: -5s; }
.hero-layer { position: absolute; z-index: 2; object-fit: contain; }
.light-surface { isolation: isolate; }
.tilt-surface { transform: perspective(900px) translateY(var(--lift, 0px)) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); }
.tilt-surface::after, .light-surface::after { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(circle at var(--light-x, 50%) var(--light-y, 30%), var(--surface-light, #ffffff80), transparent 60%); opacity: 0; transition: opacity .4s; }
.tilt-surface:is(:hover, :focus-within)::after, .light-surface:is(:hover, :focus-within)::after { opacity: 1; }
.project-art > img { width: 100%; height: 100%; object-fit: cover; }
html:has(body.motion-paused) { scroll-behavior: auto; }
.motion-paused .hero-layer, .motion-paused .section-doodle { animation-play-state: paused; }
.motion-paused .portrait-frame { animation: none; }
.motion-paused .project-card { animation: none; }
.motion-paused *, .motion-paused *::before, .motion-paused *::after { transition: none !important; }
.motion-paused :is(.tilt-surface, .nav-link, .social-button, .filter, .art-symbol, .hero-portrait, .social-button svg, .hero-bottom a span, footer a span, .sketch-stamp img, .project-arrow) { transform: none !important; }
.motion-paused .tilt-surface::after, .motion-paused .light-surface::after { opacity: 0; }
@keyframes card-arrive {
  from { opacity: 0; translate: 0 10px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes spark-float {
  0%, 100% { translate: 0 0; rotate: calc(var(--rot) * -1); }
  25% { translate: var(--dx) calc(var(--dy) * -.6); }
  50% { translate: calc(var(--dx) * .3) calc(var(--dy) * -1); rotate: var(--rot); }
  75% { translate: calc(var(--dx) * -.8) calc(var(--dy) * -.3); }
}
@keyframes hold-rest { 0% { opacity: 1; } 25% { opacity: 0; } 31% { opacity: 1; } 37% { opacity: 0; } 44% { opacity: 1; } 56% { opacity: 0; } 88% { opacity: 1; } 100% { opacity: 1; } }
@keyframes hold-grin { 0% { opacity: 0; } 25% { opacity: 1; } 31% { opacity: 0; } }
@keyframes hold-wow { 0% { opacity: 0; } 37% { opacity: 1; } 44% { opacity: 0; } }
@keyframes hold-shades { 0% { opacity: 0; } 56% { opacity: 1; } 72% { opacity: 0; } 80% { opacity: 1; } 88% { opacity: 0; } }
@keyframes hold-shades-wow { 0% { opacity: 0; } 72% { opacity: 1; } 80% { opacity: 0; } }
@keyframes doodle-drift {
  0%, 100% { translate: 0 0; rotate: -4deg; }
  50% { translate: 5px -14px; rotate: 7deg; }
}
@media (hover: none), (pointer: coarse) {
  .tilt-surface { transform: none; }
  .tilt-surface::after, .light-surface::after { display: none; }
  .project-card:is(:hover, :focus-within) { transform: none; }
  .hero-visual:hover .hero-portrait { transform: none; }
  .nav-link:hover, .social-button:hover, .journey-intro:hover .sketch-stamp img { transform: none; }
}
@media (max-width: 900px) {
  .header, main, footer { width: calc(100% - 64px); }
  .hero { padding-top: 28px; }
  .hero .eyebrow { font-size: 9px; letter-spacing: .6px; }
  .section { padding-block: 48px; }
  .demo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .demo-card { aspect-ratio: 1.7; }
}
@media (max-width: 600px) {
  .header, main, footer { width: calc(100% - 40px); }
  .header { min-height: 74px; gap: 12px; padding: 10px 12px; top: 10px; border-radius: 20px; }
  :root { --header-space: 90px; }
  .wordmark { font-size: 20px; }
  nav { gap: 6px; }
  .nav-link { font-size: 12px; padding: 12px 5px; }
  section, #intro { scroll-margin-top: 110px; }
  .resume-note { display: none; }
  .hero { padding-top: 22px; }
  .hero .eyebrow { font-size: 10px; }
  h1 { font-size: clamp(20px, 5.6vw, 24px); letter-spacing: -.5px; line-height: 1.35; }
  h1 em { letter-spacing: -.3px; }
  .hero-actions { margin-top: 22px; }
  .social-button { width: 52px; height: 52px; }
  .hero-visual { width: min(88%, 420px, max(280px, calc((100svh - 380px) * 1.07))); }
  .callout { width: 118px; height: 73px; padding: 0 16px 2px; font-size: 19px; }
    .spark-3, .spark-5, .spark-12 { display: none; }
  .spark { width: 22px; }
  .spark-1 { left: 4%; top: 36%; width: 30px; }
  .spark-2 { right: 4%; top: 32%; width: 32px; }
  .spark-4 { right: 6%; top: 66%; }
  .spark-6 { left: 24%; top: 64%; }
  .spark-7 { right: 22%; top: 70%; }
  .spark-8 { left: 5%; top: 58%; width: 26px; }
  .spark-9 { right: 6%; top: 50%; width: 26px; }
  .spark-10 { right: 4%; top: 3%; width: 22px; }
  .spark-11 { left: 3%; top: 46%; width: 28px; }
  .hero-bottom { padding: 18px 0 24px; font-size: 10px; align-items: center; }
  .hero-bottom > span { max-width: 165px; line-height: 1.6; }
  .section-heading { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 28px; }
  h2 { font-size: 34px; }
  .section-heading > p { max-width: 340px; }
  .section-star { right: -8px; width: 23px; }
  .section-flower { left: -8px; width: 24px; }
  .work-toolbar { align-items: flex-start; flex-direction: column; gap: 6px; }
  .filter { padding-inline: 14px; }
  .result-count { margin: 4px 0 0; }
  .project-caption { padding-top: 16px; }
  .demo-grid { gap: 12px; }
  .demo-card { padding: 15px; aspect-ratio: 1.15; }
  .journey { grid-template-columns: 1fr; gap: 30px; }
  footer { align-items: flex-start; font-size: 11px; }
  footer > span { line-height: 1.7; padding-top: 10px; }
  .footer-note { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .tilt-surface, .nav-link, .social-button, .filter, .art-symbol, .hero-portrait, .social-button svg, .hero-bottom a span, footer a span, .sketch-stamp img, .project-arrow { transform: none !important; }
  .tilt-surface::after, .light-surface::after { display: none; }
}

.project-card { cursor: pointer; }
.project-link::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
.project-card:has(.project-link:focus-visible) { outline: 2px solid var(--accent); outline-offset: 5px; }
.project-link:focus-visible { outline: none; }
.project-art::before { content: ""; position: absolute; inset: 0; background: var(--thumb, none) center / contain no-repeat; opacity: 0; transition: opacity .3s, transform .6s var(--ease); }
.project-art.has-thumb::before { opacity: 1; }
.project-art.has-thumb .art-symbol, .project-art.has-thumb .asset-note { display: none; }
.project-card:is(:hover, :focus-within) .project-art.has-thumb::before { transform: scale(1.03); }
.project-number { z-index: 1; }
.project-arrow { position: absolute; z-index: 1; top: 12px; right: 12px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #ffffffcc; border: 1px solid #ffffff; font-size: 15px; box-shadow: 0 4px 10px -6px #66554e66; transition: transform .35s var(--ease), background .25s, color .25s; }
.project-card:is(:hover, :focus-within) .project-arrow { transform: translate(2px, -2px); background: var(--accent); color: #fff; }
.art-symbol { position: relative; z-index: 1; }
.asset-note { z-index: 1; }
.motion-paused .project-arrow, .motion-paused .project-art::before { transform: none !important; transition: none !important; }

/* Level 2 project pages */
.case-header { margin-bottom: 8px; }
.case-back { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 16px 8px 12px; border: 1px solid var(--pink-line); border-radius: 22px; background: #ffffffb3; font-size: 13px; transition: background .25s, transform .3s var(--ease); }
.case-back:is(:hover, :focus-visible) { background: var(--pink-soft); transform: translateX(-3px); }
.case-hero { padding: 56px 0 40px; }
.case-hero h1 { font-size: clamp(34px, 5vw, 60px); letter-spacing: -2px; line-height: 1.08; margin: 18px 0 14px; text-wrap: balance; }
.case-hero .project-meta { margin: 0; font-size: 14px; }
.case-thumb { aspect-ratio: 16 / 7; min-height: 220px; border-radius: 32px; }
.case-body { display: grid; grid-template-columns: 1fr 1fr; gap: 8%; padding: 56px 0 90px; border-bottom: 1px solid var(--line); }
.case-body h2 { font-size: clamp(26px, 3vw, 36px); }
.case-body p { font-size: 15px; line-height: 1.8; color: var(--muted); margin: 0; max-width: 460px; }
.case-nav { display: flex; justify-content: space-between; gap: 16px; padding: 28px 0 8px; font-size: 14px; }
.case-nav a { min-height: 44px; display: inline-flex; align-items: center; gap: 10px; transition: color .25s; }
.case-nav a:is(:hover, :focus-visible) { color: var(--accent); }
@media (max-width: 600px) { .case-body { grid-template-columns: 1fr; gap: 24px; padding-block: 40px 64px; } .case-hero { padding-top: 36px; } .case-thumb { aspect-ratio: 4 / 3; } }




/* ===== Bento tiles (match the reference proportions) ===== */
.project-grid { gap: 20px; padding: 20px; background: #fff9f2; border: 1px solid #f1e6da; border-radius: 36px; box-shadow: 0 2px 4px #332b2608, 0 24px 50px -30px #66554e55; }
.project-grid[data-layout="bento"] { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "a b c" "d b e"; }
.project-grid[data-layout="bento"] > :nth-child(1) { grid-area: a; }
.project-grid[data-layout="bento"] > :nth-child(2) { grid-area: b; }
.project-grid[data-layout="bento"] > :nth-child(3) { grid-area: c; }
.project-grid[data-layout="bento"] > :nth-child(4) { grid-area: d; }
.project-grid[data-layout="bento"] > :nth-child(5) { grid-area: e; }
.project-card { display: block; padding: 0; border: 0; border-radius: 26px; overflow: hidden; aspect-ratio: 960 / 710; background: transparent; box-shadow: none; }
.project-grid[data-layout="bento"] > :nth-child(2) { aspect-ratio: auto; }
.project-grid:not([data-layout="bento"]) > [data-category="vision"] { aspect-ratio: 960 / 710; }
.project-card:is(:hover, :focus-within) { --lift: -4px; border-color: transparent; box-shadow: 0 18px 36px -18px #66554e66; }
.project-card .project-art { position: absolute; inset: 0; min-height: 0; border-radius: 0; flex: none; aspect-ratio: auto; }
.sand, .lilac, .stone { background: #f6e7d4; }
.blush { background: #f7f5fa; }
.sage { background: #e6e5e1; }
.project-art::before { background-size: cover; background-position: center; }
.project-card .project-number { display: none; }
.project-card .project-arrow { opacity: 0; top: 14px; right: 14px; transition: opacity .25s, transform .35s var(--ease), background .25s, color .25s; }
.project-card:is(:hover, :focus-within) .project-arrow { opacity: 1; }
.project-card .asset-note { left: 20px; right: auto; bottom: 22px; }
.project-card .project-caption { position: absolute; z-index: 4; right: 16px; bottom: 16px; margin: 0; padding: 0; flex-wrap: nowrap; gap: 8px; justify-content: flex-end; }
.project-grid[data-layout="bento"] > :nth-child(2) .project-caption { top: 16px; left: 16px; right: auto; bottom: auto; justify-content: flex-start; }
.project-card h3 { font-size: 14px; padding: 9px 17px; background: #0b0b0b; color: #fff; white-space: nowrap; }
.project-card:is(:hover, :focus-within) h3 { background: var(--accent); }
.project-card .badge { font-size: 14px; padding: 8px 16px; color: #0b0b0b; border: 1.5px solid #0b0b0b; background: #fffdf9; }
.project-card[data-category="live"] .badge { background: #f4dcc0; }
.project-card:is(:hover, :focus-within) .badge { background: inherit; border-color: #0b0b0b; }
.project-card .project-meta { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 900px) {
  .project-grid[data-layout="bento"] { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "b a" "b c" "d e"; }
  .project-card h3, .project-card .badge { font-size: 12.5px; padding: 7px 13px; }
}
@media (max-width: 600px) {
  .project-grid { padding: 12px; gap: 12px; border-radius: 28px; }
  .project-grid, .project-grid[data-layout="bento"] { grid-template-columns: 1fr; grid-template-areas: none; }
  .project-grid[data-layout="bento"] > :nth-child(n) { grid-area: auto; }
  .project-grid[data-layout="bento"] > :nth-child(2) { aspect-ratio: 768 / 1174; }
  .project-card .project-caption { right: 12px; bottom: 12px; }
  .project-grid[data-layout="bento"] > :nth-child(2) .project-caption { top: 12px; left: 12px; }
}
.case-thumb { aspect-ratio: 960 / 710; max-width: 760px; min-height: 0; margin-inline: auto; border-radius: 28px; }
.case-thumb.blush { aspect-ratio: 768 / 1174; max-width: 440px; }
.project-grid[data-layout="bento"] > :nth-child(2) .badge { order: 0; }
.project-grid[data-layout="bento"] > :nth-child(2) .project-art::before { background-size: 100% auto; background-position: center 46px; }
@media (max-width: 900px) { .project-grid[data-layout="bento"] > :nth-child(2) .project-art::before { background-position: center 40px; } }

/* Tile colours and framing from the updated design */
.project-grid { background: #fefaf3; border-color: #f3e9dc; }
.sand { background: #fbe7d3; }
.blush { background: #feb4bd; }
.sage { background: #e4e9de; }
.lilac { background: #e8ebfa; }
.stone { background: #fdecca; }
.project-art.lilac::before { background-size: cover; background-position: center; }
.project-card[data-category="live"] .badge { background: #f6e2c9; }

/* Subtle frosted pills */
.project-card h3, .project-card .badge {
  font-size: 12px; font-weight: 500; letter-spacing: .01em; padding: 6px 12px;
  color: var(--ink); background: rgba(255, 255, 255, .8); border: 1px solid rgba(36, 38, 32, .14);
  box-shadow: 0 1px 2px rgba(36, 38, 32, .06); transition: background .25s, color .25s, border-color .25s;
}
.project-card[data-category="live"] .badge, .project-card:is(:hover, :focus-within) .badge { background: rgba(255, 255, 255, .62); border-color: rgba(36, 38, 32, .14); }
.project-card:is(:hover, :focus-within) h3 { background: var(--accent); color: #fff; border-color: transparent; }
@media (max-width: 900px) { .project-card h3, .project-card .badge { font-size: 11.5px; padding: 5px 11px; } }

/* Hold the loop on the resting frame until all frames are decoded */
.hero-portrait:not(.frames-ready) .portrait-frame { animation-play-state: paused; }

/* Hero ends on the divider line; the work header follows directly, centred like the hero */
.hero-bottom, .hero-bottom:is(*) { padding: 0; min-height: 0; }
.section.projects { padding-top: 56px; }
.projects .section-heading { justify-content: center; text-align: center; margin-bottom: 36px; }
.projects .section-heading .eyebrow { margin-bottom: 18px; }
@media (max-width: 600px) {
  .hero-bottom { padding: 0; }
  .projects .section-heading { flex-direction: column; align-items: center; }
  .section.projects { padding-top: 40px; }
}

/* Section 02 and 03 headers centred like the hero and work header */
/* In motion now sits inside the Selected work section, below the project grid */
.projects .demos { margin-top: 72px; }
.demos .section-heading h3 { font-size: clamp(26px, 3vw, 36px); font-weight: 500; letter-spacing: -1.2px; line-height: 1.12; margin: 0; padding: 0; border-radius: 0; background: none; color: var(--ink); }
@media (max-width: 600px) { .projects .demos { margin-top: 56px; } .demos .section-heading h3 { font-size: 28px; } }
.demos .section-heading { flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 20px; margin-bottom: 36px; }
.demos .section-heading .eyebrow { margin-bottom: 18px; }
.demos .section-heading > p { max-width: none; margin: 0; }
.journey { grid-template-columns: 1fr; justify-items: center; gap: 44px; text-align: center; }
.journey-intro { display: flex; flex-direction: column; align-items: center; }
.journey-note { margin-top: 20px; }
.journey-content { width: 100%; max-width: 620px; text-align: left; }
.profile-note { text-align: center; }

/* ===== Demo rail: sideways scrolling cards ===== */
.demo-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 4px; padding: 6px 4px 26px; margin-inline: -4px; scrollbar-width: none; overscroll-behavior-x: contain; cursor: grab; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 56px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 56px), transparent 100%); }
.demo-track::-webkit-scrollbar { display: none; }
.demo-track.dragging { cursor: grabbing; scroll-snap-type: none; }
.demo-track.dragging .demo-card { pointer-events: none; }
.demo-card { flex: 0 0 min(440px, 78%); scroll-snap-align: start; aspect-ratio: 1.2; width: auto; font: inherit; text-align: left; cursor: pointer; position: relative; box-shadow: var(--shadow); transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s, background .3s; }
.demo-card:is(:hover, :focus-visible) { transform: translateY(-5px); border-color: var(--pink-line); background: #f9efe6; box-shadow: var(--shadow), 0 22px 40px -26px #fe2b6755; }
.demo-card:active { transform: translateY(-1px) scale(.985); }
.demo-foot { width: 100%; display: flex; align-items: center; justify-content: space-between; font-size: 12px; }
.demo-arrow { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fffdf9; color: var(--ink); font-size: 15px; box-shadow: 0 2px 6px #66554e1f; transition: transform .35s var(--ease), background .25s, color .25s; }
.demo-card:is(:hover, :focus-visible) .demo-arrow { background: var(--accent); color: #fff; transform: translate(2px, -2px); }
.demo-card.has-media { background-size: cover; background-position: center; color: #fff; }
.demo-controls { display: flex; justify-content: center; gap: 10px; margin-top: 4px; }
.demo-nav { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: #fffdf9; color: var(--ink); font-size: 18px; display: grid; place-items: center; box-shadow: var(--shadow); transition: transform .3s var(--ease), background .25s, color .25s, opacity .25s; }
.demo-nav:is(:hover, :focus-visible) { background: var(--accent); color: #fff; border-color: transparent; transform: translateY(-2px); }
.demo-nav:active { transform: translateY(1px) scale(.95); }
.demo-nav:disabled { opacity: .35; pointer-events: none; }

/* ===== Preview dialog ===== */
.preview { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; width: min(900px, calc(100vw - 32px)); margin: auto; color: var(--ink); overflow: visible; }
.preview::backdrop { background: #3a342d55; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: preview-fade .3s ease both; }
.preview-panel { background: var(--paper); border-radius: 32px; padding: 28px 30px 32px; box-shadow: 0 2px 4px #33291f10, 0 30px 60px -20px #33291f55; max-height: calc(100svh - 48px); overflow: auto; animation: preview-pop .45s var(--ease) both; }
.preview-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.preview-top .eyebrow { margin: 0; }
.preview-close { width: 52px; height: 52px; border-radius: 50%; border: 0; background: #efe7de; color: var(--ink); font-size: 18px; display: grid; place-items: center; transition: transform .3s var(--ease), background .25s, color .25s; }
.preview-close:is(:hover, :focus-visible) { background: var(--accent); color: #fff; transform: rotate(90deg); }
.preview-close:active { transform: scale(.94); }
.preview-media { border-radius: 24px; overflow: hidden; background: #f6f3ec; aspect-ratio: 16 / 9; display: grid; place-items: center; color: var(--muted); font-size: 13px; }
.preview-media :is(video, img) { width: 100%; height: 100%; object-fit: contain; display: block; background: #0b0b0b0a; }
.preview h3 { font-size: clamp(26px, 4vw, 40px); font-weight: 500; letter-spacing: -.03em; margin: 22px 0 6px; padding: 0; border-radius: 0; background: none; color: var(--ink); }
.preview-desc { color: var(--muted); font-size: 15px; line-height: 1.7; margin: 0; max-width: 560px; }
@keyframes preview-fade { from { opacity: 0; } }
@keyframes preview-pop { from { opacity: 0; transform: translateY(18px) scale(.97); } }
@media (max-width: 600px) { .preview-panel { padding: 20px 18px 24px; border-radius: 26px; } .demo-card { flex-basis: 82%; } }
@media (prefers-reduced-motion: reduce) { .preview::backdrop, .preview-panel { animation: none; } }
.motion-paused .preview::backdrop, .motion-paused .preview-panel { animation: none; }
body:has(dialog[open]) { overflow: hidden; }

/* ===== Demo marquee (replaces the manual rail) ===== */
.demo-rail { container-type: inline-size; }
.demo-marquee { overflow: hidden; margin-inline: -4px; padding: 14px 4px 34px; margin-block: -14px -20px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%); }
.demo-track { --gap: 16px; --cards: 4.5; display: flex; width: max-content; gap: 0; overflow: visible; scroll-snap-type: none; padding: 0; margin: 0; cursor: default; -webkit-mask-image: none; mask-image: none; animation: demo-marquee var(--dur, 60s) linear infinite; will-change: transform; }
.demo-track .demo-card { flex: 0 0 calc((100cqw - var(--gap) * var(--cards)) / var(--cards)); margin-right: var(--gap); aspect-ratio: 1.1; padding: 16px; scroll-snap-align: none; }
.demo-track:is(:hover, :has(:focus-visible)), body:has(dialog[open]) .demo-track { animation-play-state: paused; }
.demo-track .demo-foot { position: relative; min-height: 34px; }
.demo-soon, .demo-title { transition: opacity .3s, transform .4s var(--ease); }
.demo-title { position: absolute; left: 0; bottom: 3px; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--ink); background: rgba(255,255,255,.7); border: 1px solid rgba(36,38,32,.14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transform: translateY(8px); white-space: nowrap; }
.demo-card:is(:hover, :focus-visible) .demo-soon { opacity: 0; transform: translateY(-6px); }
.demo-card:is(:hover, :focus-visible) .demo-title { opacity: 1; transform: none; }
.demo-card .demo-index { font-size: 10px; }
@keyframes demo-marquee { to { transform: translateX(calc(var(--loop, 1000px) * -1)); } }
@container (max-width: 900px) { .demo-track { --cards: 3.2; } }
@container (max-width: 600px) { .demo-track { --cards: 1.7; } }

/* Pause motion / reduced motion: fall back to manual sideways scrolling */
.motion-paused .demo-marquee { overflow-x: auto; scrollbar-width: thin; -webkit-mask-image: none; mask-image: none; }
.motion-paused .demo-track { animation: none; transform: none; }
.motion-paused .demo-track [data-clone] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .demo-marquee { overflow-x: auto; scrollbar-width: thin; -webkit-mask-image: none; mask-image: none; }
  .demo-track { animation: none; transform: none; }
  .demo-track [data-clone] { display: none; }
}

/* ===== Flower cursor and click burst ===== */
html, html *, html *::before, html *::after {
  cursor: url("assets/cursor-flower.png") 16 16, auto !important;
  cursor: image-set(url("assets/cursor-flower.png") 1x, url("assets/cursor-flower@2x.png") 2x, url("assets/cursor-flower@3x.png") 3x) 16 16, auto !important;
}
.click-burst { position: fixed; inset: 0; pointer-events: none; z-index: 2147483647; overflow: hidden; }
.click-burst i { position: absolute; left: 0; top: 0; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); border-radius: 50%; background: var(--c); will-change: transform, opacity; }
.motion-paused .click-burst { display: none; }
@media (prefers-reduced-motion: reduce) { .click-burst { display: none; } }

/* Animated flower cursor (replaces the native cursor once a mouse moves) */
.has-flower-cursor, .has-flower-cursor *, .has-flower-cursor *::before, .has-flower-cursor *::after { cursor: none !important; }
.flower-cursor { position: fixed; left: 0; top: 0; width: 32px; height: 32px; pointer-events: none; z-index: 2147483647; opacity: 0; transition: opacity .2s; will-change: transform; }
.flower-cursor.visible { opacity: 1; }
.flower-cursor img { display: block; width: 100%; height: 100%; transform-origin: 50% 60%; will-change: transform; user-select: none; -webkit-user-drag: none; }

/* Canvas-driven stop-motion portrait (see script.js); the img frames are the fallback */
.portrait-canvas { grid-area: 1 / 1; width: 100%; height: auto; display: block; pointer-events: none; user-select: none; }
.hero-portrait.canvas-on .portrait-frame { display: none; }
.motion-paused .portrait-canvas { display: none; }
.motion-paused .hero-portrait.canvas-on .frame-rest { display: block; animation: none; opacity: 1; }

/* ===== Resume button in the nav ===== */
.header:has(> .resume-button) { display: grid; grid-template-columns: 1fr auto 1fr; }
.header:has(> .resume-button) .wordmark { justify-self: start; }
.resume-button { justify-self: end; display: inline-flex; align-items: center; gap: 9px; min-height: 48px; padding: 0 20px 0 22px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 15px; font-weight: 600; letter-spacing: .01em; box-shadow: inset 0 1px 0 #ffffff55, 0 2px 4px #fe2b6733, 0 12px 22px -10px #fe2b6788; transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .25s; }
.resume-button svg { flex: none; transition: transform .35s var(--ease); }
.resume-button:is(:hover, :focus-visible) { transform: translateY(-3px); background: #f01e5b; box-shadow: inset 0 1px 0 #ffffff66, 0 4px 8px #fe2b6740, 0 18px 28px -10px #fe2b6799; }
.resume-button:is(:hover, :focus-visible) svg { transform: translate(2px, -2px); }
.resume-button:active { transform: translateY(0) scale(.96); }
.resume-button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.motion-paused .resume-button, .motion-paused .resume-button svg { transform: none !important; }
@media (max-width: 900px) { .resume-button { padding: 0 16px 0 18px; font-size: 14px; } }
@media (max-width: 600px) {
  .header:has(> .resume-button) { grid-template-columns: auto 1fr auto; gap: 8px; }
  .header:has(> .resume-button) nav { justify-self: center; }
  .resume-button { min-height: 44px; padding: 0 12px 0 14px; font-size: 13px; gap: 6px; }
  .resume-button svg { width: 14px; height: 14px; }
}
@media (prefers-reduced-motion: reduce) { .resume-button, .resume-button svg { transition: none; transform: none !important; } }

/* ===== Resume preview ===== */
.preview-resume { width: min(1040px, calc(100vw - 32px)); }
.preview-actions { display: flex; align-items: center; gap: 10px; }
.preview-download { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px 0 18px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 600; box-shadow: 0 10px 20px -12px #24262088; transition: transform .35s var(--ease), background .25s, box-shadow .35s var(--ease); }
.preview-download svg { transition: transform .35s var(--ease); }
.preview-download:is(:hover, :focus-visible) { background: var(--accent); transform: translateY(-2px); box-shadow: 0 14px 24px -12px #fe2b6788; }
.preview-download:is(:hover, :focus-visible) svg { transform: translateY(2px); }
.preview-download:active { transform: scale(.96); }
.preview-download:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.resume-stage { --rh: min(72svh, 780px); position: relative; height: var(--rh); border-radius: 22px; overflow: hidden; background: var(--pink-soft, #fbe4e6); transition: height .5s var(--ease); }
.resume-frame { position: absolute; left: 0; top: -6px; display: block; width: 100%; height: calc(100% + 6px); border: 0; opacity: 1; transition: opacity .4s ease; } /* the 6px above the stage hides the PDF viewer's own blue loading line */
.resume-stage.is-loading .resume-frame { opacity: 0; }
.resume-fallback { margin-top: 14px; font-size: 13px; }
.resume-fallback a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.resume-fallback a:is(:hover, :focus-visible) { color: var(--accent); }
/* The browser's PDF viewer does not pass pointer movement to the page, so inside it the flower cursor is hidden and the viewer's own pointer is used */
.resume-frame { cursor: auto !important; }
body.over-pdf-frame .flower-cursor { opacity: 0 !important; }
.motion-paused .preview-download, .motion-paused .preview-download svg { transform: none !important; }
@media (max-width: 600px) { .preview-download { min-height: 44px; padding: 0 14px; } .preview-download span { display: none; } .preview-actions { gap: 8px; } .resume-stage { --rh: 68svh; border-radius: 18px; } }

/* ===== Nav: Work / Beyond product / About / Contact ===== */
.nav-link { padding-inline: 16px; }
.beyond .section-heading, .contact .section-heading { flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 20px; margin-bottom: 36px; }
.beyond .section-heading .eyebrow, .contact .section-heading .eyebrow { margin-bottom: 18px; }
.beyond .section-heading > p, .contact .section-heading > p { max-width: none; margin: 0; }
.beyond-placeholder { display: grid; place-items: center; min-height: 220px; border: 1px dashed #c9c6b8; border-radius: var(--radius); background: #f6f3ec80; color: var(--muted); font-size: 13px; letter-spacing: .02em; }

/* ===== Contact ===== */
.contact-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.contact-link { display: inline-flex; align-items: center; gap: 14px; min-height: 76px; padding: 12px 22px 12px 14px; border: 1px solid #ffffff; border-radius: 999px; background: linear-gradient(145deg, #ffffff, #f6eeea); box-shadow: var(--shadow); color: var(--ink); transition: transform .4s var(--ease), box-shadow .4s var(--ease), background .3s; }
.contact-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #fffdf9; box-shadow: 0 2px 8px #66554e1f; transition: color .25s, background .25s; }
.contact-label { font-size: 17px; font-weight: 500; letter-spacing: -.01em; display: grid; gap: 2px; }
.contact-label small { font-size: 11px; font-weight: 400; color: var(--muted); letter-spacing: .02em; }
.contact-arrow { font-size: 18px; color: var(--muted); transition: transform .35s var(--ease), color .25s; }
a.contact-link:is(:hover, :focus-visible) { transform: translateY(-4px); background: linear-gradient(145deg, #ffffff, color-mix(in srgb, var(--pink) 22%, white)); box-shadow: var(--shadow), 0 20px 34px -18px #fe2b6766; }
a.contact-link:is(:hover, :focus-visible) .contact-icon { color: var(--accent); }
a.contact-link:is(:hover, :focus-visible) .contact-arrow { color: var(--accent); transform: translate(3px, -3px); }
a.contact-link:active { transform: translateY(0) scale(.97); }
a.contact-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.contact-link.is-soon { opacity: .72; box-shadow: none; background: #f6f3ec; border-color: var(--line); }
.motion-paused :is(a.contact-link, .contact-arrow) { transform: none !important; }
@media (prefers-reduced-motion: reduce) { .contact-link, .contact-arrow { transition: none; transform: none !important; } }

@media (max-width: 900px) { .nav-link { font-size: 13px; padding: 15px 11px; } }
@media (max-width: 600px) {
  .header:has(> .resume-button) { grid-template-columns: 1fr auto; grid-template-areas: "brand resume" "nav nav"; row-gap: 4px; padding-bottom: 6px; }
  .header:has(> .resume-button) .wordmark { grid-area: brand; }
  .header:has(> .resume-button) nav { grid-area: nav; justify-self: stretch; display: flex; justify-content: space-between; }
  .header:has(> .resume-button) .resume-button { grid-area: resume; }
  .nav-extra { display: none; }
  .nav-link { font-size: 13px; padding: 10px 12px; }
  :root { --header-space: 140px; }
  .contact-link { width: 100%; }
}

.nav-link { white-space: nowrap; }

/* Whole-tile click target: its own link on the card (the title link still serves keyboard and screen readers) */
.project-link::after { content: none; }
.project-overlay { position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
.project-card .project-caption { pointer-events: none; }

/* ===== Case study (Apple Watch) =====
   Type scale: label 11 / small 13 / body 15 / card title 17 / row title 21 / lead 24 / chapter 44 */
.case-study { --t-label: 11px; --t-sm: 13px; --t-body: 15px; --t-h4: 17px; --t-h3: 21px; --t-lead: 24px; --cs-gap: 16px; }
.case-study main, .case-study footer { width: min(1360px, calc(100% - 64px)); }
.case-study h3, .case-study h4 { margin: 0 0 10px; padding: 0; border-radius: 0; background: none; color: var(--ink); font-weight: 600; letter-spacing: -.015em; line-height: 1.25; }
.case-study h3 { font-size: var(--t-h3); }
.case-study h4 { font-size: var(--t-h4); }
.case-study ul, .case-study ol { margin: 0; padding: 0; }
.case-study li { list-style: none; }
.case-study p { margin: 0 0 10px; font-size: var(--t-body); line-height: 1.65; }
.case-study p:last-child { margin-bottom: 0; }
.cs-muted { color: var(--muted); }
.cs-kicker, .cs-tag { margin: 0 0 8px !important; font-size: var(--t-label) !important; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); line-height: 1.4 !important; }
.cs-badge { display: inline-block; margin-bottom: 12px; padding: 5px 12px; border: 1px solid var(--pink-line); border-radius: 999px; background: var(--pink-soft); font-size: var(--t-sm); font-weight: 600; color: var(--ink); }

/* cover */
.cs-cover { padding: 28px 0 8px; }
.cs-cover-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); align-items: center; margin-top: 28px; }
.cs-cover h1 { font-size: clamp(40px, 5.6vw, 80px); letter-spacing: -.045em; line-height: 1.02; margin: 14px 0 20px; text-wrap: balance; }
.cs-cover h1 em { white-space: normal; }
.cs-cover .cs-lede { margin: 0; max-width: 46ch; font-size: var(--t-h4); line-height: 1.6; color: var(--muted); }
.cs-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0 !important; }
.cs-chips li { padding: 7px 14px; border: 1px solid var(--pink-line); border-radius: 999px; background: #ffffffb3; font-size: var(--t-sm); }
.cs-cover-art { margin: 0; width: 100%; aspect-ratio: 1097 / 768; border-radius: 32px; overflow: hidden; border: 1px solid #fff; background: #fff; box-shadow: var(--shadow), 0 40px 70px -44px #66554e88; }
.cs-cover-art img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* layout and left navigation */
.cs-layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: clamp(28px, 3.5vw, 56px); align-items: start; padding-top: 28px; }
.cs-side { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 14px; padding: 18px 14px 20px; border: 1px solid #fff; border-radius: 28px; background: linear-gradient(145deg, #fffefaf2, #fff8f4e6); box-shadow: var(--shadow); max-height: calc(100svh - 48px); overflow: auto; scrollbar-width: none; }
.cs-side .case-back { align-self: flex-start; min-height: 40px; padding: 6px 14px 6px 10px; }
.cs-side-title { margin: 2px 8px 0 !important; font-size: var(--t-body) !important; font-weight: 600; letter-spacing: -.01em; line-height: 1.3 !important; }
.cs-side ol { display: grid; gap: 2px; }
.cs-side nav a { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 12px; border-radius: 999px; font-size: var(--t-sm); color: var(--muted); transition: background .25s, color .25s, transform .3s var(--ease); }
.cs-side nav a span { font-size: var(--t-label); font-variant-numeric: tabular-nums; letter-spacing: .06em; opacity: .7; }
.cs-side nav a:is(:hover, :focus-visible) { background: var(--pink-soft); color: var(--ink); transform: translateX(3px); }
.cs-side nav a[aria-current="true"] { background: var(--ink); color: #fff; }
.cs-progress { height: 4px; margin: 2px 8px 0; border-radius: 4px; background: var(--line); overflow: hidden; }
.cs-progress i { display: block; height: 100%; width: var(--p, 0%); background: var(--accent); border-radius: 4px; transition: width .2s linear; }

/* chapters and slide rows */
.cs-content { min-width: 0; }
.cs-chapter { padding: 0 0 clamp(36px, 4vw, 56px); scroll-margin-top: 24px; }
.cs-head { margin: 0 0 20px; }
.cs-head .eyebrow { margin-bottom: 10px; }
.cs-head h2 { font-size: clamp(30px, 3.4vw, 44px); letter-spacing: -.035em; line-height: 1.08; margin: 0; text-wrap: balance; }
.cs-row { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px clamp(24px, 3vw, 40px); align-items: start; padding: 24px 0 28px; border-top: 1px solid var(--line); scroll-margin-top: 24px; }
.cs-row-side h3 { margin-bottom: 0; }
.cs-media { margin-top: 14px; }
.cs-media .cs-figure, .cs-avatar-fig { width: min(100%, 150px); }
.cs-avatar-fig { margin: 14px 0 0; border-radius: 24px; overflow: hidden; box-shadow: 0 12px 24px -16px #66554e88; }
.cs-avatar-fig img { display: block; width: 100%; height: auto; }
.cs-row-main { min-width: 0; }
.cs-row-full { grid-column: 1 / -1; min-width: 0; container-type: inline-size; }
.cs-row-main > * + * { margin-top: 12px; }

/* cards: one style, tinted variants */
.cs-card { padding: 22px 24px; border: 1px solid #fff; border-radius: 22px; background: linear-gradient(145deg, #fffefaed, #fff8f4e6); box-shadow: var(--shadow); }
.cs-tint-peach { background: #fbe7d3; } .cs-tint-pink { background: color-mix(in srgb, #feb4bd 42%, #fff); } .cs-tint-sun { background: #fdecca; } .cs-tint-blue { background: #e4e9de; }
.cs-grid3, .cs-grid4, .cs-split { display: grid; gap: var(--cs-gap); align-items: stretch; }
.cs-grid3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.cs-grid4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.cs-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cs-num { display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 12px; border-radius: 50%; background: var(--accent); color: #fff; font-size: var(--t-sm); font-weight: 600; }
.cs-callout { padding: 12px 16px; border-radius: 14px; background: #ffffffb3; font: italic var(--t-body)/1.6 Georgia, "Times New Roman", serif !important; }
.cs-quote-line { font: italic var(--t-body)/1.6 Georgia, "Times New Roman", serif !important; color: var(--muted); }

.cs-list li { position: relative; padding-left: 20px; margin: 0 0 8px; font-size: var(--t-body); line-height: 1.6; }
.cs-list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
ol.cs-list { counter-reset: n; }
ol.cs-list li { counter-increment: n; padding-left: 26px; }
ol.cs-list li::before { content: counter(n); top: .12em; width: auto; height: auto; background: none; color: var(--muted); font-size: var(--t-sm); font-weight: 600; }
.cs-quotes { margin-top: 6px !important; }
.cs-quotes li { padding-left: 0; margin: 0 0 4px; font: italic var(--t-body)/1.6 Georgia, "Times New Roman", serif; color: var(--muted); }
.cs-quotes li::before { display: none; }
.cs-pl li { margin-bottom: 8px; padding: 10px 12px; border-radius: 12px; background: #fff; font-size: var(--t-sm); line-height: 1.55; box-shadow: 0 2px 6px #66554e14; }
.cs-chipwrap { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-chipwrap li, .j-cell li { padding: 6px 12px; border-radius: 10px; background: var(--pink-soft); font-size: var(--t-sm); line-height: 1.4; }
.cs-card .cs-chipwrap li { background: #ffffffb3; }

/* overview, quote, stats */
.cs-intro { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(20px, 3vw, 44px); margin: 0 0 8px; padding: clamp(22px, 2.6vw, 32px); border: 1px solid #fff; border-radius: 26px; background: linear-gradient(145deg, #fffefaed, #fff8f4e6); box-shadow: var(--shadow); }
.cs-intro-lead { font-size: var(--t-lead) !important; line-height: 1.35 !important; letter-spacing: -.02em; font-weight: 500; }
.cs-signal { padding: 12px 16px; border-radius: 14px; background: #fdecca; }
.cs-quote { margin: 0; padding: 22px 26px; border-radius: 22px; background: linear-gradient(145deg, #fffefaed, #fff8f4e6); border: 1px solid #fff; box-shadow: var(--shadow); }
.cs-quote p { font: italic 500 var(--t-lead)/1.45 Georgia, "Times New Roman", serif; letter-spacing: -.01em; }
.cs-quote em { color: var(--accent); }
.cs-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cs-gap); margin-bottom: var(--cs-gap); }
.cs-stat { padding: 16px 20px; border-radius: 22px; background: color-mix(in srgb, #feb4bd 42%, #fff); }
.cs-stat strong { display: block; font-size: 44px; font-weight: 600; letter-spacing: -.04em; line-height: 1; color: var(--accent); }
.cs-stat span { display: block; margin-top: 6px; font-size: var(--t-sm); }

/* notes and JTBD map */
.cs-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--cs-gap); }
.cs-note { padding: 16px 18px; border: 1px solid #fff; border-radius: 18px; background: #fffdf9; box-shadow: var(--shadow); font-size: var(--t-body); line-height: 1.55; }
.cs-note.hmw { background: color-mix(in srgb, #feb4bd 40%, #fff); font-weight: 500; }
.cs-note.blue { background: #e4e9de; }
.cs-map { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--cs-gap); }
.cs-map li { display: grid; grid-template-rows: 1fr auto 1fr; justify-items: center; gap: 6px; text-align: center; }
.cs-job, .cs-feature { width: 100%; padding: 14px 12px; border-radius: 16px; font-size: var(--t-sm); line-height: 1.45; display: grid; place-items: center; }
.cs-job { background: #fffdf9; border: 1px solid #fff; box-shadow: var(--shadow); font-weight: 500; }
.cs-feature { background: #fdecca; }
.cs-arrow { color: var(--accent); font-size: var(--t-h4); line-height: 1; }

/* scenarios and journey map */
.cs-bio { color: var(--muted); }
.j-scroll { overflow-x: auto; padding: 2px 2px 10px; scrollbar-width: thin; }
.j-grid { display: grid; grid-template-columns: 84px repeat(6, minmax(130px, 1fr)); grid-template-rows: auto 104px auto auto; min-width: 880px; }
.j-label { grid-column: 1; padding: 12px 10px 12px 0; border-top: 1px solid var(--line); font-size: var(--t-label); font-weight: 600; letter-spacing: 1.1px; text-transform: uppercase; color: var(--muted); }
.r1 { grid-row: 1; } .r2 { grid-row: 2; } .r3 { grid-row: 3; } .r4 { grid-row: 4; }
.c1 { grid-column: 2; } .c2 { grid-column: 3; } .c3 { grid-column: 4; } .c4 { grid-column: 5; } .c5 { grid-column: 6; } .c6 { grid-column: 7; }
.j-cell { padding: 12px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.j-cell p { margin: 0; font-size: var(--t-sm); line-height: 1.55; }
.j-step { display: block; margin-bottom: 6px; font-size: var(--t-label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.j-cell .pain.hi { display: inline; padding: 2px 6px; border-radius: 6px; background: color-mix(in srgb, var(--sun) 30%, transparent); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.j-cell ul { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.j-emo { grid-column: 2 / 8; grid-row: 2; position: relative; border-top: 1px solid var(--line); background: repeating-linear-gradient(90deg, transparent 0, transparent calc(16.6667% - 1px), var(--line) calc(16.6667% - 1px), var(--line) 16.6667%); }
.emo { position: absolute; inset: 6px 0; }
.emo svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.emo path { fill: none; stroke: var(--pink); stroke-width: 2.5; stroke-linecap: round; }
.emo i { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px #fff; }
.emo-key { position: absolute; left: 10px; font-size: var(--t-sm); color: var(--muted); }
.emo-key.top { top: 8%; } .emo-key.mid { top: 42%; } .emo-key.bot { top: 76%; }

/* images: all competitor screenshots share one small height, all design crops another */
.cs-figure { margin: 0; border: 1px solid #fff; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: var(--shadow); }
.cs-zoom-wrap { position: relative; }
.cs-figure img { display: block; max-width: 100%; }
.cs-cap { padding: 6px 10px 8px; font-size: var(--t-label); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); text-align: center; }
.cs-zoom-btn { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid #24262218; border-radius: 50%; background: #ffffffe6; color: var(--ink); font-size: var(--t-body); box-shadow: 0 6px 16px -8px #24262266; opacity: 0; transform: scale(.9); transition: opacity .25s, transform .35s var(--ease), background .25s, color .25s; }
.cs-figure:is(:hover, :focus-within) .cs-zoom-btn { opacity: 1; transform: none; }
.cs-zoom-btn:is(:hover, :focus-visible) { background: var(--accent); color: #fff; }
@media (hover: none) { .cs-zoom-btn { opacity: 1; transform: none; } }
.cs-apps { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.cs-apps img { width: auto; height: 96px; }
.cs-pair, .cs-imgrow { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--cs-gap); }
.cs-pair img { width: auto; height: 240px; }
.cs-imgrow img { width: auto; height: 300px; }
.cs-row-full .cs-fit { max-width: 720px; }
.cs-row-full .cs-fit img { width: 100%; height: auto; }
.cs-media .cs-portrait img, .cs-media img { width: 100%; height: auto; }

.cs-ia { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; padding: 20px 24px; border: 1px solid #fff; border-radius: 22px; background: #fffdf9; box-shadow: var(--shadow); }
.ia-row { display: flex; align-items: center; margin: 10px 0; }
.ia-node { flex: none; padding: 8px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-size: var(--t-sm); }
.ia-node.hi { background: #fdecca; border-color: transparent; }
.ia-node.muted { visibility: hidden; }
.ia-line { flex: none; width: 22px; height: 2px; background: #c9c6b8; }
.ia-leaf { font-size: var(--t-sm); line-height: 1.5; color: var(--muted); }

/* prototype videos: identical frame size, every one the same height */
.cs-video { --h: min(400px, calc(100cqw / var(--r))); position: relative; height: var(--h); width: calc(var(--h) * var(--r)); max-width: 100%; margin-inline: auto; border-radius: 22px; overflow: hidden; background: var(--vbg, #68628c); box-shadow: var(--shadow); border: 1px solid #fff; }
.cs-video video { position: absolute; display: block; max-width: none; object-fit: fill; }
.video-tag { position: absolute; left: 14px; bottom: 14px; padding: 5px 12px; border-radius: 999px; background: #fffffff0; font-size: var(--t-sm); font-weight: 500; }
.video-toggle { position: absolute; right: 14px; bottom: 14px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #24262ecc; box-shadow: 0 8px 20px -8px #0008; transition: transform .35s var(--ease), background .25s; }
.video-toggle:is(:hover, :focus-visible) { background: var(--accent); transform: scale(1.08); }
.video-toggle:active { transform: scale(.94); }
.icon-play { width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent #fff; margin-left: 3px; }
.video-toggle[aria-pressed="true"] .icon-play { width: 12px; height: 14px; border: 0; margin: 0; background: linear-gradient(90deg, #fff 0 36%, transparent 36% 64%, #fff 64%); }

.cs-guide-note { display: flex; align-items: center; gap: 10px; }
.cs-guide-note .cs-badge { margin: 0; }
.cs-voila-line { font: italic 500 var(--t-lead)/1.4 Georgia, "Times New Roman", serif !important; color: var(--accent); }
.cs-row-voila .cs-fit { max-width: 960px; }
.preview-zoom { width: min(1840px, calc(100vw - 24px)); }
.preview-zoom .preview-panel { padding: 20px 22px 24px; }

.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0ms); }
.js .reveal.in { opacity: 1; transform: none; }
.motion-paused .reveal { transition: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }

@media (max-width: 900px) {
  .case-study main, .case-study footer { width: calc(100% - 40px); }
  .cs-layout { grid-template-columns: 1fr; padding-bottom: 76px; }
  .cs-side { position: fixed; z-index: 8; left: 12px; right: 12px; bottom: 12px; top: auto; flex-direction: row; align-items: center; padding: 6px; border-radius: 999px; max-height: none; background: #fffef9f2; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); overflow-x: auto; }
  .cs-side .case-back, .cs-side-title, .cs-progress { display: none; }
  .cs-side nav { flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .cs-side ol { display: flex; gap: 2px; width: max-content; }
  .cs-side nav a { white-space: nowrap; padding: 0 14px; }
  .cs-side nav a span { display: none; }
  .cs-intro, .cs-ia { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .cs-row { grid-template-columns: 1fr; gap: 14px; }
  .cs-cover-grid { grid-template-columns: 1fr; }
  .cs-media .cs-figure, .cs-avatar-fig { width: 120px; }
  .cs-split, .cs-stats { grid-template-columns: 1fr; }
  .cs-pair img, .cs-imgrow img { height: 200px; }
}
.case-study .eyebrow { font-size: var(--t-label); margin: 0 0 10px; line-height: 1.6; }
.case-study .cs-row-main p.cs-kicker, .case-study .cs-card p.cs-kicker { font-size: var(--t-label) !important; }
.cs-pair img { height: 170px; }
.cs-apps img { height: 88px; }
@media (max-width: 760px) { .cs-pair img { height: 140px; } }
.cs-figure { width: fit-content; max-width: 100%; }
.cs-cap { width: 0; min-width: 100%; box-sizing: border-box; }
.cs-row-full .cs-fit { width: 100%; }
.j-grid { grid-template-columns: 112px repeat(6, minmax(130px, 1fr)); min-width: 920px; }
.j-label { letter-spacing: .8px; }
.case-study .cs-card > * { margin-bottom: 0; }
.case-study .cs-card > * + * { margin-top: 12px; }
.case-study .cs-card > .cs-kicker + * { margin-top: 0; }
.case-study .cs-card > .cs-kicker.cs-k2 + * { margin-top: 2px; }
.cs-media .cs-figure { width: min(100%, 190px); }

/* ===== Apple Watch page: light blue theme (colours from the cover artwork) ===== */
body.case-study {
  --paper: #f1f7fe; --accent: #2f72e0; --pink: #6ba7f5; --sun: #ffca31;
  --line: #d4e3f6; --muted: #566a82; --ink: #1d2733;
  --t-bg1: #e9f3fe; --t-bg2: #f4f9ff; --t-1: #e3effd; --t-2: #d3e5fc; --t-3: #e8f1fc; --t-cover: #e4f0fc; --t-close: #dcebfc; --t-backdrop: #1d3a6a55; --t-shadow: #3a64a6;
  --pink-soft: color-mix(in srgb, var(--accent) 11%, transparent); --pink-line: color-mix(in srgb, var(--accent) 40%, transparent);
  --shadow: inset 0 1px 0 #ffffff, 0 2px 4px color-mix(in srgb, var(--t-shadow) 7%, transparent), 0 12px 20px -14px color-mix(in srgb, var(--t-shadow) 23%, transparent), 0 24px 54px -28px color-mix(in srgb, var(--t-shadow) 30%, transparent);
  --cs-card: linear-gradient(145deg, #ffffff, var(--t-bg2));
  background: linear-gradient(180deg, var(--t-bg1) 0, var(--t-bg2) 520px, var(--paper) 100%);
}
.case-study .cs-card, .case-study .cs-intro, .case-study .cs-quote, .case-study .cs-side, .case-study .cs-ia { background: var(--cs-card); border-color: #fff; }
.case-study .cs-tint-peach { background: var(--t-1); } .case-study .cs-tint-pink { background: var(--t-2); } .case-study .cs-tint-sun { background: #fff0c4; } .case-study .cs-tint-blue { background: var(--t-3); }
.case-study .cs-note { background: #fff; } .case-study .cs-note.hmw { background: var(--t-2); } .case-study .cs-note.blue { background: var(--t-1); }
.case-study .cs-stat { background: var(--t-2); }
.case-study .cs-feature, .case-study .cs-signal, .case-study .ia-node.hi { background: #fff0c4; }
.case-study .cs-chips li, .case-study .case-back { background: #ffffffcc; border-color: var(--pink-line); }
.case-study .cs-cover-art { background: var(--t-cover); }
.case-study .cs-pl li, .case-study .cs-job { background: #fff; }
.case-study .cs-callout { background: #ffffffcc; }
.case-study .j-cell li, .case-study .cs-chipwrap li { background: var(--t-1); }
.case-study .cs-card .cs-chipwrap li { background: #ffffffcc; }
.case-study .emo i { box-shadow: 0 0 0 4px var(--t-bg2); }
.case-study .cs-ia, .case-study .cs-figure { border-color: #fff; }
.case-study .preview::backdrop { background: var(--t-backdrop); }
.case-study .preview-panel { background: var(--t-bg2); }
.case-study .preview-close { background: var(--t-close); }
.case-study .preview-top .eyebrow { max-width: 80%; }

/* tabs */
.cs-tablist { display: flex; gap: 4px; width: max-content; max-width: 100%; margin: 0 0 18px; padding: 5px; border: 1px solid #fff; border-radius: 999px; background: #ffffffd9; box-shadow: var(--shadow); overflow-x: auto; scrollbar-width: none; }
.cs-tablist::-webkit-scrollbar { display: none; }
.cs-tablist button { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; font: inherit; font-size: var(--t-sm); color: var(--muted); transition: background .25s, color .25s, transform .3s var(--ease); }
.cs-tablist button small { font-size: var(--t-label); opacity: .7; }
.cs-tablist button:is(:hover, :focus-visible) { background: var(--pink-soft); color: var(--ink); }
.cs-tablist button:active { transform: scale(.96); }
.cs-tablist button[aria-selected="true"] { background: var(--accent); color: #fff; box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--accent) 60%, transparent); }
.cs-tablist button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tab-av { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.cs-tabpanel[hidden] { display: none; }
.cs-tabpanel { animation: tab-in .45s var(--ease) both; }
.cs-tabpanel > .cs-row { border-top: 0; padding-top: 6px; }
@keyframes tab-in { from { opacity: 0; transform: translateY(10px); } }
.cs-chapter { padding-bottom: clamp(28px, 3vw, 44px); }
.cs-chapter + .cs-chapter { border-top: 1px solid var(--line); padding-top: clamp(28px, 3vw, 40px); }
.cs-intro { margin-bottom: 20px; position: relative; }

/* interactions */
.case-study .cs-card, .case-study .cs-note, .case-study .cs-figure, .case-study .cs-job, .case-study .cs-quote, .case-study .cs-video { transition: transform .45s var(--ease), box-shadow .45s var(--ease), background .3s; }
.case-study .cs-figure img { transition: transform .6s var(--ease); }
.case-study .cs-figure:hover img { transform: scale(1.03); }
.case-study .cs-figure { overflow: hidden; }
.case-study .cs-cover-art { transition: transform .7s var(--ease); }
.case-study .cs-cover-art:hover { transform: translateY(-5px) rotate(-.4deg); }
.case-study .cs-chipwrap li, .case-study .cs-chips li { transition: transform .3s var(--ease), background .25s; }
.case-study .video-toggle:is(:hover, :focus-visible) { background: var(--accent); }
.motion-paused .cs-card, .motion-paused .cs-tabpanel { transition: none; animation: none; }
@media (prefers-reduced-motion: reduce) {
  .case-study .cs-card:hover, .case-study .cs-note:hover, .case-study .cs-figure:hover img, .case-study .cs-cover-art:hover { transform: none; }
  .cs-tabpanel { animation: none; }
}

/* Cover artwork sits directly on the page: no card, border or shadow, edges fade out */
.case-study .cs-cover-art { background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; transform: none; -webkit-mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 62%, transparent 100%); }
.case-study .cs-cover-art:hover { transform: none; }
.case-study .cs-cover-art img { object-fit: contain; }
.case-study .cs-cover-art { -webkit-mask-image: radial-gradient(ellipse 68% 66% at 50% 50%, #000 52%, transparent 100%); mask-image: radial-gradient(ellipse 68% 66% at 50% 50%, #000 52%, transparent 100%); }

/* ===== Apple Watch page: cover star, wide rows, stages, guide, launch ===== */
.cs-cover-visual { position: relative; }
.cs-cover-star { position: absolute; z-index: 1; left: 91%; top: -3.2%; width: 4.8%; aspect-ratio: 1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-52 -52 104 104'%3E%3Cpath d='M0-46C6-26 26-6 46 0 26 6 6 26 0 46-6 26-26 6-46 0-26-6-6-26 0-46Z' fill='%2373acf2' stroke='%2373acf2' stroke-width='8' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; pointer-events: none; }

/* explorations: heading, info and video all span the full width and line up left and right */
.cs-wrow { display: grid; gap: 14px; min-width: 0; padding: 4px 0 8px; }
.cs-whead h3 { margin: 0; }
.cs-wmain, .cs-wfull { min-width: 0; }
.cs-wfull { container-type: inline-size; }
.cs-info { padding: 18px 22px; border: 1px solid var(--line); border-radius: 20px; background: #fff; }
.cs-info > p { margin: 0; }
.cs-info .cs-chipwrap { margin-top: 12px; }
.cs-info2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; font-size: var(--t-body); line-height: 1.65; }
.cs-video { --h: min(400px, calc(100cqw / var(--r))); width: 100%; max-width: none; height: var(--h); margin: 0; }
.cs-vstage { position: absolute; top: 0; bottom: 0; left: 50%; width: calc(var(--h) * var(--r)); transform: translateX(-50%); }
.cs-video video { position: absolute; }

/* text beside media */
.cs-msplit { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(20px, 3vw, 40px); align-items: center; }
.cs-mtext > * + * { margin-top: 12px; }
.cs-mtext .cs-card > * + * { margin-top: 10px; }
.cs-stage { display: flex; align-items: center; justify-content: center; gap: 22px; padding: 22px; border-radius: 24px; background: #494b4f; }
.cs-sfig { margin: 0; }
.cs-sfig img { display: block; width: auto; height: 320px; max-width: 100%; }
.cs-lfig { margin: 0; border-radius: 22px; overflow: hidden; background: #fff; line-height: 0; }
.cs-lfig img { display: block; width: 100%; height: auto; }
.cs-lfig-tall { width: fit-content; max-width: 100%; margin-inline: auto; }
.cs-lfig-tall img { width: auto; height: 420px; max-width: 100%; }
.cs-lfig-wide { max-width: 1000px; }
.cs-voila-line { margin: 0; }

/* discussion guide */
.cs-guide-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 4px; }
.cs-guide-lead { margin: 0; max-width: 72ch; color: var(--muted); }
.cs-time { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: 1px solid var(--pink-line); border-radius: 999px; background: #ffffffcc; font-size: var(--t-sm); font-weight: 600; color: var(--accent); }
.cs-qgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cs-gap); align-items: start; }
.cs-qcard { padding: 22px 22px 18px; border: 1px solid #fff; border-radius: 22px; background: var(--cs-card); box-shadow: var(--shadow); }
.cs-qcard header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.cs-qcard header h4 { margin: 0; }
.cs-qcard header .cs-kicker { margin: 0 0 2px !important; }
.cs-letter { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: #fff; font-size: var(--t-body); font-weight: 600; }
.cs-sublabel { margin: 0 0 8px !important; font-size: var(--t-label) !important; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--accent); }
.cs-qcard .cs-sublabel:not(:first-of-type) { margin-top: 16px !important; padding-top: 14px; border-top: 1px dashed var(--line); }

/* solutions: image inside the voice card */
.cs-inline { display: block; width: 100%; max-width: 300px; height: auto; margin-top: 14px; border-radius: 14px; box-shadow: none; }

@media (max-width: 1000px) { .cs-qgrid { grid-template-columns: 1fr; } .cs-msplit { grid-template-columns: 1fr; } .cs-info2 { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .cs-sfig img { height: 220px; } .cs-guide-head { flex-direction: column; gap: 10px; } .cs-lfig-tall img { height: 320px; } }
.cs-sfig img { height: 360px; }
.cs-stage { padding: 26px 22px; gap: 26px; }
@media (max-width: 760px) { .cs-sfig img { height: 220px; } }
.cs-qgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.cs-qcol { display: grid; gap: var(--cs-gap); min-width: 0; }
.cs-guide-lead { color: var(--ink); }
@media (max-width: 1000px) { .cs-qgrid { grid-template-columns: 1fr; } }

/* Persona illustrations are cut-outs: no box, clipping or shadow, so the star can overhang the corner */
.case-study .cs-avatar-fig { width: min(100%, 150px); margin: 14px 0 0; border-radius: 0; overflow: visible; box-shadow: none; background: none; border: 0; }
.case-study .cs-avatar-fig img { display: block; width: 100%; height: auto; }
.case-study .tab-av { width: 28px; height: 26px; border-radius: 0; object-fit: contain; }

.case-study .ia-row { flex-wrap: nowrap; }
.case-study .cs-ia { grid-template-columns: auto 1fr; }
.case-study .ia-col:last-child .ia-row { white-space: nowrap; }
.preview-zoom.preview-small { width: min(640px, calc(100vw - 32px)); }
.preview-zoom.preview-small .preview-panel { padding: 16px 18px 20px; }
.preview-zoom.preview-small .zoom-body img { max-height: 56svh; width: auto; max-width: 100%; margin-inline: auto; }
@media (max-width: 700px) {
  .case-study .ia-row { flex-wrap: wrap; }
  .case-study .ia-col:last-child .ia-row { white-space: normal; }
}

/* Stickers: small, quiet, decorative */
.sticker { position: absolute; z-index: 1; width: var(--s, 44px); height: auto; pointer-events: none; user-select: none; opacity: .92; rotate: var(--r, 0deg); animation: sticker-bob 9s ease-in-out infinite; animation-delay: var(--d, 0s); filter: drop-shadow(0 4px 8px rgba(60, 40, 20, .12)); }
@keyframes sticker-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
.motion-paused .sticker { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .sticker { animation: none !important; } }
@media (max-width: 1000px) { .sticker { --s: 32px; } }
@media (max-width: 700px) { .sticker { display: none; } }

/* Stickers on the case study */
.cs-chapter { position: relative; }
.cs-chapter > .sticker { top: 10px; right: 0; --s: 40px; }
.cs-chapter:nth-of-type(even) > .sticker { --r: 9deg; }
.cs-chapter:nth-of-type(odd) > .sticker { --r: -9deg; }
.stone { background: linear-gradient(160deg, #eaf3ff 0%, #d9e9ff 100%); }
.project-art.stone::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 46%, rgba(47, 114, 224, .12), transparent 62%); pointer-events: none; }

.cs-row-fill { align-items: stretch; }
.cs-row-fill .cs-row-side { display: flex; flex-direction: column; }
.cs-row-fill .cs-media { margin-top: auto; padding-top: 24px; }
.cs-row-fill .cs-media .side-watch { width: 140px; max-width: 100%; height: auto; filter: drop-shadow(0 10px 16px color-mix(in srgb, var(--accent) 18%, transparent)); animation: sticker-bob 9s ease-in-out infinite; pointer-events: none; }
.motion-paused .side-watch { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .side-watch { animation: none !important; } }
@media (max-width: 900px) { .cs-row-fill .cs-media { display: none; } }
.cs-mmedia { display: flex; justify-content: center; min-width: 0; }
.cs-mmedia .cs-lfig { margin-inline: 0; }
#launch .cs-msplit { align-items: start; }
#launch .cs-mtext > :first-child { margin-top: 0; }

/* Case study colour themes: same layout, a different palette per project */
body.case-study.theme-violet { --paper: #f6f2fe; --accent: #6d4fd8; --pink: #9d86ec; --line: #ddd5f3; --muted: #5f5a7a; --ink: #231f33; --t-bg1: #efe9fd; --t-bg2: #f8f5ff; --t-1: #ece6fc; --t-2: #ddd2fa; --t-3: #e9e2fb; --t-cover: #e8e1fb; --t-close: #e3dbfa; --t-backdrop: #2a1d5a55; --t-shadow: #5a44a6; }
body.case-study.theme-rose { --paper: #fef3f6; --accent: #dc3f78; --pink: #f08aa9; --line: #f4d3dc; --muted: #7a5560; --ink: #33202a; --t-bg1: #fde8ee; --t-bg2: #fff5f8; --t-1: #fde5eb; --t-2: #fbd2dc; --t-3: #fce9ee; --t-cover: #fde4ea; --t-close: #fbdbe3; --t-backdrop: #5a1d3355; --t-shadow: #a63a5d; }
body.case-study.theme-sage { --paper: #f0f7f2; --accent: #3a8a5c; --pink: #7ab997; --line: #cfe3d6; --muted: #52695b; --ink: #1f2b24; --t-bg1: #e4f1e9; --t-bg2: #f3f9f5; --t-1: #e0efe6; --t-2: #cbe3d6; --t-3: #e3f1e9; --t-cover: #dcebe2; --t-close: #d3e6db; --t-backdrop: #1d4a3055; --t-shadow: #3a7a56; }
body.case-study.theme-amber { --paper: #fef5ea; --accent: #d1691a; --pink: #eea468; --line: #f1dcc2; --muted: #7a6552; --ink: #33281d; --t-bg1: #fdecd8; --t-bg2: #fff7ee; --t-1: #fce8d2; --t-2: #f9d9b8; --t-3: #fbe9d6; --t-cover: #fbe6d0; --t-close: #f8dec2; --t-backdrop: #5a3a1d55; --t-shadow: #a6693a; }

/* Placeholder content on case studies still in progress */
.cs-soon { display: grid; gap: 10px; padding: 26px 28px; border: 1.5px dashed var(--pink-line); border-radius: 22px; background: color-mix(in srgb, var(--accent) 5%, #fff); color: var(--muted); font-size: 15px; line-height: 1.6; }
.cs-soon strong { color: var(--ink); font-weight: 600; }
.cs-soon-badge { width: fit-content; padding: 5px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--pink-line); color: var(--accent); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }
.case-study .cs-cover-art.cs-cover-card { aspect-ratio: auto; display: grid; place-items: center; min-height: 360px; padding: clamp(18px, 3vw, 32px); border-radius: 32px; background: var(--t-cover); border: 1px solid #fff; box-shadow: var(--shadow); overflow: hidden; -webkit-mask-image: none; mask-image: none; }
.case-study .cs-cover-art.cs-cover-card img { width: 100%; max-height: 420px; object-fit: contain; }
.case-study .cs-cover-art.cs-cover-card.is-tall img { width: auto; max-height: 460px; }
.case-study .cs-cover-art.cs-cover-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 44%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 66%); pointer-events: none; }
.case-study .cs-cover-art.cs-cover-card { position: relative; }
.case-study .cs-cover-art.cs-cover-card img { position: relative; }
.cs-stage.cs-stage-soft { background: var(--t-cover); border: 1px solid #fff; box-shadow: var(--shadow); }
.cs-stage.cs-stage-soft .cs-sfig img { height: auto; max-height: 380px; }
.case-study .cs-cover-art.cs-cover-card.is-tall { align-items: end; padding-bottom: 0; padding-top: 28px; }
.case-study .cs-cover-art.cs-cover-card.is-tall img { border-radius: 24px 24px 0 0; }
.case-study .cs-appmark { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.case-study .cs-appmark .eyebrow { margin: 0; }
.case-study .cs-appicon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: #fff; border: 1px solid #fff; box-shadow: var(--shadow); flex: none; }
.case-study .cs-appicon img { width: 32px; height: auto; display: block; }

/* Planner MCP case study */
.mc-lead { margin: 0 0 14px; font-size: 21px; line-height: 1.4; color: var(--ink); }
.mc-sub { margin: 12px 0 10px; font-size: 17px; line-height: 1.45; color: var(--ink); }
.mc-cap { margin-top: 12px; text-align: center; }
.mc-vwrap { container-type: inline-size; }
.theme-sage .cs-msplit { align-items: start; }
.theme-sage .cs-mmedia { justify-content: center; }
.mc-fit { width: fit-content; max-width: 100%; margin: 0; }
.mc-fit img { width: auto; max-width: 100%; height: auto; max-height: 460px; }
.mc-wide { width: 100%; max-width: none; margin: 0; }
.mc-wide img { width: 100%; height: auto; }
.mc-faces img { width: 100%; max-width: 360px; height: auto; display: block; }
.mc-plain { line-height: 0; }
.mc-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.mc-two-fig { justify-items: center; align-items: start; }
.mc-apps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 16px; align-items: start; }
.mc-apps-l { display: grid; gap: 16px; }
.mc-apps .cs-figure { margin: 0; }
.mc-poc { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.mc-poc-step { display: grid; gap: 10px; min-width: 0; }
.mc-poc-step .cs-kicker { margin: 0; }
.mc-poc-step .mc-fit img { height: 300px; max-height: none; }
.mc-arrow { align-self: center; font-size: 24px; color: var(--accent); }
.mc-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; counter-reset: none; }
.mc-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 10px 18px; border-radius: 20px; background: var(--cs-card); border: 1px solid #fff; box-shadow: var(--shadow); text-align: center; font-size: 13px; line-height: 1.45; color: var(--muted); }
.mc-step strong { font-size: 15px; line-height: 1.3; color: var(--ink); font-weight: 600; }
.mc-step.hi { background: var(--t-2); }
.mc-n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 11px; font-weight: 600; }
.mc-tag { margin-top: 4px; padding: 4px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--pink-line); color: var(--accent); font-size: 11px; font-weight: 600; line-height: 1.3; }
.mc-life { margin: 0 0 14px; font-size: 13px; color: var(--accent); font-weight: 600; }
.mc-life span { color: var(--muted); font-weight: 500; }
.mc-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; align-items: start; }
.mc-col h4 { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.mc-jobs, .mc-tools { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.mc-tools { margin-top: 10px; }
.mc-job { padding: 8px 10px; border-radius: 12px; background: #fff; border: 1px solid var(--pink-line); font-size: 13px; line-height: 1.4; color: var(--ink); }
.mc-tool { display: block; width: fit-content; max-width: 100%; padding: 5px 11px; border-radius: 999px; font-size: 11px; line-height: 1.3; color: #3b3b46; background: #eee; }
.mc-tools .mc-tool { width: 100%; text-align: center; }
.mc-tools-row { display: flex; flex-wrap: wrap; margin: 0 0 6px; gap: 7px; }
.mc-tools-row .mc-tool { width: fit-content; }
.t-c { background: #f1c9ee; } .t-y { background: #fff1b8; } .t-q { background: #e6dcfb; } .t-u { background: #fbd09a; } .t-g { background: #eadcc4; } .t-l { background: #fbc9c0; } .t-n { background: #e6e6e6; }
.mc-legend { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.mc-tablewrap { overflow-x: auto; border-radius: 20px; border: 1px solid var(--line); background: #fff; }
.mc-table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.5; color: var(--ink); min-width: 640px; }
.mc-table th, .mc-table td { padding: 12px 16px; text-align: left; vertical-align: middle; border-top: 1px solid var(--line); font-weight: 400; }
.mc-table thead th { border-top: 0; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.mc-table .mc-num { width: 48px; color: var(--muted); }
.mc-table tbody th { width: 190px; }
.mc-wip { margin: 0 0 14px; }
.mc-resp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.mc-resp h4 { margin: 14px 0 6px; font-size: 15px; font-weight: 600; color: var(--ink); }
@media (max-width: 1200px) { .mc-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); } .mc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .mc-flow, .mc-grid, .mc-two, .mc-apps, .mc-resp-grid { grid-template-columns: 1fr; }
  .mc-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mc-poc-step .mc-fit img { height: 220px; }
  .mc-arrow { display: none; }
}
.mc-poc { flex-wrap: nowrap; justify-content: space-between; gap: 12px; }
.mc-poc-step .mc-fit img { height: 250px; width: auto; }
.mc-poc-step .cs-kicker { max-width: 24ch; line-height: 1.35; }
@media (max-width: 1100px) { .mc-poc { flex-wrap: wrap; } .mc-poc-step .mc-fit img { height: 220px; } }
.mc-col .mc-tools { margin-top: 16px; }

/* Phones: let the portrait sit right under the headline instead of being pushed to the bottom of a full-height hero */
@media (max-width: 600px) {
  .hero { min-height: 0; }
  .hero-stage { margin-top: 0; padding-top: 28px; }
}
.cs-cover-grid.cs-cover-solo { grid-template-columns: minmax(0, 1fr); }
.cs-cover-solo .cs-cover-copy { max-width: 820px; }
.mc-bigbox { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(16px, 3vw, 36px); align-items: center; padding: clamp(22px, 3vw, 38px); border-radius: 30px; background: var(--cs-card); border: 1px solid #fff; box-shadow: var(--shadow); }
.mc-bcol { min-width: 0; }
.mc-bcol .cs-list { margin: 0; }
.mc-bcol .cs-kicker { margin: 0 0 12px; }
.mc-bcol .mc-faces img { max-width: 100%; }
.mc-bcol .mc-fit img { max-height: 360px; }
.mc-barrow { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--t-2); color: var(--accent); font-size: 24px; line-height: 1; }
.mc-job.hl { background: var(--t-2); border-color: var(--accent); }
@media (max-width: 860px) { .mc-bigbox { grid-template-columns: 1fr; } .mc-barrow { justify-self: center; rotate: 90deg; } }

/* Planner MCP page: sentence case, borderless images, aligned grids, roomier spacing */
.mc-page .cs-kicker, .mc-page .cs-cap, .mc-page .cs-tag { text-transform: none; letter-spacing: 0; }
.mc-page .mc-cap { font-size: 15px; }
.mc-label { margin: 0 0 14px; font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.mc-page .cs-figure { background: none; border: 0; box-shadow: none; border-radius: 0; }
.mc-page .cs-figure img { border-radius: 14px; }
.mc-page .cs-wrow { gap: 22px; padding: 12px 0 20px; }
.mc-page .cs-msplit { gap: clamp(32px, 5vw, 64px); align-items: start; }
.mc-page .cs-mmedia { justify-content: flex-start; }
.mc-page .cs-mtext > * + * { margin-top: 20px; }
.mc-poc { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; align-items: start; gap: 32px; }
.mc-poc-step { display: block; }
.mc-poc-step .mc-fit img { height: 300px; width: auto; max-height: none; }
.mc-bigbox { gap: clamp(32px, 5vw, 64px); padding: clamp(28px, 4vw, 48px); align-items: start; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mc-bcol .mc-faces { margin-bottom: 4px; }
.mc-grid2 { row-gap: 40px; }
.mc-cell { min-width: 0; }
.mc-cell .mc-fit img { max-height: 420px; }
@media (max-width: 1100px) { .mc-poc { grid-template-columns: repeat(2, auto); justify-content: start; } .mc-poc-step .mc-fit img { height: 240px; } }
@media (max-width: 860px) { .mc-bigbox { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .mc-poc { grid-template-columns: 1fr; } }
.mc-page .cs-video .video-toggle, .mc-page .cs-video .video-tag { display: none; }
.mc-page .cs-video video { cursor: pointer; }
.mc-poc { align-items: start; }
.mc-poc-step .mc-label { min-height: 2.7em; margin-bottom: 14px; }
.mc-page .cs-zoom-btn { display: none; }
.mc-page .cs-figure, .mc-page .cs-figure img, .mc-page .cs-figure:hover, .mc-page .cs-figure:hover img { transform: none !important; transition: none; cursor: default; }
.mc-poc { grid-template-rows: auto auto; row-gap: 0; }
.mc-poc-step { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
.mc-poc-step .mc-label { min-height: 0; align-self: start; }
.mc-poc-step .cs-figure { align-self: start; }
.cs-cover-solo .cs-cover-copy { max-width: none; }
.cs-cover-solo .cs-lede { max-width: 1040px; font-size: 21px; }

/* Hero garden: tulips behind the portrait, waves in the background */
@media (max-width: 1250px) { .hero { overflow-x: clip; } }
.hero-portrait, .hero-portrait * { pointer-events: none; }
.hero-portrait { position: relative; z-index: 1; }
.hero-garden { position: absolute; z-index: 0; left: 0; bottom: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-scene .tulip { pointer-events: auto; }
.tulip { position: absolute; bottom: 0; height: auto; pointer-events: auto; transform-origin: 50% 100%; cursor: default; will-change: rotate; }
.tulip-blue-sm { left: -45%; width: 25%; --sway: 3.2deg; }
.tulip-pink { left: -19%; width: 22%; --sway: 2.4deg; }
.tulip-blue { left: 88.2%; width: 25.5%; --sway: 2.6deg; }
.tulip-pink-sm { left: 109%; width: 24%; --sway: 3.6deg; }
.tulip.sway { animation: wind 2.6s cubic-bezier(.45, .05, .35, 1) var(--wd, 0s) 1 both; }
@keyframes wind {
  0% { rotate: 0deg; }
  22% { rotate: calc(var(--sway) * var(--k, 1)); }
  48% { rotate: calc(var(--sway) * var(--k, 1) * -.7); }
  72% { rotate: calc(var(--sway) * var(--k, 1) * .3); }
  100% { rotate: 0deg; }
}
.motion-paused .tulip.sway { animation: none; }
@media (max-width: 600px) {
}
@media (prefers-reduced-motion: reduce) { .tulip.sway { animation: none !important; } }
.hero-stage { padding-top: 48px; }
@media (max-width: 600px) { .hero-stage { padding-top: 40px; } }

@media (max-width: 700px) { .hero-garden { scale: .62; transform-origin: 50% 100%; } }

.hero-visual { translate: 6.3% 0; }

/* Quieter hero sparkles; a few soft ones through the lower sections */
.spark-3, .spark-4, .spark-5, .spark-8, .spark-11, .spark-12 { display: none; }
.sd { width: 22px; opacity: .45; }
.sd-a { left: 3%; top: 14%; } .sd-b { right: 6%; top: 62%; width: 26px; }
.sd-c { left: 5%; top: 58%; width: 24px; } .sd-d { right: 4%; top: 30%; } .sd-e { left: 46%; bottom: 8%; width: 20px; }
.sd-f { right: 10%; top: 18%; width: 24px; } .sd-g { left: 7%; top: 52%; } .sd-h { right: 22%; bottom: 12%; width: 20px; }
.sd-i { left: 4%; top: 12%; width: 24px; } .sd-j { right: 8%; top: 40%; } .sd-k { left: 12%; bottom: 10%; width: 20px; }
.sd-l { right: 7%; top: 20%; width: 24px; } .sd-m { left: 6%; top: 46%; } .sd-n { right: 14%; bottom: 14%; width: 20px; }
@media (max-width: 600px) { .sd { width: 16px; opacity: .4; } .sd-e, .sd-h, .sd-k, .sd-n { display: none; } }

/* Faint waves through the lower sections */
.sw { width: 74px; height: auto; opacity: .4; animation-duration: 32s; }
.sw-a { right: 4%; top: 8%; } .sw-b { left: 2%; top: 12%; width: 90px; } .sw-c { right: 3%; top: 54%; width: 80px; }
.sw-d { left: 5%; top: 30%; width: 84px; } .sw-e { right: 5%; top: 22%; } .sw-f { left: 6%; bottom: 14%; width: 86px; }
.sw-g { left: 7%; top: 30%; width: 84px; } .sw-h { right: 6%; bottom: 12%; }
@media (max-width: 600px) { .sw { width: 52px; opacity: .35; } .sw-c, .sw-f, .sw-h { display: none; } }

.cs-cover { position: relative; }
.cs-mark { position: absolute; z-index: 0; top: 99px; right: 0; width: clamp(70px, 10vw, 140px); height: auto; opacity: .2; pointer-events: none; user-select: none; }
.cs-cover-copy, .cs-cover-visual, .cs-cover-back { position: relative; z-index: 1; }
@media (max-width: 700px) { .cs-mark { width: 64px; top: 56px; opacity: .15; } }

/* Password gate (client-side) */
.gate { display: none; }
.is-locked .gate { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 24px; background: var(--paper); }
.is-locked body > :not(.gate, .flower-cursor, .click-burst) { display: none !important; }
.is-locked body { overflow: hidden; }
.gate-card { width: min(420px, 100%); display: grid; gap: 14px; justify-items: center; padding: 36px 32px 28px; border-radius: 28px; background: var(--cs-card, #fff); border: 1px solid #fff; box-shadow: var(--shadow); text-align: center; }
.gate-card h1 { margin: 0; font-size: 26px; letter-spacing: -.5px; }
.gate-card p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
.gate-card input { width: 100%; height: 48px; padding: 0 18px; border: 1.5px solid var(--pink-line); border-radius: 999px; background: #fff; font: inherit; font-size: 16px; color: var(--ink); text-align: center; }
.gate-card input:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: 2px; }
.gate-card button { width: 100%; height: 48px; border: 0; border-radius: 999px; background: var(--accent); color: #fff; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; transition: transform .2s, box-shadow .2s; }
.gate-card button:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -10px var(--accent); }
.gate-card button:active { transform: scale(.97); }
.gate-msg { min-height: 1.4em; color: var(--accent) !important; font-size: 14px !important; }
.gate-back { font-size: 14px; color: var(--muted); }
.gate-back:hover { color: var(--accent); }
.gate.shake .gate-card { animation: gate-shake .4s; }
@keyframes gate-shake { 20%, 60% { translate: -8px 0; } 40%, 80% { translate: 8px 0; } }
@media (prefers-reduced-motion: reduce) { .gate.shake .gate-card { animation: none; } }
.gate-lock { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: var(--t-2); color: var(--accent); box-shadow: inset 0 1px 0 #fff, 0 8px 18px -10px color-mix(in srgb, var(--accent) 60%, transparent); }
.gate-reach { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.gate-msg { min-height: 0; }
.gate-msg:empty { display: none; }
.gate-card { gap: 12px; }
.gate-card button { margin-top: 2px; }

/* Password screen: quieter focus state */
.gate-card input:focus, .gate-card input:focus-visible { outline: none; border-color: var(--pink-line); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }
.gate-card button:focus-visible, .gate-back:focus-visible, .gate-reach:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: 3px; }

/* Planner Mobile case study */
.pm-sub { margin: -6px 0 0; color: var(--muted); font-size: 15px; }
.pm-sub2 { margin: 28px 0 12px; font-size: 17px; font-weight: 600; color: var(--ink); }
.pm-cap { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); text-transform: none; letter-spacing: 0; padding: 0; text-align: left; width: auto; min-width: 0; }
.pm-cap b { color: var(--ink); font-weight: 600; }
.pm-apps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; align-items: start; }
.pm-app { display: grid; gap: 6px; padding: 14px 12px 16px; border-radius: 22px; background: var(--cs-card); border: 1px solid #fff; box-shadow: var(--shadow); }
.pm-app-shot { display: grid; place-items: center; height: 230px; margin-bottom: 8px; }
.pm-app-shot img { height: 100%; width: auto; max-width: 100%; border-radius: 14px; box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--t-shadow) 50%, transparent); }
.pm-app h4 { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.pm-mau { margin: 0; font-size: 13px; color: var(--muted); }
.pm-mau b { font-size: 22px; color: var(--accent); font-weight: 600; letter-spacing: -.5px; }
.pm-stats { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.pm-stats li { display: flex; justify-content: space-between; gap: 8px; border-top: 1px solid var(--line); padding-top: 4px; }
.pm-stats b { color: var(--ink); font-weight: 600; }
.pm-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.pm-cat { display: grid; gap: 4px; justify-items: start; padding: 20px; border-radius: 22px; background: var(--cs-card); border: 1px solid #fff; box-shadow: var(--shadow); color: var(--muted); font-size: 14px; }
.pm-cat b { color: var(--ink); font-size: 17px; font-weight: 600; }
.pm-cat-ic { width: 44px; height: 44px; margin-bottom: 8px; object-fit: contain; }
.pm-cat-none { border-radius: 14px; background: var(--t-2); }
.pm-logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 36px; }
.pm-logos li { display: grid; place-items: center; height: 36px; }
.pm-logos img { height: 100%; width: auto; max-width: 130px; object-fit: contain; }
.pm-big { margin: 0; font-size: 21px; line-height: 1.4; color: var(--ink); }
.pm-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pm-gal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 26px; align-items: start; }
.pm-shot { margin: 0; }
.pm-shot img { width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line); display: block; }
.pm-take { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.pm-take .cs-card h4 { margin: 12px 0 6px; font-size: 17px; }
.pm-take .cs-card p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); }
.pm-n { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--t-2); color: var(--accent); font-size: 13px; font-weight: 600; flex: none; }
.pm-quote { margin: 18px 0 0; }
.pm-jobs { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-width: 640px; }
.pm-jobs li { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 20px; background: var(--cs-card); border: 1px solid #fff; box-shadow: var(--shadow); font-size: 19px; color: var(--ink); }
.pm-job { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 64px); align-items: start; margin-top: 28px; }
.pm-job:first-child { margin-top: 0; }
.pm-phones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.pm-phones-1 { grid-template-columns: minmax(0, 1fr); max-width: 280px; }
.pm-phones .cs-figure img { max-height: none; width: 100%; border-radius: 22px; box-shadow: 0 14px 28px -16px color-mix(in srgb, var(--t-shadow) 55%, transparent); }
.pm-phones .mc-fit { width: 100%; }
.pm-flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; align-items: start; }
.pm-step { margin: 0; display: grid; gap: 12px; }
.pm-step figcaption { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.pm-step img { width: 100%; height: auto; border-radius: 18px; box-shadow: 0 12px 24px -14px color-mix(in srgb, var(--t-shadow) 55%, transparent); display: block; }
@media (max-width: 1250px) { .pm-apps { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pm-take { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pm-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pm-gal { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pm-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) { .pm-job, .pm-two { grid-template-columns: 1fr; } .pm-apps, .pm-cats, .pm-take, .pm-gal { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pm-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .pm-apps, .pm-gal, .pm-take { grid-template-columns: 1fr; } .pm-app-shot { height: 200px; } }
.pm-logos li { height: auto; }
.pm-logos img { height: 34px; width: auto; max-width: 130px; }
.pm-logos li:is(:nth-child(1), :nth-child(2), :nth-child(8)) img { width: 34px; }
.pm-cat-svg { width: 44px; height: 44px; margin-bottom: 8px; padding: 9px; border-radius: 14px; background: var(--t-2); color: var(--accent); box-sizing: border-box; }
.pm-app-shot { height: 230px; overflow: hidden; }
.pm-app-shot img { height: 230px; width: auto; max-width: 100%; object-fit: contain; }
@media (max-width: 480px) { .pm-app-shot, .pm-app-shot img { height: 200px; } }
.pm-quote { padding: 22px 28px; display: grid; gap: 8px; }
.pm-quote p { margin: 0; }
.pm-quote footer { margin: 0; padding: 0; font-size: 14px; color: var(--muted); }
.pm-quote footer::before { content: "\2014\00a0"; }

/* Planner Mobile: layout closer to the deck, flat images */
.pm-page .cs-figure img, .pm-page img { box-shadow: none !important; }
.pm-crop { overflow: hidden; border-radius: 22px 22px 0 0; border: 1px solid var(--line); border-bottom: 0; background: #fff; }
.pm-crop img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 0; }
.pm-crop-sm { height: 300px; } .pm-crop-md { height: 360px; } .pm-crop-lg { height: 470px; }
.pm-vwrap { margin-bottom: 28px; }
.pm-page .cs-video { height: auto; width: 100%; max-width: 980px; margin-inline: auto; aspect-ratio: 1100 / 618; }
.pm-page .cs-vstage { position: absolute; inset: 0; left: 0; width: 100%; transform: none; }
.pm-page .cs-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pm-state { display: grid; grid-template-columns: 1fr 2fr 2fr 1fr; gap: 20px; align-items: end; }
.pm-grp { display: grid; gap: 10px; align-content: end; }
.pm-grp-h { display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: 17px; color: var(--ink); }
.pm-grp-h img { height: 32px; width: auto; }
.pm-grp-in { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; border-top: 2px solid var(--pink-line); padding-top: 14px; }
.pm-sa { display: grid; gap: 10px; }
.pm-sa-txt { margin: 0; display: grid; gap: 2px; font-size: 13px; line-height: 1.4; color: var(--muted); min-height: 88px; align-content: end; }
.pm-sa-txt b { font-size: 15px; color: var(--ink); font-weight: 600; }
.pm-mau em { font-style: normal; font-size: 22px; font-weight: 600; color: var(--accent); letter-spacing: -.5px; }
.pm-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.pm-cat { display: grid; gap: 18px; align-content: start; }
.pm-cat-ic { width: 44px; height: 44px; object-fit: contain; }
.pm-cat-logos { list-style: none; margin: 0; padding: 18px 0 0; border-top: 2px solid var(--pink-line); display: grid; gap: 14px; min-height: 230px; align-content: start; }
.pm-cat-logos li img { height: 30px; width: auto; max-width: 140px; object-fit: contain; display: block; }
.pm-cat p { margin: 0; display: grid; gap: 2px; font-size: 14px; color: var(--muted); }
.pm-cat p b { font-size: 17px; color: var(--ink); font-weight: 600; }
.pm-cat-svg { width: 44px; height: 44px; padding: 9px; border-radius: 14px; background: var(--t-2); color: var(--accent); box-sizing: border-box; }
.pm-tl { --rh: 48px; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 0 18px; }
.pm-tl-names { list-style: none; margin: 34px 0 0; padding: 0; }
.pm-tl-names li { display: flex; align-items: center; }
.pm-tl-names img { height: 26px; width: auto; max-width: 130px; object-fit: contain; }
.pm-tl-txt { font-size: 17px; font-weight: 600; color: var(--ink); }
.pm-tl-months { position: relative; height: 34px; font-size: 12px; color: var(--muted); }
.pm-tl-months span { position: absolute; top: 6px; transform: translateX(-50%); white-space: nowrap; }
.pm-tl-body { position: relative; height: calc(var(--rh) * var(--rows)); }
.pm-tl-v { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--line); }
.pm-tl-h { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--line); }
.pm-dot { display: inline-block; box-sizing: border-box; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--accent); background: var(--paper); }
.pm-dot.f { background: var(--accent); }
.pm-dot.big { width: 22px; height: 22px; }
.pm-tl-body .pm-dot { position: absolute; transform: translate(-50%, -50%); }
.pm-legend { display: flex; gap: 24px; margin: 14px 0 0 168px; font-size: 13px; color: var(--muted); }
.pm-legend span { display: inline-flex; align-items: center; gap: 8px; }
.pm-take-line { margin: 20px 0 0 168px; font-size: 21px; line-height: 1.4; color: var(--ink); }
.pm-collage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.pm-collage-c { display: grid; gap: 16px; }
.pm-shot img { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); display: block; }
.pm-take { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.pm-take article { border-top: 2px solid var(--pink-line); padding-top: 16px; }
.pm-take h4 { margin: 0 0 10px; font-size: 19px; font-weight: 600; color: var(--ink); }
.pm-take p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); }
.pm-jobsplit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 48px; align-items: center; min-height: 340px; }
.pm-jobtitle { margin: 0; font-size: clamp(28px, 3vw, 40px); line-height: 1.15; letter-spacing: -1px; font-weight: 500; }
.pm-job { display: grid; grid-template-columns: minmax(0, 1.1fr) repeat(2, minmax(0, 1fr)); gap: 32px; align-items: start; }
.pm-job .pm-ph:last-child:nth-child(3) { grid-column: 3; }
.pm-ph { display: grid; gap: 10px; align-content: start; }
.pm-ph h4 { margin: 8px 0 0; font-size: 17px; font-weight: 600; color: var(--ink); }
.pm-ph p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); }
.pm-ph-text { padding-top: 24px; }
.pm-flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; align-items: end; }
.pm-step { margin: 0; display: grid; gap: 12px; }
.pm-step figcaption { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--ink); min-height: 40px; display: flex; align-items: flex-end; }
@media (max-width: 1250px) { .pm-state { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pm-cats, .pm-take { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pm-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pm-collage { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px) { .pm-job, .pm-jobsplit { grid-template-columns: 1fr; } .pm-job .pm-ph:last-child:nth-child(3) { grid-column: auto; } .pm-tl { grid-template-columns: 90px minmax(0, 1fr); } .pm-tl-names img { max-width: 80px; height: 20px; } .pm-legend, .pm-take-line { margin-left: 0; } .pm-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pm-collage { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .pm-state, .pm-cats, .pm-take { grid-template-columns: 1fr; } .pm-grp-in { grid-template-columns: 1fr 1fr; } .pm-crop-lg { height: 380px; } .pm-tl-months span:nth-child(even) { display: none; } }
.pm-page .pm-cat { padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; }
.pm-tl-names { margin: 0; padding-top: 34px; }
.pm-tl-names li { gap: 10px; }
.pm-tl-names li .pm-tl-txt { font-size: 15px; }
.pm-cat { justify-items: stretch; } .pm-cat-ic, .pm-cat-svg { justify-self: start; }
.pm-page .pm-tl-names { margin: 0; padding: 34px 0 0; list-style: none; }
.pm-page .pm-cat-logos { margin: 0; padding: 18px 0 0; list-style: none; }
#capture .pm-crop img, #start .pm-crop img, #share .pm-crop img { object-position: center bottom; }

/* Planner Mobile: whole phone screens, GIF demos */
.pm-crop, .pm-crop-sm, .pm-crop-md, .pm-crop-lg { height: auto; overflow: visible; border: 0; border-radius: 0; background: none; }
.pm-crop img { width: 100%; height: auto; object-fit: contain; object-position: center; }
#capture .pm-crop img, #start .pm-crop img, #share .pm-crop img { object-position: center; }
.pm-vwrap { width: 100%; max-width: 980px; margin: 0 auto 28px; }
.pm-gif { display: block; width: 100%; height: auto; border-radius: 22px; }
.pm-state { align-items: start; }
.pm-sa-txt { min-height: 0; align-content: start; }
.pm-flow { align-items: start; }
.pm-step figcaption { min-height: 0; align-items: flex-start; }
@media (max-width: 1250px) { .pm-phones { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pm-wave { max-width: 1160px; border-radius: 22px; overflow: hidden; background: #fef3f6; border: 1px solid var(--line); }
.pm-wave img { display: block; width: 100%; height: auto; }
.pm-page .cs-wrow + .cs-wrow { margin-top: 56px; }
.pm-page .cs-chapter { padding-bottom: 64px; }
#share .pm-crop, #capture .pm-crop, #start .pm-crop, #top .pm-crop, #consume .pm-crop { height: auto; }
.pm-state-frame { max-width: 1160px; background: #f5effd; border-color: #e6dcfa; }

/* Planner Mobile: phone slides like the deck (text above, glowing phones) */
.pm-job { grid-template-columns: minmax(0, .9fr) repeat(2, minmax(0, 1fr)); gap: 40px; align-items: start; }
.pm-jobtext { padding-top: 6px; }
.pm-ph { display: grid; gap: 16px; align-content: start; }
.pm-txt { min-height: 0; display: grid; gap: 6px; align-content: end; }
.pm-txt h4 { margin: 0; font-size: 19px; font-weight: 600; color: var(--ink); }
.pm-txt p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink); }
.pm-glow { position: relative; width: 100%; max-width: 360px; border-radius: 26px; }
.pm-glow > img { display: block; width: 100%; height: auto; border-radius: 26px; border: 5px solid color-mix(in srgb, var(--accent) 14%, #fff); box-shadow: 0 0 30px 6px color-mix(in srgb, var(--accent) 34%, transparent), 0 18px 34px -16px color-mix(in srgb, var(--t-shadow) 55%, transparent) !important; }
.pm-hl { position: absolute; border-radius: 4px; background: rgba(255, 143, 92, .3); outline: 1px solid rgba(235, 110, 60, .7); pointer-events: none; }
.pm-page .pm-flow .pm-glow { max-width: none; }
.pm-flow { gap: 22px; }
.pm-ph-text { padding-top: 0; }
.pm-take .cs-card { padding: 22px 22px 24px; border-radius: 22px; }
.pm-take .cs-card h4 { margin: 0 0 10px; font-size: 19px; }
.pm-take .cs-card p { color: var(--ink); }
.pm-take article { border-top: 0; padding-top: 22px; }
.pm-page mark { background: none; color: var(--accent); font-weight: 600; }
.pm-state-frame { background: var(--paper); border: 1px solid #fff; box-shadow: var(--shadow), 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent), 0 30px 60px -30px color-mix(in srgb, var(--t-shadow) 55%, transparent); }
@media (max-width: 1250px) { .pm-job { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pm-jobtext { grid-column: 1 / -1; } }
@media (max-width: 820px) { .pm-job { grid-template-columns: 1fr; } .pm-glow { max-width: 320px; } }
.pm-quote footer { display: block; text-align: left; }
.pm-glow { border: 5px solid color-mix(in srgb, var(--accent) 14%, #fff); box-shadow: 0 0 30px 6px color-mix(in srgb, var(--accent) 34%, transparent), 0 18px 34px -16px color-mix(in srgb, var(--t-shadow) 55%, transparent); overflow: hidden; background: #fff; }
.pm-glow > img { border: 0; border-radius: 0; box-shadow: none !important; }
/* Phones: same card shadow as the cover (white edge, soft layered shadow) */
.pm-glow { border: 1px solid #fff; border-radius: 32px; background: #fff; box-shadow: var(--shadow), 0 40px 70px -44px color-mix(in srgb, var(--t-shadow) 55%, transparent); }
.pm-glow > img { border-radius: 0; }
/* Planner Mobile: bullets align with the top of the phones, more breathing room, bare cover phone */
.pm-job { grid-template-columns: minmax(0, .8fr) repeat(2, minmax(0, 1fr)); column-gap: clamp(40px, 5vw, 72px); row-gap: 0; margin-top: 88px; }
.pm-job:first-child { margin-top: 24px; }
.pm-job > .pm-ph { grid-row: 1 / span 2; display: grid; grid-template-rows: subgrid; gap: 0; }
.pm-job > .pm-jobtext { grid-row: 2; grid-column: 1; padding-top: 0; }
.pm-jobtext .cs-list { gap: 18px; }
.pm-txt { padding-bottom: 32px; gap: 10px; }
.pm-glow { max-width: 340px; }
.pm-page .pm-flow { gap: 40px; }
.pm-page .cs-cover-art.cs-cover-card { background: none; border: 0; box-shadow: none; }
.pm-page .cs-cover-art.cs-cover-card::before { display: none; }
@media (max-width: 1250px) { .pm-job > .pm-ph { grid-row: auto; grid-template-rows: none; } .pm-job > .pm-jobtext { grid-row: auto; grid-column: 1 / -1; padding-bottom: 28px; } .pm-job { margin-top: 72px; } }
.pm-txt { align-content: start; }
.pm-job > .pm-jobtext { margin-top: -6px; }
/* Visual alignment and craft: equal frames, shared top lines, calmer spacing */
.pm-flow { gap: clamp(24px, 3vw, 44px); row-gap: 56px; align-items: start; }
.pm-step { gap: 20px; }
.pm-step figcaption { min-height: 2.7em; align-items: flex-start; font-size: 16px; }
.pm-flow .pm-glow { aspect-ratio: 420 / 918; max-width: none; }
.pm-flow .pm-glow > img { height: 100%; object-fit: fill; }
.pm-job .pm-glow { aspect-ratio: 520 / 1130; }
.pm-job .pm-glow > img { height: 100%; object-fit: fill; }
/* Share: text top-aligns with the phone */
.pm-ph > .pm-txt { grid-row: 1; }
.pm-ph > .pm-glow { grid-row: 2; }
.pm-txt:empty { display: none; }
.pm-job > .pm-ph-text { grid-row: 2; grid-template-rows: none; display: block; }
.pm-ph-text .pm-txt { padding-bottom: 0; }
/* Planner Mobile spacing rhythm: 32px heading to content, 72px between blocks, 104px between chapters */
.pm-page { --pm-block: 72px; }
.pm-page .cs-wrow + .cs-wrow { margin-top: var(--pm-block); }
.pm-page .pm-job { margin-top: var(--pm-block); }
.pm-page .pm-job:first-child { margin-top: 0; }
.pm-flow { row-gap: var(--pm-block); }
.pm-step figcaption { font-size: 18px; }
@media (max-width: 1250px) { .pm-page .pm-job { margin-top: var(--pm-block); } .pm-page .pm-job:first-child { margin-top: 0; } }
/* State of affairs: title and logos are live, static elements over the animation */
.pm-state-frame { position: relative; container-type: inline-size; }
.pm-state-title { position: absolute; left: 4.95%; top: 6.1%; margin: 0; font-size: 3.1cqw; line-height: 1.1; font-weight: 600; letter-spacing: -.02em; white-space: nowrap; background: linear-gradient(90deg, #f06a96, #c82864 35%, #dc3f78 70%, #963c82); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pm-state-logo { position: absolute; width: 7.5%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: #fff; box-shadow: 0 .4cqw 1.2cqw rgba(0,0,0,.09); }
.pm-state-logo img { height: 56%; width: auto; max-width: 56%; display: block; }
.pm-page .pm-wave .pm-state-title { background: linear-gradient(90deg, #f06a96, #c82864 35%, #dc3f78 70%, #963c82); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
/* Demo cards with a thumbnail: always-visible title, play button, soft scrim for legibility */
.demo-card.has-media { background-size: cover; background-position: center; border-color: #fff; overflow: hidden; isolation: isolate; }
.demo-card.has-media::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(30,22,18,.34) 0%, rgba(30,22,18,0) 34%, rgba(30,22,18,0) 58%, rgba(30,22,18,.5) 100%); transition: opacity .4s; }
.demo-card.has-media:is(:hover, :focus-visible) { background-color: transparent; }
.demo-card.has-media .demo-index { color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.35); }
.demo-card.has-media .demo-title { position: static; opacity: 1; transform: none; padding: 8px 14px; font-size: 13px; }
.demo-card.has-media .demo-foot { gap: 12px; justify-content: space-between; }
.demo-card.has-media .demo-play { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(255,253,249,.88); box-shadow: 0 10px 30px -8px rgba(30,22,18,.5); display: grid; place-items: center; transition: transform .45s var(--ease), background .3s; }
.demo-card.has-media .demo-play::after { content: ""; margin-left: 4px; border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent var(--ink); transition: border-color .3s; }
.demo-card.has-media:is(:hover, :focus-visible) .demo-play { transform: scale(1.1); background: var(--accent); }
.demo-card.has-media:is(:hover, :focus-visible) .demo-play::after { border-left-color: #fff; }
.demo-card.has-media:active .demo-play { transform: scale(.96); }
/* Video preview: dark stage so any aspect ratio letterboxes cleanly */
.preview-media.is-video { background: #14100e; max-height: calc(100svh - 250px); }
.preview-media.is-video video { background: #14100e; }
.demo-card.has-media::after { content: ""; position: absolute; inset: 0; border: 4px solid #fff; border-radius: inherit; pointer-events: none; }
/* Demo number sits in a frosted pill so it reads on any thumbnail */
.demo-card.has-media .demo-index { align-self: flex-start; padding: 7px 12px; border-radius: 999px; background: rgba(255,253,249,.82); color: var(--ink); text-shadow: none; font-weight: 600; letter-spacing: .08em; line-height: 1; box-shadow: 0 4px 14px -6px rgba(30,22,18,.35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
/* Demo dialog: previous / next arrows over the player */
.preview-stage { position: relative; }
.preview-nav { position: absolute; top: 50%; z-index: 2; width: 48px; height: 48px; margin-top: -24px; display: grid; place-items: center; border: 1px solid #fff; border-radius: 50%; background: rgba(255,253,249,.86); color: var(--ink); font-size: 20px; cursor: pointer; box-shadow: 0 10px 24px -10px rgba(30,22,18,.5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform .35s var(--ease), background .25s, color .25s, box-shadow .35s var(--ease); }
.preview-prev { left: 14px; }
.preview-next { right: 14px; }
.preview-nav span { display: block; transition: transform .35s var(--ease); }
.preview-nav:is(:hover, :focus-visible) { background: var(--accent); color: #fff; transform: scale(1.08); }
.preview-prev:is(:hover, :focus-visible) span { transform: translateX(-2px); }
.preview-next:is(:hover, :focus-visible) span { transform: translateX(2px); }
.preview-nav:active { transform: scale(.94); }
.preview-nav:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.motion-paused .preview-nav, .motion-paused .preview-nav span { transform: none !important; }
@media (max-width: 600px) { .preview-nav { width: 40px; height: 40px; margin-top: -20px; font-size: 17px; } .preview-prev { left: 8px; } .preview-next { right: 8px; } }
/* Demo rail buttons sit centred under the cards */
.demo-controls { margin-top: 30px; gap: 14px; position: relative; z-index: 3; }
.demo-nav span { display: block; transition: transform .35s var(--ease); }
.demo-prev:is(:hover, :focus-visible) span { transform: translateX(-2px); }
.demo-next:is(:hover, :focus-visible) span { transform: translateX(2px); }
.demo-nav:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.motion-paused .demo-nav, .motion-paused .demo-nav span { transform: none !important; }
/* Round buttons: keep the arrow dead centre */
.demo-nav, .preview-nav { padding: 0; line-height: 1; }
.demo-nav span, .preview-nav span { display: grid; place-items: center; width: 100%; height: 100%; }
/* Hover matches the Resume button: deeper pink, lift and a pink glow, no white edge */
.demo-nav:is(:hover, :focus-visible), .preview-nav:is(:hover, :focus-visible) { background: #f01e5b; color: #fff; border-color: transparent; transform: translateY(-3px); box-shadow: 0 4px 8px #fe2b6740, 0 18px 28px -10px #fe2b6799; }
.demo-nav:active, .preview-nav:active { transform: translateY(0) scale(.96); }
.demo-card.has-media:is(:hover, :focus-visible) .demo-play { background: #f01e5b; box-shadow: 0 4px 8px #fe2b6740, 0 18px 28px -10px #fe2b6799; }
/* Same easing and timing as the Resume button */
.demo-nav, .preview-nav { transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .25s; }
.demo-card.has-media .demo-play { transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .25s; }
.demo-nav, .preview-nav { transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .25s, color .25s; }
/* ===== Beyond product: same bento frame as Selected work (3 columns, tall middle tile) ===== */
.beyond-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "a b c" "d b e"; gap: 20px; padding: 20px; max-width: 1180px; margin-inline: auto; background: #fff9f2; border: 1px solid #f1e6da; border-radius: 36px; box-shadow: 0 2px 4px #332b2608, 0 24px 50px -30px #66554e55; }
.beyond-card { position: relative; margin: 0; overflow: hidden; border-radius: 26px; aspect-ratio: 960 / 710; transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.beyond-card img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease), opacity 1.1s cubic-bezier(.4, 0, .2, 1); transition-delay: 0s, calc(var(--i, 0) * 140ms); }
.beyond-card:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -18px #66554e66; }
.beyond-card:hover img { transform: scale(1.04); }
.bb-a { grid-area: a; } .bb-b { grid-area: b; aspect-ratio: auto; } .bb-c { grid-area: c; } .bb-d { grid-area: d; } .bb-e { grid-area: e; }
.bb-b img { object-position: 50% 45%; }
.bb-d img { object-position: 50% 30%; }
.bb-e img { object-position: 0% 0%; }
.motion-paused .beyond-card, .motion-paused .beyond-card img { transform: none !important; }
@media (prefers-reduced-motion: reduce) { .beyond-card, .beyond-card img { transition: none; transform: none !important; } }
@media (max-width: 700px) {
  .beyond-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "a a" "b c" "b d" "e e"; gap: 12px; padding: 12px; border-radius: 26px; }
  .beyond-card { border-radius: 18px; }
}
/* Subtle dotted canvas, like Figma Make: small warm dots on the paper colour (home page) */
body:not(.case-study) { background-color: var(--paper); background-image: radial-gradient(circle at center, #eee9dd 1px, transparent 1.4px); background-size: 20px 20px; background-position: 10px 10px; }
@media (max-width: 600px) { body:not(.case-study) { background-size: 18px 18px; } }

/* About: timeline with hand-drawn icons */
.timeline { list-style: none; margin: 0; padding: 0; width: 100%; max-width: 640px; text-align: left; display: grid; gap: clamp(28px, 4vw, 44px); }
.tl-item { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: clamp(20px, 3vw, 36px); }
.tl-art { display: grid; width: 100%; transition: transform .6s var(--ease); }
.tl-art img { grid-area: 1 / 1; width: 100%; max-height: 80px; object-fit: contain; }
/* The colour fill sits under the line drawing and appears at once on hover (no fade), with the same tilt and zoom */
.tl-color { opacity: 0; }
.tl-item:hover .tl-art { transform: rotate(-6deg) scale(1.06); }
.tl-item:hover .tl-color { opacity: 1; }
.tl-text { display: grid; gap: 3px; font-size: 17px; line-height: 1.5; color: var(--ink); }
.tl-text span:first-child { font-weight: 600; }
.tl-text a { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--pink-line, #f4b6c8); transition: color .25s, text-decoration-color .25s; }
.tl-text a:is(:hover, :focus-visible) { color: var(--accent); text-decoration-color: var(--accent); }
.tl-text .ext-icon { display: inline-block; margin-left: 6px; vertical-align: -2px; flex: none; }
.motion-paused .tl-art { transform: none !important; }
@media (prefers-reduced-motion: reduce) { .tl-art { transition: none; transform: none !important; } }
@media (max-width: 600px) { .tl-item { grid-template-columns: 64px minmax(0, 1fr); } .tl-text { font-size: 15px; } }
.journey-note { max-width: none; white-space: nowrap; }
@media (max-width: 420px) { .journey-note { white-space: normal; } }

/* Two small tulips stand on the line under Contact and sway on hover */
.contact-tulip { z-index: 2; }
.contact-tulip-pink { left: 2%; width: 46px; --sway: 4deg; }
.contact-tulip-blue { right: 1.5%; width: 52px; --sway: 3.4deg; }
@media (max-width: 700px) { .contact-tulip-pink { left: 0; width: 34px; } .contact-tulip-blue { right: 0; width: 38px; } }
/* Filter buttons: solid fills so the dotted page never shows through */
.filter { background: #fffdf9; border-color: #efe9dd; }
.filter:is(:hover, :focus-visible) { background: #f3eee5; }
.filter.active { background: #fbe4e6; border-color: #f3b3c2; }
.filter.active:is(:hover, :focus-visible) { background: #f9dade; }

/* Beyond product: the three sets cross-fade into each other, card by card */
.beyond-card .bset { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .beyond-card img { transition: none; } }

/* Beyond product: three layouts that cross-fade card by card */
.beyond-bento[data-set="0"] .bset-1, .beyond-bento[data-set="1"] .bset-2, .beyond-bento[data-set="2"] .bset-3 { opacity: 1; }
.beyond-card .bset { object-position: 50% 50%; }
.bb-a .bset-2 { object-position: 50% 75%; }

/* Back button on project pages: hover, focus, press (the later .case-study background rule used to win over the hover fill) */
.case-back span { display: inline-block; transition: transform .35s var(--ease); }
.case-study .case-back { transition: transform .35s var(--ease), background .25s, border-color .25s, box-shadow .35s var(--ease); }
.case-study .case-back:is(:hover, :focus-visible) { background: var(--pink-soft); border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 10px 20px -12px #fe2b6788; }
.case-back:is(:hover, :focus-visible) span { transform: translateX(-4px); }
.case-study .case-back:active { transform: translateY(0) scale(.96); box-shadow: none; }
.case-study .case-back:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.motion-paused .case-back, .motion-paused .case-back span { transform: none !important; }
@media (prefers-reduced-motion: reduce) { .case-back, .case-back span { transition: none; transform: none !important; } }

/* Previous / next project links: arrow nudges toward its direction, with a press state */
.case-nav a span { display: inline-block; transition: transform .35s var(--ease); }
.case-nav a:is(:hover, :focus-visible) span { transform: translateX(4px); }
.case-nav a:first-child:is(:hover, :focus-visible) span { transform: translateX(-4px); }
.case-nav a:active { opacity: .7; }
.case-nav a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 8px; }
.motion-paused .case-nav a span { transform: none !important; }
@media (prefers-reduced-motion: reduce) { .case-nav a span { transition: none; transform: none !important; } }

/* Custom Templates: native content like the other case studies; screens are full width with no shadow */
.ct-page .cs-chapter > * + * { margin-top: var(--cs-gap); }
.ct-page .cs-split { align-items: stretch; }
.ct-page .cs-split > .cs-card { height: 100%; }
.ct-page .cs-wmain > * + * { margin-top: var(--cs-gap); }
.ct-sub { margin: 4px 0 0 !important; }
/* The problem: the label sits on its own row so both columns start on the same line */
.ct-intro { grid-template-rows: auto 1fr; align-items: start; row-gap: 8px; }
.ct-intro > .cs-kicker { grid-column: 1 / -1; margin: 0 !important; }
.ct-intro > p { margin: 0; }
.ct-steps { margin: 12px 0 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 8px; }
.ct-steps li { counter-increment: step; display: flex; align-items: center; gap: 12px; font-size: var(--t-body); }
.ct-steps li::before { content: counter(step); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff; font-size: var(--t-sm); font-weight: 600; flex: none; }
.ct-steps a { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--pink-line, #f4b6c8); transition: color .25s, text-decoration-color .25s; }
.ct-steps a:is(:hover, :focus-visible) { color: var(--accent); text-decoration-color: var(--accent); }
.ct-shot { width: 100%; background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
.ct-shot img { width: 100%; height: auto; }
.case-study .ct-shot:hover img { transform: none; }
.ct-page .cs-video { box-shadow: none; border: 0; }
.ct-page .cs-cap { text-transform: none; letter-spacing: 0; text-align: left; padding: 10px 2px 0; font-size: var(--t-sm); line-height: 1.5; color: var(--muted); }
.ct-page .cs-video .video-toggle, .ct-page .cs-video .video-tag { display: none; }
.ct-page .cs-video video { cursor: pointer; }

/* Custom Templates cover: the dialog sits on the page with no box, frame or shadow, like the other covers */
.ct-page .cs-cover-art.ct-cover { aspect-ratio: auto; background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; -webkit-mask-image: none; mask-image: none; display: flex; justify-content: center; }
.ct-page .cs-cover-art.ct-cover:hover { transform: none; }
.ct-page .cs-cover-art.ct-cover img { width: auto; height: auto; max-width: 100%; max-height: 380px; object-fit: contain; }

/* Resume dialog: loading state in the accent colour; tap the bar (or the expand button) to expand the dialog to a full-page view */
.resume-loader { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; border: 4px solid color-mix(in srgb, var(--accent) 22%, transparent); border-top-color: var(--accent); animation: resume-spin .8s linear infinite; transition: opacity .3s ease; }
.resume-stage:not(.is-loading) .resume-loader { opacity: 0; animation: none; }
.resume-stage.is-loading::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--accent) 14%, #fff) 50%, transparent 70%) 0 0 / 220% 100%; animation: resume-shimmer 1.4s ease-in-out infinite; pointer-events: none; }
@keyframes resume-spin { to { transform: rotate(360deg); } }
@keyframes resume-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.preview.preview-resume { transition: width .5s var(--ease); }
.preview.preview-resume.is-expanded { width: min(1180px, calc(100vw - 32px)); }
.preview-resume.is-expanded .preview-panel { max-height: calc(100svh - 24px); }
.preview-resume.is-expanded .resume-stage { --rh: calc(100svh - 190px); }
.resume-bar { cursor: pointer; }
.preview-resume.is-expanded .resume-bar { cursor: default; }
@media (prefers-reduced-motion: reduce) { .resume-loader, .resume-stage.is-loading::after { animation: none; } .resume-stage, .preview.preview-resume { transition: none; } }
.motion-paused .resume-loader, .motion-paused .resume-stage.is-loading::after { animation: none; }
.motion-paused .resume-stage, .motion-paused .preview.preview-resume { transition: none; }

/* Planner Notifications: native tables, process and journey, annotated screens */
.pn-page .cs-chapter > * + * { margin-top: var(--cs-gap); }
.pn-page .cs-wmain > * + *, .pn-page .cs-chapter > div.reveal > * + * { margin-top: var(--cs-gap); }
.pn-page .cs-split { align-items: stretch; }
.pn-page .cs-split > .cs-card { height: 100%; }
.pn-steps, .pn-journey { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--cs-gap); }
.pn-steps { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.pn-steps li { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 20px; background: #fff; box-shadow: 0 2px 6px #66554e14; }
.pn-steps p { margin: 0; font-size: var(--t-body); line-height: 1.5; }
.pn-num { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--pink-soft); color: var(--accent); font-size: var(--t-sm); font-weight: 600; }
.pn-journey { grid-template-columns: repeat(6, minmax(0, 1fr)); counter-reset: pnj; }
.pn-journey li { position: relative; counter-increment: pnj; display: flex; align-items: center; min-height: 84px; padding: 14px 16px; border-radius: 18px; background: #fff; box-shadow: 0 2px 6px #66554e14; font-size: var(--t-sm); font-weight: 500; line-height: 1.35; }
.pn-journey li:nth-child(1) { background: var(--t-3); }
.pn-journey li:nth-child(2) { background: color-mix(in srgb, var(--pink) 12%, var(--t-3)); }
.pn-journey li:nth-child(3) { background: color-mix(in srgb, var(--pink) 24%, var(--t-3)); }
.pn-journey li:nth-child(4) { background: color-mix(in srgb, var(--pink) 36%, var(--t-3)); }
.pn-journey li:nth-child(5) { background: color-mix(in srgb, var(--pink) 48%, var(--t-3)); }
.pn-journey li:nth-child(6) { background: color-mix(in srgb, var(--pink) 60%, var(--t-3)); }
.pn-journey li::before { content: counter(pnj); position: absolute; top: -9px; left: 14px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 11px; font-weight: 600; }
.pn-journey li:not(:last-child)::after { content: "\2192"; position: absolute; right: -15px; top: 50%; transform: translateY(-50%); z-index: 1; color: var(--accent); font-size: 14px; }
.pn-stages .cs-card h4 { margin: 4px 0 10px; }
.pn-need { font-style: italic; color: var(--muted); }
.pn-tablewrap { margin-top: 0; }
.pn-tablewrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pn-table { min-width: 560px; }
.pn-table th, .pn-table td { vertical-align: top; font-size: 14px; line-height: 1.5; }
.pn-table tbody th { font-weight: 600; width: 220px; }
.pn-table tbody th.mc-num { width: 48px; font-weight: 400; color: var(--muted); }
.pn-sub { display: block; margin-top: 4px; font-size: 12px; letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--muted); }
.pn-tag { display: block; width: fit-content; margin-top: 8px; padding: 3px 10px; border-radius: 999px; background: var(--t-1); font-size: 12px; line-height: 1.4; }
.pn-page .pn-ul { margin: 6px 0 0; padding-left: 18px; list-style: disc; }
.pn-page .pn-ul li { list-style: disc; }
.pn-none { color: var(--muted); }
.pn-page .pn-evlist { margin: 0; padding-left: 26px; list-style: decimal; columns: 2; column-gap: 40px; }
.pn-page .pn-evlist li { margin: 0 0 4px; padding-left: 2px; list-style: decimal; break-inside: avoid; }
.pn-evlist li::marker { color: var(--accent); font-weight: 600; font-size: 12px; }
@media (max-width: 700px) { .pn-evlist { columns: 1; } }
.pn-ptable { min-width: 920px; }
.pn-ptable .pn-bad { color: var(--accent); min-width: 200px; }
.pn-ptable .pn-good { color: var(--ink); min-width: 180px; }
.pn-ptable .pn-jtbd { font-weight: 600; min-width: 200px; }
.pn-split { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(18px, 3vw, 36px); align-items: start; }
.pn-problems { margin: 0; }
.pn-page .cs-figure.pn-shot { background: none; border: 0; box-shadow: none; border-radius: 0; overflow: visible; }
.pn-shot .cs-zoom-wrap img { width: 100%; height: auto; }
.pn-page .cs-figure.pn-shot:hover img { transform: none; }
@media (max-width: 1100px) { .pn-journey { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pn-journey li:nth-child(3)::after { display: none; } }
@media (max-width: 820px) { .pn-split { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .pn-journey { grid-template-columns: 1fr; } .pn-journey li::after { display: none; } .pn-journey li { min-height: 0; padding-left: 44px; } .pn-journey li::before { top: 50%; left: 12px; transform: translateY(-50%); } }

/* Planner Notifications: strategy blocks and the urgency x actionability grid */
.pn-lead { margin: 0; font-size: var(--t-body); line-height: 1.55; }
.pn-page .pn-rolelist { margin: 0; }
.pn-intents .cs-card h4 { margin: 4px 0 8px; }
.pn-page .pn-channels, .pn-page .pn-principles { margin: 0; }
.pn-pgrid { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--cs-gap); }
.pn-pcard { position: relative; grid-column: span 3; display: flex; flex-direction: column; gap: 6px; min-height: 170px; padding: 20px 22px 22px; border-radius: 20px; background: #fff; box-shadow: 0 2px 6px #66554e14; }
.pn-pcard:nth-child(n+5) { grid-column: span 4; }
.pn-pnum { display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 0; border-radius: 50%; background: var(--pink-soft); color: var(--accent); font-size: var(--t-sm); font-weight: 600; letter-spacing: 0; }
.pn-pcard h4 { margin: 16px 0 0; font-size: var(--t-h4); letter-spacing: -.01em; }
.pn-pcard p { margin: 0; font-size: var(--t-body); line-height: 1.5; color: var(--muted); }
@media (max-width: 1000px) { .pn-pcard, .pn-pcard:nth-child(n+5) { grid-column: span 6; } .pn-pcard:last-child { grid-column: 1 / -1; } }
@media (max-width: 560px) { .pn-pcard, .pn-pcard:nth-child(n+5) { grid-column: 1 / -1; min-height: 0; } .pn-pnum { margin-bottom: 10px; } }
.pn-split-matrix { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: stretch; }
.pn-split-matrix > div { display: flex; flex-direction: column; }
.pn-page .pn-channels { flex: 1; display: flex; flex-direction: column; margin: 14px 0 34px; padding: 0; list-style: none; counter-reset: pnc; }
.pn-page .pn-channels li { flex: 1; display: flex; align-items: center; gap: 14px; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); font-size: var(--t-h4); counter-increment: pnc; }
.pn-page .pn-channels li:last-child { border-bottom: 1px solid var(--line); }
.pn-page .pn-channels li::before { content: counter(pnc, decimal-leading-zero); position: static; flex: none; width: 24px; height: auto; border-radius: 0; background: none; font-size: 12px; font-weight: 600; letter-spacing: .08em; color: var(--accent); }
.pn-page .pn-channels li::marker { content: none; }
.pn-matrix { margin: 0; }
.pn-matrix-grid { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: ". top ." "left quads right" ". bottom ."; gap: 12px; align-items: center; }
.pn-ax { margin: 0; padding: 0; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; text-align: center; white-space: nowrap; }
.pn-ax::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--accent); vertical-align: 1px; }
.pn-ax-top { grid-area: top; justify-self: center; }
.pn-ax-bottom { grid-area: bottom; justify-self: center; }
.pn-ax-left { grid-area: left; writing-mode: vertical-rl; transform: rotate(180deg); }
.pn-ax-left::before, .pn-ax-right::before { margin-right: 0; margin-bottom: 8px; }
.pn-ax-right { grid-area: right; writing-mode: vertical-rl; }
.pn-quads { grid-area: quads; position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(150px, auto)); gap: 12px; }
.pn-quads::before, .pn-quads::after { content: ""; position: absolute; background: var(--ink); opacity: .5; pointer-events: none; z-index: 1; }
.pn-quads::before { left: 50%; top: -8px; bottom: -8px; width: 2px; transform: translateX(-50%); }
.pn-quads::after { top: 50%; left: -8px; right: -8px; height: 2px; transform: translateY(-50%); }
.pn-quad { position: relative; padding: 18px 18px 16px; border-radius: 20px; background: var(--t-2); }
.pn-q1 { grid-column: 2; grid-row: 1; background: color-mix(in srgb, var(--accent) 14%, #fff); }
.pn-q2 { grid-column: 1; grid-row: 1; background: var(--t-1); }
.pn-q3 { grid-column: 1; grid-row: 2; background: #fff; box-shadow: 0 2px 6px #66554e14; }
.pn-q4 { grid-column: 2; grid-row: 2; background: var(--t-3); }
.pn-roman { display: block; margin-bottom: 8px; font-size: 22px; font-weight: 700; letter-spacing: .04em; color: var(--accent); }
.pn-page .pn-quad ul { margin: 0; padding: 0; list-style: none; font-size: var(--t-body); line-height: 1.5; }
.pn-page .pn-quad li { list-style: none; margin: 0 0 4px; }
.pn-matrix .cs-cap { margin-top: 12px; text-align: center; }
@media (max-width: 820px) { .pn-split-matrix { grid-template-columns: 1fr; } .pn-page .pn-channels { flex: none; margin-bottom: 0; } .pn-page .pn-channels li { padding: 14px 0; } }
@media (max-width: 520px) { .pn-matrix-grid { gap: 8px; } .pn-quads { gap: 8px; } .pn-quad { padding: 12px 12px 10px; } .pn-ax { font-size: 9px; letter-spacing: .1em; } .pn-ax::before { width: 5px; height: 5px; margin-right: 5px; } }
.pn-page .cs-tabs .pn-shot img { width: 100%; height: auto; }
.pn-page .pn-bare .cs-zoom-wrap, .pn-page .pn-bare img { background: none; }
.pn-pgrid-3 .pn-pcard, .pn-pgrid-3 .pn-pcard:nth-child(n+5) { grid-column: span 4; min-height: 0; }
.pn-pgrid-5 .pn-pcard { grid-column: span 4; min-height: 0; }
.pn-pgrid-5 .pn-pcard:nth-child(n+4) { grid-column: span 6; }
@media (max-width: 1000px) { .pn-pgrid-3 .pn-pcard, .pn-pgrid-3 .pn-pcard:nth-child(n+5), .pn-pgrid-5 .pn-pcard, .pn-pgrid-5 .pn-pcard:nth-child(n+4) { grid-column: span 6; } .pn-pgrid-3 .pn-pcard:last-child, .pn-pgrid-5 .pn-pcard:last-child { grid-column: 1 / -1; } }
@media (max-width: 560px) { .pn-pgrid-3 .pn-pcard, .pn-pgrid-5 .pn-pcard, .pn-pgrid-5 .pn-pcard:nth-child(n+4) { grid-column: 1 / -1; } }
.pn-page .cs-figure.pn-teams { width: 80%; max-width: 100%; }
@media (max-width: 700px) { .pn-page .cs-figure.pn-teams { width: 100%; } }
.pn-tint-peach { background: var(--t-1); box-shadow: none; }
.pn-tint-pink { background: var(--t-2); box-shadow: none; }
.pn-tint-blue { background: var(--t-3); box-shadow: none; }
.pn-pcard.pn-tint-peach .pn-pnum, .pn-pcard.pn-tint-pink .pn-pnum, .pn-pcard.pn-tint-blue .pn-pnum { background: #ffffffb3; }
.pn-scn-shots { display: grid; gap: var(--cs-gap); grid-template-columns: minmax(0, 1fr); align-items: start; }
.pn-scn-shots.pn-scn-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pn-scn-shots .cs-figure { width: 100%; }
@media (max-width: 600px) { .pn-scn-shots.pn-scn-2 { grid-template-columns: 1fr; } }
.pn-page .cs-cover-art.cs-cover-card { background: none; border: 0; box-shadow: none; }
.pn-page .cs-cover-art.cs-cover-card::before { display: none; }
.pn-cover-brief { margin-top: clamp(20px, 3vw, 36px); }
.pn-cover-brief .cs-lede { max-width: none; font-size: var(--t-h4); line-height: 1.6; }
.pn-page .cs-cover-visual .cs-cover-art.cs-cover-card { min-height: 0; }
.pn-page .cs-cover .cs-lede { max-width: none; }

/* Ladybug game (home page): floaty bugs you can drag anywhere and click to catch */
.ladybugs { position: absolute; left: 0; top: 0; width: 100%; height: 0; z-index: 4; overflow: clip; pointer-events: none; }
.ladybugs.is-active { z-index: 20; }
.ladybug { position: absolute; width: var(--w, 56px); touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; cursor: grab; pointer-events: auto; }
.ladybug:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 50%; }
.ladybug-drift { position: relative; display: block; animation: bug-drift var(--dd, 18s) ease-in-out var(--dl, 0s) infinite alternate; }
.ladybug img { display: block; width: 100%; height: auto; pointer-events: none; -webkit-user-drag: none; rotate: var(--r, 0deg); transition: scale .25s var(--ease), filter .25s; animation: bug-bob var(--bd, 4s) ease-in-out var(--bl, 0s) infinite; }
.ladybug:hover img { scale: 1.1; }
.ladybug.is-dragging img { scale: 1.18; filter: drop-shadow(0 12px 8px #3a1a1040); }
.ladybug.is-dragging .ladybug-drift, .ladybug.is-dragging img { animation-play-state: paused; }
/* "Tap me!" tooltip */
.ladybug-drift::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); padding: 6px 11px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: .01em; white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, 5px); transition: opacity .2s, transform .3s var(--ease); }
.ladybug:is(:hover, :focus-visible) .ladybug-drift::after { opacity: 1; transform: translate(-50%, 0); }
.ladybug.is-dragging .ladybug-drift::after { opacity: 0; }
@keyframes bug-drift { from { transform: translate(0, 0); } to { transform: translate(var(--dx, 16px), var(--dy, -14px)); } }
@keyframes bug-bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-7px) rotate(3deg); } }
html.has-flower-cursor .ladybug, html.has-flower-cursor .ladybug * { cursor: grab !important; }
html.has-flower-cursor body.is-bug-drag, html.has-flower-cursor body.is-bug-drag * { cursor: grabbing !important; }
body.is-bug-drag { user-select: none; -webkit-user-select: none; }
body.over-bug .flower-cursor, body.is-bug-drag .flower-cursor { opacity: 0 !important; }
.bug-fly { position: fixed; z-index: 2147483646; margin: 0; pointer-events: none; transform-origin: 50% 50%; }

/* The tracker: a floaty pill on the left with the caught ladybugs stacked in circles.
   To move it, change --bug-hud-left and --bug-hud-top (the pill is centred on --bug-hud-top). */
.bug-hud { --bug-hud-left: 16px; --bug-hud-top: 50%; --bug-hud-bottom: 14px;
  position: fixed; z-index: 7; left: var(--bug-hud-left); top: var(--bug-hud-top); display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 9px; border: 1px solid #fff; border-radius: 999px; background: linear-gradient(145deg, #ffffff, #f6eeea); box-shadow: var(--shadow); color: var(--ink); opacity: 0; transform: translate(-16px, -50%); pointer-events: none; transition: opacity .5s var(--ease), transform .5s var(--ease); }
.bug-hud.is-in { opacity: 1; transform: translate(0, -50%); pointer-events: auto; }
.bug-hud-count { font-size: 12px; font-weight: 600; letter-spacing: .06em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.bug-hud.is-won .bug-hud-count { color: var(--accent); }
.bug-hud-slots { display: flex; flex-direction: column; gap: 8px; }
.bug-hud-slots i { display: grid; place-items: center; width: 34px; height: 34px; border: 1.5px dashed #8a8579; border-radius: 50%; background: #fffdf9; transition: border-color .3s, background .3s, box-shadow .3s; }
.bug-hud-slots i.is-filled { border-style: solid; border-color: transparent; background: #fffdf9; box-shadow: 0 2px 8px #66554e1f; }
.bug-hud-slots img { width: 78%; height: 78%; object-fit: contain; animation: bug-slot-pop .55s var(--ease); }
@keyframes bug-slot-pop { 0% { scale: .3; } 55% { scale: 1.25; } 100% { scale: 1; } }
.bug-hud-again { display: grid; place-content: center; width: 54px; height: 54px; margin-top: 2px; padding: 0; border: 0; border-radius: 50%; background: var(--ink); color: #fff; font: inherit; font-size: 11px; font-weight: 600; line-height: 1.15; text-align: center; cursor: pointer; box-shadow: 0 6px 14px -8px #242620; transition: transform .25s var(--ease), background .25s; }
.bug-hud-again span { display: block; }
.bug-hud-again[hidden] { display: none; }
.bug-hud-again:hover { transform: scale(1.05); background: var(--accent); }
.bug-hud-again:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.bug-note { position: absolute; left: calc(100% + 10px); top: 50%; padding: 8px 14px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 13px; line-height: 1; white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-6px, -50%); transition: opacity .3s, transform .4s var(--ease); }
.bug-note.is-on { opacity: 1; transform: translate(0, -50%); }
@media (max-width: 700px) {
  .bug-hud { left: 50%; top: auto; bottom: var(--bug-hud-bottom); flex-direction: row; gap: 8px; padding: 7px 8px 7px 12px; transform: translate(-50%, 14px); }
  .bug-hud.is-in { transform: translate(-50%, 0); }
  .bug-hud-slots { flex-direction: row; gap: 6px; }
  .bug-hud-slots i { width: 26px; height: 26px; }
  .bug-hud-again { width: 46px; height: 46px; margin: 0; font-size: 10px; }
  .bug-note { left: 50%; top: auto; bottom: calc(100% + 8px); transform: translate(-50%, 6px); }
  .bug-note.is-on { transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) { .ladybug-drift, .ladybug img { animation: none; } .bug-hud, .bug-note, .ladybug-drift::after { transition: none; } .bug-hud-slots img { animation: none; } }
.motion-paused .ladybug-drift, .motion-paused .ladybug img { animation: none; }
.bug-hud::after { content: "Catch them bugs!"; position: absolute; left: calc(100% + 10px); top: 50%; padding: 7px 12px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-6px, -50%); transition: opacity .2s, transform .3s var(--ease); }
.bug-hud:is(:hover, :focus-within):not(.has-note)::after { opacity: 1; transform: translate(0, -50%); }
@media (max-width: 700px) { .bug-hud::after { left: 50%; top: auto; bottom: calc(100% + 8px); transform: translate(-50%, 6px); } .bug-hud:is(:hover, :focus-within):not(.has-note)::after { transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .bug-hud::after { transition: none; } }
.bug-hud { transition: opacity .5s var(--ease), transform .5s var(--ease), scale .4s var(--ease), translate .4s var(--ease), box-shadow .4s var(--ease), background .3s; }
.bug-hud.is-in:is(:hover, :focus-within) { scale: 1.06; translate: 0 -4px; background: linear-gradient(145deg, #ffffff, color-mix(in srgb, var(--pink) 22%, white)); box-shadow: var(--shadow), 0 20px 34px -18px #fe2b6766; }
.bug-hud.is-in:is(:hover, :focus-within) .bug-hud-count { color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .bug-hud { transition: none; } .bug-hud.is-in:is(:hover, :focus-within) { scale: 1; translate: none; } }
/* Password screen: clear way back, top left */
.gate-topback { position: absolute; top: 20px; left: 20px; background: #fffdf9; box-shadow: 0 2px 8px #66554e1f; font-weight: 500; color: var(--ink); }
.gate-topback:is(:hover, :focus-visible) { color: var(--accent); }
.gate-topback:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 600px) { .gate-topback { top: 14px; left: 14px; } }