/* Dead Monkey theme 2.0: one stylesheet, no build step.
   Ground: Deep Black. Text: Bone. One action color: Prime Yellow. Teal only for focus and inline links.
   Structure: a visible hairline grid, numbered rows and cells, Montserrat for everything. */

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/montserrat-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* 2.2.5: the script wordmark on the Instagram post frames, subset to its nine letters (1.7 KB). */
@font-face {
  font-family: 'Grand Hotel';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/grandhotel-instagram.woff2') format('woff2');
  unicode-range: U+0049, U+006E, U+0073, U+0074, U+0061, U+0067, U+0072, U+006D;
}

:root {
  --deep: #0B0B0B;
  --ink: #0B0B0B; /* text on yellow and on bone: never flips */
  --coal: #151513;
  --bone: #F4E9D6;
  --prime: #FFC400;
  --teal: #00D1C2;
  --line: rgba(244, 233, 214, 0.16);
  --line-strong: rgba(244, 233, 214, 0.34);
  --mute: rgba(244, 233, 214, 0.66);
  --dim: rgba(244, 233, 214, 0.58);
  --gutter: clamp(1rem, 4vw, 3rem);
  --shell: 92rem;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --header-rgb: 11 11 11;
  --ground: var(--deep);
  color-scheme: dark;
  interpolate-size: allow-keywords;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--deep);
  color: var(--bone);
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 450;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
@media (min-width: 48em) { body { font-size: 1.0625rem; } }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--prime); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 2px; box-shadow: 0 0 0 6px rgba(0, 209, 194, 0.18), 0 0 18px rgba(0, 209, 194, 0.35); }
::selection { background: var(--prime); color: var(--ink); }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.sr-only { position: absolute; 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: 1rem; top: -4rem; z-index: 200; background: var(--prime); color: var(--ink); padding: 0.75rem 1.25rem; font-weight: 700; border-radius: 999px; }
.skip:focus { top: 1rem; }

/* ---------------------------------------------------------------- Type */
.display { font-weight: 800; text-transform: uppercase; letter-spacing: -0.035em; line-height: 0.92; }
.h-hero { font-size: clamp(2.9rem, 8vw, 8.4rem); }
.h-section { font-size: clamp(2.1rem, 5.4vw, 5.25rem); font-weight: 800; text-transform: uppercase; letter-spacing: -0.03em; line-height: 0.95; }
.h-page { font-size: clamp(2.3rem, 6vw, 5.5rem); font-weight: 800; letter-spacing: -0.03em; line-height: 0.98; max-width: 16ch; }
.h-row { font-size: clamp(1.6rem, 3.6vw, 3.4rem); font-weight: 800; text-transform: uppercase; letter-spacing: -0.03em; line-height: 0.95; }
.lede { font-size: clamp(1.1rem, 1.25vw, 1.4rem); font-weight: 500; line-height: 1.5; max-width: 36ch; color: var(--bone); text-wrap: pretty; }
.small { font-size: 0.875rem; color: var(--mute); }
.caps { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }
.label { display: flex; align-items: center; gap: 0.9rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mute); }
.label-n { color: var(--prime); font-weight: 700; text-shadow: 0 0 12px rgba(255, 196, 0, 0.55); }
.label-rule { width: 2.5rem; height: 1px; background: linear-gradient(90deg, var(--line-strong), var(--teal)); position: relative; }
.label-rule::after { content: ''; position: absolute; right: -2px; top: -2px; width: 5px; height: 5px; border-radius: 999px; background: var(--teal); box-shadow: 0 0 8px var(--teal); }
.x { width: 1em; height: 1em; }
.slashes { display: block; height: 1em; width: auto; color: var(--prime); filter: drop-shadow(0 0 14px rgba(255, 196, 0, 0.45)); }
.slashes path { transform-box: fill-box; transform-origin: 50% 100%; }
.hero-slashes { height: clamp(3.5rem, 8vw, 8rem); margin-bottom: 0.5rem; }
@media (prefers-reduced-motion: no-preference) {
  .hero-slashes path { animation: slash-in 0.9s var(--ease) both; }
  .hero-slashes g:nth-child(2) path { animation-delay: 0.1s; }
  .hero-slashes g:nth-child(3) path { animation-delay: 0.2s; }
}
@keyframes slash-in { from { opacity: 0; transform: translate(-30%, 50%); } }
.h-section::before, .page-head .h-page::before { content: ''; display: inline-block; width: 1.05em; height: 0.78em; margin-right: 0.18em; vertical-align: -0.02em; background: var(--prime); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 100'%3E%3Cpath d='M0 100h26L60 0H34Zm40 0h26L100 0H74Zm40 0h26L140 0h-26Z'/%3E%3C/svg%3E") left center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 100'%3E%3Cpath d='M0 100h26L60 0H34Zm40 0h26L100 0H74Zm40 0h26L140 0h-26Z'/%3E%3C/svg%3E") left center / contain no-repeat; filter: drop-shadow(0 0 10px rgba(255, 196, 0, 0.5)); }

/* ---------------------------------------------------------------- Layout */
.shell { width: min(100% - 2 * var(--gutter), var(--shell)); margin-inline: auto; }
.section { border-top: 1px solid var(--line); padding-block: clamp(4rem, 9vw, 8rem); position: relative; }
.section-head { display: grid; gap: 1.5rem; margin-bottom: clamp(2rem, 5vw, 4rem); }
@media (min-width: 64em) {
  .section-head { grid-template-columns: 1fr 1fr; align-items: end; }
  .section-head .lede { justify-self: end; }
}
.frame { border-inline: 1px solid var(--line); }
.cells { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.cells > * { background: var(--deep); padding: clamp(1.5rem, 3vw, 2.5rem); display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
/* Column counts that always divide evenly, so no cell ever sits beside an empty slot */
@media (min-width: 40em) { .cells-3 { grid-template-columns: repeat(2, 1fr); } .cells-3 > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 52em) { .cells-3 { grid-template-columns: repeat(3, 1fr); } .cells-3 > :last-child:nth-child(odd) { grid-column: auto; } }
@media (min-width: 40em) { .cells-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .cells-4 { grid-template-columns: repeat(4, 1fr); } }
.cell-n { font-size: clamp(3rem, 6vw, 5.5rem); font-weight: 800; line-height: 1; color: var(--prime); letter-spacing: -0.04em; text-shadow: 0 0 28px rgba(255, 196, 0, 0.35); }
.cells > * { position: relative; transition: box-shadow 0.5s var(--ease); }
.cells > *::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 50% at 0% 0%, rgba(255, 196, 0, 0.16), transparent 70%); opacity: 0; transition: opacity 0.5s var(--ease); }
.cells > *:hover { box-shadow: inset 0 0 0 1px rgba(255, 196, 0, 0.4), 0 0 30px rgba(255, 196, 0, 0.12); z-index: 1; }
.cells > *:hover::after { opacity: 1; }
.cell-t { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; }
.cell p { color: var(--mute); max-width: 36ch; }
.cell-grain { background-image: url('../img/grain.png'); background-size: 320px; }

/* Rows: the index device. Number, content, optional art. Hover lifts to coal. */
.rows { border-top: 1px solid var(--line); }
.row { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem clamp(1rem, 3vw, 2.5rem); padding-block: clamp(1.5rem, 3vw, 2.5rem); border-bottom: 1px solid var(--line); position: relative; align-items: start; transition: background-color 0.4s var(--ease); }
.row.has-img { grid-template-columns: 3rem 1fr; }
@media (min-width: 48em) {
  .row { grid-template-columns: 4rem 1fr; }
  .row.has-img, .row-work { grid-template-columns: 4rem 1fr minmax(14rem, 32%); }
}
.row::before { content: ''; position: absolute; left: calc(-1 * var(--gutter)); top: 0; bottom: 0; width: 3px; background: var(--prime); opacity: 0; box-shadow: 0 0 18px 2px rgba(255, 196, 0, 0.6); transition: opacity 0.4s var(--ease); }
.row:hover, .row:focus-within { background: var(--coal); box-shadow: 0 0 0 var(--gutter) var(--coal); clip-path: inset(0 calc(-1 * var(--gutter))); }
.row:hover::before, .row:focus-within::before { opacity: 1; }
.row-n { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; color: var(--prime); padding-top: 0.5rem; transition: color 0.3s, text-shadow 0.3s; }
.row:hover .row-n, .row:focus-within .row-n { color: var(--teal); text-shadow: 0 0 10px rgba(0, 209, 194, 0.6); }
.row-main { display: grid; gap: 0.75rem; min-width: 0; }
/* Desktop services: the title on the left, the line and tags on the right, so the rows use the
   full width (2.1.0). */
@media (min-width: 64em) {
  .services .row-main { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(2rem, 4vw, 4.5rem); padding-right: 4rem; align-items: start; }
  .services .row-title { grid-row: 1 / span 2; }
  .services .row-text, .services .row-tags { grid-column: 2; }
  .services .row-text { padding-top: 0.3rem; }
}
.row-title { font-size: clamp(1.5rem, 3.4vw, 3rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; text-transform: uppercase; }
.row-link { text-decoration: none; }
.row-link::after { content: ''; position: absolute; inset: 0; }
.row-text { color: var(--mute); max-width: 52ch; text-wrap: pretty; }
.row-tags { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); }
.row-art { position: relative; aspect-ratio: 3 / 2; overflow: clip; border: 1px solid var(--line); background: var(--coal); }
.row-art img, .row-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.row:hover .row-art img { transform: scale(1.04); }
.row-art { transition: box-shadow 0.5s var(--ease), border-color 0.5s var(--ease); }
.row:hover .row-art, .row:focus-within .row-art { border-color: rgba(255, 196, 0, 0.5); box-shadow: 0 0 36px rgba(255, 196, 0, 0.22); }
.row-tags .is-concept { color: var(--teal); }
.row-tags .is-client { color: var(--prime); }
.row-go { position: absolute; right: 0; top: clamp(1.5rem, 3vw, 2.5rem); width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--bone); opacity: 0; transform: translateX(-0.5rem); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); }
.row:hover .row-go, .row:focus-within .row-go { opacity: 1; transform: none; border-color: var(--prime); color: var(--prime); box-shadow: 0 0 18px rgba(255, 196, 0, 0.4); }
.row.has-img .row-go, .row-work .row-go { display: none; }
.arrow { width: 1.1em; height: 1.1em; }

