/* Pixelca — shared styles (Redesign 2026, black & white). WordPress copy: see README.md */

@font-face {
  font-family: 'Jersey 25';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('jersey-25.woff2') format('woff2');
}


:root {
  color-scheme: dark;
  --bg: #060606;
  --bg-2: #0c0c0c;
  --surface: #121212;
  --surface-2: #1a1a1a;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.2);
  --text: #f5f5f5;
  --muted: #a8a8a8;
  --white: #ffffff;
  --pin: #4ade80;
  --radius: 4px;
  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --pixel: 'Jersey 25', ui-monospace, 'Cascadia Mono', monospace;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--pixel);
  font-size: 1.35rem;
  line-height: 1.45;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--white); color: #000; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }

:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 200;
  padding: 8px 16px;
  background: var(--white);
  color: #000;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- Type ---------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 1.1rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow::before {
  content: '';
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 27' shape-rendering='crispEdges'%3E%3Crect x='0' y='21' width='6' height='6' fill='%23fff' opacity='0.16'/%3E%3Crect x='7' y='14' width='6' height='6' fill='%23fff' opacity='0.44'/%3E%3Crect x='7' y='21' width='6' height='6' fill='%23fff' opacity='0.44'/%3E%3Crect x='14' y='7' width='6' height='6' fill='%23fff' opacity='0.72'/%3E%3Crect x='14' y='14' width='6' height='6' fill='%23fff' opacity='0.72'/%3E%3Crect x='14' y='21' width='6' height='6' fill='%23fff' opacity='0.72'/%3E%3Crect x='21' y='0' width='6' height='6' fill='%23fff' opacity='1'/%3E%3Crect x='21' y='7' width='6' height='6' fill='%23fff' opacity='1'/%3E%3Crect x='21' y='14' width='6' height='6' fill='%23fff' opacity='1'/%3E%3Crect x='21' y='21' width='6' height='6' fill='%23fff' opacity='1'/%3E%3C/svg%3E") center / contain no-repeat;
  margin-right: 2px;
}

h1, h2, h3 { font-weight: 400; line-height: 1.12; letter-spacing: 0.01em; }
h1, h2 { padding-right: 0.15em; }
h1 { font-size: clamp(3.2rem, 7vw, 6.2rem); }
h2 { font-size: clamp(2.6rem, 5.4vw, 4.4rem); }
h3 { font-size: 1.75rem; line-height: 1.05; }

.lead { font-size: clamp(1.4rem, 1.9vw, 1.65rem); color: var(--muted); max-width: 36rem; line-height: 1.4; }
.muted { color: var(--muted); }

