/* Case studies: shared look (17 Oct). Same frame as the home page: full width, 104px side margins,
 the home header and footer. Each case study page adds only its own pieces in its <style>. */
:root {
  --ink: #0d0d0f;
  --muted: #6f6f75;
  --line: rgb(230, 230, 230);
  --paper: #ffffff;
  /* same frame as the home page: 104px side margins on desktop, 24px on phones; everything else stretches */
  --gutter: clamp(24px, 8.667vw, 104px);
  --inset: var(--gutter);
  --read: 62ch;   /* paragraphs stay at a readable width, however wide the screen */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.page-root { position: relative; overflow-x: clip; }   /* nothing (zoomed cover, full-bleed bands) can push the page sideways */
.wrap { margin: 0 auto; padding: 0 var(--gutter); }
.bleed { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }   /* edge to edge, from inside .wrap */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.85s cubic-bezier(0.16,1,0.3,1), transform 0.85s cubic-bezier(0.16,1,0.3,1);
}
.reveal.in-view { opacity: 1; transform: translateY(0); }
.d1 { transition-delay: .08s; } .d2 { transition-delay: .16s; } .d3 { transition-delay: .24s; }

/* ---------- NAV (same as the home page: transparent at the top, split islands once scrolled) ---------- */
nav#siteNav {
  position: sticky; top: 0; z-index: 50;
  background: transparent;
  transform: translateY(0);
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), background-color .4s ease;
}
nav#siteNav:hover, nav#siteNav.menu-open { background: var(--paper); }
nav#siteNav.nav-solid:not(.menu-open) { background: transparent; }
nav#siteNav.nav-hidden { transform: translateY(calc(-100% - 48px)); }
nav .wrap {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-top: 20px; padding-bottom: 20px;
}
.logo { font-weight: 800; letter-spacing: -0.02em; flex-shrink: 0; display: inline-block; text-decoration: none; line-height: 0.9; font-size: 17px; }
.logo span { display: block; color: var(--ink); transition: color .3s ease; }
.logo .dot { transition: color .3s ease; }
.footer-brand .logo { font-size: 26px; }

.nav-right { display: flex; align-items: center; gap: 24px; }
.nav-links { display: none; gap: 32px; list-style: none; }
.nav-links a {
  display: block; color: var(--muted); text-decoration: none;
  font-size: 15px; font-weight: 500; white-space: nowrap; transition: color 0.25s;
}
.nav-links a:hover, .nav-links a.section { color: var(--ink); }
/* the page you're on: lighter, like a disabled state, and not clickable (17 Oct). On a case study,
   Work stays clickable (it leads back to the list) and is marked dark with .section instead */
.nav-links a.active, .nav-mobile-panel a.active { color: #c2c2c7; pointer-events: none; cursor: default; }

.pill-btn {
  display: inline-flex; align-items: center;
  background: var(--ink); color: #fff;
  padding: 12px 22px; border-radius: 999px;
  font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap; flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), padding .45s cubic-bezier(0.16,1,0.3,1), box-shadow .45s ease;
}
.pill-btn:hover { transform: translateY(-2px); }

.nav-toggle {
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  width: 32px; height: 32px; background: none; border: none; cursor: pointer; flex-shrink: 0; padding: 0;
}
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--ink); transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), opacity 0.3s; }
nav.menu-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
nav.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
nav.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile-panel {
  display: none; position: absolute; top: 100%; left: 0; right: 0;
  background: var(--paper);
  border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line);
  padding: 24px var(--gutter) 28px;
}
nav.menu-open .nav-mobile-panel { display: flex; flex-direction: column; gap: 20px; }
.nav-mobile-panel a { color: var(--muted); text-decoration: none; font-size: 17px; font-weight: 500; }
.nav-mobile-panel a:hover, .nav-mobile-panel a.section { color: var(--ink); }

nav#siteNav .nav-links, nav#siteNav .nav-toggle {
  border: 1px solid transparent; border-radius: 999px;
  transition: background-color .45s ease, border-color .45s ease, box-shadow .45s ease, padding .45s cubic-bezier(0.16,1,0.3,1);
}
nav#siteNav.nav-solid:not(.menu-open) .nav-links,
nav#siteNav.nav-solid:not(.menu-open) .nav-toggle {
  background: var(--paper); border-color: var(--line); box-shadow: 0 8px 28px rgba(15,45,58,.08);
}
nav#siteNav.nav-solid:not(.menu-open) .nav-links { align-items: center; height: 46px; padding: 0 26px; }
nav#siteNav.nav-solid:not(.menu-open) .nav-toggle { width: 46px; height: 46px; }
nav#siteNav.nav-solid:not(.menu-open) .pill-btn { padding: 14px 22px; box-shadow: 0 8px 28px rgba(15,45,58,.08); }
/* the logo floats bare; over photos and dark fills it turns white (set by script) */
nav#siteNav.nav-solid.logo-light:not(.menu-open):not(:hover) .logo span,
nav#siteNav.nav-solid.logo-light:not(.menu-open):not(:hover) .logo .dot { color: #fff; }

