/* ---------- Fonts ----------
   Self-hosted (from Google Fonts, SIL Open Font License) so text doesn't wait on a second server.
   They're variable fonts: one file covers every weight. latin-ext only downloads if a page uses those characters. */
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(../fonts/instrument-sans-v4-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(../fonts/instrument-sans-v4-latin.woff2) format('woff2');
  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; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/jetbrains-mono-v24-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/jetbrains-mono-v24-latin.woff2) format('woff2');
  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; }
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 600 700; font-display: swap;
  src: url(../fonts/unbounded-v12-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 600 700; font-display: swap;
  src: url(../fonts/unbounded-v12-latin.woff2) format('woff2');
  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; }
/* Caveat only draws the one hand-written line on the home page, so it's subset to those characters. */
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(../fonts/caveat-v23-subset.woff2) format('woff2');
  unicode-range: U+20, U+61-62, U+64-65, U+68-6a, U+6c, U+6f-70, U+72-74, U+76, U+78-79, U+2192-2193; }

/* ==========================================================================
   BustleBot — Stylesheet
   Dark graphite by default. A light palette is defined below (no toggle is on the pages right now).
   Edit the variables in :root (and :root[data-theme="light"]) to re-theme.
   ========================================================================== */

:root {
  --bg: #15191c;            /* cool graphite */
  --bg-alt: #1a1f23;
  --surface: #1b2024;
  --text: #e2e6e8;
  --muted: #8a949b;
  --border: #2c353b;
  --hair: #222a2f;          /* hairline rules between sections and rows */
  --accent: #2ee6c5;        /* signal teal. The only colour in the interface. */
  --accent-2: #2ee6c5;      /* same hue; kept as a token so labels can be tuned separately later */
  --accent-soft: #12302c;
  --on-accent: #0f1416;
  --ok: #8fd0a8;
  --err: #ff8a7a;
  --display: 'Unbounded', 'Instrument Sans', system-ui, sans-serif;
  --sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --hand: 'Caveat', 'Bradley Hand', 'Segoe Script', cursive;
  --max: 1200px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --label: 160px;           /* width of the left label column in sections */
  --r: 6px;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #eef1f2;
  --bg-alt: #e4e9eb;
  --surface: #f6f8f8;
  --text: #141a1d;
  --muted: #5f6b71;
  --border: #c4cdd2;
  --hair: #d6dde1;
  --accent: #0e9c86;
  --accent-2: #0e9c86;
  --accent-soft: #d3efe9;
  --on-accent: #eef1f2;
  --ok: #2f7a4a;
  --err: #c4391a;
  color-scheme: light;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  transition: background .25s, color .25s;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; }
h1, h2 { font-family: var(--display); }
h1 { font-size: clamp(1.9rem, 4.6vw, 3.8rem); }
h2 { font-size: clamp(1.4rem, 2.9vw, 2.25rem); }
h3 { font-size: 1.15rem; font-weight: 600; letter-spacing: 0; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--on-accent); }

