/* Get Key Solutions v5: v4's calm base (off-white, near-black, KEY purple) plus a few crafted moments. See DESIGN.md.
   Built into site-v5/assets/css/site.css by tools/build.mjs. */
@font-face { font-family: "Instrument Sans"; src: url(../fonts/instrument-sans-latin.woff2) format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url(../fonts/instrument-serif-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url(../fonts/instrument-serif-latin-400-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
/* Metric-matched local fallbacks (from v2/v3), so the swap to the web fonts does not move the layout. */
@font-face { font-family: "GKS Sans Fallback"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Arimo"), local("Roboto"); size-adjust: 101.11%; ascent-override: 95.94%; descent-override: 24.73%; line-gap-override: 0%; }
@font-face { font-family: "GKS Serif Fallback"; src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Liberation Serif"), local("Tinos"), local("Noto Serif"); size-adjust: 82.95%; ascent-override: 119.34%; descent-override: 37.37%; line-gap-override: 0%; }
@font-face { font-family: "GKS Serif Fallback"; font-style: italic; src: local("Times New Roman Italic"), local("TimesNewRomanPS-ItalicMT"), local("Liberation Serif Italic"), local("Tinos Italic"), local("Noto Serif Italic"); size-adjust: 82.95%; ascent-override: 119.34%; descent-override: 37.37%; line-gap-override: 0%; }

:root {
  color-scheme: light;
  --bg: #fbfaf7;
  --card: #ffffff;
  --soft: #f4f2f7;
  --ink: #17141f;
  --ink-2: #4a4556;
  --line: #e6e2ea;
  --accent: #7754d6;
  --accent-dark: #5a3cb5;
  --accent-soft: #efeafc;
  --lime: #cfed9b;
  --deep: #15111f;
  --on-deep: #cbc5d8;
  --gutter: 16px;
  --max: 1160px;
  --header: 60px;
  --font: "Instrument Sans", "GKS Sans Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --serif: "Instrument Serif", "GKS Serif Fallback", ui-serif, Georgia, "Times New Roman", serif;
  /* layered shadows: a crisp contact shadow plus a soft, tinted spread */
  --sh-card: 0 1px 2px rgba(23, 20, 31, 0.05), 0 4px 12px -4px rgba(23, 20, 31, 0.07), 0 18px 40px -24px rgba(40, 24, 90, 0.18);
  --sh-device: 0 2px 4px rgba(23, 20, 31, 0.10), 0 16px 32px -14px rgba(40, 24, 90, 0.35), 0 44px 80px -36px rgba(40, 24, 90, 0.45);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (min-width: 600px) { :root { --gutter: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 18px/1.6 var(--font); overflow-wrap: break-word; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { margin: 0; line-height: 1.15; text-wrap: balance; }
h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; }
h3 { font-weight: 650; letter-spacing: -0.015em; }
h1 em, h2 em { font-style: italic; color: var(--accent); }
p, ul, ol, dl, dd, figure { margin: 0; }
img, picture, video { display: block; max-width: 100%; }
a { color: var(--accent-dark); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 50; background: var(--ink); color: #fff; padding: 12px 16px; border-radius: 10px; text-decoration: none; font-weight: 600; }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.icon { width: 20px; height: 20px; flex: none; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 999px; font: 600 17px/1.2 var(--font); text-decoration: none; text-align: center; transition: background-color 0.2s, box-shadow 0.2s, transform 0.2s var(--ease); }
.btn-main { background: var(--accent); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 1px 2px rgba(40, 20, 100, 0.25), 0 10px 22px -10px rgba(119, 84, 214, 0.75); }
.btn-main:hover { background: var(--accent-dark); text-decoration: none; }
.btn-big { min-height: 58px; padding: 0 28px; font-size: 18px; }
.btn-sm { min-height: 44px; padding: 0 16px; font-size: 16px; }
.btn-call { border: 1.5px solid var(--accent); color: var(--accent-dark); background: #fff; }
.btn-call:hover { background: var(--accent-soft); text-decoration: none; }
@media (hover: hover) { .btn:hover { transform: translateY(-1px); } }

/* ---------- header ---------- */
/* solid on purpose: a see-through header turned grey over the dark Example sites band */
.nav { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--line); }
.nav-in { display: flex; align-items: center; gap: 8px; height: var(--header); max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.brand { display: inline-flex; align-items: center; gap: 9px; margin-right: auto; min-height: 44px; color: var(--ink); text-decoration: none; font-weight: 650; font-size: 16px; letter-spacing: -0.01em; white-space: nowrap; }
.brand-mark { width: 30px; height: 30px; flex: none; }
.nav-links { display: none; }
.nav-text .icon { width: 18px; height: 18px; }
.menu { position: static; }
.menu-btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: #fff; cursor: pointer; list-style: none; }
.menu-btn::-webkit-details-marker { display: none; }
.menu-ic { display: grid; gap: 4px; width: 18px; }
.menu-ic i { display: block; height: 2px; border-radius: 2px; background: var(--ink); }
.menu[open] .menu-btn { background: var(--soft); }
.menu-panel { position: absolute; left: 0; right: 0; top: var(--header); background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 12px 24px rgba(23, 20, 31, 0.08); padding: 8px var(--gutter) 16px; display: grid; }
.menu-panel a { display: flex; align-items: center; min-height: 52px; color: var(--ink); text-decoration: none; font-size: 18px; font-weight: 550; border-bottom: 1px solid var(--line); }
.menu-panel a:last-child { border-bottom: 0; }
@media (max-width: 374px) {
  /* the smallest phones keep the word "Text" (an icon alone is unclear) and drop the icon and "Joe" */
  .nav-text { padding: 0 14px; }
  .nav-text .icon, .nav-text .nt-joe { display: none; }
  .brand { font-size: 15px; gap: 8px; }
  .brand-mark { width: 28px; height: 28px; }
}
@media (min-width: 1100px) {
  .nav-links { display: flex; gap: 2px; margin-right: 12px; }
  .nav-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 11px; color: var(--ink-2); text-decoration: none; font-size: 16px; font-weight: 550; border-radius: 10px; }
  .nav-links a:hover { color: var(--ink); background: var(--soft); }
  .menu { display: none; }
}

/* ---------- sections, shared ---------- */
main > section { padding: 56px 0; }
main > section + section { border-top: 1px solid var(--line); }
main > .work, main > .work + section { border-top: 0; }
@media (min-width: 960px) { main > section { padding: 112px 0; } }
.sec-head { max-width: 36em; margin-bottom: 32px; }
.sec-head h2, .joe h2, .contact h2 { font-size: clamp(2.1rem, 8vw, 3.1rem); line-height: 1.05; }
.sec-lede { margin-top: 12px; color: var(--ink-2); font-size: 18px; }
.tag { display: inline-block; padding: 3px 9px; border-radius: 6px; background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.4; }

/* ---------- 1. hero ---------- */
.hero { position: relative; overflow: hidden; padding: 24px 0 56px; }
.hero-grid { display: grid; gap: 44px; }
.hero-copy { max-width: 34em; }
.eyebrow { color: var(--ink-2); font-size: 15px; font-weight: 600; letter-spacing: 0.01em; }
.hero h1 { margin-top: 10px; font-size: clamp(2.6rem, 11vw, 4.6rem); line-height: 1; letter-spacing: -0.02em; }
.lead { margin-top: 14px; font-size: 19px; line-height: 1.5; }
.also { margin-top: 12px; color: var(--ink-2); font-size: 17px; line-height: 1.5; max-width: 30em; }
.hero-acts { display: grid; gap: 10px; margin-top: 22px; max-width: 420px; }
.hero-acts .btn { width: 100%; }
@media (min-width: 600px) { .hero-acts { display: flex; flex-wrap: wrap; max-width: none; } .hero-acts .btn { width: auto; } }
.call { margin-top: 8px; color: var(--ink-2); font-size: 16px; line-height: 1.5; max-width: 30em; }
.next { margin-top: 16px; color: var(--ink-2); font-size: 16px; line-height: 1.5; max-width: 30em; }
@media (max-height: 700px) and (max-width: 599px) {
  .hero { padding-top: 18px; }
  .hero h1 { font-size: clamp(2.35rem, 10.4vw, 2.9rem); }
  .lead { margin-top: 10px; font-size: 18px; }
  .also { margin-top: 10px; font-size: 16px; }
  .hero-acts { margin-top: 16px; }
}

/* the stage: a made-up barbershop on a laptop and a phone (images; the words live in the caption) */
.stage { position: relative; isolation: isolate; width: 100%; max-width: 640px; margin: 0 auto; }
.devices { position: relative; padding: 0 0 11% 4%; }
.devices::before { content: ""; position: absolute; z-index: -1; left: -12%; right: -12%; top: -14%; bottom: -8%; background: radial-gradient(closest-side, rgba(119, 84, 214, 0.20), rgba(119, 84, 214, 0.06) 55%, rgba(119, 84, 214, 0)); }

.laptop { position: relative; width: 86%; }
.lid { position: relative; padding: 2.4% 2.4% 3%; border-radius: 16px 16px 6px 6px; background: linear-gradient(180deg, #2d2938 0%, #16131d 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.14), var(--sh-device); }
.lid::before { content: ""; position: absolute; top: 0.9%; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #3d3949; box-shadow: inset 0 0 0 1px #55506a; }
.laptop .scr { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 4px; background: #ecebef; }
.base { position: relative; height: 0; padding-top: 3.4%; margin: 0 -6%; border-radius: 3px 3px 16px 16px / 3px 3px 100% 100%; background: linear-gradient(180deg, #f0eef4 0%, #d3cfdb 45%, #a39eae 100%); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 14px 22px -12px rgba(23, 20, 31, 0.45); }
.base::before { content: ""; position: absolute; top: 0; left: 50%; width: 15%; height: 40%; transform: translateX(-50%); border-radius: 0 0 9px 9px; background: linear-gradient(180deg, #bdb8c6, #cfcad6); }

.phone { position: relative; padding: 3.4%; border-radius: 17% / 8%; background: linear-gradient(150deg, #3a3546 0%, #17141f 45%, #0e0c13 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10), inset 0 1px 1px rgba(255, 255, 255, 0.18), var(--sh-device); }
.phone::before { content: ""; position: absolute; z-index: 3; top: 2.7%; left: 50%; width: 30%; height: 2.5%; transform: translateX(-50%); border-radius: 99px; background: #050407; }
.phone-scr { position: relative; aspect-ratio: 600 / 1267; overflow: hidden; border-radius: 13.5% / 6.4%; background: #ecebef; }
.phone-hero { position: absolute; right: 0; bottom: 0; width: 25%; }

.scr picture, .phone-scr picture { position: absolute; inset: 0; }
.scr img, .phone-scr img { width: 100%; height: 100%; object-fit: cover; }
.s-new, .s-in { position: absolute; inset: 0; }
.s-new { overflow: hidden; }
.scan { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; opacity: 0; pointer-events: none; background: linear-gradient(to top, rgba(207, 237, 155, 0.5), rgba(207, 237, 155, 0)); }
.scan::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #e4f8c2; box-shadow: 0 0 8px 1px rgba(207, 237, 155, 0.95), 0 0 22px 4px rgba(207, 237, 155, 0.5); }

.stage-cap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px; margin-top: 22px; color: var(--ink-2); font-size: 15px; font-weight: 600; text-align: center; }

/* phones: the "Send your business name..." line moves below the devices (visual order only, same words), so the first
   screen shows the offer, the two buttons, the Molly line and the top of the laptop */
@media (max-width: 599px) {
  .hero-grid { display: flex; flex-direction: column; gap: 0; }
  .hero-copy { display: contents; }
  .stage { order: 1; margin-top: 24px; }
  .next { order: 2; margin-top: 28px; }
}
@media (min-width: 960px) {
  .hero { padding: 64px 0 104px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); align-items: center; gap: 56px; }
  .lead { font-size: 21px; }
  .stage { margin: 0; max-width: none; }
  .stage-cap { justify-content: flex-start; padding-left: 4%; }
}

/* ---------- 2. what I do: three cards and the plaque photo ---------- */
.cards { display: grid; gap: 16px; }
.card { display: flex; flex-direction: column; gap: 10px; background: var(--card); border: 1px solid rgba(23, 20, 31, 0.06); border-radius: 22px; padding: 24px 22px 22px; box-shadow: var(--sh-card); }
.card h3 { font-size: 23px; }
.card p { color: var(--ink-2); }
.card-ic { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 6px; border-radius: 14px; background: var(--accent-soft); color: var(--accent-dark); box-shadow: inset 0 0 0 1px rgba(119, 84, 214, 0.12); }
.card-ic .icon { width: 24px; height: 24px; }
.new { display: inline-block; margin-left: 4px; padding: 2px 9px 3px; border-radius: 99px; background: var(--accent-soft); color: var(--accent-dark); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; vertical-align: 3px; }
.card-link { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; align-self: flex-start; }

/* the square photo, cropped to 4:3: rows 11% to 86% of it (the BOOK NOW words to "Tap your phone here") */
.plq-photo { position: relative; overflow: hidden; margin: -24px -22px 12px; border-radius: 21px 21px 0 0; aspect-ratio: 4 / 3; background: #e8e6e3; }
.plq-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 44%; }
/* the tap rings sit on the plaque's own tap mark: 35% across and 63% down the square photo, so 69.3% down the crop */
.rings { position: absolute; left: 35%; top: 69.3%; width: 36%; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; }
.rings i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(207, 237, 155, 0.95); box-shadow: 0 0 14px rgba(207, 237, 155, 0.45), inset 0 0 10px rgba(207, 237, 155, 0.25); opacity: 0; transform: scale(0.3); }

@media (min-width: 600px) {
  .cards { grid-template-columns: 1fr 1fr; grid-template-areas: "web plq" "loy plq"; gap: 20px; }
  .card-web { grid-area: web; } .card-plq { grid-area: plq; } .card-loy { grid-area: loy; }
}
@media (min-width: 960px) {
  .cards { grid-template-columns: 1.12fr 0.88fr; }
  .card { padding: 30px 30px 26px; }
  .plq-photo { margin: -30px -30px 14px; }
}

/* ---------- 3. how a website starts ---------- */
.steps { list-style: none; padding: 0; display: grid; gap: 28px; counter-reset: step; max-width: 40em; }
.steps li { position: relative; padding-left: 62px; counter-increment: step; }
.steps li::before { content: counter(step); position: absolute; z-index: 1; left: 0; top: -2px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; box-shadow: inset 0 0 0 2px var(--accent), 0 6px 14px -6px rgba(119, 84, 214, 0.7); font-weight: 650; font-size: 18px; }
/* the line from one number to the next */
.steps li:not(:last-child)::after { content: ""; position: absolute; left: 21px; top: 48px; bottom: -24px; width: 2px; border-radius: 2px; background: rgba(119, 84, 214, 0.45); transform-origin: 50% 0; }
.steps h3 { font-size: 21px; margin-bottom: 6px; }
.steps p { color: var(--ink-2); }
@media (min-width: 960px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: 32px; max-width: none; }
  .steps li { padding-left: 0; padding-top: 66px; }
  .steps li:not(:last-child)::after { left: 56px; right: -20px; top: 21px; bottom: auto; width: auto; height: 2px; transform-origin: 0 50%; }
}

/* ---------- 4. what you get ---------- */
.checks { list-style: none; padding: 0; display: grid; gap: 18px; max-width: 40em; }
.checks li { position: relative; padding-left: 40px; color: var(--ink-2); }
.checks li::before { content: ""; position: absolute; left: 0; top: 3px; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); box-shadow: inset 0 0 0 1px rgba(119, 84, 214, 0.14); }
.checks li::after { content: ""; position: absolute; left: 9.5px; top: 8.5px; width: 6px; height: 11px; border: solid var(--accent-dark); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.checks b { color: var(--ink); font-weight: 650; }
@media (min-width: 960px) { .get-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 64px; } .get .sec-head { margin-bottom: 0; } }

/* ---------- 5. meet Joe + answers ---------- */
.joe-grid { display: grid; gap: 40px; }
.joe-card { display: grid; gap: 14px; max-width: 36em; align-content: start; }
.joe-card h2 { margin-bottom: 4px; }
.joe-photo { display: block; width: min(320px, 70vw); }
.joe-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 18px; box-shadow: 0 1px 2px rgb(23 20 31 / .08), 0 12px 32px -12px rgb(23 20 31 / .28); }
.joe-card p { color: var(--ink-2); }
.joe-card .sign { color: var(--ink); font-weight: 650; }
.faq h2 { margin-bottom: 8px; }
.faq dl { max-width: 40em; }
.faq dl > div { padding: 20px 0; border-bottom: 1px solid var(--line); }
.faq dl > div:last-child { border-bottom: 0; }
.faq dt { font-weight: 650; font-size: 19px; line-height: 1.35; }
.faq dd { margin-top: 6px; color: var(--ink-2); }
@media (min-width: 960px) { .joe-grid { grid-template-columns: 0.8fr 1.2fr; gap: 64px; align-items: start; } }

/* ---------- 6. contact ---------- */
.contact-card { display: grid; gap: 24px; padding: 30px 22px; border-radius: 28px; background: linear-gradient(140deg, #f1ecfd 0%, #f8f6fc 55%, #ffffff 100%); border: 1px solid rgba(119, 84, 214, 0.14); box-shadow: var(--sh-card); }
.contact-main { display: grid; gap: 14px; max-width: 32em; align-content: start; }
.contact-main .btn-big { margin-top: 8px; width: 100%; max-width: 420px; justify-self: start; }
.lines { display: grid; gap: 20px; }
.lines dt { font-size: 15px; font-weight: 650; color: var(--ink); }
.lines dd { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 4px; }
.lines dd a { font-weight: 600; font-size: 18px; display: inline-flex; align-items: center; min-height: 44px; }
.lines dd span { flex-basis: 100%; color: var(--ink-2); font-size: 16px; line-height: 1.5; }
@media (min-width: 960px) { .contact-card { grid-template-columns: 1fr 1fr; padding: 56px; gap: 56px; } }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--line); padding: 32px 0 48px; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.foot .wrap { display: grid; gap: 8px; }
.foot-brand { display: flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 650; font-size: 16px; margin-bottom: 4px; }
.foot-brand .brand-mark { width: 24px; height: 24px; }

/* ---------- 404 ---------- */
.nf { min-height: 100svh; display: grid; align-items: center; padding: 48px 0; }
.nf-wrap { display: grid; gap: 20px; max-width: 36em; }
.nf h1 { font-size: clamp(2.4rem, 9vw, 3.4rem); }
.nf p { color: var(--ink-2); }
.nf-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-line { border: 1.5px solid var(--line); color: var(--ink); background: #fff; }

/* the smallest phones: the long button keeps one line */
@media (max-width: 359px) { .btn-big { padding: 0 14px; font-size: 17px; } .btn-big .icon { display: none; } }

/* ---------- example sites: the page's one deep-ink band ---------- */
.work { position: relative; isolation: isolate; overflow: hidden; background: var(--deep); color: #fff; }
.work::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(70% 55% at 12% 0%, rgba(119, 84, 214, 0.38), rgba(119, 84, 214, 0) 70%),
  radial-gradient(55% 50% at 92% 100%, rgba(119, 84, 214, 0.24), rgba(119, 84, 214, 0) 70%); }
.work::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0)); }
.work .sec-head h2 { color: #fff; }
.work .sec-lede { color: var(--on-deep); }
.work :focus-visible { outline-color: #fff; }

/* phones: one sideways row (the page's one optional gesture); the first example is always fully in view */
.work-row { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.work-row::-webkit-scrollbar { display: none; }
.work-row:focus-visible { outline: 3px solid #fff; outline-offset: -3px; border-radius: 12px; }
.work-list { list-style: none; margin: 0; width: max-content; display: grid; grid-auto-flow: column; grid-auto-columns: min(250px, 64vw); gap: 20px; padding: 8px var(--gutter) 28px; }
.ex { scroll-snap-align: start; }
.ex figure { display: grid; gap: 18px; }
.ex .phone { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.2), 0 30px 60px -26px rgba(0, 0, 0, 0.85), 0 12px 24px -12px rgba(0, 0, 0, 0.6), 0 0 60px -20px rgba(119, 84, 214, 0.45); }
.ex figcaption { display: grid; gap: 4px; justify-items: start; }
.tag-lime { background: var(--lime); color: var(--ink); }
.ex strong { margin-top: 6px; color: #fff; font-size: 19px; font-weight: 650; letter-spacing: -0.01em; }
.ex figcaption > span:last-child { color: var(--on-deep); font-size: 16px; line-height: 1.45; }
.work-hint { padding: 0 var(--gutter); color: var(--on-deep); font-size: 15px; }

@media (min-width: 768px) {
  .work .sec-head { margin-left: auto; margin-right: auto; text-align: center; }
  .work-row { overflow: visible; }
  .work-list { width: 100%; max-width: var(--max); margin: 0 auto; grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding: 12px var(--gutter) 0; }
  .ex figure { max-width: 260px; margin: 0 auto; }
  .work-hint { display: none; }
}

/* ---------- motion: the three moments, and nothing else (DESIGN.md lines 3-5) ----------
   html.mo is set by site.js only when motion is welcome. Without it (no JS, or reduced motion) nothing below applies
   and every moment shows its finished state. Each moment plays once, by itself, when site.js marks it .play (half of it
   on screen), lasts under 5 s and moves only transform and opacity, so it runs on the compositor.
   Nothing is tied to scrolling: the scroll-linked 16 px drift was removed on 2026-09-29 (it was a fourth motion), and
   tools/rules.mjs now fails the build on any scroll-linked animation or any animation outside a .play moment. */
@media (prefers-reduced-motion: no-preference) {
  /* Motion 1, hero: old site to new site. Before it plays, the new screen waits above its window. */
  .mo .stage:not(.play) .s-new { transform: translateY(-100%); }
  .mo .stage:not(.play) .s-in { transform: translateY(100%); }
  .mo .stage.play .s-new { animation: wipe-a 1.9s cubic-bezier(0.65, 0, 0.35, 1) 0.25s both; }
  .mo .stage.play .s-in { animation: wipe-b 1.9s cubic-bezier(0.65, 0, 0.35, 1) 0.25s both; }
  .mo .stage.play .scan { animation: scan 1.9s linear 0.25s both; }
  .mo .stage.play .phone-hero .s-new, .mo .stage.play .phone-hero .s-in, .mo .stage.play .phone-hero .scan { animation-duration: 1.55s; animation-delay: 0.8s; }

  /* Motion 2, KEY plaques: three soft rings from the tap mark, one after another, then still (4.2 s). */
  .mo .plq-photo.play .rings i { animation: ripple 2.4s cubic-bezier(0.25, 0.6, 0.3, 1) both; }
  .mo .plq-photo.play .rings i:nth-child(2) { animation-delay: 0.9s; }
  .mo .plq-photo.play .rings i:nth-child(3) { animation-delay: 1.8s; }

  /* Motion 3, how a website starts: the line draws 1 to 2 to 3 and each number fills as it arrives (1.6 s). */
  .mo .steps:not(.play) li::before { background: var(--bg); color: var(--accent-dark); box-shadow: inset 0 0 0 2px var(--accent); }
  .mo .steps:not(.play) li::after { transform: scaleY(0); }
  .mo .steps.play li::before { animation: fill 0.45s var(--ease) both; }
  .mo .steps.play li:nth-child(2)::before { animation-delay: 0.62s; }
  .mo .steps.play li:nth-child(3)::before { animation-delay: 1.24s; }
  .mo .steps.play li::after { animation: grow-y 0.55s cubic-bezier(0.5, 0, 0.3, 1) 0.1s both; }
  .mo .steps.play li:nth-child(2)::after { animation-delay: 0.72s; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 960px) {
  .mo .steps:not(.play) li::after { transform: scaleX(0); }
  .mo .steps.play li::after { animation-name: grow-x; }
}
@keyframes wipe-a { from { transform: translateY(-100%); } to { transform: none; } }
@keyframes wipe-b { from { transform: translateY(100%); } to { transform: none; } }
@keyframes scan { 0% { opacity: 0; } 10% { opacity: 1; } 84% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ripple { 0% { opacity: 0; transform: scale(0.3); } 14% { opacity: 0.95; } 100% { opacity: 0; transform: scale(1.3); } }
@keyframes fill {
  from { background: var(--bg); color: var(--accent-dark); box-shadow: inset 0 0 0 2px var(--accent); transform: scale(0.86); }
  to { background: var(--accent); color: #fff; box-shadow: inset 0 0 0 2px var(--accent), 0 6px 14px -6px rgba(119, 84, 214, 0.7); transform: none; }
}
@keyframes grow-y { from { transform: scaleY(0); } to { transform: none; } }
@keyframes grow-x { from { transform: scaleX(0); } to { transform: none; } }