/* Landing page (2026-11-07, live). Loaded by index.html only.
   After dmcg.co and studio portfolios: the work leads, one project per stage; type and chrome stay small and quiet; results are
   shown as numbers; wide margins. Brand: Cursor's palette (ground #f7f7f4, ink #26251e, inks at 60/40/10%, warm grey cards)
   in Google Sans, people in black and white, JK.2026 sign-off. Laws of UX: the case studies are the two largest targets and come
   first (Von Restorff, serial position); one control per job (Contact in the bar and in the footer only); dialogs for the two
   projects without pages. */

:root {
  --bg: #f7f7f4; --ink: #26251e; --ink-2: rgba(38, 37, 30, .6); --ink-3: rgba(38, 37, 30, .42); --line: rgba(38, 37, 30, .1);
  --card: #ebeae5; --card-2: #e6e5e0;
  --pad: clamp(20px, 3.2vw, 48px); --gap: clamp(16px, 2vw, 28px);
  --font: 'Google Sans', system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; color-scheme: light; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body.lp { margin: 0; background: var(--bg); color: var(--ink); font: 400 1rem/1.5 var(--font); -webkit-font-smoothing: antialiased; }
.lp :is(h1, h2, h3, p, figure, blockquote) { margin: 0; }
.lp a { color: inherit; text-decoration: none; }
.lp button { font: inherit; color: inherit; }
.lp :is(a, button, [tabindex]):focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.lp img, .lp video { display: block; max-width: 100%; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- top bar: name left, three links right; quiet until scrolled ---------- */
.lp-top { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 var(--pad);
  background: rgba(247, 247, 244, .82); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); }
.lp-name { font: 500 .9375rem/1 var(--font); letter-spacing: -.01em; }
.lp-nav { display: flex; align-items: center; gap: 4px; }
.lp-nav > a:not(.lp-btn) { display: inline-flex; align-items: center; height: 36px; padding: 0 12px; border-radius: 999px; font: 400 .9375rem/1 var(--font); color: var(--ink-2); transition: color .15s, background .15s; }
.lp-nav > a:not(.lp-btn):hover { color: var(--ink); background: rgba(38, 37, 30, .05); }
.lp-btn { display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 16px; margin-left: 8px; border-radius: 999px; background: var(--ink); color: var(--bg) !important;
  font: 500 .9375rem/1 var(--font); transition: background .15s; }
.lp-btn:hover { background: #3b3a33; }

/* ---------- opening: James's intro at display size, the role in the corner ---------- */
.lp-hero { position: relative; min-height: calc(100svh - 64px); display: flex; flex-direction: column; justify-content: center; padding: 6vh var(--pad) 96px; }
.lp-intro { max-width: 658px; font: 400 1.625rem/1.25 var(--font); letter-spacing: -.0125em; text-wrap: balance; }   /* = cursor.com/home h1 (26px/32.5px, −0.325px, 658px), measured 2026-11-08 */
@media (max-width: 599.98px) { .lp-intro { font-size: 1.375rem; } }
.lp-corner { position: absolute; left: var(--pad); bottom: 32px; font: 400 .9375rem/1 var(--font); color: var(--ink-2); }

/* ---------- work ---------- */
.lp-work { padding: 0 var(--pad); }
.lp-label { padding: 0 0 20px; margin-bottom: var(--gap); border-bottom: 1px solid var(--line); font: 400 .9375rem/1 var(--font); color: var(--ink-2); }
.lp-proj + .lp-proj, .lp-proj + .lp-pair { margin-top: clamp(56px, 8vw, 120px); }
.lp-link { display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
.lp-stage { position: relative; display: grid; place-items: center; overflow: hidden; border-radius: 16px; background: var(--card); aspect-ratio: 16 / 9; }
.lp-stage img { width: 84%; height: 84%; object-fit: contain; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.lp-vid { background: #f0efeb; }
.lp-vid video { width: 100%; height: 100%; object-fit: cover; }
.lp-link:hover .lp-stage img { transform: scale(1.025); }

/* caption row: name + chips | the one line | the result */
.lp-cap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr); gap: 24px; align-items: start; padding-top: 20px; }
.lp-t { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.lp-t h3 { font: 500 1.125rem/1.3 var(--font); letter-spacing: -.01em; margin-right: 4px; }
.lp-link:hover .lp-t h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.lp-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--ink); color: var(--bg); font: 500 .75rem/1 var(--font); }
.lp-chip-o { background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 1px rgba(38, 37, 30, .2); }
.lp-s { max-width: 46ch; font: 400 1.0625rem/1.5 var(--font); color: var(--ink-2); }
.lp-m { justify-self: end; text-align: right; }
.lp-m b { display: block; font: 400 clamp(2.25rem, 3.6vw, 3.5rem)/1 var(--font); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.lp-m span { display: block; margin-top: 8px; font: 400 .875rem/1.3 var(--font); color: var(--ink-2); }

/* the two projects without pages, side by side */
.lp-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.lp-pair .lp-stage { aspect-ratio: 4 / 3; }
.lp-pair .lp-stage img { width: 78%; height: 78%; }
.lp-pair .lp-proj + .lp-proj { margin-top: 0; }
/* caption in two columns: name over the line on the left, the result on the right */
.lp-pair .lp-cap { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr; row-gap: 8px; }
.lp-pair .lp-s { grid-column: 1; grid-row: 2; }
.lp-pair .lp-m { grid-column: 2; grid-row: 1 / 3; }

/* ---------- one quote at a time ---------- */
.lp-quote { padding: clamp(96px, 14vw, 200px) var(--pad); }
.lp-quote figure { display: flex; flex-direction: column; justify-content: center; max-width: min(880px, 100%); min-height: clamp(220px, 22vw, 300px); margin: 0 auto; text-align: center; outline-offset: 12px; }
.lp-quote blockquote { font: 400 clamp(1.5rem, 2.8vw, 2.5rem)/1.22 var(--font); letter-spacing: -.025em; text-wrap: balance; }
.lp-quote figcaption { margin-top: 28px; font: 400 .9375rem/1.4 var(--font); color: var(--ink-2); }
.lp-quote figure :is(blockquote, figcaption) { transition: opacity .26s ease; opacity: 0; }
.lp-quote figure.on :is(blockquote, figcaption) { opacity: 1; }

/* ---------- James at work: three photos; two open their dialogs ---------- */
.lp-life { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); padding: 0 var(--pad); }
.lp-ph { display: block; margin: 0; padding: 0; border: 0; background: none; text-align: left; }
button.lp-ph { cursor: pointer; }
.lp-im { display: block; overflow: hidden; border-radius: 16px; background: var(--card); aspect-ratio: 4 / 5; }
.lp-im img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.04); transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.lp-ph:first-child .lp-im img { object-position: 60% 30%; }
button.lp-ph:hover .lp-im img { transform: scale(1.03); }
.lp-ph :is(figcaption, .lp-fc) { display: block; padding-top: 14px; font: 400 .9375rem/1.4 var(--font); color: var(--ink-2); }
button.lp-ph:hover .lp-fc { color: var(--ink); }

/* ---------- Say hi ---------- */
.lp-foot { margin-top: clamp(64px, 9vw, 140px); padding: clamp(56px, 8vw, 104px) var(--pad) 32px; border-top: 1px solid var(--line); }
.lp-hi { font: 400 clamp(3.5rem, 11vw, 10rem)/.95 var(--font); letter-spacing: -.05em; }
.lp-foot-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: clamp(28px, 4vw, 48px); }
.lp-btn-l { height: 48px; padding: 0 24px; margin: 0; font-size: 1rem; }
.lp-txt { font: 400 1rem/1 var(--font); color: var(--ink-2); }
.lp-txt:hover { color: var(--ink); }
.lp-sig { margin-top: clamp(64px, 10vw, 140px); font: 400 .875rem/1 var(--font); color: var(--ink-3); text-align: right; }