/* Work picker: see the 2.2.0 block at the end. */

/* Meta line under posts */
.meta { display: flex; flex-wrap: wrap; gap: 0.6rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
.meta-cat { color: var(--prime); text-decoration: none; position: relative; z-index: 1; }
.meta-sep { opacity: 0.5; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.95rem 1.5rem; border-radius: 999px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; border: 1px solid transparent; transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease); min-height: 3rem; }
.btn-prime { background: var(--prime); color: var(--ink); box-shadow: 0 0 0 0 rgba(255, 196, 0, 0), 0 0 22px rgba(255, 196, 0, 0.32); transition: background-color 0.3s var(--ease), color 0.3s var(--ease), box-shadow 0.4s var(--ease), transform 0.3s var(--ease); }
.btn-prime:hover { background: var(--prime); box-shadow: 0 0 0 1px rgba(255, 196, 0, 0.6), 0 0 44px rgba(255, 196, 0, 0.55); }
.btn-ghost { border-color: var(--line-strong); color: var(--bone); }
.btn-ghost:hover { border-color: var(--teal); color: var(--teal); box-shadow: 0 0 24px rgba(0, 209, 194, 0.22), inset 0 0 0 1px rgba(0, 209, 194, 0.3); }
.btn:active { transform: scale(0.98); }
.btn .arrow { transition: transform 0.3s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
.link { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid var(--line-strong); padding-bottom: 0.3rem; }
.link:hover { border-color: var(--prime); }

/* ---------------------------------------------------------------- Header */
.site-head { position: fixed; inset: 0 0 auto; z-index: 100; border-bottom: 1px solid transparent; transition: border-color 0.4s; }
.site-head .shell { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.5rem; min-height: 4.5rem; }
.wordmark { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--bone); line-height: 1; }
.wordmark--img { height: 2rem; width: auto; }
.wordmark-x { width: 1.25rem; height: 1.25rem; color: var(--prime); flex: none; }
.wordmark-head { width: 2.5rem; height: 2.5rem; flex: none; margin: -0.5rem 0.1rem -0.5rem -0.2rem; filter: drop-shadow(0 0 10px rgba(255, 196, 0, 0.3)); transition: transform 0.5s var(--ease); transform-origin: 50% 80%; }
.wordmark-link:hover .wordmark-head { transform: rotate(-8deg) scale(1.08); }
.wordmark-stamp { display: block; width: 2.4rem; height: 2.55rem; flex: none; margin: -0.5rem 0.05rem -0.5rem -0.15rem; background-color: var(--prime); -webkit-mask: url('../img/stamp-mask.webp') center / contain no-repeat; mask: url('../img/stamp-mask.webp') center / contain no-repeat; filter: drop-shadow(0 0 8px rgba(255, 196, 0, 0.35)); transition: transform 0.5s var(--ease), background-color 0.4s; transform-origin: 50% 80%; }
.wordmark-link:hover .wordmark-stamp { transform: rotate(-8deg) scale(1.08); background-color: var(--bone); }
.wordmark-name { font-weight: 800; font-size: 1.05rem; letter-spacing: -0.02em; text-transform: uppercase; white-space: nowrap; }
@media (max-width: 40em) { .wordmark-name { font-size: 0.95rem; } }
.wordmark-sub { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mute); margin-left: 0.6rem; }
.nav { display: none; justify-content: center; gap: clamp(1rem, 2vw, 2.25rem); }
.nav a { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; color: var(--mute); display: inline-flex; gap: 0.5rem; padding: 0.5rem 0; }
.nav a b { color: var(--prime); font-weight: 700; }
.nav a:hover, .nav a[aria-current] { color: var(--bone); }
.nav a { position: relative; }
.nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0.1rem; height: 2px; background: var(--teal); box-shadow: 0 0 10px var(--teal); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.4s var(--ease); }
.nav a:hover::after, .nav a[aria-current]::after { transform: scaleX(1); }
.head-track { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
.head-fill { position: absolute; inset: 0; background: var(--prime); box-shadow: 0 0 10px var(--prime), 0 0 24px rgba(255, 196, 0, 0.5); transform-origin: 0 50%; transform: scaleX(var(--progress, 0)); }
.head-ticks { position: absolute; inset: 0; opacity: 0; transition: opacity 0.4s; }
.site-head.is-solid .head-ticks { opacity: 1; }
.head-tick { position: absolute; top: 50%; left: calc(var(--at, 0) * 100%); width: 12px; height: 14px; transform: translate(-50%, -50%); background: var(--line-strong); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 100'%3E%3Cpath d='M0 100h26L60 0H34Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 100'%3E%3Cpath d='M0 100h26L60 0H34Z'/%3E%3C/svg%3E") center / contain no-repeat; transition: background-color 0.4s, filter 0.4s; }
.head-tick.is-past { background: var(--prime); filter: drop-shadow(0 0 6px var(--prime)); }
.nav a.is-here { color: var(--bone); }
.nav a.is-here::after { transform: scaleX(1); }
.head-actions { display: flex; align-items: center; gap: 0.75rem; justify-self: end; }
.menu-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 0; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; }
@media (min-width: 64em) { .nav { display: flex; } .menu-btn { display: none; } }
.nav a, .site-head .btn { white-space: nowrap; }
@media (max-width: 79.99em) { .site-head .wordmark-sub { display: none; } }
@media (max-width: 40em) { .head-actions .btn { padding: 0.8rem 1.1rem; } .wordmark-sub { display: none; } .btn-long { display: none; } }
@media (min-width: 40.01em) { .btn-short { display: none; } }
@media (max-width: 47.99em) { .row.has-img .row-art, .row-work .row-art { grid-column: 2; max-width: 22rem; } }

/* Full-screen menu on the Popover API (no JavaScript) */
.menu-sheet { position: fixed; inset: 0; width: 100%; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: var(--gutter); border: 0; background: var(--deep); color: var(--bone); clip-path: inset(0 0 100% 0); transition: clip-path 0.7s cubic-bezier(0.77, 0, 0.18, 1), overlay 0.7s allow-discrete, display 0.7s allow-discrete; background-image: url('../img/grain.png'); background-size: 420px; }
.menu-sheet:popover-open { clip-path: inset(0 0 0 0); }
@starting-style { .menu-sheet:popover-open { clip-path: inset(0 0 100% 0); } }
html:has(.menu-sheet:popover-open) { overflow: hidden; }
.menu-sheet .menu-top { display: flex; justify-content: space-between; align-items: center; min-height: 4.5rem; }
.menu-sheet ul { margin-block: auto; display: grid; gap: 0.25rem; }
.menu-sheet li { opacity: 0; transform: translateY(1.2em); transition: opacity 0.5s ease, transform 0.7s var(--ease); transition-delay: calc(0.25s + var(--i, 0) * 0.06s); }
.menu-sheet:popover-open li { opacity: 1; transform: none; }
@starting-style { .menu-sheet:popover-open li { opacity: 0; transform: translateY(1.2em); } }
.menu-sheet li a { display: flex; align-items: baseline; gap: 1rem; font-size: clamp(2.2rem, 9vw, 5.5rem); font-weight: 800; text-transform: uppercase; letter-spacing: -0.03em; line-height: 1.05; text-decoration: none; }
.menu-sheet li a b { font-size: 0.8125rem; letter-spacing: 0.2em; color: var(--teal); font-weight: 700; text-shadow: 0 0 10px rgba(0, 209, 194, 0.5); }
.menu-sheet .menu-foot a:hover { color: var(--teal); }
.menu-sheet .menu-foot { display: grid; gap: 1rem; color: var(--mute); font-size: 0.875rem; }
.menu-sheet .menu-foot a { text-decoration: none; }
.menu-inner { display: flex; flex-direction: column; height: 100%; position: relative; }
.menu-slashes { position: absolute; right: 0; top: 4.5rem; height: clamp(5rem, 18vh, 9rem); z-index: -1; }
.menu-sheet { isolation: isolate; }

/* ---------------------------------------------------------------- Hero */
.hero { position: relative; padding-top: 7rem; padding-bottom: 0; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; overflow: clip; isolation: isolate; }
.hero::before { content: ''; position: absolute; inset: 0; z-index: -2; background-image: url('../img/grain-lite.png'); background-size: 512px; opacity: 0.45; pointer-events: none; }
.hero-grid { display: grid; gap: 2rem; align-items: end; }
@media (min-width: 64em) { .hero-grid { grid-template-columns: minmax(0, 13fr) minmax(0, 9fr); gap: clamp(2rem, 4vw, 5rem); } }
.hero-copy { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.hero-top { display: grid; gap: 0.75rem; justify-items: start; }
.hero .h-hero { max-width: 12ch; margin: 0; }
.hero .lede { max-width: 42ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; }
.swipe { position: relative; display: inline-block; white-space: nowrap; isolation: isolate; }
/* A clean slanted rule under "Bad monkey.", the same lean as the slashes, drawn in from the left. */
.swipe::before { content: ''; position: absolute; left: 0.04em; right: 0.12em; bottom: -0.08em; height: 0.1em; z-index: -1; background: var(--prime); transform: skewX(-24deg); transform-origin: 0 50%; box-shadow: 0 0 18px rgba(255, 196, 0, 0.45); }
@media (prefers-reduced-motion: no-preference) {
  .swipe::before { animation: rule-in 0.5s cubic-bezier(0.2, 0.9, 0.2, 1) 0.5s both; }
}
@keyframes rule-in { from { transform: skewX(-24deg) scaleX(0); } }
.hero-art { position: relative; display: grid; place-items: center; min-height: 18rem; }
.stamp { display: block; width: min(100%, 34rem); aspect-ratio: 800 / 852; background-color: var(--prime); -webkit-mask: url('../img/stamp-mask.webp') center / contain no-repeat; mask: url('../img/stamp-mask.webp') center / contain no-repeat; transition: background-color 0.6s var(--ease); }
.hero-art:hover .stamp { background-color: var(--bone); }
.hero-art::before { content: ''; position: absolute; inset: 2% -6%; z-index: -1; background: radial-gradient(closest-side, rgba(255, 196, 0, 0.42), rgba(255, 196, 0, 0.12) 45%, transparent 72%); filter: blur(18px); animation: breathe 5.5s ease-in-out infinite; transform-origin: center; }
.hero-art::after { content: ''; position: absolute; left: 62%; top: 30%; width: 26%; height: 26%; z-index: -1; background: radial-gradient(closest-side, rgba(0, 209, 194, 0.22), transparent 70%); filter: blur(16px); pointer-events: none; }
@keyframes breathe { 0%, 100% { opacity: 0.8; transform: scale(0.96); } 50% { opacity: 1; transform: scale(1.04); } }
.dots { position: absolute; right: -6%; top: 2%; width: 45%; height: 45%; z-index: -1; background-image: radial-gradient(circle, var(--prime) 1.3px, transparent 1.6px); background-size: 11px 11px; -webkit-mask: radial-gradient(circle at 70% 30%, #000, transparent 70%); mask: radial-gradient(circle at 70% 30%, #000, transparent 70%); opacity: 0.6; pointer-events: none; }
.hero-art .stamp { animation: none; }
.hero-head { width: min(100%, 34rem); height: auto; position: relative; z-index: 1; filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.6)); transition: transform 0.7s var(--ease); transform-origin: 50% 85%; }
.hero-art:hover .hero-head { transform: rotate(-3deg) scale(1.02); }
.hero-band { margin-top: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--line); background: var(--deep); }
.hero-foot { display: grid; }
.hero-foot > * { padding: 1.1rem 0; display: grid; gap: 0.3rem; font-size: 0.875rem; color: var(--mute); }
.hero-foot > * + * { border-top: 1px solid var(--line); }
@media (min-width: 48em) {
  .hero-foot { grid-template-columns: 1fr 1fr 1fr; }
  .hero-foot > * { padding: 1.3rem 1.5rem; }
  .hero-foot > * + * { border-top: 0; border-left: 1px solid var(--line); }
  .hero-foot > :first-child { padding-left: 0; }
  .hero-foot > :last-child { padding-right: 0; }
}
.hero-foot b { color: var(--bone); font-weight: 600; }
.hero-foot a { text-decoration: none; }
.clock { display: inline-flex; align-items: center; gap: 0.5rem; }
.clock::before { content: ''; width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--teal); box-shadow: 0 0 10px var(--teal), 0 0 22px rgba(0, 209, 194, 0.6); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 8px var(--teal), 0 0 16px rgba(0, 209, 194, 0.4); } 50% { box-shadow: 0 0 12px var(--teal), 0 0 30px rgba(0, 209, 194, 0.75); } }