@media (min-width: 810px) {
  .nav-links { display: flex; }
  .nav-toggle { display: none; }
  .nav-mobile-panel { display: none !important; }
}
@media (max-width: 809px) {
  nav#siteNav .wrap { transition: padding .45s cubic-bezier(0.16,1,0.3,1); }
  nav#siteNav.nav-solid:not(.menu-open) .wrap { padding-left: 16px; padding-right: 16px; }
  nav#siteNav.nav-solid:not(.menu-open) .nav-right { gap: 8px; }
  nav#siteNav.nav-solid:not(.menu-open) .pill-btn { padding: 14px 18px; }
}

/* ---------- CASE HERO (17 Oct: full width, headline on the left edge like the home page sections) ---------- */
.case-hero { padding: clamp(72px, 9vw, 150px) 0 clamp(48px, 5vw, 80px); }
.case-hero-top {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-bottom: clamp(28px, 3vw, 44px);
}
.tag {
  display: inline-flex; align-items: center;
  padding: 7px 14px; border: 1px dashed var(--line); border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--ink);
}
.case-badges { display: contents; }
.case-badges span {
  display: inline-flex; align-items: center;
  padding: 7px 14px; border-radius: 999px;
  background: var(--ink); color: #fff;
  font-size: 13px; font-weight: 600;
}
.case-hero h1 {
  font-size: clamp(40px, 5.556vw, 96px);   /* 80px at 1440, grows a little above */
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 1.02;
  max-width: 15em;
  text-wrap: balance;
}
.case-hero-sub {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px;
  margin-top: clamp(32px, 4vw, 64px);
}
.case-hero-sub p {
  grid-column: 7 / -1;
  font-size: 19px; font-weight: 500; line-height: 1.5; color: var(--muted);
  max-width: 46ch;
}

/* the first picture runs edge to edge under the headline */
.case-cover { height: clamp(320px, 52vw, 860px); overflow: hidden; position: relative; }
.case-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.06); transition: transform 1.6s cubic-bezier(0.16,1,0.3,1); }
.case-cover.in-view img { transform: none; }

/* ---------- OVERVIEW: the facts in one hairline row, then the summary set large ---------- */
.case-meta {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
}
.case-meta { column-gap: 24px; }
.case-meta > div { padding: 32px 0; }
.case-meta dt { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
.case-meta dd { font-size: 17px; font-weight: 600; line-height: 1.4; }
.case-meta-wrap { border-bottom: 1px solid var(--line); }
.case-meta-wrap .case-meta { border-bottom: none; }

.case-summary { padding: clamp(96px, 11vw, 176px) 0; }
.case-summary p {
  font-size: clamp(26px, 2.5vw, 42px);
  font-weight: 500; letter-spacing: -0.035em; line-height: 1.22;
  max-width: 26em;
}
.case-summary p + p { margin-top: .7em; color: var(--muted); }

/* ---------- CASE SECTIONS: hairline on top, label on the left, heading + text on the right ---------- */
.case-section { padding: 0 0 clamp(96px, 10vw, 160px); }
.case-section-head {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px;
  position: relative;
  padding-top: 28px;
  margin-bottom: clamp(40px, 4.5vw, 72px);
}
/* section dividers run edge to edge (like the home page rows); lines inside a section stay at content width */
.case-section-head::before, .case-end::before {
  content: ""; position: absolute; top: 0; height: 1px; background: var(--line);
  left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter));
}
.case-section-head .eyebrow {
  grid-column: 1 / span 4;
  font-size: 14px; font-weight: 600; color: var(--muted);
  padding-top: .55em;
}
.case-section-head .eyebrow b { color: var(--ink); font-weight: 600; margin-right: 10px; font-variant-numeric: tabular-nums; }
.case-section-head .body { grid-column: 5 / -1; }
/* section headings read as Buildout's lead line (18 Oct): same size, colour and spacing as .body.lead > p:first-child */
.case-section-head h2 {
  font-size: clamp(20px, 1.667vw, 26px);
  font-weight: 500; letter-spacing: -0.02em; line-height: 1.45;
  margin-bottom: 18px; max-width: var(--read);
}
.case-section-head h2::first-letter { text-transform: uppercase; }
.case-section-head p { font-size: 17px; font-weight: 500; color: var(--muted); line-height: 1.6; max-width: var(--read); }
.case-section-head p + p { margin-top: 14px; }
.case-section-head .case-swatches + p { margin-top: 24px; }