/* ---------- entrances ---------- */
.js .rv { opacity: 0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); }
.js .rv.in { opacity: 1; transform: none; }
.lp-life .rv:nth-child(2) { transition-delay: .08s; } .lp-life .rv:nth-child(3) { transition-delay: .16s; }
.lp-pair .rv:nth-child(2) { transition-delay: .08s; }
@media (prefers-reduced-motion: reduce) { .js .rv { opacity: 1; transform: none; transition: none; } .lp-stage img, .lp-im img { transition: none; } }

/* ---------- dialogs ---------- */
dialog.mdl { width: min(720px, calc(100vw - 32px)); max-height: calc(100dvh - 64px); padding: 0; border: 0; border-radius: 20px; overflow: auto;
  background: var(--bg); color: var(--ink); box-shadow: 0 24px 80px rgba(38, 37, 30, .22); font-family: var(--font); }
dialog.mdl::backdrop { background: rgba(38, 37, 30, .32); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
dialog.mdl .mdl-x { position: absolute; top: 14px; right: 14px; z-index: 2; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(247, 247, 244, .9); color: var(--ink); font-size: 1.375rem; line-height: 1; cursor: pointer; box-shadow: 0 1px 2px rgba(38, 37, 30, .12); }
dialog.mdl .mdl-x:hover { background: #fff; }
dialog.mdl .mdl-im { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--card); filter: grayscale(1); }
dialog.mdl .mdl-im.dev { object-fit: contain; padding: 28px; filter: none; }
dialog.mdl .mdl-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
dialog.mdl .mdl-col img { width: 100%; aspect-ratio: 1; object-fit: cover; filter: grayscale(1); }
dialog.mdl .mdl-bd { padding: 28px 32px 32px; }
dialog.mdl .mdl-k { display: block; font: 400 .875rem/1.3 var(--font); color: var(--ink-2); }
dialog.mdl h2 { margin: 6px 0 16px; font: 400 1.875rem/1.1 var(--font); letter-spacing: -.03em; }
dialog.mdl p { margin: 0 0 12px; font: 400 1rem/1.55 var(--font); color: var(--ink-2); }
dialog.mdl .mdl-rows > div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
dialog.mdl .mdl-rows .k { font: 500 .9375rem/1.4 var(--font); }
dialog.mdl .mdl-rows .v { font: 400 .9375rem/1.45 var(--font); color: var(--ink-2); }
dialog.mdl .mdl-split { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: start; }
dialog.mdl .mdl-stats { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; }
dialog.mdl .mdl-stats li { padding: 14px 18px; border-radius: 12px; background: var(--card); }
dialog.mdl .mdl-stats b { display: block; font: 400 1.75rem/1.05 var(--font); letter-spacing: -.03em; }
dialog.mdl .mdl-stats span { display: block; margin-top: 4px; font: 400 .8125rem/1.3 var(--font); color: var(--ink-2); }
dialog.mdl .mdl-cta { margin: 16px 0 0; height: 44px; padding: 0 20px; }

/* ---------- narrower screens ---------- */
@media (max-width: 899.98px) {
  .lp-cap, .lp-pair .lp-cap { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr; gap: 8px 20px; }
  .lp-cap .lp-t { grid-column: 1; }
  .lp-cap .lp-s { grid-column: 1; grid-row: 2; margin-top: 0; }
  .lp-cap .lp-m { grid-column: 2; grid-row: 1 / 3; }
  .lp-pair { grid-template-columns: 1fr; gap: clamp(56px, 8vw, 120px); }
  .lp-life { grid-template-columns: 1fr 1fr; }
  .lp-life .lp-ph:first-child { grid-column: 1 / -1; }
  .lp-life .lp-ph:first-child .lp-im { aspect-ratio: 4 / 3; }
}
@media (max-width: 599.98px) {
  .lp-top { height: 56px; }
  .lp-nav > a[href="#work"] { display: none; }
  .lp-hero { min-height: calc(100svh - 56px); padding-bottom: 80px; }
  .lp-stage { aspect-ratio: 4 / 3; }
  .lp-stage img { width: 90%; height: 90%; }
  .lp-cap, .lp-pair .lp-cap { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .lp-cap .lp-m, .lp-pair .lp-m { grid-column: 1; grid-row: auto; justify-self: start; text-align: left; margin-top: 8px; }
  .lp-m b { font-size: 2rem; }
  .lp-life { grid-template-columns: 1fr; }
  .lp-life .lp-im, .lp-life .lp-ph:first-child .lp-im { aspect-ratio: 4 / 3; }
  dialog.mdl .mdl-rows > div { grid-template-columns: 1fr; gap: 4px; }
  dialog.mdl .mdl-split { grid-template-columns: 1fr; }
}

/* ==================== personal touches (2026-11-07, James: "a little more personalized towards me using visual elements and
   not just by adding words") — his face, his figure, his rooms, his mark. No new copy. ==================== */
/* the bar: his face beside his name */
.lp-name { display: inline-flex; align-items: center; gap: 10px; }
.lp-av { display: block; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; background: var(--card); }
.lp-av img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: grayscale(1); }

/* opening: the intro alone (no generated figures: James, 2026-11-07, "don't use any of the higgsfield assets") */
.lp-hero-in { display: block; }
.lp-corner { bottom: 28px; }
.lp-work { position: relative; }
.lp-label { border-top: 0; }

/* the reel: two dozen rooms he has led, drifting slowly; hover holds it; still under reduced motion */
.lp-reel { margin-top: clamp(96px, 12vw, 180px); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.lp-reel-track { display: flex; width: max-content; animation: lp-reel 150s linear infinite; }
.lp-reel:hover .lp-reel-track { animation-play-state: paused; }
.lp-reel-set { display: flex; gap: 12px; padding-right: 12px; }
.lp-reel img { height: clamp(160px, 18vw, 260px); width: auto; border-radius: 12px; filter: grayscale(1) contrast(1.04); background: var(--card); }
@keyframes lp-reel { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .lp-reel { overflow-x: auto; -webkit-mask-image: none; mask-image: none; padding: 0 var(--pad); scrollbar-width: thin; }
  .lp-reel-track { animation: none; }
  .lp-reel-set[aria-hidden] { display: none; }
}
.lp-quote { padding-top: clamp(80px, 10vw, 160px); }

/* the sign-off with his mark */
.lp-mark { display: inline-block; margin-right: 10px; color: var(--ink); font-size: 1rem; transform: translateY(1px); }

@media (max-width: 899.98px) {
}
@media (max-width: 599.98px) {
  .lp-hero { min-height: calc(100svh - 56px); }
  .lp-corner { bottom: 24px; }
}

/* ==================== Cursor layout (2026-11-08, James: "bring up all the other content … leverage cursor's layout
   aesthetic", ref cursor.com/home). One centred 1300px column; a short opening with the work right under it; projects after
   the first sit in warm grey cards, copy at the bottom left and the picture on the right; tighter gaps. Undo = delete this block. */
:root { --pad: max(clamp(20px, 3.2vw, 48px), calc((100% - 1300px) / 2)); --feat: #f0efea; }
.lp-hero { min-height: 0; padding: clamp(56px, 8vw, 112px) var(--pad) clamp(40px, 5vw, 64px); justify-content: flex-start; }
.lp .lp-corner { position: static; margin-top: 24px; font-size: 1rem; }
.lp-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; padding: 0; margin: 0; border: 0; }

.lp-stage, .lp-im, .lp-reel img { border-radius: 8px; }
.lp-proj + .lp-proj, .lp-proj + .lp-pair { margin-top: var(--gap); }
.lp-wide:first-of-type .lp-cap { padding: 20px 0 clamp(24px, 3vw, 40px); }

/* feature cards: Vision and the pair */
.lp-wide + .lp-wide .lp-link, .lp-pair .lp-link { height: 100%; border-radius: 8px; background: var(--feat); transition: background .2s; }
.lp-wide + .lp-wide .lp-link:hover, .lp-pair .lp-link:hover { background: #ebeae4; }
.lp-wide + .lp-wide .lp-link { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 16px; padding: 16px; }
.lp-wide + .lp-wide .lp-stage { grid-column: 2; grid-row: 1; aspect-ratio: 16 / 10; }
.lp-wide + .lp-wide .lp-cap, .lp-pair .lp-cap { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px; }
.lp-wide + .lp-wide .lp-cap { grid-column: 1; grid-row: 1; align-self: end; }
.lp-pair .lp-link { display: flex; flex-direction: column; padding: 16px 16px 0; }
.lp-pair .lp-stage { background: var(--card); }
.lp-pair .lp-cap { flex: 1; padding: 20px 4px; }
:is(.lp-wide + .lp-wide, .lp-pair) .lp-t h3 { font-size: 1.375rem; }
:is(.lp-wide + .lp-wide, .lp-pair) .lp-s { font-size: 1.0625rem; }
:is(.lp-wide + .lp-wide, .lp-pair) .lp-m { justify-self: auto; text-align: left; margin-top: 6px; }
:is(.lp-wide + .lp-wide, .lp-pair) .lp-m b { font-size: clamp(2rem, 3vw, 2.75rem); }

/* everything after the work comes up closer */
.lp-reel { margin: clamp(64px, 8vw, 112px) var(--pad) 0; border-radius: 8px; -webkit-mask-image: none; mask-image: none; }
.lp-quote { padding: clamp(64px, 8vw, 120px) var(--pad); }
.lp-foot { margin-top: clamp(64px, 8vw, 112px); }

@media (max-width: 899.98px) {
  .lp-wide + .lp-wide .lp-link { grid-template-columns: minmax(0, 1fr); }
  .lp-wide + .lp-wide .lp-stage, .lp-wide + .lp-wide .lp-cap { grid-column: 1; grid-row: auto; }
  .lp-pair { gap: var(--gap); }
}
@media (max-width: 599.98px) {
  .lp-hero { min-height: 0; }
  .lp-wide + .lp-wide .lp-link, .lp-pair .lp-link { padding: 12px; }
  .lp-pair .lp-link { padding-bottom: 0; }
}

/* ECS scene (2026-11-08): the screens over the IOC photo fill the stage edge to edge, like Cursor's first product shot */
.lp-scene img, .lp-link:hover .lp-scene img { width: 100%; height: 100%; object-fit: cover; transform: none; }

/* Say hi footer centred (2026-11-08, James) */
.lp-foot { text-align: center; }
.lp-foot-row { justify-content: center; }
.lp .lp-sig { text-align: center; }

/* Cursor spacing (2026-11-08, James: "adjust the spacing to reflect cursor's spacing"). Measured on cursor.com/home at 1728px:
   bar 52px; h1 starts 112px under the bar; 56px from the hero's last line to the product shot (Cursor has its buttons between;
   we have none); 4px corners; feature cards #f2f1ed, 17.5px padding, 90px apart. Scales down on narrower screens. */
.lp-top { height: 52px; }
.lp-hero { padding: clamp(56px, 6.5vw, 112px) var(--pad) clamp(32px, 3.25vw, 56px); }
.lp-stage, .lp-im, .lp-reel img, .lp-reel { border-radius: 4px; }
:root { --feat: #f2f1ed; }
.lp-proj + .lp-proj, .lp-proj + .lp-pair { margin-top: clamp(48px, 5.2vw, 90px); }
.lp-wide:first-of-type .lp-cap { padding-bottom: 0; }
.lp-wide + .lp-wide .lp-link, .lp-pair .lp-link { border-radius: 4px; }
.lp-wide + .lp-wide .lp-link { padding: 17.5px; gap: 17.5px; }
.lp-pair .lp-link { padding: 17.5px 17.5px 0; }
.lp-pair { gap: clamp(16px, 1.5vw, 24px); }
.lp-reel { margin-top: clamp(48px, 5.2vw, 90px); }
.lp-quote { padding: clamp(56px, 6.5vw, 112px) var(--pad); }
.lp-foot { margin-top: clamp(48px, 5.2vw, 90px); }
@media (max-width: 599.98px) { .lp-top { height: 52px; } }

/* ==================== dmcg navigation, in the Cursor tones (2026-11-08, James: "I was referring only to the styling of the
   navigation… Keep the color tones from the cursor reference"). Measured on dmcg.co at 1728px: links left, name centred,
   links right; 14px/16px weight 500, .04em tracking; a 32px-tall item that shows a hairline-outlined 8px pill on hover;
   Contact slides a frosted 35px pill out beside it with the address + a 10px "Copy", "Copied ✓" on click, then blurs away. */
.lp-top.dm-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 64px; padding: 0 clamp(20px, 2.2vw, 38px); }
.dm-side { display: flex; align-items: center; gap: 6px; }
.dm-side.r { justify-self: end; }
.dm-it, .dm-name { font: 500 14px/16px var(--font); letter-spacing: .04em; color: var(--ink); white-space: nowrap; }
.dm-it { display: inline-flex; align-items: center; height: 32px; padding: 0 10px; border-radius: 8px; box-shadow: inset 0 0 0 1px transparent; transition: box-shadow .15s, background .15s; }
.dm-side:not(.r) .dm-it:first-child { margin-left: -10px; }
.dm-side.r .dm-it:last-child { margin-right: -10px; }
.dm-it:hover, .dm-it:focus-visible, .dm-it.dmc-host:has(.dmc.show) { box-shadow: inset 0 0 0 1px rgba(38, 37, 30, .14); background: rgba(255, 255, 255, .55); }
.lp .dm-it:focus-visible { outline: none; }
.dm-name { justify-self: center; }
.lp-hero { padding-top: clamp(48px, 5.8vw, 100px); }   /* keeps the h1 where Cursor has it (164px down at 1728) under the taller bar */

/* the contact pill */
.dmc-host { position: relative; overflow: visible; }
.dmc { position: absolute; left: calc(100% + 8px); top: 50%; z-index: 5; display: inline-flex; align-items: center; gap: 8px; height: 35px; padding: 0 12px 0 13.5px;
  border-radius: 999px; background: rgba(235, 234, 229, .55); box-shadow: inset 0 0 0 1px rgba(38, 37, 30, .1); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  white-space: nowrap; font: 500 14px/1 var(--font); letter-spacing: .02em; color: var(--ink) !important;
  opacity: 0; visibility: hidden; filter: blur(8px); transform: translate(-6px, -50%); transition: opacity .2s, filter .2s, transform .22s cubic-bezier(.2, .7, .2, 1), visibility 0s .22s; }
.dmc b { font-weight: 500; color: var(--ink) !important; }
.dmc i { font: 500 10px/1 var(--font); font-style: normal; letter-spacing: .02em; color: rgba(38, 37, 30, .45) !important; }
.dmc.show { opacity: 1; visibility: visible; filter: none; transform: translate(0, -50%); transition: opacity .2s, filter .2s, transform .22s cubic-bezier(.2, .7, .2, 1); }
.dmc.away { transition: opacity .3s, filter .3s, transform .3s, visibility 0s .3s; }
.dmc.above { left: 50%; top: auto; bottom: calc(100% + 10px); transform: translate(-50%, 6px); }
.dmc.above.show { transform: translate(-50%, 0); }

/* ---------- project demos on hover (hm-hover.js toggles .on) ---------- */
.lp .lp-hov > img { transition: transform .5s cubic-bezier(.2, .7, .2, 1), filter .4s; }
.lp-pop { position: absolute; inset: 0; pointer-events: none; }
.lp .lp-stage .lp-pop > img { position: absolute; width: auto; height: auto; max-width: none; object-fit: cover; border-radius: 4px; background: var(--card);
  box-shadow: 0 18px 40px -12px rgba(38, 37, 30, .45), 0 0 0 1px rgba(38, 37, 30, .08);
  opacity: 0; transform: translate(var(--fx, 0), var(--fy, 0)) scale(.7) rotate(0deg); transition: opacity .28s, transform .55s cubic-bezier(.2, .9, .25, 1.15); }
.lp .lp-hov.on .lp-pop > img { opacity: 1; transform: translate(0, 0) scale(1) rotate(var(--r, 0deg)); }
/* ECS: three team photos and the Contact AA screen fan out to the corners, the scene stays behind */
.lp .lp-hov.on.lp-scene > img { filter: brightness(.92) saturate(.85); transform: scale(1.02); }
.lp .lp-pop.ecs > .p1 { left: 2.5%; top: 5%; width: 21%; aspect-ratio: 4 / 3; --r: -3deg; --fx: 60%; --fy: 40%; transition-delay: 0s; }
.lp .lp-pop.ecs > .p2 { left: 3.5%; bottom: 5%; width: 13.5%; aspect-ratio: 3 / 4; --r: 2.5deg; --fx: 70%; --fy: -40%; transition-delay: .05s; }
.lp .lp-pop.ecs > .p3 { right: 3%; top: 5%; width: 14%; aspect-ratio: 3 / 4; --r: 3deg; --fx: -70%; --fy: 40%; transition-delay: .1s; }
.lp .lp-pop.ecs > .p4 { right: 2.5%; bottom: 5%; width: 20%; aspect-ratio: 1816 / 1440; object-fit: contain; background: #dceaff; --r: -2deg; --fx: -60%; --fy: -40%; transition-delay: .15s; }
/* Aggressive Pickup: two more phone screens rise in on either side */
.lp .lp-hov.on:not(.lp-scene) > img { transform: scale(.9); }
.lp .lp-pop.apu > img { height: 74%; aspect-ratio: 786 / 1703; background: none; box-shadow: none; filter: drop-shadow(0 14px 22px rgba(38, 37, 30, .25)); --fy: 30%; }
.lp .lp-pop.apu > .p1 { left: 4%; bottom: 6%; --r: -4deg; }
.lp .lp-pop.apu > .p2 { right: 4%; bottom: 6%; --r: 4deg; transition-delay: .07s; }
/* Franklin: the course recording fades in over the cover */
.lp .lp-stage .lp-demo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s; }
.lp .lp-hov.on .lp-demo { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .lp-pop, .lp-demo { display: none; } }
@media (max-width: 599.98px) { .lp .lp-pop.ecs > .p2, .lp .lp-pop.ecs > .p3 { display: none; } }
.lp .lp-stage .lp-pop.apu > img { border: 5px solid #1d1d1f; border-radius: 26px; background: #fff; box-shadow: 0 18px 36px -14px rgba(38, 37, 30, .45); filter: none; }   /* a thin bezel like the cover's phone */

/* 2026-11-08: Contact moved to the right side of the bar; its copy pill opens to the left so it stays on screen */
.dm-side.r .dmc { left: auto; right: calc(100% + 8px); transform: translate(6px, -50%); }
.dm-side.r .dmc.show { transform: translate(0, -50%); }
#about { scroll-margin-top: 80px; }
@media (max-width: 479.98px) {   /* five items fit down to 320px */
  .lp-top.dm-nav { padding: 0 12px; }
  .dm-side { gap: 0; }
  .dm-it, .dm-name { font-size: 13px; letter-spacing: .02em; }
  .dm-it { padding: 0 6px; }
  .dm-side:not(.r) .dm-it:first-child { margin-left: -6px; }
  .dm-side.r .dm-it:last-child { margin-right: -6px; }
}

/* ---------- Say hi collage (2026-11-08, James: "make these images become a collage in the say hi section") ----------
   The 24 reel photos as one mosaic of square cells, black and white like the reel, with Say hi, Contact and LinkedIn in a
   4 × 2 cell opening in the middle: 8 × 4 cells − 8 = 24 photos, one each, auto-placed around the opening. Under 900px the
   words sit above a 4-column grid. The photos fade in one after another when the footer comes into view (reduced motion: no fade). */
.lp-foot.lp-coll { margin-top: clamp(64px, 8vw, 112px); padding: 0 var(--pad) clamp(32px, 4vw, 56px); border-top: 0; text-align: center; }
.js .lp-foot.lp-coll.rv { opacity: 1; transform: none; }
.lp-coll-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
.lp-coll-grid > img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 4px; background: var(--card); filter: grayscale(1) contrast(1.04); }
.lp-coll-say { grid-column: 3 / 7; grid-row: 2 / 4; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; }
.lp-coll-say .lp-foot-row { margin-top: clamp(20px, 3vw, 40px); }
.js .lp-coll .lp-coll-grid > img { opacity: 0; transform: scale(.94); transition: opacity .7s ease-out, transform .9s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i) * 35ms); }
.js .lp-coll.in .lp-coll-grid > img { opacity: 1; transform: none; }
@media (max-width: 899.98px) {
  .lp-coll-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .lp-coll-say { grid-column: 1 / -1; grid-row: 1; padding: clamp(24px, 6vw, 48px) 0 clamp(32px, 8vw, 56px); }
}
.lp-coll-grid > img:nth-of-type(1) { --i: 0; } .lp-coll-grid > img:nth-of-type(2) { --i: 1; } .lp-coll-grid > img:nth-of-type(3) { --i: 2; } .lp-coll-grid > img:nth-of-type(4) { --i: 3; } .lp-coll-grid > img:nth-of-type(5) { --i: 4; } .lp-coll-grid > img:nth-of-type(6) { --i: 5; } .lp-coll-grid > img:nth-of-type(7) { --i: 6; } .lp-coll-grid > img:nth-of-type(8) { --i: 7; } .lp-coll-grid > img:nth-of-type(9) { --i: 8; } .lp-coll-grid > img:nth-of-type(10) { --i: 9; } .lp-coll-grid > img:nth-of-type(11) { --i: 10; } .lp-coll-grid > img:nth-of-type(12) { --i: 11; } .lp-coll-grid > img:nth-of-type(13) { --i: 12; } .lp-coll-grid > img:nth-of-type(14) { --i: 13; } .lp-coll-grid > img:nth-of-type(15) { --i: 14; } .lp-coll-grid > img:nth-of-type(16) { --i: 15; } .lp-coll-grid > img:nth-of-type(17) { --i: 16; } .lp-coll-grid > img:nth-of-type(18) { --i: 17; } .lp-coll-grid > img:nth-of-type(19) { --i: 18; } .lp-coll-grid > img:nth-of-type(20) { --i: 19; } .lp-coll-grid > img:nth-of-type(21) { --i: 20; } .lp-coll-grid > img:nth-of-type(22) { --i: 21; } .lp-coll-grid > img:nth-of-type(23) { --i: 22; } .lp-coll-grid > img:nth-of-type(24) { --i: 23; }
@media (prefers-reduced-motion: reduce) { .js .lp-coll .lp-coll-grid > img { opacity: 1; transform: none; transition: none; } }
@media (min-width: 600px) and (max-width: 899.98px) { .lp-coll-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }   /* tablets: 4 rows of 6 */

/* ---------- Recommendations carousel + inverse Say hi (2026-11-08, James: "a side to side carousel of the recommendations, and
   then a final say hi footer that's the inverse color of the rest of the portfolio"). Replaces the single rotating quote and the
   photo-collage footer (both in _archive/pre-recs-carousel-2026-11-08/). The carousel starts on the page's left edge and runs off
   the right edge of the window; swipe, trackpad or the arrows; cards snap. ---------- */
.lp-recs { margin-top: clamp(64px, 8vw, 112px); }
.lp-recs-track { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(280px, 30vw, 440px); gap: 16px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); padding: 0 var(--pad) 4px;
  scrollbar-width: none; }