@media (max-width: 63.99em) {
  .hero { justify-content: flex-start; padding-top: 6rem; min-height: 0; }
  .hero-art { order: -1; min-height: 0; }
  .stamp, .hero-head { width: min(70%, 20rem); margin-inline: auto; }
  .hero-art::before { inset: 0 20%; }
}
/* Phones (2.2.2, James): the head sits beside the slashes, pushed toward the right edge, a little bigger than
   before; the studio line runs under both. The copy and top blocks unwrap into the hero grid to make that row. */
@media (max-width: 40em) {
  .hero { padding-top: 5.25rem; }
  .hero-grid { grid-template-columns: minmax(0, 1fr) auto; column-gap: 0.75rem; row-gap: 1.5rem; align-items: end; }
  .hero-copy, .hero-top { display: contents; }
  .hero-slashes { grid-column: 1; grid-row: 1; align-self: end; height: 4.5rem; margin-bottom: 0.25rem; }
  .hero-top .label { grid-column: 1 / -1; grid-row: 2; }
  .hero-art { grid-column: 2; grid-row: 1; order: 0; justify-self: end; margin-right: 0.75rem; margin-bottom: -0.5rem; }
  .hero-art::before { inset: 4% 6%; }
  .hero-art::after { left: 58%; top: 26%; }
  .hero .h-hero, .hero .lede, .hero-cta { grid-column: 1 / -1; }
  .hero .h-hero { grid-row: 3; }
  .hero .lede { grid-row: 4; }
  .hero-cta { grid-row: 5; }
  .stamp, .hero-head { width: min(58vw, 15rem); margin: 0; }
}

/* ---------------------------------------------------------------- Homepage sections */
.audience { position: relative; }
.audience .cells > *::before { content: ''; width: 1.1rem; height: 1.1rem; background: var(--prime); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M14 23c3-6 9-10 14-7l24 22 25-24c5-4 11 0 13 6 2 5-1 9-4 12L63 52l22 21c4 4 6 9 2 14-4 5-10 5-14 1L51 67 28 90c-4 4-11 3-14-2-3-4-1-9 3-13l21-22L17 34c-4-4-6-7-3-11z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M14 23c3-6 9-10 14-7l24 22 25-24c5-4 11 0 13 6 2 5-1 9-4 12L63 52l22 21c4 4 6 9 2 14-4 5-10 5-14 1L51 67 28 90c-4 4-11 3-14-2-3-4-1-9 3-13l21-22L17 34c-4-4-6-7-3-11z'/%3E%3C/svg%3E") center / contain no-repeat; }
.process .cells > * { min-height: 16rem; }

/* Public sector: the Oak Hollow concept in a laptop and a phone, both scrolling with the page. */
.civic-show { display: grid; gap: 3rem; }
@media (min-width: 64em) { .civic-show { grid-template-columns: 3fr 2fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: start; } }
.civic-fig { margin: 0; position: relative; }
.civic-laptop { border: 1px solid var(--line-strong); background: var(--coal); overflow: clip; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8), 0 0 40px rgba(255, 196, 0, 0.06); }
.civic-bar { display: flex; align-items: center; gap: 0.45rem; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--line); }
.civic-bar span { width: 0.55rem; height: 0.55rem; border-radius: 999px; background: var(--line-strong); }
.civic-bar i { font-style: normal; margin-left: 0.6rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); padding: 0.25rem 0.7rem; border: 1px solid var(--line); border-radius: 999px; }
.civic-screen { position: relative; overflow: clip; container-type: size; view-timeline-name: --civ; background: #0f1a2b; }
.civic-screen img { display: block; width: 100%; height: auto; }
.civic-screen-d { aspect-ratio: 16 / 10; }
.civic-screen-m { aspect-ratio: 390 / 760; }
.civic-phone { position: absolute; right: -2%; bottom: 2.5rem; width: 24%; max-width: 10rem; border: 1px solid var(--line-strong); border-radius: 1.4rem; padding: 0.3rem; background: var(--deep); box-shadow: 0 24px 40px -20px rgba(0, 0, 0, 0.9), 0 0 30px rgba(255, 196, 0, 0.1); }
.civic-phone .civic-screen { border-radius: 1.1rem; }
@media (max-width: 40em) { .civic-laptop { display: none; } .civic-phone { position: static; width: min(62%, 15rem); margin-inline: auto; } }
.civic-cap { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; margin-top: 3.5rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); }
@media (max-width: 40em) { .civic-cap { margin-top: 1.5rem; } }
.civic-cap .is-concept { color: var(--teal); border: 1px solid rgba(0, 209, 194, 0.5); border-radius: 999px; padding: 0.3rem 0.7rem; }
.civic-kicker { color: var(--dim); }
.civic-lead { font-size: clamp(1.25rem, 1.8vw, 1.7rem); font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; margin-top: 0.75rem; text-wrap: pretty; max-width: 30ch; }
.civic-built { list-style: none; margin: 1.75rem 0 0; padding: 0; border-top: 1px solid var(--line); }
.civic-built li { display: grid; grid-template-columns: 2.25rem 1fr; gap: 0.5rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.civic-n { color: var(--prime); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.2em; padding-top: 0.3rem; text-shadow: 0 0 12px rgba(255, 196, 0, 0.55); }
.civic-built h3 { font-size: 1rem; font-weight: 800; letter-spacing: -0.01em; }
.civic-built p { color: var(--mute); margin-top: 0.3rem; font-size: 0.95rem; }
.civic-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.civic-pillars { list-style: none; margin: clamp(3rem, 6vw, 5rem) 0 0; padding: 0; }
/* Phones skip the homepage pillars, which the Send your RFP page shows in full (2.1.0). */
@media (max-width: 39.99em) { #civic .civic-pillars { display: none; } }
.civic-pillars .cell-n { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.2em; color: var(--prime); text-shadow: 0 0 12px rgba(255, 196, 0, 0.55); line-height: 1; }
.civic-pillars .cell-t { font-size: clamp(1.4rem, 2vw, 1.9rem); font-weight: 800; letter-spacing: -0.02em; }
.chips { list-style: none; margin: auto 0 0; padding: 0.5rem 0 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chips li { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.35rem 0.7rem; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--mute); }
.civic-rfp { display: grid; gap: 1.5rem; margin-top: clamp(2rem, 4vw, 3rem); padding: clamp(1.5rem, 3vw, 2.5rem); border: 1px solid var(--line); background: var(--coal); position: relative; overflow: clip; }
.civic-rfp::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(50% 120% at 100% 50%, rgba(255, 196, 0, 0.12), transparent 70%); }
@media (min-width: 52em) { .civic-rfp { grid-template-columns: 1fr auto; align-items: center; } }
.civic-rfp .btn, .civic-actions .btn { justify-self: start; }
.civic-rfp .civic-lead { max-width: 44ch; }
.studio { display: grid; gap: 2rem; }
@media (min-width: 64em) { .studio { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 7rem); align-items: start; } }
.studio-art { position: relative; aspect-ratio: 4 / 5; border: 1px solid var(--line); overflow: clip; background: var(--coal); }
.studio-art img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.studio-art figcaption { position: absolute; left: 1rem; bottom: 1rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; background: var(--deep); padding: 0.5rem 0.8rem; border-left: 2px solid var(--teal); box-shadow: -2px 0 12px rgba(0, 209, 194, 0.45); }
.studio-art { transition: box-shadow 0.6s var(--ease); }
.studio-art:hover { box-shadow: 0 0 48px rgba(255, 196, 0, 0.18); }
.manifesto { font-size: clamp(1.5rem, 2.8vw, 2.6rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; text-wrap: pretty; }
.manifesto em { font-style: normal; color: var(--prime); text-shadow: 0 0 18px rgba(255, 196, 0, 0.4); }
.facts { display: grid; gap: 1.5rem; margin-top: 2.5rem; }
@media (min-width: 40em) { .facts { grid-template-columns: 1fr 1fr; } }
.facts dt { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); margin-bottom: 0.4rem; }
.facts dd { margin: 0; color: var(--mute); max-width: 32ch; }
.facts dd a { color: var(--bone); text-decoration: underline; text-decoration-color: var(--teal); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.sticker { position: absolute; width: clamp(5rem, 10vw, 9rem); pointer-events: none; filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 22px rgba(255, 196, 0, 0.3)); }
.sticker-process { right: 4%; top: -3.5rem; transform: rotate(12deg); z-index: 2; }
.sticker-services { right: 6%; top: -3rem; transform: rotate(-12deg); z-index: 2; }
.sticker-work { left: 0; bottom: 100%; width: clamp(4rem, 7vw, 6.5rem); transform: translateY(40%) rotate(-10deg); }