.accent, em { font-style: normal; color: var(--accent); }
.container { width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto; }
.section { padding: clamp(4rem, 9vw, 7.5rem) 0; border-top: 1px solid var(--hair); }
.section-head { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-sub { color: var(--muted); max-width: 56ch; font-size: 1.05rem; margin: 1rem 0 0; }
/* A section with only a heading (e.g. the shop while it's empty): centred, no gap underneath. */
.section-head-center { text-align: center; margin-bottom: 0; }
.section-head-center .section-sub { margin-inline: auto; }
/* Shop teaser drawings: same line style as the Long Island map on the Hamptons page. */
.shop-art { display: block; width: min(100%, 340px); height: auto; margin: 0 auto 1.75rem; overflow: visible; }
.shop-line { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.shop-mug path.shop-line { fill: none; }
.shop-bot { fill: none; stroke: var(--accent); stroke-width: 2; }
.shop-bot-ant, .shop-a { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }
.shop-a { stroke-width: 3.5; }
.shop-eye { fill: var(--accent); }
.shop-steam { fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; animation: shop-steam 2.4s ease-in-out infinite; }
.shop-steam:nth-of-type(3) { animation-delay: -.8s; }
.shop-steam:nth-of-type(4) { animation-delay: -1.6s; }
.shop-label { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; fill: var(--muted); text-anchor: middle; }
.shop-tee { transform-box: fill-box; transform-origin: 50% 0; animation: shop-sway 4s ease-in-out infinite; }
.shop-app { animation: shop-float 3s ease-in-out infinite; }
@keyframes shop-steam { 0% { opacity: 0; transform: translateY(6px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes shop-sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes shop-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) { .shop-art * { animation: none !important; } }
.section-head-solo { margin-bottom: 0; } /* a section that is only a heading and text */
.eyebrow {
  margin: .55em 0 0;
  font-family: var(--mono); font-size: .74rem; font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.4rem; border-radius: var(--r);
  background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: .95rem;
  border: 1px solid var(--accent); cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.btn:hover { background: var(--text); border-color: var(--text); color: var(--bg); }
.btn-sm { padding: .5rem 1rem; font-size: .88rem; }
.btn-lg { padding: 1rem 1.75rem; font-size: 1rem; }
.btn-block { width: 100%; }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn-ghost:hover { background: transparent; color: var(--text); border-color: var(--text); }
.btn[disabled] { opacity: .5; cursor: wait; }
.link-more { font-family: var(--mono); font-size: .8rem; color: var(--muted); border-bottom: 1px solid var(--border); padding-bottom: .15rem; transition: color .15s, border-color .15s; }
.link-more:hover { color: var(--text); border-color: var(--text); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.site-header.scrolled { border-bottom-color: var(--hair); }
.nav-wrap { display: flex; align-items: center; justify-content: space-between; height: 84px; gap: 1rem; }
.logo { display: inline-flex; align-items: center; line-height: 0; }
/* The header/footer logo (bustlebot-logo-animated-crop.*) is the full logo cropped to its artwork
   (x 163-1754, y 153-495 of 1898x634) and sized 3x the largest --logo-h, so it just scales to --logo-h. */
.logo-crop { --logo-h: 44px; display: block; overflow: hidden; height: var(--logo-h); width: calc(var(--logo-h) * 1591 / 342); max-width: 52vw; }
.logo-mark { display: block; max-width: none; height: var(--logo-h); width: auto; }
.site-footer .logo-crop { --logo-h: 30px; }
/* The artwork is light on transparent, so in the light theme it sits on a dark badge. */
:root[data-theme="light"] .logo { background: #000; border-radius: var(--r); padding: 8px 12px; }
@media (max-width: 560px) { .logo-crop { --logo-h: 34px; } }
.nav { display: flex; align-items: center; gap: 1.6rem; font-size: .92rem; font-weight: 500; }
.nav a:not(.btn) { color: var(--muted); transition: color .15s; }
.nav a:not(.btn):hover, .nav a[aria-current="page"] { color: var(--text); }
.nav-right { display: flex; align-items: center; gap: .6rem; }
.nav-social { display: flex; align-items: center; gap: .35rem; }
.nav-social a { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); transition: color .15s, background .15s; }
.nav-social a:hover { color: var(--text); background: var(--surface); }
.nav-social svg { width: 18px; height: 18px; }
.nav-toggle {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: 0; padding: .5rem; cursor: pointer;
}
.nav-toggle span { display: block; width: 22px; height: 1.5px; background: var(--text); transition: transform .25s, opacity .25s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ---------- Hero: sketchbook ---------- */
.hero { padding: clamp(3rem, 8vw, 6.5rem) 0 clamp(3rem, 7vw, 6rem); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.hero-grid:has(> :only-child) { grid-template-columns: minmax(0, 46rem); } /* while the sketch stack is hidden */
.hero-tag {
  display: flex; gap: 1.5rem; flex-wrap: wrap; margin: 0 0 2rem;
  font-family: var(--mono); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.hero h1 { max-width: 16ch; margin-bottom: 1.5rem; }
.lead { font-size: 1.15rem; color: var(--muted); max-width: 44ch; margin: 0 0 2rem; }
.hero-actions { display: flex; gap: .75rem; flex-wrap: wrap; }
.note {
  margin: 1.75rem 0 0; font-family: var(--hand); font-size: 1.5rem; line-height: 1; color: var(--accent);
  transform: rotate(-3deg); transform-origin: left center; display: inline-block;
}
.note::after { content: "  →"; }

/* The stack of sketches. Two pieces at slight angles; they straighten on hover. */
.stack { position: relative; height: clamp(320px, 36vw, 520px); }
.stack .thumb { position: absolute; border: 1px solid var(--border); box-shadow: 0 24px 60px rgba(0, 0, 0, .45); transition: transform .35s ease; }
.stack .thumb img { filter: none; }
.stack-main { left: 0; top: 0; height: 100%; aspect-ratio: 4 / 5; transform: rotate(2deg); }
.stack-over { right: 0; top: 6%; width: 52%; aspect-ratio: 1; transform: rotate(-5deg); z-index: 1; }
.stack .thumb:hover { transform: rotate(0); z-index: 2; }
/* A single sketch for now, centred in the column. It stays put on hover. */
.stack-process .stack-main, .stack-process .stack-main:hover { left: 50%; translate: -50% 0; transform: rotate(2deg); }

/* Contact sheet of recent sites. Alternating tilt; each tile straightens and lifts on hover. */
.sheet { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem 1.5rem; padding: .5rem 0 1rem; }
/* Tilt uses the rotate/translate properties, not transform, so the scroll reveal can't reset it. */
.sheet-item { display: block; transition: rotate .35s ease, translate .35s ease; }
.sheet-item:nth-child(odd) { rotate: -1.5deg; }
.sheet-item:nth-child(even) { rotate: 1.5deg; }
.sheet-item:hover { rotate: 0deg; translate: 0 -6px; }
.sheet-item .thumb { aspect-ratio: 3 / 2; border: 1px solid var(--border); box-shadow: 0 16px 40px rgba(0, 0, 0, .4); }
.sheet-cap { display: grid; gap: .15rem; margin-top: .9rem; }
.sheet-cap b { font-weight: 600; font-size: .95rem; line-height: 1.3; }
.sheet-cap span { font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* ---------- Page intro (art, web design) ---------- */
.page-hero { padding: clamp(3.5rem, 9vw, 7rem) 0 clamp(2rem, 4vw, 3rem); }
.page-hero h1 { font-size: clamp(1.8rem, 4.2vw, 3.4rem); max-width: 18ch; margin: .75rem 0 1.5rem; }
.page-hero .lead { font-size: 1.15rem; }
.page-hero .hero-actions { margin-top: 2rem; }
/* Pricing page: jump links to each price list. */
.price-jump { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 2rem; }
/* Hamptons page: the copy plus a hand-drawn Long Island map (desktop only, hidden at 860px and below). */
.page-hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.li-map { width: 100%; height: auto; overflow: visible; }
.li-land { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; }
.li-beach { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; }
.li-road { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; opacity: .8; animation: li-drive 1.2s linear infinite; }
.li-city { fill: var(--text); }
.li-label { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; fill: var(--muted); }
.li-note { font-family: var(--hand); font-size: 26px; fill: var(--text); }
.li-arrow { fill: none; stroke: var(--text); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.li-waves path { fill: none; stroke: var(--border); stroke-width: 2; stroke-linecap: round; animation: li-wave 4s ease-in-out infinite alternate; }
.li-waves path:nth-child(even) { animation-delay: -2s; }
.li-boat { fill: var(--text); transform-box: fill-box; transform-origin: 50% 100%; animation: li-bob 3s ease-in-out infinite; }
.li-boat path:first-child { fill: var(--muted); }
.li-pin path { fill: var(--accent); }
.li-pin-dot { fill: var(--on-accent); }
.li-ping { fill: none; stroke: var(--accent); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: li-ping 2.2s ease-out infinite; }
@keyframes li-drive { to { stroke-dashoffset: -9; } }
@keyframes li-wave { to { transform: translateX(8px); } }
@keyframes li-bob { 0%, 100% { transform: rotate(-4deg) translateY(0); } 50% { transform: rotate(4deg) translateY(-3px); } }
@keyframes li-ping { from { transform: scale(1); opacity: .9; } to { transform: scale(4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .li-map * { animation: none !important; } }
/* Web design page: a pencil sketch turning into the live site on a laptop and a phone. */
.wd-art { width: 100%; height: auto; overflow: visible; }
.wd-art * { transform-box: fill-box; }
.wd-sheet { fill: var(--bg-alt); stroke: var(--border); stroke-width: 2; }
.wd-pencil { fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.wd-frame { fill: var(--surface); stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; }
.wd-stroke { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }
.wd-dot, .wd-btn rect { fill: var(--accent); }
.wd-ink { fill: var(--text); }
.wd-muted { fill: none; stroke: var(--muted); stroke-width: 3; stroke-linecap: round; }
.wd-soft { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 2; }
.wd-hill { fill: var(--accent); opacity: .45; }
.wd-card { fill: none; stroke: var(--border); stroke-width: 2; }
.wd-btn text { font-family: var(--mono); font-size: 13px; letter-spacing: .04em; fill: var(--on-accent); text-anchor: middle; }
.wd-btn { transform-origin: center; animation: wd-press 4s ease-in-out infinite; }
.wd-cursor { fill: var(--bg); stroke: var(--text); stroke-width: 2; stroke-linejoin: round; animation: wd-cursor 4s ease-in-out infinite; }
.wd-ripple { fill: none; stroke: var(--accent); stroke-width: 2; transform-origin: center; opacity: 0; animation: wd-ripple 4s ease-out infinite; }
.wd-toast { transform-origin: 50% 100%; animation: wd-toast 4s ease-in-out infinite; }
.wd-toast rect { fill: var(--bg); stroke: var(--accent); stroke-width: 2; }
.wd-toast circle { fill: var(--accent); }
.wd-toast text { font-family: var(--mono); font-size: 13px; letter-spacing: .04em; fill: var(--text); }
.wd-note { font-family: var(--hand); font-size: 26px; fill: var(--text); }
.wd-arrow { fill: none; stroke: var(--text); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.wd-phone { animation: wd-float 4s ease-in-out infinite; }
@keyframes wd-cursor { 0%, 100% { transform: translate(40px, 34px); } 25%, 70% { transform: translate(0, 0); } 30% { transform: translate(0, 0) scale(.9); } 35% { transform: translate(0, 0) scale(1); } }
@keyframes wd-press { 0%, 27%, 36%, 100% { transform: scale(1); } 31% { transform: scale(.95); } }
@keyframes wd-ripple { 0%, 29% { opacity: 0; transform: scale(.5); } 31% { opacity: .9; transform: scale(.5); } 50%, 100% { opacity: 0; transform: scale(3); } }
@keyframes wd-toast { 0%, 36% { opacity: 0; transform: translateY(10px) scale(.9); } 44%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes wd-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) { .wd-art * { animation: none !important; } .wd-toast { opacity: 1; } }
/* Work page: three of the live sites as a stack of browser windows. They fan out on hover. */
.work-stack { position: relative; aspect-ratio: 5 / 4; }
.ws { position: absolute; width: 70%; margin: 0; border: 2px solid var(--accent); border-radius: 10px; overflow: hidden; background: var(--surface); box-shadow: 0 24px 60px rgba(0, 0, 0, .45); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.ws-bar { display: flex; gap: 5px; align-items: center; height: 20px; padding: 0 9px; background: var(--accent-soft); border-bottom: 2px solid var(--accent); }
.ws-bar i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.ws img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: top; }
.ws-back { top: 0; right: 0; transform: rotate(5deg); }
.ws-mid { top: 12%; left: 0; transform: rotate(-5deg); }
.ws-front { top: 30%; left: 16%; transform: rotate(-1deg); }
.work-stack:hover .ws-back { transform: rotate(8deg) translate(12px, -10px); }
.work-stack:hover .ws-mid { transform: rotate(-8deg) translate(-12px, -6px); }
.work-stack:hover .ws-front { transform: rotate(0deg) translateY(6px); }
.ws-note { position: absolute; left: 0; bottom: -4%; font-family: var(--hand); font-size: 1.6rem; color: var(--text); }
@media (prefers-reduced-motion: reduce) { .ws { transition: none; } }
@media (max-width: 860px) { .page-hero-grid { grid-template-columns: 1fr; } .li-map, .wd-art, .work-stack { display: none; } }

/* ---------- Shared image treatment ---------- */
.thumb { display: block; overflow: hidden; border-radius: var(--r); background: var(--bg-alt); }
.thumb img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.8) brightness(.92); transition: filter .3s, transform .6s ease; }
a:hover > .thumb img, a.thumb:hover img, article:hover .thumb img { filter: none; transform: scale(1.02); }

/* ---------- Work: rows on the home page ---------- */
.work-list { border-top: 1px solid var(--hair); }
.work-card {
  display: grid; grid-template-columns: minmax(200px, .8fr) 1.2fr auto; gap: 2rem; align-items: center;
  padding: 1.75rem 0; border-bottom: 1px solid var(--hair);
}
.work-card .thumb { aspect-ratio: 3 / 2; }
.work-client { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-2); margin: 0 0 .5rem; }
.work-info h3 { font-family: var(--display); font-weight: 600; letter-spacing: -.02em; font-size: clamp(1.05rem, 1.5vw, 1.3rem); margin-bottom: .4rem; }
.work-info p { color: var(--muted); margin-bottom: .75rem; max-width: 52ch; }
.tags { display: flex; flex-wrap: wrap; gap: .25rem .9rem; list-style: none; font-family: var(--mono); font-size: .72rem; color: var(--muted); }
.work-visit { font-family: var(--mono); font-size: .76rem; color: var(--muted); white-space: nowrap; transition: color .15s; }
.work-card:hover .work-visit { color: var(--text); }

/* ---------- Work: grid on the web design page ---------- */
.work-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3rem 1.5rem; }
.work-grid .work-card { display: block; padding: 0; border: 0; }
.work-grid .thumb { aspect-ratio: 3 / 2; margin-bottom: 1rem; }
.work-grid .work-visit { display: inline-block; margin-top: .5rem; }

/* ---------- Apps ---------- */
.apps-list { border-top: 1px solid var(--hair); }
.app-card { display: grid; grid-template-columns: 56px 1fr auto; gap: 1.5rem 1.75rem; align-items: start; padding: 1.75rem 0; border-bottom: 1px solid var(--hair); }
.app-icon { width: 56px; height: 56px; border-radius: 12px; display: grid; place-items: center; border: 1px solid var(--border); background: var(--surface); color: var(--accent); }
.app-icon svg { width: 26px; height: 26px; }
.app-body h3 { font-family: var(--display); font-weight: 600; letter-spacing: -.02em; font-size: 1.15rem; display: flex; gap: .75rem; align-items: baseline; flex-wrap: wrap; margin-bottom: .35rem; }
.price { font-family: var(--mono); font-size: .74rem; letter-spacing: .04em; color: var(--accent-2); border: 1px solid color-mix(in srgb, var(--accent-2) 45%, transparent); padding: .15rem .5rem; border-radius: var(--r); }
.app-body p { color: var(--muted); max-width: 52ch; margin: 0; }
.store-links { display: flex; flex-direction: column; gap: .5rem; }
.store-badge { display: inline-flex; align-items: center; gap: .6rem; border: 1px solid var(--border); padding: .5rem .85rem; border-radius: var(--r); line-height: 1.1; transition: border-color .15s; }
.store-badge:hover { border-color: var(--text); }
.store-badge svg { width: 18px; height: 18px; flex: none; }
.store-badge span { display: flex; flex-direction: column; font-weight: 600; font-size: .84rem; }
.store-badge small { font-size: .62rem; font-weight: 400; color: var(--muted); }

/* ---------- Shop ---------- */
.shop-group { display: grid; grid-template-columns: 1fr; gap: 1.25rem; padding: 2.5rem 0; border-top: 1px solid var(--hair); }
.shop-group:last-child { padding-bottom: 0; }
.shop-group-title { font-family: var(--mono); font-size: .74rem; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: .3em 0 0; }
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem 1.5rem; }
.product-card .thumb { aspect-ratio: 4 / 3; margin-bottom: .9rem; }
.product-info h3 { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; font-size: 1.05rem; margin-bottom: .25rem; }
.product-info p { color: var(--muted); font-size: .93rem; margin-bottom: .5rem; }
.product-buy { font-family: var(--mono); font-size: .76rem; color: var(--accent-2); }
a.product-buy:hover { text-decoration: underline; text-underline-offset: .25em; }
.product-buy.is-soon { color: var(--muted); }

/* ---------- Artwork: home teaser ----------
   Finished pieces are shown like prints laid on a table (tilted, shadowed), the same rule as the
   hero stack and the contact sheet. Interface elements stay flat. */
.art-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.art-cat { display: block; transition: rotate .35s ease, translate .35s ease; }
.art-cat:nth-child(odd) { rotate: -1.2deg; }
.art-cat:nth-child(even) { rotate: 1.2deg; }
.art-cat:hover { rotate: 0deg; translate: 0 -6px; }
.art-cat .thumb { box-shadow: 0 16px 40px rgba(0, 0, 0, .4); }
.art-cat .thumb { aspect-ratio: 4 / 5; margin-bottom: .9rem; }
.art-cat-info h3 { font-family: var(--display); font-weight: 600; letter-spacing: -.02em; font-size: 1.05rem; margin-bottom: .2rem; }
.art-cat-info p { color: var(--muted); font-size: .95rem; margin: 0; }
.art-more { margin-top: 2.5rem; }

/* ---------- Services ---------- */
.services-grid { border-top: 1px solid var(--hair); }
.service { display: grid; grid-template-columns: 260px 1fr; gap: .5rem 1.5rem; align-items: baseline; padding: 1.6rem 0; border-bottom: 1px solid var(--hair); }
.service h3 { font-family: var(--display); font-weight: 600; letter-spacing: -.02em; font-size: 1.05rem; }
.service p { color: var(--muted); margin: 0; max-width: 56ch; }
/* Homepage services: the icon draws itself and a teal line sweeps along the row as it scrolls in. */
.services-draw .service { position: relative; }
.services-draw .service::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 1.1s cubic-bezier(.65, 0, .35, 1) .15s; }
.services-draw .service.in::after { transform: scaleX(1); }
.services-draw .service h3 { display: flex; align-items: center; gap: .85rem; }
.service-icon { flex: none; width: 30px; height: 30px; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.service-icon * { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s ease .35s; }
.service.in .service-icon * { stroke-dashoffset: 0; }
.service.in .service-icon :nth-child(2) { transition-delay: .7s; }
.service.in .service-icon :nth-child(3) { transition-delay: 1s; }
.services-draw .service:hover .service-icon { fill: var(--accent-soft); }
@media (prefers-reduced-motion: reduce) {
  .services-draw .service::after, .service-icon * { transition: none; }
}

/* The process is a real sequence, so it is numbered. */
.process { margin-top: clamp(3rem, 6vw, 5rem); }
.process h3 { font-family: var(--mono); font-weight: 400; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.5rem; }
.steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; counter-reset: step; }
.steps li { counter-increment: step; padding-top: 1rem; border-top: 1px solid var(--border); color: var(--muted); font-size: .95rem; }
.steps li::before { content: "0" counter(step); display: block; font-family: var(--mono); font-size: .74rem; color: var(--accent-2); margin-bottom: .6rem; }
.steps li strong { display: block; color: var(--text); font-family: var(--display); font-weight: 600; letter-spacing: -.02em; font-size: 1.35rem; margin-bottom: .3rem; }
/* Step drawings on the homepage, same line style as the shop drawings. They sit above the step number. */
.steps li:has(.step-art) { display: flex; flex-direction: column; }
.step-art { order: -1; width: 150px; height: auto; margin: .25rem 0 1rem; overflow: visible; }
.step-dot, .step-btn { fill: var(--accent); }
.step-fill { fill: var(--accent); opacity: .35; }
.step-ink, .step-speed { fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.step-reply { fill: var(--bg); stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; }
.step-pencil-line { fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.step-paper { transform-box: fill-box; transform-origin: center; transform: rotate(-4deg); }
.step-window { fill: var(--bg); stroke: var(--accent); stroke-width: 2.5; }
.step-flame { fill: var(--accent); opacity: .8; transform-box: fill-box; transform-origin: 50% 0; animation: step-flame .35s ease-in-out infinite alternate; }
.step-rocket { animation: step-hover 2.4s ease-in-out infinite; }
.step-speed { stroke-dasharray: 6 10; animation: step-speed .8s linear infinite; }
.step-dot { animation: step-type 1.2s ease-in-out infinite; }
.step-dot:nth-of-type(2) { animation-delay: .15s; }
.step-dot:nth-of-type(3) { animation-delay: .3s; }
.step-art:not(:has(.step-reply)) .step-dot { animation: none; }
.step-pencil { animation: step-write 2.6s ease-in-out infinite; }
@keyframes step-type { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-4px); } }
@keyframes step-flame { from { transform: scaleY(.8); } to { transform: scaleY(1.15); } }
@keyframes step-hover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes step-speed { to { stroke-dashoffset: -16; } }
@keyframes step-write { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-6px, 3px); } 50% { transform: translate(-2px, -2px); } 75% { transform: translate(-8px, 0); } }
@media (prefers-reduced-motion: reduce) { .step-art * { animation: none !important; } }

/* ---------- Packages (web design and app pages) ----------
   The one place the site uses cards: people compare these side by side. */
.packages-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; align-items: stretch; }
.package {
  position: relative; display: flex; flex-direction: column;
  padding: 2rem 1.5rem 1.5rem; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--border);
  transition: border-color .2s;
}
.package:hover { border-color: var(--muted); }
.package h3 { font-family: var(--display); font-weight: 600; letter-spacing: -.02em; font-size: 1.05rem; margin-bottom: .5rem; }
.package-price { font-family: var(--display); font-weight: 700; letter-spacing: -.03em; font-size: 1.9rem; line-height: 1; color: var(--text); margin: 0 0 1rem; }
.package-price small { font-family: var(--mono); font-weight: 400; font-size: .72rem; letter-spacing: .06em; color: var(--muted); }
.package-sub { color: var(--muted); font-size: .93rem; margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--hair); }
.package ul { list-style: none; display: grid; gap: .6rem; margin: 0 0 1.75rem; flex: 1; }
.package li { position: relative; padding-left: 1.6rem; font-size: .93rem; }
.package li::before {
  content: ""; position: absolute; left: 0; top: .2em; width: 1em; height: 1em; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  -webkit-mask: none;
}
.package li::after {
  content: ""; position: absolute; left: .28em; top: .5em; width: .42em; height: .22em;
  border-left: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent); transform: rotate(-45deg);
}
.package .btn { width: 100%; }
.package-price { margin-bottom: .5rem; }
.package-plan { font-family: var(--mono); font-size: .72rem; letter-spacing: .04em; color: var(--accent); margin: 0 0 1rem; }
/* Package drawings: same line style as the shop drawings. They move while the card is hovered,
   and all the time on touch screens, where there is no hover. */
.package-art { display: block; width: 96px; height: 64px; margin: 0 auto 1.1rem; overflow: visible; }
.package-art .pa-line { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.package-art .pa-stroke { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.package-art .pa-thick { stroke-width: 3; }
.package-art .pa-ink, .package-art .pa-wave, .package-art .pa-spark { fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.package-art .pa-dash { fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-dasharray: 3 3; }
.package-art .pa-dot, .package-art .pa-fill { fill: var(--accent); }
.package-art .pa-soft { opacity: .35; }
.package-art .pa-cursor { fill: var(--bg); stroke: var(--text); stroke-width: 1.6; stroke-linejoin: round; }
.package-art .pa-cog { fill: none; stroke: var(--accent); stroke-width: 4.5; stroke-dasharray: 3.2 3.5; }
.package-art .pa-beatline { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.package-art * { transform-box: fill-box; animation-play-state: paused; }
.package:hover .package-art * { animation-play-state: running; }
@media (hover: none) { .package-art * { animation-play-state: running; } }
.pa-cta { transform-origin: center; animation: pa-pulse 1.6s ease-in-out infinite; }
.pa-cursor { animation: pa-click 1.6s ease-in-out infinite; }
.pa-page-3 { animation: pa-fan3 2.4s ease-in-out infinite; }
.pa-page-2 { animation: pa-fan2 2.4s ease-in-out infinite; }
.pa-horn { transform-origin: 0 100%; animation: pa-tilt 1.8s ease-in-out infinite; }
.pa-wave { animation: pa-wave 1.8s ease-out infinite; }
.pa-wave + .pa-wave { animation-delay: .3s; }
.pa-spark { transform-origin: center; animation: pa-pulse 1.8s ease-in-out infinite .6s; }
.pa-bag { transform-origin: 50% 100%; animation: pa-bounce 1.6s ease-in-out infinite; }
.pa-gear { transform-origin: center; animation: pa-spin 4s linear infinite; }
.pa-dash { animation: pa-march 1s linear infinite; }
.pa-pencil { transform-origin: 0 100%; animation: pa-write 1.6s ease-in-out infinite; }
.pa-bar { transform-origin: 50% 100%; animation: pa-grow 1.8s ease-in-out infinite; }
.pa-bar:nth-of-type(3) { animation-delay: .15s; }
.pa-bar:nth-of-type(4) { animation-delay: .3s; }
.pa-bar:nth-of-type(5) { animation-delay: .45s; }
.pa-phone { animation: pa-float 2.4s ease-in-out infinite; }
.pa-app { transform-origin: center; animation: pa-pulse 1.2s ease-in-out infinite; }
.pa-beatline { animation: pa-trace 1.6s ease-in-out infinite; }
.pa-heart { transform-origin: center; animation: pa-beat 1.6s ease-in-out infinite; }
@keyframes pa-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes pa-click { 0%, 100% { transform: translate(0, 0); } 45%, 60% { transform: translate(-10px, -4px); } }
@keyframes pa-fan3 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(5px, -3px); } }
@keyframes pa-fan2 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(2.5px, -1.5px); } }
@keyframes pa-tilt { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-4deg); } }
@keyframes pa-wave { 0% { opacity: 1; transform: translateX(0); } 70% { opacity: 0; transform: translateX(5px); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes pa-bounce { 0%, 100% { transform: translateY(0) scaleY(1); } 40% { transform: translateY(-4px) scaleY(1.02); } 70% { transform: translateY(0) scaleY(.97); } }
@keyframes pa-spin { to { transform: rotate(360deg); } }
@keyframes pa-march { to { stroke-dashoffset: -12; } }
@keyframes pa-write { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-4px, 2px); } 50% { transform: translate(-1px, -2px); } 75% { transform: translate(-5px, 0); } }
@keyframes pa-grow { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.6); } }
@keyframes pa-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes pa-trace { 0% { stroke-dashoffset: 0; } 50% { stroke-dashoffset: 1; } 100% { stroke-dashoffset: 0; } }
@keyframes pa-beat { 0%, 30%, 100% { transform: scale(1); } 15% { transform: scale(1.1); } 45% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .package-art * { animation: none !important; } }
.packages-note { color: var(--muted); margin: 1.75rem 0 0; }
.packages-note .link-more { margin-left: .35rem; }
.after-launch { margin-top: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid var(--hair); }
.after-launch-title { font-family: var(--mono); font-weight: 400; font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding-top: 1.6rem; }
.after-launch-title span { text-transform: none; letter-spacing: .04em; }