.case-swatches { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.case-swatches span {
  display: inline-flex; align-items: center;
  padding: 8px 16px; border-radius: 999px; border: 1px dashed var(--line);
  font-size: 13px; font-weight: 600; color: var(--ink);
}

.case-image { border-radius: 10px; overflow: hidden; background: #f4f4f5; }
.case-image img { display: block; width: 100%; height: auto; }
.case-image.dark { background: #141210; }
/* 17 Oct: the exploration board and network map are only ~1000px wide, so they sit under the text (8 of 12
   columns, ~830px at 1440) instead of stretching edge to edge, where they blurred */
.case-image.col { margin-left: calc((100% + 24px) / 12 * 4); max-width: 1000px; }


/* ---------- WORDMARK DETAILS / PATTERNS: columns split by hairlines ---------- */
.case-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 32px; }
.case-cols .num { color: #d95a00; font-size: 13px; font-weight: 700; margin-bottom: 14px; }
.case-cols h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 10px; }
.case-cols p { font-size: 16px; font-weight: 500; color: var(--muted); line-height: 1.55; max-width: 40ch; }
.case-wordmark-cols { margin-top: clamp(40px, 4vw, 64px); }
.case-cols.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.case-cols.four p { color: var(--ink); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; }
.case-cols .num.muted { color: var(--muted); }

/* ---------- QUOTE (the home page quote's treatment: big quote mark, line 1 muted and rising in once, line 2
   stepped in and coming in with scroll; on desktop it holds for one screen while line 2 arrives) ---------- */
.case-quote { padding: clamp(120px, 14vw, 232px) 0 clamp(150px, 16vw, 260px); }
.case-quote blockquote {
  font-weight: 500; line-height: 1.1; letter-spacing: -0.07em;
  font-size: clamp(26px, 3.333vw, 52px);
  max-width: 21em; margin: 0 auto;
}
.case-quote-line { display: block; }
.case-quote-line-1 { color: var(--muted); }
.case-quote-line-2 { padding-left: var(--q-step, 2.4em); margin-top: 6px; }
/* one-line quotes (both lines fit): sized to the screen and stepped under a chosen word of line 1 */
.case-quote.one-line blockquote { display: grid; grid-template-columns: minmax(0, max-content); justify-content: center; max-width: none; font-size: inherit; letter-spacing: -0.08em; }
.case-quote.one-line .case-quote-line { font-size: min(3.611vw, 62px, calc((100vw - 2 * var(--gutter)) / 24)); white-space: nowrap; }
.quote-mark {
  display: inline-block; font-size: 1.85em; line-height: 0.55; font-weight: 800;
  color: var(--line); vertical-align: -0.06em; margin-right: 12px;
}
.case-quote .case-quote-line-1 { opacity: 0; transform: translateY(40px); transition: opacity 1.2s cubic-bezier(0.16,1,0.3,1), transform 1.2s cubic-bezier(0.16,1,0.3,1); }
.case-quote.in-view .case-quote-line-1 { opacity: 1; transform: none; }
.case-quote .case-quote-line-2 { opacity: var(--q2, 0); transform: translateY(calc((1 - var(--q2, 0)) * 40px)); }
@media (prefers-reduced-motion: reduce) { .case-quote .case-quote-line { opacity: 1 !important; transform: none !important; transition: none; } }
@media (min-width: 761px) {
  .case-quote { height: 200vh; padding: 0; margin-bottom: 0; }
  .case-quote-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; justify-content: center; }
}
@media (max-width: 809px) {
  .case-quote-line { white-space: normal !important; }
  .case-quote-line-2 { padding-left: 0; }
  .quote-mark { display: block; margin: 0 0 14px; }
}

/* ---------- COLOUR CURSOR (desktop, mouse): over a swatch ([data-swatch]) the cursor becomes a circle of that
   colour with its hex; a click copies the hex ---------- */
@media (hover: hover) and (pointer: fine) { [data-swatch] { cursor: none; } }
.swatch-cursor {
  position: fixed; left: 0; top: 0; z-index: 80; pointer-events: none;
  width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%;
  background: var(--c, #141210); color: var(--t, #fff);
  box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(13,13,15,.08), 0 14px 34px -12px rgba(13,13,15,.35);   /* white ring: it sits on its own colour */
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  transform: translate3d(-200px, -200px, 0) scale(0);
  transition: background-color .35s ease, color .35s ease;
}
.swatch-cursor b { font: 600 13px/1 'Menlo', monospace; letter-spacing: .02em; }
.swatch-cursor small { font-size: 11px; font-weight: 600; opacity: .7; }
@media (hover: none), (pointer: coarse) { .swatch-cursor { display: none; } }

/* ---------- SHARED PIECES FOR ALL CASE STUDIES ---------- */
/* images that are only ~800px wide sit at their own size under the text, so they never blur */
.case-image.native { max-width: 800px; }
.case-image + .case-image, .case-image + .case-grid-2, .case-grid-2 + .case-image { margin-top: 24px; }
.case-caption { font-size: 14px; font-weight: 500; color: var(--muted); margin-top: 14px; }
.case-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
/* stand-ins for pictures that haven't been supplied yet */
.case-ph {
  aspect-ratio: 16 / 9; border-radius: 10px; background: #f4f4f5;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 24px; color: var(--muted); font-size: 13px; font-weight: 600; line-height: 1.5;
}
.case-ph.col { margin-left: calc((100% + 24px) / 12 * 4); }
.case-ph + .case-ph { margin-top: 24px; }
/* a section with no heading: its first paragraph reads as the lead */
.case-section-head .body.lead > p:first-child { font-size: clamp(20px, 1.667vw, 26px); color: var(--ink); letter-spacing: -0.02em; line-height: 1.45; margin-bottom: 18px; }
.case-bullets { list-style: none; margin-top: 24px; display: grid; gap: 10px; max-width: var(--read); }
.case-bullets.two { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.case-bullets li { display: flex; align-items: baseline; gap: 12px; font-size: 16px; font-weight: 500; color: var(--muted); line-height: 1.55; }
.case-bullets li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ink); flex-shrink: 0; transform: translateY(-3px); }
.case-bullets strong { color: var(--ink); font-weight: 600; }

/* covers: a coloured band with the picture at its own size (for logos and small images) */
.case-cover.band { height: auto; display: flex; align-items: center; justify-content: center; background: var(--band, #f4f4f5); padding: clamp(64px, 8vw, 128px) var(--gutter); }
.case-cover.band img { width: auto; height: auto; max-width: min(100%, var(--max, 800px)); transform: none; }
.case-cover.band.blur { background: none; }
/* the blurred copy behind the picture (set inline on .bg, so its path is relative to the page) */
.case-cover.band.blur .bg { position: absolute; inset: -60px; background-position: center; background-size: cover; filter: blur(48px) saturate(1.1); }
.case-cover.band.blur img { position: relative; -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent); mask-image: radial-gradient(closest-side, #000 72%, transparent); }
.case-cover .case-ph { height: 100%; border-radius: 0; aspect-ratio: auto; font-size: 15px; }

/* a row of slides you can drag (or scroll) sideways; it runs off the right edge of the screen */
.case-strip {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter);
  scrollbar-width: none; cursor: grab; user-select: none;
}
.case-strip::-webkit-scrollbar { display: none; }
.case-strip.dragging { cursor: grabbing; scroll-snap-type: none; }
.case-strip figure { flex: 0 0 clamp(280px, 56vw, 900px); scroll-snap-align: start; margin: 0; }
.case-strip img { display: block; width: 100%; height: auto; border-radius: 10px; background: #f4f4f5; pointer-events: none; }
.case-strip figcaption { font-size: 14px; font-weight: 500; color: var(--muted); margin-top: 12px; }
.case-strip-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin: 0 0 18px; }
.case-strip-head h3 { font-size: 14px; font-weight: 600; color: var(--muted); }
.case-strip-head span { font-size: 13px; font-weight: 600; color: var(--muted); }
* + .case-strip-head { margin-top: clamp(48px, 5vw, 80px); }
@media (hover: hover) and (pointer: fine) { .case-strip { cursor: none; } }
.drag-cursor {
  position: fixed; left: 0; top: 0; z-index: 80; pointer-events: none;
  width: 88px; height: 88px; margin: -44px 0 0 -44px; border-radius: 50%;
  background: var(--ink); color: var(--paper);
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 14px; font-weight: 600;
  transform: translate3d(-200px, -200px, 0) scale(0);
}
.drag-cursor i { font-style: normal; opacity: .6; transition: transform .3s cubic-bezier(0.16,1,0.3,1); }
.drag-cursor.down i:first-child { transform: translateX(-4px); }
.drag-cursor.down i:last-child { transform: translateX(4px); }
@media (hover: none), (pointer: coarse) { .drag-cursor { display: none; } }

/* a short line said out loud, set big inside a section */
.case-statement { margin: clamp(48px, 6vw, 96px) 0; font-size: clamp(34px, 4.444vw, 76px); font-weight: 500; letter-spacing: -0.06em; line-height: 1.05; }
.case-statement .quote-mark { font-size: 1.4em; }

/* ---------- END: back to work ---------- */
.case-end {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  position: relative;
  padding: 40px 0 clamp(120px, 12vw, 176px);
}
.case-end p { font-size: 15px; font-weight: 500; color: var(--muted); }
.rect-btn {
  display: inline-flex; align-items: center;
  background: var(--ink); color: #fff;
  padding: 14px 30px; border-radius: 7px;
  font-size: 17px; font-weight: 500; text-decoration: none;
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s;
}
.rect-btn:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(13,13,15,0.2); }

/* ---------- FOOTER (same as the home page) ---------- */
.site-footer { border-top: 1px dashed var(--line); }
.footer-top { display: grid; grid-template-columns: 1fr; gap: 40px; padding: 144px 0; }
.footer-brand .logo { display: inline-block; margin-bottom: 12px; }
.footer-brand p { color: var(--muted); font-size: 17px; font-weight: 500; max-width: 280px; }
.footer-links { display: flex; flex-direction: column; gap: 14px; }
.footer-links a { color: var(--muted); text-decoration: none; font-size: 17px; font-weight: 500; transition: color 0.25s; }
.footer-links a:hover { color: var(--ink); }
.footer-contact { display: flex; flex-direction: column; gap: 14px; }
.footer-contact a { color: var(--ink); text-decoration: none; font-size: 17px; font-weight: 500; }
.footer-contact a:hover { color: var(--muted); }
@media (min-width: 810px) { .footer-top { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer-bottom { border-top: 1px dashed var(--line); padding: 24px 0; text-align: center; }
.footer-bottom p { color: var(--muted); font-size: 14px; font-weight: 500; }

/* ---------- FOOTER SEA (both modes) ---------- */
.site-footer { background: #f5f1e8; }
/* B&W mode: the footer stays white and goes straight into the sea (12 Oct; it used to fade from white into cream,
   but there's no cream anywhere else in B&W). Colourful mode is cream throughout, as before */
body:not(.sparkle) .site-footer { background: #ffffff; border-top-color: transparent; }
body:not(.sparkle) .footer-sea { background: #ffffff; }
.site-footer .footer-top { padding-bottom: clamp(64px, 8vw, 140px); }
.footer-sea {
  position: relative;
  height: clamp(340px, 36vw, 560px);
  overflow: hidden;
  background: #f5f1e8;
  touch-action: pan-y;
}
.footer-sea video, .footer-sea canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  mix-blend-mode: multiply;   /* the pale sky melts into the cream */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.35) 30%, #000 62%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.35) 30%, #000 62%);
}
.footer-sea video { object-fit: cover; object-position: center 62%; }
.footer-sea canvas { opacity: 0; transition: opacity .6s ease; }
.footer-sea.is-live canvas { opacity: 1; }
.footer-sea.is-live video { opacity: 0; }
.footer-sea.is-rings canvas { mix-blend-mode: normal; }
.footer-sea .footer-bottom {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  border-top: 0;
  padding: 28px 0;
  pointer-events: none;
}
.footer-sea .footer-bottom p,
body.sparkle .footer-sea .footer-bottom p { color: rgba(245,241,232,.92); text-shadow: 0 1px 12px rgba(0,0,0,.3); }
@media (max-width: 760px) { .footer-sea { height: 220px; } }
/* keep the copyright clear of the fixed sparkle toggle on phones and tablets */
@media (max-width: 1100px) { .footer-sea .footer-bottom { padding-bottom: 100px; } }
@media (max-width: 760px) { .footer-sea { height: 260px; } .footer-sea .footer-bottom p { padding: 0 24px; } }
/* if the video can't play, the copyright sits on plain cream: switch to muted text */
.footer-sea.no-video .footer-bottom p,
body.sparkle .footer-sea.no-video .footer-bottom p { color: var(--muted); text-shadow: none; }

/* no sparkle toggle on this page: the copyright doesn't need to clear it */
@media (max-width: 1100px) { .footer-sea .footer-bottom { padding-bottom: 28px; } }

/* ---------- BRAND FULL STOP + HEADINGS RISE LINE BY LINE (as on the home page) ---------- */
i.dot { font-style: normal; }
.rise .rise-line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.rise .rise-line > span { display: block; transform: translateY(105%); transition: transform 1s cubic-bezier(0.16,1,0.3,1); transition-delay: calc(var(--l) * 0.09s); }
.rise.in-view .rise-line > span { transform: none; }
.rise.done .rise-line { overflow: visible; }
@media (prefers-reduced-motion: reduce) { .rise .rise-line > span { transform: none; transition: none; } .case-cover img { transform: none; } }

/* ---------- COLOUR SWATCHES (shared from Hoply, 17 Oct): tall tiles, name and hex below, colour cursor on hover ---------- */
.case-color-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.case-color-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.case-color-grid.three .case-color-swatch { aspect-ratio: 16 / 7; }   /* nine colours: three rows of wide tiles */
.case-color-swatch { aspect-ratio: 4 / 5; border-radius: 10px; border: 1px solid var(--line); }
.case-color-card .swatch-body { padding: 18px 0 0; }
.case-color-card h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 2px; }
.case-color-card .hex { font-size: 13px; font-weight: 600; color: var(--muted); font-family: 'Menlo', monospace; margin-bottom: 10px; display: block; }
.case-color-card p { font-size: 15px; font-weight: 500; color: var(--muted); line-height: 1.45; }
@media (max-width: 960px) { .case-color-grid, .case-color-grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- TYPE SPECIMEN (shared, 17 Oct, from Buildout): font name on the left, the sample and its use on the
   right; no background, no lines. Each page sets its own sample sizes ---------- */
.case-tspec { margin-top: 8px; }
/* the sample column starts where the section text starts (4 of 12 columns) */
.case-trow { display: grid; grid-template-columns: calc((100% + 24px) / 12 * 4 - 24px) minmax(0, 1fr); gap: 24px; align-items: baseline; padding: 28px 0; }
.case-tname { font-size: 15px; font-weight: 600; color: var(--ink); }
.case-tname span { display: block; font-weight: 500; color: var(--muted); margin-top: 2px; }
.case-system .case-trow { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 32px; }   /* ULTI: half-width column */
.case-tuse { font-size: 14px; font-weight: 500; color: var(--muted); margin-top: 12px; }
@media (max-width: 809px) { .case-trow, .case-system .case-trow { grid-template-columns: 1fr; gap: 10px; padding: 20px 0; } }

/* ---------- TABLETS AND PHONES ---------- */
@media (max-width: 960px) {
  .case-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 809px) {
  .case-hero-sub p { grid-column: 1 / -1; font-size: 17px; }
  .case-section-head { grid-template-columns: 1fr; row-gap: 18px; }
  .case-section-head .eyebrow, .case-section-head .body { grid-column: 1 / -1; padding-top: 0; }
  .case-cols { grid-template-columns: 1fr; gap: 32px; }
  .case-image.col { margin-left: 0; }
  .case-end { flex-direction: column-reverse; align-items: flex-start; }
}
@media (max-width: 520px) {
  .case-meta { grid-template-columns: 1fr; }
  .case-meta > div { padding: 14px 0; }
  .case-meta { padding: 18px 0; }
}

/* ---------- PAGE TRANSITIONS ---------- */
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }
body { animation: page-in .6s ease backwards; }
body.page-leaving { opacity: 0; transition: opacity .35s ease; }
@media (prefers-reduced-motion: reduce) { body { animation: none; } body.page-leaving { transition: none; } }
</style>
@media (max-width: 960px) {
  .case-cols.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 809px) {
  .case-grid-2, .case-cols.four { grid-template-columns: 1fr; }
  .case-ph.col { margin-left: 0; }
  .case-bullets.two { grid-template-columns: 1fr; }
}

/* captions under column images line up with them */
.case-caption.col-cap { margin-left: calc((100% + 24px) / 12 * 4); }
@media (max-width: 809px) { .case-caption.col-cap { margin-left: 0; } }

/* ---------- NO ONE-WORD LAST LINES (20 Oct) ---------- */
/* headings and short lines share their words out evenly; paragraphs pull a word down so the last line is never alone */
h1, h2, h3, h4, h5, blockquote, figcaption { text-wrap: balance; }
p, li, small { text-wrap: pretty; }

/* ---------- SPARKLE (25 Oct): Work, About and Contact only ----------
   Same palette and toggle as the home page, quieter: the hero stays on cream, the colour peaks at the CTA.
   Only pages with the toggle (#sparkleToggle) and the head snippet ever get body.sparkle; case studies stay calm. */
body.sparkle {
  --ink: #0f2d3a;      /* Current Collective navy */
  --muted: #4e6168;
  --line: rgba(15,45,58,.14);
  --paper: #f5f1e8;    /* Current Collective cream */
  --vista: #78a2d2;
  --butter: #feffaf;
  --deep: #2f5f99;
  --deep-ink: #1f4676;
}
body:has(#sparkleToggle), body:has(#sparkleToggle) nav#siteNav, .tag, .case-hero h1, .case-hero-sub p, .logo .dot,
.cta-card h2, .cta-card p, .cta-email-link, .rect-btn, .pill-btn, .about-tags span,
.contact-info, .contact-info h2, .contact-info > p, .contact-method, .site-footer, .footer-links a, .footer-contact a {
  transition: background-color .6s ease, color .6s ease, border-color .6s ease, transform .3s cubic-bezier(0.16,1,0.3,1), box-shadow .3s;
}

/* header and logo */
body.sparkle .logo .dot { color: var(--vista); }
body.sparkle .nav-links a:not(.active), body.sparkle .nav-mobile-panel a:not(.active) { color: var(--deep-ink); }
body.sparkle .nav-links a:not(.active):hover, body.sparkle .nav-mobile-panel a:not(.active):hover { color: var(--ink); }
body.sparkle nav#siteNav.nav-solid.logo-light:not(.menu-open):not(:hover) .logo span { color: var(--paper); }
body.sparkle nav#siteNav.nav-solid.logo-light:not(.menu-open):not(:hover) .logo .dot { color: var(--butter); }

/* hero: stays on cream; deep-blue headline, Vista full stop, outlined Vista tag */
body.sparkle .case-hero h1 { color: var(--deep); }
body.sparkle .case-hero h1 .dot, body.sparkle .more-head h2 .dot { color: var(--vista); }
body.sparkle .case-hero-sub p { color: var(--deep-ink); }
body.sparkle .tag { border: 1px solid var(--vista); color: var(--deep); }

/* buttons: butter with deep-blue text */
body.sparkle .pill-btn, body.sparkle .rect-btn {
  background: var(--butter); color: var(--deep);
  box-shadow: inset 0 0 0 1px rgba(47,95,153,.28);
}
body.sparkle .rect-btn:hover { box-shadow: inset 0 0 0 1px rgba(47,95,153,.28), 0 14px 28px rgba(47,95,153,.22); }

/* Work: "More work" rows fill deep blue on hover (no black on blue) */
body.sparkle .more-head h2 { color: var(--deep); }
@media (hover: hover) and (pointer: fine) {
  body.sparkle .more-row[data-peek]:hover { background: var(--deep); color: var(--butter); }
  body.sparkle .more-row[data-peek]:hover .more-cell { color: rgba(245,241,232,.75); }
}

/* About: skill chips outlined in Vista, deep-blue text; the breaker line in deep blue */
body.sparkle .about-tags span { border-color: var(--vista); color: var(--deep); }
body.sparkle .text-breaker { color: var(--deep); }

/* Contact: all on cream, no blue panel (25 Oct, Alex: the Vista info half "doesn't look good"); form focus in deep blue */
body.sparkle .contact-info h2, body.sparkle .contact-form-wrap h2 { color: var(--deep); }
body.sparkle .form-field input:focus, body.sparkle .form-field textarea:focus { border-color: var(--deep); }
body.sparkle .form-success .check { background: var(--vista); color: var(--butter); }

/* CTA: butter on Vista, with the home page's pop-up stars and cursor trail */
body.sparkle .cta-card { background: var(--vista); color: var(--butter); border-top-color: transparent; }
body.sparkle .cta-card h2 { color: var(--butter); }
body.sparkle .cta-card p, body.sparkle .cta-card .cta-email-link { color: var(--deep); }
body.sparkle .cta-card .cta-email-link:hover { color: var(--ink); }
.cta-card { position: relative; overflow: hidden; }
.cta-card.reveal { transition: opacity 0.85s cubic-bezier(0.16,1,0.3,1), transform 0.85s cubic-bezier(0.16,1,0.3,1), background-color .6s ease; }
.cta-card > :not(.cta-spark) { position: relative; z-index: 1; }
.cta-spark {
  position: absolute; z-index: 0; pointer-events: none;
  width: var(--s); height: var(--s);
  animation: cta-pop var(--d) cubic-bezier(.34,1.56,.64,1) forwards;
}
.cta-spark svg { width: 100%; height: 100%; display: block; }
.cta-spark.trail { animation-name: cta-trail; animation-timing-function: cubic-bezier(.2,.8,.3,1); }
@keyframes cta-trail {
  0%   { transform: translate(0, 0) scale(0) rotate(0deg); opacity: 1; }
  30%  { transform: translate(calc(var(--dx) * .3), calc(var(--dy) * .3)) scale(1) rotate(40deg); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0) rotate(140deg); opacity: 0; }
}
@keyframes cta-pop {
  0%   { transform: scale(0) rotate(-90deg); opacity: 0; }
  25%  { transform: scale(1.1) rotate(10deg); opacity: 1; }
  45%  { transform: scale(.95) rotate(0deg); opacity: 1; }
  100% { transform: scale(0) rotate(90deg); opacity: 0; }
}

/* footer: cream, as on the home page */
body.sparkle .site-footer .logo .dot { color: var(--vista); }
body.sparkle .footer-contact a { color: var(--deep); }
body.sparkle .footer-links a:hover { color: var(--deep); }

/* toggle: same dark-blue pill as the home page */
.sparkle-toggle {
  position: fixed; right: 24px; bottom: 24px; z-index: 90;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 18px 12px 14px;
  border: 0; border-radius: 999px;
  background: #102a4c; color: #feffaf;
  font: 600 14px/1 'Plus Jakarta Sans', sans-serif;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(16,42,76,.3), inset 0 0 0 1px rgba(254,255,175,.18);
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}
.sparkle-toggle:hover { transform: translateY(-2px) scale(1.04); }
.sparkle-toggle:active { transform: scale(.94); }
.sparkle-toggle svg { width: 20px; height: 20px; fill: currentColor; animation: twinkle 2.4s ease-in-out infinite; }
@keyframes twinkle {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(.78) rotate(25deg); }
}
.spark {
  position: fixed; z-index: 95; pointer-events: none;
  left: 0; top: 0; width: var(--s); height: var(--s);
  animation: spark-fly var(--d) cubic-bezier(.15,.8,.3,1) forwards;
}
.spark svg { width: 100%; height: 100%; display: block; }
@keyframes spark-fly {
  0% { transform: translate(var(--x0), var(--y0)) scale(0) rotate(0deg); opacity: 1; }
  60% { opacity: 1; }
  100% { transform: translate(var(--x1), var(--y1)) scale(1) rotate(var(--r)); opacity: 0; }
}
@media (max-width: 640px) {
  .sparkle-toggle { right: 16px; bottom: 16px; padding: 14px; }
  .sparkle-toggle .label { display: none; }
}
/* pages with the toggle: the copyright clears it again on phones and tablets */
@media (max-width: 1100px) { body:has(#sparkleToggle) .footer-sea .footer-bottom { padding-bottom: 100px; } }
@media (prefers-reduced-motion: reduce) { .sparkle-toggle svg { animation: none; } }

/* Back to calm (25 Oct): arriving on a case study from a sparkle page, the page opens on cream and eases to
   white while a "Back to calm" pill shows in the toggle's spot, so the change of colour has a reason.
   Set by the snippet after <body> on the case studies, played by case.js */
body.calming {
  --ink: #0f2d3a;
  --muted: #4e6168;
  --line: rgba(15,45,58,.14);
  --paper: #f5f1e8;
}
body.calm-in, body.calm-in .site-footer, body.calm-in .footer-sea { transition: background-color 1.4s ease-in-out, color 1.4s ease-in-out, border-color 1.4s ease-in-out; }
.calm-note { pointer-events: none; animation: calm-note-in .5s cubic-bezier(.34,1.56,.64,1) backwards; transition: opacity .6s ease, transform .6s ease; }
.calm-note.out { opacity: 0; transform: translateY(10px); }
@keyframes calm-note-in { from { opacity: 0; transform: translateY(14px) scale(.9); } }
@media (max-width: 640px) { .calm-note { padding: 12px 18px 12px 14px; } }
/* like the home intro's loader: the sparkle counts down from 100% to 0% while a butter line drains, in step with the fade */
.calm-note .pct { min-width: 4ch; text-align: right; font-variant-numeric: tabular-nums; opacity: .75; }
.calm-note::after {
  content: ""; position: absolute; left: 18px; right: 18px; bottom: 6px; height: 1.5px; border-radius: 2px;
  background: currentColor; opacity: .55; transform-origin: left; transform: scaleX(var(--p, 1));
}