/* inverted "selected pixels" highlight */
.hl {
  background: var(--white);
  color: #000;
  padding: 0 0.12em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---------- Buttons ---------- */

.btn {
  --cut: 5px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px;
  font-size: 1.4rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
  clip-path: polygon(
    0 var(--cut), var(--cut) var(--cut), var(--cut) 0,
    calc(100% - var(--cut)) 0, calc(100% - var(--cut)) var(--cut), 100% var(--cut),
    100% calc(100% - var(--cut)), calc(100% - var(--cut)) calc(100% - var(--cut)), calc(100% - var(--cut)) 100%,
    var(--cut) 100%, var(--cut) calc(100% - var(--cut)), 0 calc(100% - var(--cut))
  );
}
.btn:focus-visible { outline-offset: 4px; clip-path: none; }
.btn-primary { background: var(--white); color: #000; }
.btn-primary:hover { background: #d4d4d4; transform: translateY(-2px); }
.btn-ghost { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn-ghost:hover { background: #262626; transform: translateY(-2px); }
.btn .arrow { transition: transform 0.2s ease; }
.btn:hover .arrow { transform: translateX(3px); }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(6, 6, 6, 0.8);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  gap: 24px;
}

.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-mark { width: 26px; height: 26px; color: var(--white); display: inline-flex; }
.brand-mark svg { width: 100%; height: 100%; display: block; }
.brand-name { font-size: 1.9rem; letter-spacing: 0.16em; line-height: 1; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  padding: 4px 14px;
  font-size: 1.4rem;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s ease;
}
.nav a:hover { color: var(--text); }
.nav a[aria-current='page'] { color: var(--text); }
.nav a { display: inline-flex; align-items: center; gap: 8px; line-height: 1; }
/* Current page: a green square, centred on the text */
.nav a[aria-current='page']:not(.btn)::before { content: ''; flex: none; width: 7px; height: 7px; background: var(--pin); }
.nav .btn { margin-left: 10px; padding: 6px 18px; color: #000; }
.nav .btn:hover, .nav a.btn[aria-current='page'] { color: #000; }

.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  place-items: center;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  cursor: pointer;
}
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--text);
  position: relative;
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.menu-toggle span::before, .menu-toggle span::after { content: ''; position: absolute; left: 0; }
.menu-toggle span::before { top: -6px; }
.menu-toggle span::after { top: 6px; }
.menu-toggle[aria-expanded='true'] span { background: transparent; }
.menu-toggle[aria-expanded='true'] span::before { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded='true'] span::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 800px) {
  .menu-toggle { display: grid; }
  .nav {
    display: none;
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    padding: 12px var(--gutter) 20px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 12px 4px; font-size: 1.7rem; border-bottom: 1px solid var(--line); }
  .nav .btn { margin: 14px 0 0; justify-content: center; border: 0; }
}

/* ---------- Sections ---------- */

.section { padding: clamp(72px, 10vw, 128px) 0; position: relative; }
.section-alt { background: rgba(12, 12, 12, 0.72); border-block: 1px solid var(--line); }

/* Heading on the left, supporting text on the right: no dead half */
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  column-gap: clamp(32px, 6vw, 96px);
  row-gap: 18px;
  align-items: end;
  margin-bottom: clamp(40px, 6vw, 64px);
  padding-bottom: clamp(28px, 4vw, 40px);
  border-bottom: 1px solid var(--line);
}
.section-head .eyebrow { grid-column: 1 / -1; }
.section-head h2 { grid-column: 1; }
.section-head .lead, .section-head .side { grid-column: 2; max-width: none; }
.section-head h2:last-child { grid-column: 1 / -1; }
@media (max-width: 800px) {
  .section-head { grid-template-columns: 1fr; }
  .section-head .lead, .section-head .side { grid-column: 1; }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: calc(100svh - 68px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(40px, 5vw, 64px) 0;
  overflow: hidden;
  isolation: isolate;
}
.hero .wrap { display: grid; gap: clamp(24px, 3.5vw, 40px); }
.hero-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
/* Green pin beside London */
.loc {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
}
.pin {
  width: 12px;
  height: 16px;
  fill: var(--pin);
  animation: pin-bob 1.6s steps(1) infinite;
}
@keyframes pin-bob {
  0% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
.hero-tag { font-size: 1.05rem; letter-spacing: 0.24em; color: var(--muted); }
.hero h1 { font-size: clamp(3.2rem, 7.2vw, 6rem); line-height: 1.1; }
.hero-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 6vw, 96px);
  align-items: start;
}
.hero-bottom .lead { max-width: 34rem; }
.hero-side { display: grid; gap: 22px; justify-items: start; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-points {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  color: var(--muted);
  font-size: 1.15rem;
  letter-spacing: 0.06em;
}
.hero-points li { display: inline-flex; align-items: center; gap: 10px; }
.hero-points li::before { content: ''; width: 7px; height: 7px; background: var(--white); }

@media (max-width: 800px) {
  .hero { min-height: 0; }
  .hero-bottom { grid-template-columns: 1fr; }
  .hero-tag { display: none; }
}

/* ---------- Pixel icons (16x16) ---------- */

.pixels {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  gap: 0;
  aspect-ratio: 1;
}
.pixels span {
  aspect-ratio: 1;
  background: transparent;
  transform: scale(0.35);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.25s ease;
}
.pixels span.on { background: var(--text); transform: scale(1.02); }
.card .pixels span, .value-icon span { transform: scale(0); }
.card .pixels span.on, .value-icon span.on { transform: scale(1.02); }

/* ---------- Ticker ---------- */

.ticker {
  border-block: 1px solid var(--line);
  background: var(--bg-2);
  overflow: hidden;
  padding: 14px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker-track { display: flex; width: max-content; animation: ticker 40s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker ul {
  display: flex;
  gap: 48px;
  padding: 0 24px;
  list-style: none;
  font-size: 1.5rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.ticker li { display: inline-flex; align-items: center; gap: 48px; white-space: nowrap; }
.ticker li::after { content: ''; width: 7px; height: 7px; background: var(--white); }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- Process ---------- */

.process {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  list-style: none;
  padding: 0;
  position: relative;
}
.process::before, .process::after {
  content: '';
  position: absolute;
  top: 38px;
  left: 0;
  height: 2px;
  width: 100%;
  background: repeating-linear-gradient(90deg, var(--line-strong) 0 6px, transparent 6px 12px);
}
.process::after {
  width: 0;
  background: repeating-linear-gradient(90deg, var(--white) 0 6px, transparent 6px 12px);
  transition: width 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}
.process.is-in::after { width: 100%; }
.step { position: relative; display: grid; gap: 12px; align-content: start; padding-right: 8px; }
.step-num {
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  font-size: 2.8rem;
  line-height: 1;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.step:hover .step-num { background: var(--white); color: #000; }
.step p { color: var(--muted); }

@media (max-width: 800px) {
  .process { grid-template-columns: 1fr; gap: 36px; }
  .step { grid-template-columns: 78px minmax(0, 1fr); column-gap: 20px; row-gap: 8px; padding-right: 0; }
  .step-num { grid-row: span 2; margin-bottom: 0; }
  .step h3 { padding-top: 10px; }
  .process::before, .process::after { top: 0; left: 38px; width: 2px; height: calc(100% - 60px); }
  .process::before { background: repeating-linear-gradient(180deg, var(--line-strong) 0 6px, transparent 6px 12px); }
  .process::after {
    height: 0;
    width: 2px;
    background: repeating-linear-gradient(180deg, var(--white) 0 6px, transparent 6px 12px);
    transition-property: height;
  }
  .process.is-in::after { width: 2px; height: calc(100% - 60px); }
}

/* ---------- Product cards ---------- */

.portfolio {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: 1px;
  list-style: none;
  padding: 0;
  background: var(--line);
  border: 1px solid var(--line);
}
.portfolio > li { background: var(--bg-2); }
.card {
  position: relative;
  display: grid;
  align-content: start;
  gap: 22px;
  padding: 32px;
  height: 100%;
  transition: background-color 0.25s ease;
}
.card:hover { background: var(--surface); }
.card .pixels { width: 48px; gap: 0; }
.card-body { display: grid; gap: 8px; min-width: 0; }
.card-top { display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 6px; }
.card p { color: var(--muted); }
.card-index {
  position: absolute;
  top: 28px;
  right: 32px;
  font-size: 1.1rem;
  color: var(--muted);
  letter-spacing: 0.1em;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1.05rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.status::before { content: ''; width: 6px; height: 6px; background: currentColor; }

/* ---------- Values ---------- */

.values {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  list-style: none;
  padding: 0;
}
.value {
  padding: clamp(24px, 3vw, 36px);
  display: grid;
  gap: 14px;
  align-content: start;
  background: var(--bg);
  transition: background-color 0.3s ease;
}
.value:hover { background: var(--surface); }
.value-icon { width: 40px; gap: 0; }
.value p { color: var(--muted); }
@media (max-width: 1000px) { .values { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .values { grid-template-columns: 1fr; } }

/* ---------- CTA ---------- */

.cta {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 32px;
  align-items: end;
  padding: clamp(36px, 6vw, 72px);
  background: var(--white);
  color: #000;
}
.cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(0, 0, 0, 0.07) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0, 0, 0, 0.07) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(120deg, transparent 35%, #000);
  mask-image: linear-gradient(120deg, transparent 35%, #000);
  pointer-events: none;
}
.cta > * { position: relative; }
.cta-copy { display: grid; gap: 18px; }
.cta-side { display: grid; gap: 20px; justify-items: start; }
.cta .eyebrow { color: #555; }
.cta .eyebrow::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 27' shape-rendering='crispEdges'%3E%3Crect x='0' y='21' width='6' height='6' fill='%23000' opacity='0.16'/%3E%3Crect x='7' y='14' width='6' height='6' fill='%23000' opacity='0.44'/%3E%3Crect x='7' y='21' width='6' height='6' fill='%23000' opacity='0.44'/%3E%3Crect x='14' y='7' width='6' height='6' fill='%23000' opacity='0.72'/%3E%3Crect x='14' y='14' width='6' height='6' fill='%23000' opacity='0.72'/%3E%3Crect x='14' y='21' width='6' height='6' fill='%23000' opacity='0.72'/%3E%3Crect x='21' y='0' width='6' height='6' fill='%23000' opacity='1'/%3E%3Crect x='21' y='7' width='6' height='6' fill='%23000' opacity='1'/%3E%3Crect x='21' y='14' width='6' height='6' fill='%23000' opacity='1'/%3E%3Crect x='21' y='21' width='6' height='6' fill='%23000' opacity='1'/%3E%3C/svg%3E"); }
.cta .muted, .cta .address { color: #444; }
.cta .address strong { color: #000; }
.cta .btn-primary { background: #000; color: var(--white); }
.cta .btn-primary:hover { background: #333; }
.address { font-style: normal; color: var(--muted); line-height: 1.45; }
.address strong { color: var(--text); font-weight: 400; }
@media (max-width: 800px) { .cta { grid-template-columns: 1fr; align-items: start; } }

/* ---------- Page hero (inner pages) ---------- */

.page-hero {
  padding: clamp(64px, 10vw, 120px) 0 clamp(40px, 6vw, 64px);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse 60% 90% at 85% 0%, #000 15%, transparent 70%);
  mask-image: radial-gradient(ellipse 60% 90% at 85% 0%, #000 15%, transparent 70%);
}
.page-hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  column-gap: clamp(32px, 6vw, 96px);
  row-gap: 24px;
  align-items: end;
}
.page-hero .eyebrow { grid-column: 1 / -1; }
.page-hero .lead { max-width: none; }
@media (max-width: 800px) { .page-hero .wrap { grid-template-columns: 1fr; } }

/* ---------- About ---------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.split > :first-child { position: sticky; top: 108px; display: grid; gap: 18px; }
.prose { display: grid; gap: 22px; font-size: 1.5rem; color: var(--muted); line-height: 1.45; }
.prose strong { color: var(--text); font-weight: 400; }
@media (max-width: 800px) {
  .split { grid-template-columns: 1fr; }
  .split > :first-child { position: static; }
}

.facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  padding: 0;
}
@media (max-width: 900px) { .facts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .facts { grid-template-columns: 1fr; } }
.fact { padding: 26px; background: var(--bg-2); display: grid; gap: 8px; align-content: start; }
.fact dt, .fact .label { font-size: 1.05rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.fact dd, .fact .value-text { margin: 0; font-size: 1.5rem; line-height: 1.2; }

/* ---------- Contact ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }

.form {
  display: grid;
  gap: 20px;
  padding: clamp(24px, 4vw, 40px);
  background: var(--surface);
  border: 1px solid var(--line);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
.field { display: grid; gap: 6px; }
.field label { font-size: 1.3rem; }
.field input, .field textarea, .field select {
  width: 100%;
  padding: 10px 14px;
  font-size: 1.35rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field textarea { min-height: 170px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--white);
  box-shadow: 4px 4px 0 rgba(255, 255, 255, 0.15);
}
.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 22px) 55%, calc(100% - 16px) 55%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}
.form-note { font-size: 1.1rem; color: var(--muted); }
.form-note a { color: var(--text); }
.form-status {
  display: none;
  padding: 12px 16px;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
}
.form-status.is-shown { display: block; }

.side-stack { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.side-stack .fact { background: var(--surface); }
.topics { list-style: none; padding: 0; display: grid; gap: 10px; }
.topics li { display: flex; gap: 12px; color: var(--muted); line-height: 1.3; }
.fact-link { grid-template-columns: 48px minmax(0, 1fr); align-items: center; column-gap: 16px; }
.fact-link .pixels { width: 48px; gap: 0; }
.fact-link a { color: var(--text); }
.topics li::before { content: ''; flex: none; width: 7px; height: 7px; margin-top: 0.45em; background: var(--white); }

/* ---------- Footer ---------- */

.site-footer { border-top: 1px solid var(--line); padding: 56px 0 32px; margin-top: clamp(40px, 8vw, 96px); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 32px; }
.footer-grid h2 {
  font-size: 1.05rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
.footer-grid ul { list-style: none; padding: 0; display: grid; gap: 6px; }
.footer-grid a { color: var(--text); text-decoration: none; }
.footer-grid a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-about { display: grid; gap: 14px; align-content: start; max-width: 22rem; }
.footer-about p { color: var(--muted); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 1.1rem;
  color: var(--muted);
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-grid ul { gap: 0; }
  .footer-grid ul a { display: inline-block; padding: 8px 0; }
}

/* ---------- Reveal on scroll ---------- */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--d, 0s);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- Layout breakpoints ---------- */


/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  .ticker-track { animation: none; width: auto; }
  .ticker { -webkit-mask-image: none; mask-image: none; }
  .ticker ul[aria-hidden='true'] { display: none; }
  .ticker ul { flex-wrap: wrap; row-gap: 12px; }
}

/* ---------- WordPress additions ---------- */

/* Sticky header sits below the admin bar for logged-in admins */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .site-header { top: 0; } }

/* Contact form */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status.is-ok { border-color: var(--white); }
.form-status.is-error { border-style: dashed; }
.contact-grid { scroll-margin-top: 100px; }
#contact-form { scroll-margin-top: 100px; }

/* 404 */
.nf-side { display: grid; gap: 22px; justify-items: start; }

/* Legal pages: plain page text from the editor */
.legal-text {
  max-width: 48rem;
  display: grid;
  gap: 18px;
  font-size: 1.4rem;
  color: var(--muted);
  line-height: 1.45;
  padding-bottom: clamp(24px, 4vw, 48px);
}
.legal-text h2 { font-size: clamp(2rem, 3.4vw, 2.6rem); color: var(--text); margin-top: 28px; }
.legal-text h3 { color: var(--text); margin-top: 12px; }
.legal-text strong, .legal-text b { color: var(--text); font-weight: 400; }
.legal-text a { color: var(--text); text-underline-offset: 4px; }
.legal-text ul, .legal-text ol { padding-left: 1.2em; display: grid; gap: 8px; }
.legal-text p:empty { display: none; }

/* ---------- Slides: each scroll lands on the next section (Home, About; desktop only) ---------- */

.slide-dots { display: none; }

@media (min-width: 700px) and (min-height: 640px) and (prefers-reduced-motion: no-preference) {
  html:has(body.pixelca-snap) { scroll-snap-type: y mandatory; scroll-padding-top: 69px; }
  html:has(body.pixelca-snap.admin-bar) { scroll-padding-top: 101px; }

  .pixelca-snap .slide {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    min-height: calc(100svh - 68px);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .pixelca-snap.admin-bar .slide { min-height: calc(100svh - 100px); }
  .pixelca-snap .slide-first .hero,
  .pixelca-snap .slide-first .page-hero { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
  .pixelca-snap .slide-first > .section { padding-top: 24px; }
  /* The last slide is the short contact box plus the footer */
  .pixelca-snap .slide.slide-last { min-height: 0; padding-top: clamp(40px, 6vw, 80px); }
  .pixelca-snap .site-footer { scroll-snap-align: end; }

  /* Compact slides: spacing and headings follow the screen HEIGHT, so each section fits one screen */
  .pixelca-snap .slide.section { padding-block: clamp(24px, 4.5vh, 64px); }
  .pixelca-snap .slide .section-head {
    margin-bottom: clamp(16px, 3.5vh, 48px);
    padding-bottom: clamp(14px, 2.5vh, 32px);
    row-gap: 10px;
  }
  .pixelca-snap .slide h2 { font-size: clamp(2.2rem, 5.6vh, 4.4rem); }
  .pixelca-snap .slide .section-head .lead { font-size: clamp(1.2rem, 2.1vh, 1.65rem); }

  .pixelca-snap .slide .card { padding: clamp(16px, 2.6vh, 32px) clamp(20px, 2vw, 32px); gap: clamp(8px, 1.6vh, 22px); }
  .pixelca-snap .slide .card .pixels { width: clamp(28px, 4.2vh, 48px); }
  .pixelca-snap .slide .card-index { top: clamp(14px, 2.4vh, 28px); right: clamp(20px, 2vw, 32px); }
  .pixelca-snap .slide .card h3 { font-size: clamp(1.4rem, 2.6vh, 1.75rem); }
  .pixelca-snap .slide .card p { font-size: clamp(1.1rem, 1.9vh, 1.35rem); line-height: 1.35; }

  .pixelca-snap .slide .value { padding: clamp(18px, 3vh, 36px); gap: clamp(8px, 1.4vh, 14px); }
  .pixelca-snap .slide .value-icon { width: clamp(28px, 3.8vh, 40px); }
  .pixelca-snap .slide .value h3 { font-size: clamp(1.4rem, 2.6vh, 1.75rem); }
  .pixelca-snap .slide .value p { font-size: clamp(1.1rem, 1.9vh, 1.35rem); line-height: 1.35; }

  .pixelca-snap .slide .step-num { width: clamp(56px, 8vh, 78px); height: clamp(56px, 8vh, 78px); font-size: clamp(2rem, 4.4vh, 2.8rem); }
  .pixelca-snap .slide .process::before, .pixelca-snap .slide .process::after { top: clamp(28px, 4vh, 38px); }

  .pixelca-snap .slide-first .page-hero { padding-block: clamp(24px, 5vh, 72px) clamp(16px, 3vh, 40px); }
  .pixelca-snap .slide-first .prose { font-size: clamp(1.2rem, 2.1vh, 1.5rem); gap: clamp(10px, 1.8vh, 22px); }
  .pixelca-snap .slide-first .page-hero h1 { font-size: clamp(2.6rem, 7.5vh, 6.2rem); }
  .pixelca-snap .slide .fact { padding: clamp(16px, 2.6vh, 26px); }

  .pixelca-snap .slide-dots {
    display: grid;
    gap: 14px;
    position: fixed;
    right: clamp(12px, 2vw, 28px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 90;
  }
  .slide-dots button {
    position: relative;
    width: 12px;
    height: 12px;
    padding: 0;
    border: 1px solid var(--line-strong);
    background: transparent;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
  }
  .slide-dots button:hover { border-color: var(--white); }
  .slide-dots button[aria-current='true'] { background: var(--pin); border-color: var(--pin); transform: scale(1.15); box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.18); }
  /* Label appears beside the dot on hover or keyboard focus */
  .slide-dots button span {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    font-size: 1.1rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text);
    background: var(--bg);
    padding: 2px 8px;
    border: 1px solid var(--line-strong);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  .slide-dots button:hover span, .slide-dots button:focus-visible span { opacity: 1; }
}

/* ---------- Slide counter + hidden scrollbar (only where the dots show) ---------- */

.slide-count { display: none; }
@media (min-width: 700px) and (min-height: 640px) and (prefers-reduced-motion: no-preference) {
  .pixelca-snap .slide-count {
    display: block;
    margin-top: 6px;
    font-size: 1rem;
    letter-spacing: 0.12em;
    color: var(--muted);
    text-align: center;
    font-variant-numeric: tabular-nums;
  }
  .slide-count b { color: var(--pin); font-weight: 400; }
  /* The dots and counter show the position, so the browser scrollbar is hidden here */
  html:has(body.pixelca-snap) { scrollbar-width: none; }
  html:has(body.pixelca-snap)::-webkit-scrollbar { display: none; }
}

/* ---------- Pixel field: faint squares that fade in and out behind the page ---------- */

.pixel-field {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  image-rendering: pixelated;
}

/* ---------- 1.4: fuller slides (desktop slide mode only) ---------- */

.scroll-cue, .step-icon { display: none; }
.step-icon span { transform: scale(0); }
.step-icon span.on { transform: scale(1.02); }

@media (min-width: 700px) and (min-height: 640px) and (prefers-reduced-motion: no-preference) {
  /* Hero: the headline grows with the screen height, so it fills the slide */
  .pixelca-snap .hero h1 { font-size: clamp(3.4rem, min(9vw, 19vh), 11rem); }
  .pixelca-snap .hero .lead { font-size: clamp(1.4rem, 2.3vh, 1.9rem); }
  .pixelca-snap .hero { padding-bottom: clamp(56px, 9vh, 96px); }

  /* Scroll cue at the bottom of the hero */
  .pixelca-snap .scroll-cue {
    display: grid;
    justify-items: center;
    gap: 8px;
    position: absolute;
    left: 50%;
    bottom: clamp(12px, 2.5vh, 28px);
    transform: translateX(-50%);
    font-size: 1rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--muted);
    text-decoration: none;
    transition: color 0.2s ease;
  }
  .pixelca-snap .scroll-cue svg { width: 14px; height: 16px; fill: currentColor; animation: pin-bob 1.6s steps(1) infinite; }
  .pixelca-snap .scroll-cue:hover { color: var(--text); }

  /* How we work: three tall step cards with a big outlined number and an icon */
  .pixelca-snap .slide .process {
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
  }
  .pixelca-snap .slide .process::before, .pixelca-snap .slide .process::after { display: none; }
  .pixelca-snap .slide .step {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr auto auto;
    grid-template-areas: 'icon num' 'gap gap' 'title title' 'text text';
    row-gap: clamp(8px, 1.4vh, 14px);
    min-height: clamp(240px, 44vh, 460px);
    padding: clamp(20px, 3.4vh, 40px);
    background: var(--bg);
    transition: background-color 0.3s ease;
  }
  .pixelca-snap .slide .step:hover { background: var(--surface); }
  .pixelca-snap .slide .step-icon { display: grid; grid-area: icon; width: clamp(36px, 6vh, 56px); align-self: start; }
  .pixelca-snap .slide .step-num {
    grid-area: num;
    justify-self: end;
    align-self: start;
    width: auto;
    height: auto;
    margin: 0;
    border: 0;
    background: none;
    font-size: clamp(3.6rem, 12vh, 8rem);
    line-height: 0.8;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.35);
    transition: color 0.3s ease, -webkit-text-stroke-color 0.3s ease;
  }
  .pixelca-snap .slide .step:hover .step-num { background: none; color: var(--white); -webkit-text-stroke-color: var(--white); }
  .pixelca-snap .slide .step h3 { grid-area: title; padding-top: 0; }
  .pixelca-snap .slide .step p { grid-area: text; font-size: clamp(1.1rem, 1.9vh, 1.35rem); line-height: 1.35; }

  /* Values: tall tiles, icon and number on top, words at the bottom */
  .pixelca-snap .slide .values { counter-reset: value; }
  .pixelca-snap .slide .value {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: clamp(220px, 40vh, 420px);
    counter-increment: value;
  }
  .pixelca-snap .slide .value::before {
    content: counter(value, decimal-leading-zero);
    position: absolute;
    top: clamp(18px, 3vh, 36px);
    right: clamp(18px, 3vh, 36px);
    font-size: 1.1rem;
    letter-spacing: 0.1em;
    color: var(--muted);
  }
  .pixelca-snap .slide .value-icon { width: clamp(40px, 7vh, 64px); }
  .pixelca-snap .slide .value h3 { margin-top: auto; }
}

/* Short laptop screens (up to 800px tall): keep every slide on one screen */
@media (min-width: 700px) and (min-height: 640px) and (max-height: 800px) and (prefers-reduced-motion: no-preference) {
  .pixelca-snap .hero h1 { font-size: clamp(3.2rem, min(9vw, 16vh), 9rem); }
  .pixelca-snap .hero { padding-bottom: clamp(48px, 7vh, 72px); }
  .pixelca-snap .hero .wrap { gap: clamp(16px, 3vh, 32px); }
  .pixelca-snap .slide-first .page-hero h1 { font-size: clamp(2.4rem, 6.5vh, 5rem); }
  .pixelca-snap .slide-first .prose { font-size: clamp(1.1rem, 1.9vh, 1.35rem); gap: clamp(8px, 1.4vh, 16px); }
}

/* About first slide: a little less air above and below the page title */
@media (min-width: 700px) and (min-height: 640px) and (prefers-reduced-motion: no-preference) {
  .pixelca-snap .slide-first .page-hero { padding-block: clamp(20px, 4vh, 60px) clamp(10px, 2vh, 28px); }
}

/* ---------- Contact: one "Contact us" button with two options (1.6.1) ---------- */

.contact-card {
  position: relative;
  display: grid;
  gap: 18px;
  align-content: start;
  justify-items: start;
  padding: clamp(28px, 5vw, 56px);
  background: var(--white);
  color: #000;
}
.contact-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(0, 0, 0, 0.07) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0, 0, 0, 0.07) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(120deg, transparent 35%, #000);
  mask-image: linear-gradient(120deg, transparent 35%, #000);
  pointer-events: none;
}
.contact-card > * { position: relative; }
.contact-card .eyebrow { color: #555; }
.contact-card .eyebrow::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 27' shape-rendering='crispEdges'%3E%3Crect x='0' y='21' width='6' height='6' fill='%23000' opacity='0.16'/%3E%3Crect x='7' y='14' width='6' height='6' fill='%23000' opacity='0.44'/%3E%3Crect x='7' y='21' width='6' height='6' fill='%23000' opacity='0.44'/%3E%3Crect x='14' y='7' width='6' height='6' fill='%23000' opacity='0.72'/%3E%3Crect x='14' y='14' width='6' height='6' fill='%23000' opacity='0.72'/%3E%3Crect x='14' y='21' width='6' height='6' fill='%23000' opacity='0.72'/%3E%3Crect x='21' y='0' width='6' height='6' fill='%23000' opacity='1'/%3E%3Crect x='21' y='7' width='6' height='6' fill='%23000' opacity='1'/%3E%3Crect x='21' y='14' width='6' height='6' fill='%23000' opacity='1'/%3E%3Crect x='21' y='21' width='6' height='6' fill='%23000' opacity='1'/%3E%3C/svg%3E"); }
.contact-card h2 { font-size: clamp(2.4rem, 4.6vw, 3.8rem); }
.contact-card-text { color: #444; max-width: 32rem; }
.contact-card .btn-primary { background: #000; color: var(--white); }
.contact-card .btn-primary:hover { background: #333; }

.contact-menu { position: relative; margin-top: 8px; z-index: 2; }
.contact-toggle .caret {
  width: 10px;
  height: 6px;
  background: currentColor;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transition: transform 0.2s ease;
}
.contact-toggle[aria-expanded='true'] .caret { transform: rotate(180deg); }

.contact-options {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 260px;
  display: grid;
  padding: 6px;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.25);
}
.contact-options[hidden] { display: none; }
.contact-option {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px 14px;
  font-size: 1.35rem;
  color: var(--text);
  text-align: left;
  text-decoration: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.contact-option + .contact-option { border-top: 1px solid var(--line); }
.contact-option:hover, .contact-option:focus-visible { background: var(--surface-2); outline: none; }
.contact-option svg { flex: none; width: 18px; height: 18px; fill: var(--pin); }
.contact-status { min-height: 1.4em; font-size: 1.15rem; color: #1a7f45; }
.contact-status:empty { min-height: 0; }

/* ---------- Company number (hero, footer, About) ---------- */

.hero-tag a { color: inherit; text-decoration: none; transition: color 0.2s ease; }
.hero-tag a:hover { color: var(--text); }
.footer-bottom a { color: inherit; text-underline-offset: 3px; }
.footer-bottom a:hover { color: var(--text); }
.fact-sub { display: inline-block; margin-top: 6px; font-size: 1.1rem; color: var(--muted); text-underline-offset: 3px; }
.fact-sub:hover { color: var(--text); }

/* Hero art: a staircase of squares, small to big (pixel to asset) */
.hero .wrap { position: relative; }
.hero-art { display: none; }
@media (min-width: 700px) {
  .hero-art {
    display: block;
    position: absolute;
    right: var(--gutter);
    top: clamp(70px, 10vh, 110px);
    width: min(21vw, 38vh);
    color: var(--white);
    pointer-events: none;
  }
  .hero-art svg { display: block; width: 100%; height: auto; }
}

/* Hover: pixel icons turn green, and so does each staircase square */
.pixels span { transition: background-color 0.2s ease, transform 0.2s ease; }
.card:hover .pixels span.on,
.step:hover .pixels span.on,
.value:hover .pixels span.on,
.fact-link:hover .pixels span.on { background: var(--pin); }
.hero-art svg rect { transition: fill 0.2s ease, opacity 0.2s ease; }
@media (min-width: 700px) {
  .hero-art { pointer-events: auto; }
  .hero-art svg rect:hover { fill: var(--pin); }
}

/* Legal pages: title on one line, date under it, text right below */
.page-hero-legal { padding-bottom: clamp(20px, 3vw, 36px); }
.page-hero-legal .wrap { grid-template-columns: 1fr; row-gap: 14px; align-items: start; }
.page-hero-legal h1 { font-size: clamp(2.8rem, 5vw, 4.6rem); }
.page-hero-legal .lead { font-size: 1.3rem; }
.legal-text { padding-top: 8px; }
.legal-text > :first-child { margin-top: 0; }

/* Legal pages: text on the left, a sticky page menu on the right */
.legal-grid { display: grid; grid-template-columns: minmax(0, 48rem) minmax(0, 22rem); column-gap: clamp(40px, 7vw, 120px); align-items: start; justify-content: start; }
.legal-grid .legal-text { max-width: none; }
.legal-text h2 { scroll-margin-top: 100px; }
.legal-side { position: sticky; top: 100px; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.legal-side .fact { background: var(--surface); }
.legal-toc { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 10px; counter-reset: toc; }
.legal-toc li { counter-increment: toc; display: flex; gap: 12px; line-height: 1.25; }
.legal-toc li::before { content: counter(toc, decimal-leading-zero); color: var(--muted); font-size: 1.05rem; padding-top: 2px; }
.legal-toc a { color: var(--muted); text-decoration: none; font-size: 1.3rem; transition: color 0.2s ease; }
.legal-toc a:hover { color: var(--pin); }
.legal-side-text { color: var(--muted); font-size: 1.3rem; line-height: 1.35; margin: 2px 0 10px; }
@media (max-width: 1000px) {
  .legal-grid { grid-template-columns: minmax(0, 1fr); }
  .legal-side { display: none; }
}
.legal-toc li::before { min-width: 1.7em; }
.legal-side .btn { justify-content: center; }

/* Phones: keep the hero label "PIXELCA LTD · UK COMPANY" on one line */
@media (max-width: 520px) {
  .hero-top .eyebrow { letter-spacing: 0.12em; white-space: nowrap; gap: 8px; font-size: 1rem; }
  .hero-top .eyebrow::before { margin-right: 0; }
}

/* Above-the-fold text shows at once, no fade (owner, 2026-10-05: the fade made the page feel slow) */
.hero [data-reveal], .page-hero [data-reveal],
.js .hero [data-reveal], .js .page-hero [data-reveal] { opacity: 1; transform: none; transition: none; animation: none; }

/* Phones: no scroll fade-in. Text that is already on screen must not wait for the script (LCP). */
@media (max-width: 800px) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* Below 700px the staircase art is hidden, so the hero is not full-screen and the text and
   buttons sit in one column (2.3: tablets from 700px get the desktop slides and the art). */
@media (max-width: 699px) {
  .hero { min-height: 0; }
  .hero-bottom { grid-template-columns: 1fr; }
}

/* ---------- 2.2: slides on phones too (owner, 2026-10-16) ----------
   Same idea as desktop: each swipe lands on the next section, and each section fits one
   screen. From 700px wide (tablets) the desktop slide rules above apply as they are (2.3).
   Below 600px the lists that are taller than a phone (cards, steps, values, facts) become a
   sideways swipe row: one item at a time, the next one peeking in. The heights are the page
   area inside the browser, not the device: Safari on an iPhone 8 leaves about 553px.
   Off below 480px tall (phones held sideways) and for reduced motion. */
@media (max-width: 699px) and (min-height: 480px) and (prefers-reduced-motion: no-preference) {
  html:has(body.pixelca-snap) { scroll-snap-type: y mandatory; scroll-padding-top: 69px; }

  .pixelca-snap .slide {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    min-height: calc(100svh - 68px);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  /* The first screen starts at the top, not centred: when the pixel font arrives the text
     height changes, and a centred block would jump (CLS 0.168 in Lighthouse, 2.3.2) */
  .pixelca-snap .slide-first .hero,
  .pixelca-snap .slide-first .page-hero { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; }
  /* About: the "What we do" text under the title is a stop of its own */
  .pixelca-snap .slide-first > .section { padding-top: 24px; padding-bottom: 32px; scroll-snap-align: start; scroll-snap-stop: always; }
  /* The last slide is the short contact box plus the footer */
  .pixelca-snap .slide.slide-last { min-height: 0; padding-top: 24px; }
  .pixelca-snap .site-footer { scroll-snap-align: start; }

  /* Compact sections so each one fits a phone screen */
  .pixelca-snap .slide.section { padding-block: clamp(20px, 3.5vh, 48px); }
  .pixelca-snap .slide .section-head {
    margin-bottom: clamp(16px, 2.5vh, 32px);
    padding-bottom: clamp(12px, 2vh, 24px);
    row-gap: 10px;
  }
  .pixelca-snap .slide h2 { font-size: clamp(2.2rem, 4.6vh, 3.6rem); }
  .pixelca-snap .slide .section-head .lead { font-size: clamp(1.2rem, 2vh, 1.5rem); }
}

/* Tablets and small laptops: six cards in two rows of three and the three steps side by
   side, so "What we build" and "How we work" each fit one screen */
@media (min-width: 700px) and (max-width: 1099px) and (min-height: 640px) and (prefers-reduced-motion: no-preference) {
  .pixelca-snap .slide .portfolio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pixelca-snap .slide .process { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pixelca-snap .slide .card { padding: 24px 20px; gap: 16px; }
  .pixelca-snap .slide .card .pixels { width: 40px; }
  .pixelca-snap .slide .card-index { top: 22px; right: 20px; }
}

@media (min-width: 700px) and (max-width: 1099px) and (min-height: 640px) and (max-height: 800px) and (prefers-reduced-motion: no-preference) {
  .pixelca-snap .slide .card { padding: 16px 18px; gap: 10px; }
  .pixelca-snap .slide .card-index { top: 16px; right: 18px; }
}

/* Under 1100px wide there is no side margin for the slide dots: they would sit on the content */
@media (max-width: 1099px) {
  .pixelca-snap .slide-dots { display: none; }
}

/* Tablets held upright (700-1099px wide): the desktop slides, sized for a tall, narrow
   screen, so the hero fills it and the four values fit one screen */
@media (min-width: 700px) and (max-width: 1099px) and (min-height: 640px) and (orientation: portrait) and (prefers-reduced-motion: no-preference) {
  .pixelca-snap .hero h1 { font-size: min(12vw, 8rem); }
  .pixelca-snap .hero-bottom { grid-template-columns: 1fr; gap: 28px; }
  .pixelca-snap .hero .lead { font-size: clamp(1.5rem, 2.2vh, 1.9rem); max-width: 40rem; }
  .pixelca-snap .slide .step { min-height: clamp(240px, 30vh, 380px); }
  .pixelca-snap .slide .step-num { font-size: clamp(3.6rem, 8vh, 6rem); }
  .pixelca-snap .slide .value { min-height: clamp(200px, 24vh, 300px); }
}

/* Logged-in admins: the toolbar sits above the header (46px up to 782px, 32px above) */
@media (min-width: 601px) and (max-width: 699px) and (min-height: 480px) and (prefers-reduced-motion: no-preference) {
  html:has(body.pixelca-snap.admin-bar) { scroll-padding-top: 115px; }
  .pixelca-snap.admin-bar .slide { min-height: calc(100svh - 114px); }
}
@media (min-width: 700px) and (max-width: 782px) and (min-height: 640px) and (prefers-reduced-motion: no-preference) {
  html:has(body.pixelca-snap.admin-bar) { scroll-padding-top: 115px; }
  .pixelca-snap.admin-bar .slide { min-height: calc(100svh - 114px); }
}

/* Phones: long lists become a sideways swipe row */
@media (max-width: 599px) and (min-height: 480px) and (prefers-reduced-motion: no-preference) {
  .pixelca-snap .slide .portfolio,
  .pixelca-snap .slide .values,
  .pixelca-snap .slide .process,
  .pixelca-snap .slide .facts {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    background: none;
    border: 0;
    scrollbar-width: none;
  }
  .pixelca-snap .slide .portfolio::-webkit-scrollbar,
  .pixelca-snap .slide .values::-webkit-scrollbar,
  .pixelca-snap .slide .process::-webkit-scrollbar,
  .pixelca-snap .slide .facts::-webkit-scrollbar { display: none; }

  .pixelca-snap .slide .portfolio > li,
  .pixelca-snap .slide .values > .value,
  .pixelca-snap .slide .process > .step,
  .pixelca-snap .slide .facts > .fact {
    flex: 0 0 84%;
    scroll-snap-align: start;
    border: 1px solid var(--line);
  }

  /* Steps: a card each, number on top; the dashed connector only works in a column */
  .pixelca-snap .slide .process::before,
  .pixelca-snap .slide .process::after { display: none; }
  .pixelca-snap .slide .step {
    display: grid;
    grid-template-columns: 1fr;
    align-content: start;
    gap: 12px;
    padding: 24px;
    background: var(--bg);
  }
  .pixelca-snap .slide .step-num { grid-row: auto; width: 60px; height: 60px; font-size: 2.2rem; }
  .pixelca-snap .slide .step h3 { padding-top: 0; }

  .pixelca-snap .slide .card { padding: 24px; gap: 16px; }
  .pixelca-snap .slide .card-index { top: 22px; right: 24px; }
  .pixelca-snap .slide .value { padding: 24px; }

  /* Contact box: tighter, so it fits a small phone with the footer just below */
  .pixelca-snap .slide-last .cta { padding: 24px; gap: 18px; }
  .pixelca-snap .slide-last .cta-copy { gap: 12px; }
  .pixelca-snap .slide-last .cta .muted { font-size: 1.3rem; line-height: 1.4; }
  .pixelca-snap .slide-last .cta-side { gap: 14px; }
}

/* Short phones (page area under 640px tall, e.g. iPhone 8 in Safari): smaller type and
   spacing, so every slide still fits one screen */
@media (max-width: 599px) and (min-height: 480px) and (max-height: 639px) and (prefers-reduced-motion: no-preference) {
  .pixelca-snap .hero { padding-block: 16px; }
  .pixelca-snap .hero .wrap { gap: 16px; }
  .pixelca-snap .hero-top { padding-bottom: 12px; }
  .pixelca-snap .hero h1 { font-size: 2.7rem; }
  .pixelca-snap .hero .lead { font-size: 1.2rem; line-height: 1.35; }
  .pixelca-snap .hero-bottom { gap: 16px; }
  .pixelca-snap .hero-actions .btn { padding-block: 10px; }

  .pixelca-snap .slide.section { padding-block: 14px; }
  .pixelca-snap .slide .section-head { margin-bottom: 12px; padding-bottom: 10px; row-gap: 6px; }
  .pixelca-snap .slide h2 { font-size: 2rem; }
  .pixelca-snap .slide .section-head .lead { font-size: 1.15rem; line-height: 1.35; }

  .pixelca-snap .slide .card,
  .pixelca-snap .slide .value,
  .pixelca-snap .slide .step,
  .pixelca-snap .slide .fact { padding: 18px; gap: 10px; }
  .pixelca-snap .slide .card .pixels,
  .pixelca-snap .slide .value-icon { width: 32px; }
  .pixelca-snap .slide .card-index { top: 18px; right: 18px; }
  .pixelca-snap .slide .step-num { width: 48px; height: 48px; font-size: 1.8rem; }
  .pixelca-snap .slide .card h3,
  .pixelca-snap .slide .value h3,
  .pixelca-snap .slide .step h3 { font-size: 1.5rem; }
  .pixelca-snap .slide .card p,
  .pixelca-snap .slide .value p,
  .pixelca-snap .slide .step p { font-size: 1.15rem; line-height: 1.35; }

  .pixelca-snap .slide-first .page-hero { padding-block: 16px; }
  .pixelca-snap .slide-first .page-hero h1 { font-size: 2.6rem; }
  .pixelca-snap .slide-last .cta { padding: 18px; gap: 12px; }
  .pixelca-snap .slide-last .cta h2 { font-size: 1.8rem; }
  .pixelca-snap .slide-last .cta .muted { font-size: 1.15rem; }
}