/* ---------- About ---------- */
.about-services { margin-top: clamp(4rem, 8vw, 6.5rem); padding-top: clamp(3rem, 6vw, 5rem); border-top: 1px solid var(--hair); }
.about-grid { display: grid; grid-template-columns: 1fr 300px; gap: 2rem 3rem; align-items: start; }
.about-copy h2 { margin-bottom: 1.25rem; }
.about-copy p { color: var(--muted); font-size: 1.1rem; max-width: 54ch; }
/* White frame, like a print. The frame is padding, so the image keeps its square crop inside it. */
.about-photo .thumb { padding: .6rem; background: #f7f6f2; border-radius: 0; box-shadow: 0 16px 40px rgba(0, 0, 0, .35); }
/* The photo sets its own shape and the frame wraps around it, so the border shows on every side in every browser
   (percentage heights inside an aspect-ratio box aren't reliable in Safari). */
.about-photo .thumb picture { display: block; }
.about-photo .thumb img { height: auto; aspect-ratio: 2 / 3; object-position: 50% 30%; }
.skills { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin-top: 1.5rem; font-family: var(--mono); font-size: .76rem; color: var(--muted); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem 4rem; align-items: start; }
.contact-copy h2 { font-size: clamp(1.7rem, 3.6vw, 3rem); margin: 0 0 1rem; }
.contact-email { font-family: var(--sans); font-weight: 600; letter-spacing: -.01em; font-size: clamp(1.3rem, 2.4vw, 1.8rem); color: var(--text); border-bottom: 1px solid var(--border); transition: color .15s, border-color .15s; }
.contact-email:hover { color: var(--accent); border-color: var(--accent); }
.contact-list { list-style: none; display: grid; gap: .6rem; margin: 2rem 0; color: var(--muted); }
.socials { display: flex; gap: 1.25rem; font-family: var(--mono); font-size: .78rem; color: var(--muted); }
.socials a { transition: color .15s; }
.socials a:hover { color: var(--text); }

.contact-form { display: flex; flex-direction: column; gap: 1.5rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.field { display: flex; flex-direction: column; gap: .35rem; }
.field span { font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; padding: .85rem 1rem; border-radius: var(--r);
  border: 1px solid #ffffff; background: #ffffff; color: #141a1d; color-scheme: light;
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.field select { padding-right: 2.25rem; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141a1d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center; background-size: 16px; }
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
.field input::placeholder, .field textarea::placeholder { color: #8a949b; }
.field input.invalid, .field textarea.invalid { border-color: var(--err); }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }
.form-status { margin: 0; font-size: .92rem; min-height: 1.4em; color: var(--muted); }
.form-status.ok { color: var(--ok); }
.form-status.err { color: var(--err); }

/* ---------- Artwork: gallery page ---------- */
.gallery-filters { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 2.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--hair); }
.filter-btn {
  padding: 0 0 .3rem; background: none; border: 0; border-bottom: 1px solid transparent; cursor: pointer;
  font-family: var(--mono); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  transition: color .15s, border-color .15s;
}
.filter-btn:hover { color: var(--text); }
.filter-btn.is-active { color: var(--text); border-bottom-color: var(--accent-2); }

.gallery { columns: 3; column-gap: 1.5rem; }
.art-item { break-inside: avoid; margin: 0 0 2rem; }
.art-item.is-hidden { display: none; }
.art-link { display: block; overflow: hidden; border-radius: var(--r); background: var(--bg-alt); }
.art-link img { width: 100%; height: auto; filter: saturate(.8) brightness(.92); transition: filter .3s, transform .6s ease; }
.art-item:hover .art-link img { filter: none; transform: scale(1.02); }
.art-item figcaption { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0 0; font-size: .92rem; }
.art-item figcaption strong { font-weight: 500; }
.art-item figcaption span { font-family: var(--mono); font-size: .72rem; color: var(--muted); text-align: right; }
.gallery-empty { text-align: center; color: var(--muted); padding: 3rem 0; }

.art-cta { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: end; }
.art-cta h2 { margin: 0 0 .75rem; }
.art-cta .section-sub { margin: 0; }

/* ---------- Artwork: lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 3.5rem 1rem;
  background: rgba(10, 13, 15, .94); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.lightbox[hidden] { display: none; }
.lightbox-figure { margin: 0; max-width: min(1100px, 100%); max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: .75rem; }
.lightbox-figure img { max-width: 100%; max-height: calc(100vh - 9rem); object-fit: contain; border-radius: var(--r); }
.lightbox-figure figcaption { color: #e2e6e8; font-size: .95rem; text-align: center; }
.lightbox-figure figcaption strong { display: block; font-weight: 500; }
.lightbox-figure figcaption span { font-family: var(--mono); font-size: .74rem; color: #8a949b; }
.lightbox-close, .lightbox-nav {
  position: fixed; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: transparent; border: 1px solid #343e45; color: #e2e6e8; cursor: pointer; font-size: 1.5rem; line-height: 1;
  transition: border-color .15s, color .15s;
}
.lightbox-close:hover, .lightbox-nav:hover { border-color: var(--accent); color: var(--accent); }
.lightbox-close { top: 1rem; right: 1rem; }
.lightbox-nav { top: 50%; transform: translateY(-50%); }
.lightbox-prev { left: 1rem; }
.lightbox-next { right: 1rem; }
body.lightbox-open { overflow: hidden; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--hair); padding: 2.5rem 0; }
.footer-wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 1.25rem; font-family: var(--mono); font-size: .76rem; color: var(--muted); }
.footer-nav a:hover { color: var(--text); }
.copyright { margin: 0; font-family: var(--mono); font-size: .74rem; color: var(--muted); }

.back-top {
  position: fixed; right: 1.25rem; bottom: 1.25rem; width: 42px; height: 42px; border-radius: var(--r);
  display: grid; place-items: center; background: var(--surface); border: 1px solid var(--border); color: var(--text);
  opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .2s, transform .2s, border-color .15s; z-index: 40;
}
.back-top:hover { border-color: var(--text); }
.back-top.show { opacity: 1; pointer-events: auto; transform: translateY(0); }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease, rotate .35s ease, translate .35s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .stack .thumb, .sheet-item, .art-cat { transition: none; }
  html { scroll-behavior: auto; }
  .thumb img, .art-link img { transition: none; }
}

/* ---------- Responsive ---------- */
/* The menu collapses into the hamburger at 1024px; below that it doesn't fit beside the logo. */
@media (max-width: 1024px) {
  .nav {
    position: fixed; inset: 84px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--hair); padding: .5rem var(--gutter) 1.25rem;
    transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
  }
  .nav.open { transform: none; opacity: 1; pointer-events: auto; }
  .nav a:not(.btn) { padding: .85rem 0; border-bottom: 1px solid var(--hair); font-size: 1rem; }
  .nav .btn { margin-top: 1rem; }
  .nav-toggle { display: flex; }
  .nav-social { display: none; }
}
@media (max-width: 1024px) {
  .product-grid, .art-cats { grid-template-columns: repeat(2, 1fr); }
  .packages-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
  .gallery { columns: 2; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .about-grid { grid-template-columns: 1fr; }
  .about-photo { max-width: 260px; }
  .about-photo .thumb img { aspect-ratio: 1; } /* square when it sits above the copy */
  /* One column: the photo sits right under the heading. The copy's children join the grid so they can be reordered. */
  .about-grid { gap: 0; }
  .about-copy { display: contents; }
  .about-copy h2 { order: -2; }
  .about-photo { order: -1; margin-bottom: 1.75rem; }
  .about-grid { text-align: center; justify-items: center; }
  .about-copy p { margin-inline: auto; }
  .skills { justify-content: center; }
}
@media (max-width: 860px) {
  :root { --label: auto; }
  .section-head, .shop-group { grid-template-columns: 1fr; gap: .75rem 2rem; }
  .service { grid-template-columns: 1fr; }
  .about-photo { grid-column: auto; }
  .hero-grid, .contact-grid, .art-cta { grid-template-columns: 1fr; }
  .stack { height: auto; aspect-ratio: 1.25; max-width: 460px; margin-top: 1rem; }
  .stack-process { display: none; } /* the sketch is a desktop-only fill for the empty column */
  .note::after { content: "  ↓"; }
  .sheet { grid-template-columns: repeat(2, 1fr); }
  .work-card { grid-template-columns: 1fr; gap: 1rem; }
  .work-visit { justify-self: start; }
  .work-grid { grid-template-columns: 1fr; }
  .app-card { grid-template-columns: 56px 1fr; }
  .store-links { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }

}
@media (max-width: 560px) {
  .hero { padding-top: 2.25rem; }
  .product-grid, .art-cats, .steps, .field-row, .packages-grid { grid-template-columns: 1fr; }
  .sheet { grid-template-columns: 1fr; max-width: 420px; }
  .gallery { columns: 1; }
  .lightbox-nav { top: auto; bottom: 1rem; transform: none; }
    .footer-wrap { flex-direction: column; align-items: flex-start; }
}

/* Inline text links (e.g. CGF Films) */
.text-link { color: var(--text); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .2s ease; }
.text-link:hover { color: var(--accent); }

/* <picture> wrappers (WebP with JPG/GIF fallback) shouldn't add a box of their own,
   so the img inside still sizes against .thumb / .logo-crop exactly as before. */
picture { display: contents; }