/* Quotes (only with real, approved reviews) */
.quotes .cells > * { gap: 1.5rem; }
.quote { font-size: 1.25rem; font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; text-wrap: pretty; }
.quote::before { content: '“'; color: var(--prime); }
.quote::after { content: '”'; color: var(--prime); }
.quote-by { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); }
.quote-by a { color: var(--dim); }

/* Start a project */
.start { display: grid; gap: 3rem; }
@media (min-width: 64em) { .start { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: clamp(2rem, 6vw, 7rem); } }
.start-side { display: grid; gap: 2rem; align-content: start; }
.contact-list { display: grid; gap: 1.2rem; }
.contact-list a { display: inline-block; padding-block: 0.25rem; text-decoration: none; font-size: clamp(1.2rem, 1.8vw, 1.6rem); font-weight: 700; letter-spacing: -0.02em; word-break: break-word; }
.contact-list small { display: block; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); margin-bottom: 0.3rem; }
.socials { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.socials a { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; color: var(--mute); }
.socials a:hover { color: var(--prime); }
.mascot { margin: 1rem 0 0; position: relative; width: clamp(10rem, 22vw, 17rem); isolation: isolate; }
.mascot::before { content: ''; position: absolute; inset: 10% -20% 0; z-index: -1; background: radial-gradient(closest-side, rgba(255, 196, 0, 0.3), transparent 72%); filter: blur(18px); }
.mascot img { width: 100%; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.6)); }
@media (max-width: 63.99em) { .mascot { display: none; } }