.lp-recs-track::-webkit-scrollbar { display: none; }
.lp-recs-track:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 4px; }
.lp-rec { scroll-snap-align: start; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; min-height: clamp(260px, 22vw, 320px);
  padding: clamp(22px, 2vw, 32px); border-radius: 4px; background: var(--feat, #f2f1ed); }
.lp-rec blockquote { font: 400 clamp(1.0625rem, 1.35vw, 1.3125rem)/1.4 var(--font); letter-spacing: -.01em; text-wrap: pretty; }
.lp-rec figcaption { display: flex; flex-direction: column; gap: 2px; font: 400 .875rem/1.4 var(--font); color: var(--ink-2); }
.lp-rec figcaption b { font-weight: 500; color: var(--ink); }
.lp-recs-nav { display: flex; justify-content: flex-end; gap: 8px; padding: 20px var(--pad) 0; }
.lp-recs-btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: transparent; box-shadow: inset 0 0 0 1px rgba(38, 37, 30, .18); color: var(--ink); transition: background .15s, box-shadow .15s, opacity .15s; }
.lp-recs-btn:hover:not(:disabled) { background: #fff; }
.lp-recs-btn:disabled { opacity: .35; cursor: default; }
.lp-recs-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Say hi, inverted: ink ground, light type, full width, everything centred */
.lp-foot.lp-inv { margin-top: clamp(80px, 10vw, 160px); padding: clamp(112px, 15vw, 220px) var(--pad) clamp(112px, 15vw, 220px); border-top: 0;
  background: var(--ink); color: var(--bg); text-align: center; }
.lp-inv .lp-hi { color: var(--bg); }
.lp-inv .lp-foot-row { justify-content: center; }
.lp-inv .lp-btn { background: var(--bg); color: var(--ink) !important; }
.lp-inv .lp-btn:hover { background: #fff; }
.lp-inv .lp-txt { color: rgba(247, 247, 244, .72); }
.lp-inv .lp-txt:hover { color: var(--bg); }
.lp .lp-inv :is(a, button):focus-visible { outline-color: var(--bg); }
html:has(.lp-inv) { background: linear-gradient(var(--bg) 50%, var(--ink) 50%); }   /* the bounce past the bottom shows ink, not a light strip */

/* ---------- Recommendations as three drifting rows + the presenting photo behind Say hi (2026-11-08, James: "3 rows of
   recommendations automatically moving … each moving in the opposite direction as the one before it", "a dim image of what
   it's like to work with me lightly faded in the footer bg"). index.html's script builds rows 2 and 3 and the loop copies
   and adds .is-running; without it (no JS, reduced motion) the single scrollable row above still applies. Undo = delete
   this block and restore index.html from editorial/_archive/pre-recs-rows-2026-11-08/. ---------- */
.lp-recs-rows { display: flex; flex-direction: column; gap: 16px; }
.lp-recs-rows.is-running { overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.lp-recs-rows.is-running .lp-recs-track { display: flex; width: max-content; overflow: visible; padding: 0; gap: 0;
  scroll-snap-type: none; animation: lp-recs 190s linear infinite; }
.lp-recs-rows.is-running .lp-recs-track:nth-child(2) { animation-direction: reverse; }   /* rows 1 and 3 drift left, row 2 right */
.lp-recs-rows.is-running .lp-recs-track:is(:hover, :focus-within) { animation-play-state: paused; }
.lp-recs-set { display: flex; gap: 16px; padding-right: 16px; }
.lp-recs-rows.is-running .lp-rec { flex: none; width: clamp(280px, 26vw, 400px); min-height: 0; gap: 24px; scroll-snap-align: none; }
@keyframes lp-recs { to { transform: translateX(-50%); } }

.lp-foot.lp-inv { position: relative; isolation: isolate; overflow: hidden; }
.lp-foot.lp-inv::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("images/hero/cover-james.webp") 50% 58% / cover no-repeat;
  filter: grayscale(1) contrast(1.05); opacity: .16;
  -webkit-mask-image: linear-gradient(transparent, #000 32%, #000 68%, transparent);
          mask-image: linear-gradient(transparent, #000 32%, #000 68%, transparent); }
@media (max-width: 700px) { .lp-foot.lp-inv::before { background-position: 56% 50%; opacity: .2; } }
.lp-recs:last-child { margin-bottom: clamp(80px, 10vw, 140px); }   /* the homepage now ends on the quotes (Say hi lives on the case studies) */

/* ECS card: the −45% figure replaced by a small version of the ECS page's call-volume chart (2026-11-08, James: "replace this
   bit with a mini version of the chart representing the change"). Same plotted months; one series in ink, the months before
   launch lighter; a dashed launch line; the latest month marked. Numbers are in the aria-label. */
.lp-m-chart { display: flex; flex-direction: column; align-items: flex-end; width: 100%; max-width: 260px; }
.lp-mini { display: block; width: 100%; height: auto; overflow: visible; }
.lp-mini .b { stroke: var(--line); stroke-width: 1; }
.lp-mini .l { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 2 3; }
.lp-mini text { font: 500 9px/1 var(--font); fill: var(--ink-2); letter-spacing: .01em; }
.lp-mini polyline { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lp-mini .p0 { stroke: var(--ink-2); }   /* 60% ink ≈ 3.8:1 on the ground (marks need 3:1) */
.lp-mini .p1 { stroke: var(--ink); }
.lp-mini circle { fill: var(--ink); stroke: var(--bg); stroke-width: 2; }
.lp-m-chart span { margin-top: 8px; }
@media (max-width: 599.98px) { .lp-m-chart { align-items: flex-start; max-width: 220px; } }