.lead { display: grid; gap: 1.75rem; position: relative; }
.lead-grid { display: grid; gap: 1.75rem; }
@media (min-width: 40em) { .lead-grid { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 0.5rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.field > span, .field > legend { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mute); padding: 0; }
.field em { font-style: normal; color: var(--dim); letter-spacing: 0.1em; text-transform: none; }
.field input, .field select, .field textarea { width: 100%; background: transparent; color: var(--bone); border: 0; border-bottom: 1px solid var(--line-strong); padding: 0.75rem 0; font: inherit; border-radius: 0; min-height: 3rem; transition: border-color 0.3s; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23F4E9D6' stroke-width='2'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0 center; background-size: 1rem; padding-right: 1.5rem; }
.field select option { background: var(--coal); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 1px 0 var(--teal), 0 8px 22px -8px rgba(0, 209, 194, 0.6); }
.field input:user-invalid, .field textarea:user-invalid { border-color: #ff6b57; }
.field textarea { resize: vertical; }
.checks { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.field-set .checks { margin-top: 1rem; }
.check { position: relative; }
.check input { position: absolute; inset: 0; opacity: 0; }
.check span { display: inline-block; padding: 0.6rem 1rem; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 0.85rem; font-weight: 600; transition: background-color 0.3s, color 0.3s, border-color 0.3s; }
.check input:checked + span { background: var(--prime); color: var(--ink); border-color: var(--prime); box-shadow: 0 0 16px rgba(255, 196, 0, 0.45); }
.check input:focus-visible + span { outline: 2px solid var(--teal); outline-offset: 2px; }
.hp { position: absolute; left: -9999px; }
.lead-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.lead-status:empty { display: none; }
.lead-status { padding: 1rem 1.25rem; border: 1px solid var(--line-strong); font-weight: 500; }
.lead-status.is-ok { border-color: var(--teal); box-shadow: 0 0 28px rgba(0, 209, 194, 0.2); }
.lead-status.is-err { border-color: #ff6b57; }
.lead.is-sent .lead-grid, .lead.is-sent .field, .lead.is-sent .lead-foot { display: none; }
/* The RFP drop zone */
.drop { position: relative; }
.drop-zone { position: relative; display: grid; justify-items: start; gap: 0.5rem; padding: clamp(1.5rem, 3vw, 2.25rem); border: 1px dashed var(--line-strong); background: var(--coal); cursor: pointer; overflow: clip; transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.drop-zone:hover, .drop.is-over .drop-zone { border-color: var(--prime); background: rgba(255, 196, 0, 0.05); box-shadow: 0 0 28px rgba(255, 196, 0, 0.14); }
.drop-zone:has(input:focus-visible) { outline: 2px solid var(--teal); outline-offset: 2px; }
.drop-slashes { position: absolute; right: 4%; top: 50%; height: 140%; transform: translateY(-50%); opacity: 0.1; pointer-events: none; }
.drop.is-over .drop-slashes { opacity: 0.25; }
.drop-text { font-size: 1rem; font-weight: 500; color: var(--bone); position: relative; }
.drop-text u { text-decoration-color: var(--prime); text-underline-offset: 0.2em; }
.drop-hint { font-size: 0.8125rem; color: var(--mute); position: relative; }
.drop-zone input { position: relative; margin-top: 0.5rem; font-size: 0.85rem; color: var(--mute); max-width: 100%; }
.drop.is-js .drop-zone input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.drop-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.drop-list:empty { display: none; }
.drop-list li { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.9rem; border: 1px solid var(--line-strong); font-size: 0.9rem; }
.drop-list li::before { content: ''; width: 0.9rem; height: 1.1rem; flex: none; border: 1.5px solid var(--prime); border-radius: 2px; box-shadow: 0 0 10px rgba(255, 196, 0, 0.35); }
.drop-list .drop-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drop-list .drop-size { color: var(--dim); font-size: 0.8125rem; margin-left: auto; flex: none; }
.drop-list button { background: none; border: 0; color: var(--mute); font: inherit; font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; padding: 0.2rem 0.4rem; flex: none; }
.drop-list button:hover { color: var(--prime); }
.lead.is-sent .drop { display: none; }

/* The RFP page */
.rfp-steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.rfp-steps li { display: grid; grid-template-columns: 2.25rem 1fr; gap: 0.5rem; padding: 1.25rem 0; border-bottom: 1px solid var(--line); }
.rfp-steps h2 { font-size: 1.1rem; font-weight: 800; letter-spacing: -0.01em; }
.rfp-steps p { color: var(--mute); margin-top: 0.35rem; font-size: 0.95rem; max-width: 38ch; }

.lead-done { display: grid; gap: 1rem; justify-items: start; }
.lead-done img { width: 9rem; }
.lead-done h3 { font-size: clamp(1.6rem, 3vw, 2.4rem); text-transform: uppercase; }

/* ---------------------------------------------------------------- Pages */
.page-head { padding-top: clamp(8rem, 16vw, 12rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); display: grid; gap: 1.5rem; }
.page-head .lede { max-width: 46ch; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chips a { padding: 0.55rem 1rem; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 0.8125rem; font-weight: 600; text-decoration: none; }
.chips a[aria-current], .chips a:hover { background: var(--prime); color: var(--ink); border-color: var(--prime); }
.pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 3rem; }
.pager a, .pager span { min-width: 2.75rem; height: 2.75rem; padding: 0 1rem; display: inline-grid; place-items: center; border-radius: 999px; font-size: 0.8125rem; font-weight: 700; text-decoration: none; border: 1px solid var(--line-strong); }
.pager .current { background: var(--prime); color: var(--ink); border-color: var(--prime); }
.pager .dots { position: static; width: auto; height: auto; background: none; mask: none; -webkit-mask: none; border: 0; opacity: 0.5; }
.empty { padding: 4rem 0; color: var(--mute); }

/* Reading: a bone sheet for long text */
.sheet { background: var(--bone); color: var(--ink); color-scheme: light; --mute: rgba(11, 11, 11, 0.68); --dim: rgba(11, 11, 11, 0.6); --line: rgba(11, 11, 11, 0.14); --line-strong: rgba(11, 11, 11, 0.3); padding-block: clamp(3rem, 7vw, 6rem); }
.sheet a:hover { color: #0a6e68; }
.sheet .prose a { color: #07655f; text-decoration-color: var(--teal); text-decoration-thickness: 2px; }
.sheet .meta-cat, .sheet .byline a { color: #07655f; }
.prose { max-width: 44rem; font-size: 1.125rem; line-height: 1.75; }
@media (min-width: 48em) { .prose { font-size: 1.1875rem; } }
.prose > * + * { margin-top: 1.4em; }
.prose h2, .prose h3 { margin-top: 2.2em; letter-spacing: -0.02em; line-height: 1.15; }
.prose h2 { font-size: 1.9rem; }
.prose h3 { font-size: 1.4rem; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose ul { list-style: none; }
.prose ul > li { position: relative; }
.prose ul > li::before { content: ''; position: absolute; left: -1.4em; top: 0.55em; width: 0.65em; height: 0.65em; background: var(--prime); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M14 23c3-6 9-10 14-7l24 22 25-24c5-4 11 0 13 6 2 5-1 9-4 12L63 52l22 21c4 4 6 9 2 14-4 5-10 5-14 1L51 67 28 90c-4 4-11 3-14-2-3-4-1-9 3-13l21-22L17 34c-4-4-6-7-3-11z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M14 23c3-6 9-10 14-7l24 22 25-24c5-4 11 0 13 6 2 5-1 9-4 12L63 52l22 21c4 4 6 9 2 14-4 5-10 5-14 1L51 67 28 90c-4 4-11 3-14-2-3-4-1-9 3-13l21-22L17 34c-4-4-6-7-3-11z'/%3E%3C/svg%3E") center / contain no-repeat; filter: brightness(0.85); }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: 0.5em; }
.prose blockquote { margin: 2em 0; padding-left: 1.5rem; border-left: 3px solid var(--prime); font-weight: 600; font-size: 1.2em; }
.prose img { border-radius: 2px; }
.prose figcaption, .prose .wp-element-caption { font-size: 0.85rem; color: var(--mute); margin-top: 0.6em; }
.prose pre { background: var(--deep); color: var(--bone); padding: 1.25rem; overflow: auto; font-size: 0.9em; }
.prose code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 3em 0; }
.prose .alignwide { max-width: none; width: min(100%, 64rem); }
.prose .wp-block-columns { display: flex; gap: 2rem; flex-wrap: wrap; }
.prose .wp-block-column { flex: 1 1 18rem; }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.95em; }
.prose th, .prose td { text-align: left; padding: 0.6em 0.8em; border-bottom: 1px solid var(--line); }
.article-head { display: grid; gap: 1.5rem; padding-top: clamp(8rem, 16vw, 12rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.article-head .h-page { max-width: 20ch; }
.article-hero { aspect-ratio: 2 / 1; overflow: clip; border: 1px solid var(--line); background: var(--coal); margin-bottom: -1px; }
.article-hero img { width: 100%; height: 100%; object-fit: cover; }
.byline { display: flex; align-items: center; gap: 1rem; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.byline img { width: 3.5rem; height: 3.5rem; border-radius: 999px; object-fit: cover; filter: grayscale(1); }
.byline b { display: block; font-weight: 700; }
.byline span { font-size: 0.85rem; color: var(--mute); }
.byline a { text-decoration: none; }
.share { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 2rem; }

/* Case study */
.case-meta { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 40em) { .case-meta { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); } }
.case-meta > * { background: var(--deep); padding: 1rem 1.25rem; display: grid; gap: 0.3rem; }
.case-meta dt { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); }
.case-meta dd { margin: 0; font-weight: 600; }
.case-cover { margin-top: clamp(2rem, 5vw, 4rem); aspect-ratio: 16 / 10; overflow: clip; border: 1px solid var(--line); background: var(--coal); }
.case-cover img { width: 100%; height: 100%; object-fit: cover; }
.case-cover, .article-hero { box-shadow: 0 0 60px rgba(255, 196, 0, 0.1); }
.case-meta dd { color: var(--bone); }
.case-meta > div:first-child dd { color: var(--teal); }
.case-cover.is-art { aspect-ratio: 4 / 3; }
.art { container-type: inline-size; }
.case-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.sheet .dm-case { max-width: none; width: min(100%, 72rem); }
.sheet .dm-case > p, .sheet .dm-case > h2, .sheet .dm-case > ul, .sheet .dm-case > ol { max-width: 44rem; }
/* Palette swatches in a case study (2.1.0: case.css only styled them inside .dm-prose, which the
   v2 case wrapper doesn't carry, so they showed as a plain list). */
.dm-case > .dms-swatches { max-width: none; list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0.75rem; }
.dm-case .dms-swatches li { margin: 0; padding: 6.5rem 1rem 1rem; background: var(--c); color: var(--t, #0b0b0b); box-shadow: inset 0 0 0 1px rgba(11, 11, 11, 0.12); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.dm-case .dms-swatches li::before { content: none; }
.dm-case .dms-swatches span { display: block; margin-bottom: 0.2rem; font-size: 1.05rem; font-weight: 800; letter-spacing: -0.01em; text-transform: none; }
@media (max-width: 39.99em) { .dm-case > .dms-swatches { grid-template-columns: 1fr 1fr; } .dm-case .dms-swatches li:first-child { grid-column: 1 / -1; } }
.sheet .wp-block-image.size-full img, .sheet .dm-case .wp-block-image img { width: 100%; }
.sheet .wp-block-columns { margin-top: 2rem; }

/* About */
.about-grid { display: grid; gap: 2.5rem; }
@media (min-width: 64em) { .about-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 7rem); align-items: start; } }
.portrait { position: sticky; top: 6rem; aspect-ratio: 4 / 5; border: 1px solid var(--line); overflow: clip; background: var(--coal); }
.portrait img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.about-prose { font-size: clamp(1.15rem, 1.6vw, 1.5rem); line-height: 1.55; font-weight: 500; }
.about-prose > * + * { margin-top: 1.2em; }
.about-prose p:first-child { font-size: clamp(1.5rem, 2.6vw, 2.4rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; }
.about-prose a { color: var(--teal); }

/* 404 */
.lost { min-height: 100svh; display: grid; place-items: center; text-align: center; padding-block: 8rem 4rem; position: relative; isolation: isolate; }
.lost::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: url('../img/grain.png'); background-size: 512px; opacity: 0.5; }
.lost-inner { display: grid; gap: 1.5rem; justify-items: center; }
.lost img { width: clamp(10rem, 28vw, 20rem); }
.lost h1 { font-size: clamp(3rem, 12vw, 11rem); text-transform: uppercase; letter-spacing: -0.04em; line-height: 0.9; }
.lost .label-n { color: var(--teal); text-shadow: 0 0 14px rgba(0, 209, 194, 0.6); }
.lost img:first-child { filter: drop-shadow(0 0 40px rgba(255, 196, 0, 0.35)); }
.lost .lede { text-align: center; }
.lost-head { width: clamp(6rem, 12vw, 9rem); position: absolute; right: 6%; bottom: 8%; transform: rotate(-8deg); }

/* Search */
.search-form { display: flex; gap: 0.75rem; border-bottom: 1px solid var(--line-strong); max-width: 36rem; }
.search-form input { flex: 1; background: none; border: 0; color: inherit; font: inherit; font-size: 1.25rem; padding: 0.75rem 0; min-width: 0; }
.search-form input:focus { outline: none; }
.search-form button { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 0 0.5rem; }

/* ---------------------------------------------------------------- Footer (curtain) */
.sd-curtain-page { position: relative; z-index: 1; background: var(--ground); border-radius: 0 0 28px 28px; }
.sd-curtain { position: relative; z-index: 0; margin-top: -100vh; view-timeline-name: --curtain; }
.sd-curtain::before { content: ''; display: block; height: 100vh; }
.sd-curtain > * { position: sticky; bottom: 0; top: 0; }
.foot { background: var(--coal); background-image: linear-gradient(rgba(21, 21, 19, 0.5), rgba(21, 21, 19, 0.5)), url('../img/grain-lite.png'); background-size: auto, 512px; border-top: 1px solid var(--line); padding-block: clamp(3rem, 6vw, 5rem) 1.5rem; }
.foot-top { display: grid; gap: 2.5rem; padding-bottom: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 64em) { .foot-top { grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)); gap: 2rem; } }
.foot-cta { display: grid; gap: 1.25rem; align-content: start; }
.foot-asks { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.foot-cta .h-section { font-size: clamp(1.9rem, 3.6vw, 3.4rem); max-width: 12ch; }
.foot h2.caps, .foot .caps { color: var(--dim); margin-bottom: 1rem; }
.foot-col ul { display: grid; gap: 0; }
.foot-col li > a, .foot-col .small a, .foot-list a { display: inline-flex; align-items: center; min-height: 2.25rem; }
.foot-col a { text-decoration: none; font-weight: 600; }
.foot-col a:hover { color: var(--prime); }
.foot-col .small { margin-top: 1rem; max-width: 28ch; }
.foot-slashes { display: inline-block; height: 0.78em; vertical-align: -0.02em; margin-right: 0.12em; }
.foot-col a:hover { color: var(--teal); text-shadow: 0 0 12px rgba(0, 209, 194, 0.5); }
.foot-bottom a:hover { color: var(--teal); }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.75rem 2rem; margin-top: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--line); padding-top: 1.5rem; font-size: 0.8125rem; color: var(--dim); }
.foot-bottom a { text-decoration: none; }
.foot-bottom a:hover { color: var(--prime); }
.to-top { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; }
.to-top .arrow { transform: rotate(-90deg); }

/* ---------------------------------------------------------------- Scroll motion (CSS only) */
@view-transition { navigation: auto; }
::view-transition-group(*) { animation-duration: 0.55s; animation-timing-function: var(--ease); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.3s; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .sd-rise { animation: sd-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 24%; }
    .sd-header { animation: sd-header linear both; animation-timeline: scroll(root); animation-range: 0 72px; }
    .head-fill { animation: sd-progress linear both; animation-timeline: scroll(root); }
    .head-ticks { animation: sd-ticks linear both; animation-timeline: scroll(root); animation-range: 0 200px; }
    .sd-curtain > * { animation: sd-curtain linear both; animation-timeline: --curtain; animation-range: contain 0% contain 100%; }
    .civic-screen img { animation: civic-scroll linear both; animation-timeline: --civ; animation-range: contain 0% contain 100%; }
  }
}
@keyframes civic-scroll { to { transform: translateY(calc(100cqh - 100%)); } }
@keyframes sd-rise { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
@keyframes sd-header { to { background: rgb(var(--header-rgb) / 0.96); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border-color: var(--line); } }
@keyframes sd-ticks { to { opacity: 1; } }
@keyframes sd-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes sd-curtain { from { opacity: 0.35; transform: translateY(-2rem) scale(0.96); } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .menu-sheet, .menu-sheet li, .btn, .row, .row-art img { transition: none; }
  .menu-sheet { clip-path: none; }
  .menu-sheet li { opacity: 1; transform: none; }
  .hero-art::before, .clock::before { animation: none; }
}
/* Browsers without scroll timelines still get the dark header once the page is scrolled past the hero */
.site-head.is-solid { background: rgb(var(--header-rgb) / 0.96); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border-color: var(--line); }
@media print { .site-head, .foot, .menu-sheet { display: none; } body { background: #fff; color: #000; } }

/* Comments (WordPress's own form, on the sheet) */
.comments { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line); display: grid; gap: 1.5rem; }
.comments h2 { font-size: 1.5rem; }
.comment-form { display: grid; gap: 1rem; }
.comment-form p { display: grid; gap: 0.4rem; margin: 0; }
.comment-form label { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mute); }
.comment-form input:not([type=checkbox]):not([type=submit]), .comment-form textarea { width: 100%; max-width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line-strong); padding: 0.6rem 0; font: inherit; color: inherit; border-radius: 0; }
.comment-form textarea { resize: vertical; }
.comment-form .comment-form-cookies-consent { display: flex; align-items: center; gap: 0.5rem; }
.comment-form .comment-form-cookies-consent label { text-transform: none; letter-spacing: 0; font-size: 0.9rem; font-weight: 450; }
.comment-form .form-submit input { display: inline-flex; padding: 0.95rem 1.5rem; border-radius: 999px; background: var(--deep); color: var(--prime); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; border: 0; cursor: pointer; width: auto; }
.comments .comment-list { display: grid; gap: 1.5rem; }
.comments .comment-body { display: grid; gap: 0.5rem; }
.comments .comment-meta { font-size: 0.85rem; color: var(--mute); }
.comments .avatar { border-radius: 999px; }
.comments .reply a { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
@media (max-width: 48em) { .lost-head { position: static; transform: rotate(-8deg); margin: 2rem auto 0; width: 7rem; } }


/* ================================================================ 2.2.0 */
/* Bone sections: every other section flips to bone with on-brand black text. The tokens are
   remapped, so every component inside flips with them. Full bleed even inside a .shell. */
.tone-bone {
  --bone: #0B0B0B; --deep: #F4E9D6; --coal: #EBDDC4;
  --mute: rgba(11, 11, 11, 0.74); --dim: rgba(11, 11, 11, 0.66);
  --line: rgba(11, 11, 11, 0.16); --line-strong: rgba(11, 11, 11, 0.36);
  background: var(--deep); color: var(--bone); color-scheme: light;
  box-shadow: 0 0 0 100vmax var(--deep); clip-path: inset(0 -100vmax);
  border-top-color: transparent;
}
.tone-bone + .section, .tone-bone + section { border-top-color: transparent; }
/* Yellow type fails on bone: numbers, tags and marks that were yellow text go black */
.tone-bone :is(.label-n, .row-n, .cell-n, .civic-n, .is-client, .meta-cat, .nav b) { color: var(--ink); text-shadow: none; }
.tone-bone .civic-pillars .cell-n, .tone-bone.civic-pillars .cell-n { color: var(--ink); text-shadow: none; }
.tone-bone :is(.is-concept, .row-tags .is-concept) { color: #07655f; }
.tone-bone .civic-cap .is-concept { border-color: rgba(7, 101, 95, 0.5); }
.tone-bone a:not(.btn):hover, .tone-bone .socials a:hover, .tone-bone .drop-list button:hover { color: #07655f; }
.tone-bone .label-rule { background: linear-gradient(90deg, var(--line-strong), #07655f); }
.tone-bone .label-rule::after { background: #07655f; box-shadow: none; }
.tone-bone .manifesto em { color: inherit; text-shadow: none; background: linear-gradient(transparent 58%, rgba(255, 196, 0, 0.9) 58%, rgba(255, 196, 0, 0.9) 92%, transparent 92%); padding-inline: 0.06em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.tone-bone .quote::before, .tone-bone .quote::after { color: var(--ink); }
/* The slashes stay yellow (they are the mark), flat and clean on bone: the glow only belongs on dark */
.tone-bone .slashes, .tone-bone .h-section::before { filter: none; }
.tone-bone .drop-list li::before { box-shadow: none; }
.tone-bone .cells > *::after { background: radial-gradient(60% 50% at 0% 0%, rgba(255, 196, 0, 0.3), transparent 70%); }
.tone-bone .cells > *:hover { box-shadow: inset 0 0 0 1px rgba(11, 11, 11, 0.4); }
.tone-bone .row::before { box-shadow: none; background: var(--ink); }
.tone-bone .row:hover .row-n, .tone-bone .row:focus-within .row-n { color: #07655f; text-shadow: none; }
.tone-bone .row:hover .row-go, .tone-bone .row:focus-within .row-go { border-color: var(--ink); color: var(--ink); box-shadow: none; background: var(--prime); }
.tone-bone .btn-prime { box-shadow: inset 0 0 0 1.5px var(--ink); }
.tone-bone .btn-prime:hover { box-shadow: inset 0 0 0 1.5px var(--ink), 4px 4px 0 var(--ink); }
.tone-bone .field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230B0B0B' stroke-width='2'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E"); }
.tone-bone .field select option { background: #fff; color: var(--ink); }
.tone-bone :is(.field input, .field select, .field textarea):focus { border-color: #07655f; box-shadow: 0 1px 0 #07655f; }
.tone-bone .check input:checked + span { box-shadow: inset 0 0 0 1.5px var(--ink); }
.tone-bone .drop-zone:hover, .tone-bone .drop.is-over .drop-zone { border-color: var(--ink); background: rgba(255, 196, 0, 0.18); box-shadow: none; }
.tone-bone :focus-visible { outline-color: #07655f; box-shadow: 0 0 0 6px rgba(7, 101, 95, 0.16); }
.tone-bone .case-meta dd, .tone-bone .case-meta > div:first-child dd { color: var(--bone); }
.tone-bone .cell-grain { background-image: none; }

/* ---------------------------------------------------------------- Work picker ("the index") */
.wi { position: relative; }
.wi-list { display: grid; }
.wi-item { --accent: var(--prime); }
.wi-row { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; grid-template-areas: "n name go" "n meta go"; column-gap: 1rem; row-gap: 0.35rem; align-items: center; padding: 1.25rem 0 1.25rem 0.75rem; border-top: 1px solid var(--line); text-decoration: none; position: relative; transition: padding 0.45s var(--ease), background-color 0.3s; }
.wi-item:last-child .wi-row { border-bottom: 1px solid var(--line); }
.wi-row::before { content: ''; position: absolute; left: 0; top: -1px; bottom: -1px; width: 4px; background: var(--accent); transform: scaleY(0); transform-origin: 50% 0; transition: transform 0.45s var(--ease); }
.wi-row .row-n { grid-area: n; align-self: start; padding-top: 0.55rem; }
.wi-name { grid-area: name; font-size: clamp(1.45rem, 2.6vw, 2.5rem); font-weight: 800; text-transform: uppercase; letter-spacing: -0.03em; line-height: 0.98; }
.wi-meta { grid-area: meta; display: flex; flex-wrap: wrap; gap: 0.2rem 0.9rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); }
.wi-meta .is-client { color: var(--prime); }
.wi-meta .is-concept { color: var(--teal); }
.wi-go { grid-area: go; display: grid; place-items: center; width: 3rem; height: 3rem; border: 1px solid var(--line-strong); border-radius: 999px; transition: background-color 0.3s, color 0.3s, border-color 0.3s, transform 0.45s var(--ease); }
.wi-go svg { width: 1.1rem; height: 1.1rem; }
.wi-row:hover, .tone-bone a.wi-row:hover { color: inherit; }
.wi-item.is-on .wi-row::before, .wi-row:hover::before, .wi-row:focus-visible::before { transform: scaleY(1); }
.wi-item.is-on .wi-go, .wi-row:hover .wi-go { background: var(--prime); border-color: var(--prime); color: var(--ink); transform: rotate(-45deg); }
/* 2.2.1: the frame's height comes from a padding box, not aspect-ratio, and the picture sits absolutely inside it.
   iPhone WebKit (Safari and Chrome) kept re-measuring an aspect-ratio frame whose image was 100% tall in the
   display:contents rail, so the Hyperprints item grew with every scroll. Nothing inside the frame feeds its size now. */
.wi-frame { display: block; position: relative; overflow: clip; height: auto; background: var(--coal); border: 1px solid var(--line); }
.wi-frame::before { content: ''; display: block; padding-top: 75%; }
.wi-frame > img, .wi-frame .art { position: absolute; inset: 0; width: 100%; height: 100%; }
.wi-frame > img { object-fit: cover; max-width: none; }
.wi-line { margin-top: 1rem; color: var(--mute); max-width: 48ch; font-size: 0.95rem; }
/* "Your brand could be next": the laughing head on a warm glow, no slashes */
.wi-frame-next { background: radial-gradient(60% 60% at 50% 55%, rgba(255, 196, 0, 0.42), rgba(255, 196, 0, 0.08) 62%, transparent 78%), #0B0B0B; }
.wi-frame-next > img { inset: auto; left: 50%; top: 50%; width: min(62%, 26rem); height: auto; object-fit: contain; transform: translate(-50%, -50%) rotate(-4deg); filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.5)); transition: transform 0.7s var(--ease); }
.wi-next.is-on .wi-frame-next img, .wi-frame-next:hover img { transform: translate(-50%, -50%) rotate(3deg) scale(1.04); }
.tone-bone .wi-meta .is-client { color: var(--ink); }
.tone-bone .wi-meta .is-concept { color: #07655f; }
.tone-bone .wi-frame { border-color: transparent; }
.tone-bone .wi-item.is-on .wi-go, .tone-bone .wi-row:hover .wi-go { border-color: var(--ink); }

@media (min-width: 64em) {
  .wi { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; }
  .wi::after { content: ''; grid-column: 2; grid-row: 1; aspect-ratio: 4 / 3; padding-bottom: 4.5rem; }
  .wi-list { grid-column: 1; grid-row: 1; }
  .wi-item.is-on .wi-row, .wi:not(.is-js) .wi-item:is(:hover, :focus-within) .wi-row { padding-left: 1.5rem; }
  .wi-prev { position: absolute; top: 0; right: 0; width: calc((100% - clamp(2rem, 4vw, 4rem)) * 7 / 12); visibility: hidden; opacity: 0; transition: opacity 0.45s var(--ease), visibility 0s 0.45s; pointer-events: none; }
  .wi-prev .wi-frame { clip-path: inset(0 0 0 100%); transition: clip-path 0.75s cubic-bezier(0.77, 0, 0.18, 1); }
  .wi-prev .wi-frame:not(.wi-frame-next) img { transform: scale(1.08); transition: transform 1.1s var(--ease); }
  .wi-item.is-on .wi-prev { visibility: visible; opacity: 1; transition: opacity 0.3s var(--ease); pointer-events: auto; z-index: 1; }
  .wi-item.is-on .wi-frame { clip-path: inset(0); }
  .wi-item.is-on .wi-frame img { transform: none; }
  .wi-item.is-on .wi-frame-next img { transform: translate(-50%, -50%) rotate(-4deg); }
  /* No JavaScript: the hovered or focused row shows its preview instead of the first one */
  .wi:not(.is-js):has(.wi-row:is(:hover, :focus-visible)) .wi-item.is-on:not(:has(.wi-row:is(:hover, :focus-visible))) .wi-prev { visibility: hidden; opacity: 0; }
  .wi:not(.is-js):has(.wi-row:is(:hover, :focus-visible)) .wi-item.is-on:not(:has(.wi-row:is(:hover, :focus-visible))) .wi-row::before { transform: scaleY(0); }
  .wi:not(.is-js) .wi-item:has(.wi-row:is(:hover, :focus-visible)) .wi-prev { visibility: visible; opacity: 1; transition: opacity 0.3s var(--ease); pointer-events: auto; z-index: 2; }
  .wi:not(.is-js) .wi-item:has(.wi-row:is(:hover, :focus-visible)) .wi-frame { clip-path: inset(0); }
  .wi-nav, .wi-nav[hidden] { display: none; }
}
@media (max-width: 63.99em) {
  .wi-list { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .wi-list::-webkit-scrollbar { display: none; }
  .wi-item { flex: 0 0 min(86%, 34rem); scroll-snap-align: start; display: flex; flex-direction: column; }
  .wi-prev { display: contents; }
  .wi-frame { order: -1; }
  .wi-row { border-top: 0; padding: 1rem 0 0; grid-template-columns: 2.25rem minmax(0, 1fr) auto; }
  .wi-item:last-child .wi-row { border-bottom: 0; }
  .wi-row::before { display: none; }
  .wi-row .row-n { padding-top: 0.3rem; }
  .wi-name { font-size: clamp(1.35rem, 5.4vw, 2rem); }
  .wi-line { order: 2; margin-top: 0.6rem; font-size: 0.9375rem; }
  .wi-item .wi-go, .wi-item.is-on .wi-go, .tone-bone .wi-item.is-on .wi-go { background: transparent; border-color: var(--line-strong); color: inherit; transform: none; }
  .wi-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
  .wi-nav[hidden] { display: none; }
  .wi-btn { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 999px; border: 1px solid var(--line-strong); transition: background-color 0.3s, border-color 0.3s, color 0.3s, opacity 0.3s; }
  .wi-btn svg { width: 1.15rem; height: 1.15rem; }
  .wi-btn[data-wi-step="-1"] svg { transform: rotate(180deg); }
  .wi-btn:hover:not(:disabled) { background: var(--prime); border-color: var(--prime); color: var(--ink); }
  .wi-btn:disabled { opacity: 0.35; cursor: default; }
  .wi-count { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.2em; color: var(--mute); }
  .wi-count b { color: var(--bone); font-weight: 800; }
  .tone-bone .wi-btn:hover:not(:disabled) { border-color: var(--ink); }
}
@media (prefers-reduced-motion: reduce) {
  .wi-row, .wi-row::before, .wi-go, .wi-prev, .wi-prev .wi-frame, .wi-prev .wi-frame img, .wi-frame-next img { transition: none !important; }
  .wi-list { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------- Case study sections */
.case .article-head { padding-bottom: clamp(2rem, 4vw, 3rem); }
.case > .shell { padding-bottom: clamp(4rem, 8vw, 7rem); }
.case-intro { display: grid; gap: 1.5rem; }
.case-statement p { font-size: clamp(1.4rem, 2.6vw, 2.3rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; max-width: 36ch; text-wrap: pretty; }
.case-sec .section-head .lede p { font: inherit; color: inherit; }
.case-sec .section-head .lede { max-width: 42ch; }
.case-body { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); max-width: none; width: 100%; }
.case-body > * { margin: 0 !important; min-width: 0; }
.case-body > p, .case-body > ul:not(.dms-swatches):not(.ig-grid), .case-body > ol { max-width: 62ch; color: var(--mute); font-size: 1.0625rem; line-height: 1.7; }
.case-body > p strong, .case-body > p b { color: var(--bone); }
.case-body > h3 { font-size: clamp(1.3rem, 2.2vw, 1.8rem); text-transform: uppercase; letter-spacing: -0.02em; }
.case-body > ul:not(.dms-swatches):not(.ig-grid) { display: grid; gap: 0.6rem; }
.case-body > ul:not(.dms-swatches):not(.ig-grid) > li { padding-left: 1.6rem; position: relative; }
.case-body > ul:not(.dms-swatches):not(.ig-grid) > li::before { content: ''; position: absolute; left: 0; top: 0.5em; width: 0.9rem; height: 0.65rem; background: var(--prime); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 100'%3E%3Cpath d='M0 100h26L60 0H34Zm40 0h26L100 0H74Zm40 0h26L140 0h-26Z'/%3E%3C/svg%3E") left center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 100'%3E%3Cpath d='M0 100h26L60 0H34Zm40 0h26L100 0H74Zm40 0h26L140 0h-26Z'/%3E%3C/svg%3E") left center / contain no-repeat; }
.case-body a { color: inherit; text-decoration-color: var(--prime); text-decoration-thickness: 2px; }
.tone-bone .case-body a { text-decoration-color: #07655f; }
.case-body img { border-radius: 0; }
.case-body .wp-block-image img { width: 100%; }
.case-body figcaption, .case-body .wp-element-caption { font-family: inherit; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); }
.dm-case.case-body .dms-showcase { gap: 1px; padding: 0; border-radius: 0; background: var(--line); border: 1px solid var(--line); }
.dm-case.case-body .dms-showcase figure { border-radius: 0; background: var(--coal); }
.dm-case.case-body .dms-showcase figcaption { left: 0; bottom: 0; border-radius: 0; padding: 0.55rem 0.8rem; background: rgba(11, 11, 11, 0.82); color: #F4E9D6; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.2; }
.dm-case.case-body .dms-mark { border-radius: 0; }
.dm-case.case-body .wp-block-columns { gap: clamp(1.5rem, 4vw, 3.5rem); }
.dm-case.case-body > .dms-swatches li { box-shadow: inset 0 0 0 1px rgba(11, 11, 11, 0.16); }
.case-body .wp-block-buttons .wp-block-button__link { border-radius: 999px; background: var(--prime); color: var(--ink); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.95rem 1.5rem; text-decoration: none; }
.case-body blockquote { margin: 0; padding-left: 1.5rem; border-left: 4px solid var(--prime); font-size: clamp(1.2rem, 2vw, 1.6rem); font-weight: 700; max-width: 40ch; }

/* ---------------------------------------------------------------- Instagram-style post frames */
.ig-grid { display: grid; align-items: start; grid-template-columns: minmax(0, 24rem); gap: clamp(1rem, 2vw, 1.5rem); list-style: none; padding: 0; margin: 0; max-width: none !important; }
.ig-grid > .ig::before { content: none; }
@media (min-width: 36em) { .ig-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .ig-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ig { container-type: inline-size; display: flex; flex-direction: column; background: #fff; color: #111; border-radius: 6px; overflow: clip; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06), 0 18px 40px -22px rgba(0, 0, 0, 0.55); padding: 0 !important; transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.ig:hover { transform: translateY(-4px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06), 0 26px 50px -24px rgba(0, 0, 0, 0.6); }
/* The handle always fits; the wordmark sits centered when there is room and slides right when there is not. */
.ig-top { display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(auto, 1fr); align-items: center; gap: 0.55rem; padding: 0.55rem 0.8rem; border-bottom: 1px solid #efefef; }
.ig-who { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.ig-name { min-width: 0; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0; text-transform: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-wm { font-family: 'Grand Hotel', 'Brush Script MT', cursive; font-size: 1.5rem; line-height: 1; color: #111; letter-spacing: 0; text-transform: none; }
.ig-top > .ig-send { justify-self: end; }
/* A narrow frame (two to a row on a phone) keeps the handle and drops the wordmark. */
@container (max-width: 14rem) { .ig-wm { display: none; } .ig-top { grid-template-columns: minmax(0, 1fr) auto auto; } .ig-name { font-size: 0.75rem; } }
.ig-i { width: 1.35rem; height: 1.35rem; flex: none; color: #111; display: block; }
.ig-glyph { width: 1.6rem; height: 1.6rem; }
.ig-media { position: relative; background: #f2f2f2; overflow: clip; }
/* Posts keep their own shape (square, 4:5 or story), never cropped */
.ig-media img { display: block; width: 100% !important; height: auto !important; border-radius: 0 !important; }
.ig-bar { display: flex; align-items: center; gap: 0.85rem; padding: 0.65rem 0.8rem 0.4rem; }
.ig-sp { flex: 1; }
.ig-foot { display: flex; align-items: center; gap: 0.6rem; padding: 0.2rem 0.8rem 0.85rem; min-height: 2.4rem; }
.ig-foot .ig-home { width: 1.15rem; height: 1.15rem; color: #111; }
.ig-ln { display: block; height: 0.32rem; width: 3.4rem; border-radius: 999px; background: #e4e4e4; }
.ig-ln + .ig-ln { width: 2.2rem; }
.ig-cap { font-size: 0.8125rem; line-height: 1.45; color: #262626; max-width: none !important; }
.ig-cap b { font-weight: 700; color: #111; }
@media (prefers-reduced-motion: reduce) { .ig { transition: none; } .ig:hover { transform: none; } }

/* 2.2.3: the studio line is the page's one H1 (Springfield, MO for local search); the big tagline is a styled paragraph. */
.hero-h1 { margin: 0; line-height: 1.5; text-wrap: wrap; }
.where { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.where-t { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); margin-bottom: 0.75rem; }
.where-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.2rem 0.75em; font-size: clamp(1.25rem, 2.4vw, 1.75rem); font-weight: 800; letter-spacing: -0.01em; text-transform: uppercase; }
.where-list li { display: inline-flex; align-items: center; gap: 0.75em; }
.where-list li:not(:last-child)::after { content: ''; width: 0.3em; height: 0.3em; background: var(--prime); transform: rotate(45deg); }
.tone-bone .where-list li:not(:last-child)::after { background: var(--ink); }
.where-note { margin: 0.75rem 0 0; color: var(--mute); max-width: 40ch; }

/* 2.2.5: the case study opens on the project's board (inc/case.php dms_case_hero): website in a
   browser frame, logo on its brand color, four pieces below, posts and ads in the Instagram frame. */
.case-hero { --hero-gap: clamp(0.75rem, 1.6vw, 1.1rem); margin-top: clamp(2rem, 5vw, 4rem); padding: clamp(1rem, 2.6vw, 2.25rem); display: grid; gap: var(--hero-gap); background: var(--hero-bg, var(--coal)); border: 1px solid var(--line); box-shadow: 0 0 60px rgba(255, 196, 0, 0.1); }
.case-hero-top { display: grid; gap: var(--hero-gap); min-width: 0; }
@media (min-width: 48em) { .case-hero-top { grid-template-columns: 1.85fr 1fr; } }
.case-site, .case-logo, .case-tile { border-radius: 14px; overflow: clip; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.55); }
.case-site { display: flex; flex-direction: column; background: var(--hero-bar, #222); min-width: 0; }
.case-site-bar { flex: none; height: 1.75rem; display: flex; align-items: center; gap: 0.4rem; padding: 0 0.8rem; }
.case-site-bar i { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--hero-dot, rgba(255, 255, 255, 0.22)); }
.case-site img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.case-logo { display: grid; place-items: center; background: var(--hero-tile, var(--coal)); min-height: clamp(9rem, 40vw, 12rem); }
.case-logo img { display: block; width: var(--hero-logo, 78%); height: auto; }
.case-logo.is-soft img { -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%); mask-image: radial-gradient(closest-side, #000 62%, transparent 100%); }
.case-pieces { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--hero-gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.case-hero .ig-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hero-gap); }
@media (min-width: 48em) { .case-pieces, .case-hero .ig-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.case-pieces .ig-media img { aspect-ratio: 1 / 1; object-fit: cover; }
.case-tile { background: var(--hero-bar, #222); aspect-ratio: 1 / 1; }
.case-tile img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.case-tile.is-phone img { width: 78%; height: auto; margin: 1rem auto 0; object-fit: fill; }

/* Option E (Hyperprints): one wide carousel frame across three columns with dots, one post beside it. Posts keep 4:5. */
.ig-dots { display: flex; justify-content: center; gap: 0.3rem; }
.ig-dots i { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: #dbdbdb; }
.ig-dots i:first-child { background: #0095f6; }
.case-pieces.is-tall .ig-media img { aspect-ratio: auto; object-fit: initial; }
@media (min-width: 48em) { .case-hero .has-wide .ig-wide { grid-column: span 3; } }
@media (max-width: 47.99em) { .case-hero .has-wide > .ig { grid-column: 1 / -1; } }

/* 2.2.7 (Gary's Nov 5 audit) */
/* Footer fine print: brighter than --dim so it clears 4.5:1 on the grain. */
.foot-bottom { color: rgba(244, 233, 214, 0.78); }
/* Category tags are tap targets: at least 24px tall. */
.meta-cat { display: inline-flex; align-items: center; min-height: 1.5rem; padding-block: 0.125rem; }
/* Desktop: the mascot's sneakers sit near the page's bottom edge instead of over an empty band. */
@media (min-width: 64em) { #start.section { padding-bottom: clamp(2rem, 3vw, 3rem); } }
/* 2.2.9: a second link inside a service row (the SEO row's free grader). It sits above the
   row-wide link so both work; at least 24px tall. */
.row-extra { position: relative; z-index: 1; margin-top: 0.15rem; }
@media (min-width: 64em) { .services .row-extra { grid-column: 2; } .services .row:has(.row-extra) .row-title { grid-row: 1 / span 3; } }
.row-extra a { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 1.75rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--prime); text-decoration: none; border-bottom: 1px solid currentColor; }
.row-extra a:hover { color: var(--bone); }
.row-extra svg { width: 0.9rem; height: 0.9rem; }
.tone-bone .row-extra a { color: var(--ink); }
/* 2.2.10: roomier phone menu. Each link is a full-width band at least 52px tall with space
   between, so a tap anywhere near the word lands; the sheet scrolls on short phones. */
.menu-sheet { overflow-y: auto; overscroll-behavior: contain; }
.menu-sheet ul { gap: 0.375rem; margin-block: auto 1.5rem; }
.menu-sheet li a { align-items: center; min-height: 3.25rem; padding-block: 0.5rem; }
.menu-sheet .menu-foot { gap: 0.25rem; }
.menu-sheet .menu-foot a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.menu-sheet .menu-btn { min-height: 2.75rem; padding-inline: 0.75rem; margin-right: -0.75rem; }
.site-head .menu-btn { min-height: 2.75rem; padding-inline: 0.6rem; margin-right: -0.6rem; }
/* The profile links in the menu stay the small footer style, in one row, so the big links
   above get the room and the whole menu fits on one phone screen. */
.menu-sheet .menu-foot .socials { display: flex; flex-wrap: wrap; gap: 0 1.5rem; margin: 0; }
.menu-sheet .menu-foot .socials a { display: inline-flex; min-height: 2.75rem; padding-block: 0; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; line-height: 1.2; color: var(--mute); }
.menu-sheet .menu-foot .socials a:hover { color: var(--prime); }