/* ============================================
   Byte & Build — Design Tokens
   ============================================ */
:root {
  /* Color */
  --color-bg: #FBFAF8;
  --color-bg-alt: #F4F1EC;
  --color-surface: #FFFFFF;
  --color-fg: #15130F;
  --color-fg-muted: #5C574C;
  --color-border: #E7E2D8;
  --color-primary: #FF5A36;
  --color-primary-dark: #E0431F;
  --color-primary-tint: #FFE9E1;
  --color-on-primary: #FFFFFF;
  --color-accent-2: #1F2A3C;
  --color-success: #1E7A4C;
  /* Secondary accent — used sparingly (icon variants, ambient glows) to
     echo the blue in the hero shader without diluting the coral CTA color. */
  --color-accent-blue: #3D8BFF;
  --color-accent-blue-dark: #1F66E0;
  --color-accent-blue-tint: #E7F0FF;

  /* Type */
  --font-display: 'Sora', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  /* Scale */
  --step--1: clamp(0.83rem, 0.8rem + 0.1vw, 0.9rem);
  --step-0: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.4vw, 1.3rem);
  --step-2: clamp(1.5rem, 1.3rem + 0.8vw, 1.75rem);
  --step-3: clamp(1.9rem, 1.5rem + 1.6vw, 2.5rem);
  --step-4: clamp(2.4rem, 1.8rem + 2.6vw, 3.6rem);
  --step-5: clamp(3rem, 2.1rem + 4vw, 5rem);

  /* Space (8pt rhythm) */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4rem;
  --sp-7: 6rem;
  --sp-8: 8rem;

  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 8px rgba(21,19,15,0.06);
  --shadow-md: 0 12px 32px rgba(21,19,15,0.08);
  --shadow-lg: 0 24px 60px rgba(21,19,15,0.12);

  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);

  --container: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@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; }
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--color-fg);
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
p { margin: 0; color: var(--color-fg-muted); max-width: 65ch; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-3);
}
@media (min-width: 768px) { .container { padding-inline: var(--sp-5); } }

section { padding-block: var(--sp-7); }
@media (max-width: 640px) { section { padding-block: var(--sp-6); } }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--step--1);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary-dark);
  margin-bottom: var(--sp-2);
}
.eyebrow::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-primary);
  flex: none;
}

/* ============================================
   Buttons
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 50px;
  padding: 0 1.75rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: var(--step--1);
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: transform 220ms var(--ease-out), background-color 200ms, color 200ms, border-color 200ms, box-shadow 200ms;
  white-space: nowrap;
  touch-action: manipulation;
}
.btn:active { transform: scale(0.97); }
.btn:focus-visible { outline: 2px solid var(--color-primary-dark); outline-offset: 3px; }

.btn-primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: 0 8px 20px rgba(255,90,54,0.32);
}
.btn-primary:hover { background: var(--color-primary-dark); box-shadow: 0 10px 26px rgba(255,90,54,0.4); }

.btn-ghost {
  background: transparent;
  color: var(--color-fg);
  border-color: var(--color-border);
}
.btn-ghost:hover { border-color: var(--color-fg); background: var(--color-bg-alt); }

.btn-dark {
  background: var(--color-fg);
  color: #fff;
}
.btn-dark:hover { background: #000; }

.btn-lg { min-height: 58px; padding: 0 2.25rem; font-size: var(--step-0); }

/* ============================================
   Header / Nav
   ============================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 250ms, background-color 250ms;
}
.site-header.is-scrolled {
  border-bottom-color: var(--color-border);
  background: color-mix(in srgb, var(--color-bg) 96%, transparent);
}
.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 80px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  cursor: pointer;
}
.brand-mark {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 1.05rem;
  flex: none;
}
.nav-links {
  display: none;
  align-items: center;
  gap: var(--sp-4);
}
.nav-links a {
  font-weight: 500;
  font-size: var(--step--1);
  color: var(--color-fg-muted);
  position: relative;
  padding: 0.4rem 0.1rem;
  cursor: pointer;
  transition: color 200ms;
}
.nav-links a::after {
  content: '';
  position: absolute; left: 0; bottom: -2px;
  width: 0; height: 2px;
  background: var(--color-primary);
  transition: width 250ms var(--ease-out);
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--color-fg); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { width: 100%; }
.nav-cta { display: none; }
@media (min-width: 900px) {
  .nav-links { display: flex; }
  .nav-cta { display: inline-flex; }
}

.nav-toggle {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  cursor: pointer;
}
@media (min-width: 900px) { .nav-toggle { display: none; } }
.nav-toggle svg { width: 20px; height: 20px; }

.mobile-menu {
  position: fixed;
  inset: 80px 0 0 0;
  background: var(--color-bg);
  z-index: 99;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out), visibility 220ms;
  overflow-y: auto;
}
.mobile-menu.is-open {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}
.mobile-menu .container { padding-top: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-1); }
.mobile-menu a {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--color-border);
}
.mobile-menu .btn { margin-top: var(--sp-3); align-self: flex-start; }

/* ============================================
   Shader hero (homepage only) — full-viewport WebGL background.
   Vanilla canvas + WebGL2, no React/Next — see assets/js/shader-hero.js.
   ============================================ */
.shader-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 640px;
  max-height: 1000px;
  overflow: hidden;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shader-hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  display: block;
}
.shader-hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  max-width: 900px;
  padding-inline: var(--sp-4);
  text-align: center;
  color: #fff;
}
.shader-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.2rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 90, 54, 0.12);
  border: 1px solid rgba(255, 154, 118, 0.3);
  backdrop-filter: blur(8px);
  font-size: var(--step--1);
  font-weight: 600;
  color: #ffd9c4;
}
.shader-badge svg { width: 16px; height: 16px; color: #ffb38a; flex: none; }
.shader-heading {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--step-5);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
}
.shader-line {
  display: block;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  background-image: linear-gradient(90deg, #ffcfa8, #ffe07a, #ffb98a);
}
.shader-line-2 { background-image: linear-gradient(90deg, #ffe07a, #ff9a4d, #ff6a3d); }
.shader-subtitle {
  font-size: var(--step-1);
  color: rgba(255, 232, 217, 0.82);
  max-width: 60ch;
  font-weight: 400;
}
.shader-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center; margin-top: var(--sp-2); }
.shader-btn-ghost {
  background: rgba(255, 90, 54, 0.12);
  border-color: rgba(255, 154, 118, 0.32);
  color: #ffe6d6;
}
.shader-btn-ghost:hover { background: rgba(255, 90, 54, 0.22); border-color: rgba(255, 154, 118, 0.5); }
@media (max-width: 640px) {
  .shader-heading { font-size: var(--step-4); }
}

/* ============================================
   Hero
   ============================================ */
.hero {
  padding-top: var(--sp-7);
  padding-bottom: var(--sp-7);
  position: relative;
  overflow: hidden;
}
.hero-grid {
  display: grid;
  gap: var(--sp-5);
  align-items: center;
}
@media (min-width: 960px) {
  .hero-grid { grid-template-columns: 1.1fr 0.9fr; }
}
/* No widget alongside the text — centre the single remaining column instead
   of leaving it pinned to the left half of a now-empty two-column grid. */
.hero-grid--centered {
  grid-template-columns: 1fr;
  justify-content: center;
  text-align: center;
}
.hero-grid--centered > div { max-width: 720px; margin-inline: auto; }
.hero-grid--centered .lede { margin-inline: auto; }
.hero-grid--centered .hero-actions,
.hero-grid--centered .hero-trust { justify-content: center; }
@media (min-width: 960px) {
  .hero-grid--centered { grid-template-columns: 1fr; }
}
.hero h1 { margin-bottom: var(--sp-3); }
.hero .lede { font-size: var(--step-1); max-width: 46ch; margin-bottom: var(--sp-4); }
.hero-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.hero-trust { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.hero-trust-item { display: flex; flex-direction: column; }
.hero-trust-item strong { font-family: var(--font-display); font-size: var(--step-2); color: var(--color-fg); }
.hero-trust-item span { font-size: var(--step--1); color: var(--color-fg-muted); }

.hero-visual {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--color-accent-2), #0d1320);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  perspective: 1000px;
  transform-style: preserve-3d;
  transition: transform .35s var(--ease-out);
  cursor: pointer;
}
.hero-visual .glow {
  position: absolute;
  width: 60%; height: 60%;
  background: radial-gradient(circle, rgba(255,90,54,0.55), transparent 70%);
  top: -10%; right: -10%;
  filter: blur(10px);
}
/* Interactive mouse-tracking spotlight (vanilla CSS/JS, no framework) */
.hero-visual .cursor-spotlight {
  position: absolute;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.16), transparent 72%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease-out;
  z-index: 1;
}
.hero-visual.is-active .cursor-spotlight { opacity: 1; }
.hero-visual .hero-hint {
  position: absolute;
  bottom: var(--sp-2); right: var(--sp-2);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  z-index: 1;
  pointer-events: none;
}
@media (max-width: 900px), (pointer: coarse) { .hero-visual .hero-hint { display: none; } }
.hero-card {
  position: absolute;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--sp-2) var(--sp-3);
  transform: translateZ(20px);
}
.hero-card.c1 { top: 8%; left: 8%; right: 8%; transform: translateZ(34px); }
.hero-card.c2 { bottom: 10%; left: 10%; max-width: 220px; transform: translateZ(50px); }
.hero-mock-line { height: 8px; border-radius: 4px; background: var(--color-bg-alt); margin-bottom: 6px; }
.hero-mock-line.short { width: 55%; }
.hero-badge { display: inline-flex; align-items: center; gap: 6px; font-size: var(--step--1); font-weight: 700; color: var(--color-success); }
.hero-badge svg { width: 16px; height: 16px; }

/* ============================================
   Logo strip / marquee
   ============================================ */
.marquee-wrap { border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); overflow: hidden; padding-block: var(--sp-3); background: var(--color-bg-alt); }
.marquee { display: flex; gap: var(--sp-6); width: max-content; animation: marquee 26s linear infinite; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee span { font-family: var(--font-display); font-weight: 600; font-size: var(--step-0); color: var(--color-fg-muted); opacity: 0.7; white-space: nowrap; }

/* ============================================
   Cards / grids
   ============================================ */
.section-head { max-width: 56ch; margin-bottom: var(--sp-5); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 { margin-bottom: var(--sp-2); }

.grid { display: grid; gap: var(--sp-3); }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  transition: transform 280ms var(--ease-out), box-shadow 280ms var(--ease-out), border-color 280ms;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }

/* ============================================
   Folder accordion — vertical stack of services, one open at a time.
   Each --design/--maintenance/--seo modifier sets its own accent via custom
   properties, so the open state, icon fill and checklist colour all follow
   from one variable per folder instead of repeating rules three times.
   ============================================ */
.folder-stack {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.folder-item {
  --folder-accent: var(--color-primary);
  --folder-accent-dark: var(--color-primary-dark);
  --folder-tint: var(--color-primary-tint);
  border-bottom: 1px solid var(--color-border);
  position: relative;
  box-shadow: inset 4px 0 0 transparent;
  transition: box-shadow 300ms var(--ease-out), background-color 300ms var(--ease-out);
}
.folder-item:last-child { border-bottom: none; }
.folder-item--maintenance { --folder-accent: var(--color-success); --folder-accent-dark: #145C39; --folder-tint: #E3F3EA; }
.folder-item--seo { --folder-accent: var(--color-accent-blue); --folder-accent-dark: var(--color-accent-blue-dark); --folder-tint: var(--color-accent-blue-tint); }
.folder-item.is-open {
  box-shadow: inset 4px 0 0 var(--folder-accent);
  background: linear-gradient(180deg, var(--folder-tint) 0%, transparent 140px);
}
.folder-trigger {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-4);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}
.folder-trigger:focus-visible { outline: 2px solid var(--folder-accent-dark); outline-offset: -2px; }
.folder-icon {
  width: 52px; height: 52px;
  border-radius: var(--radius-sm);
  background: var(--folder-tint);
  color: var(--folder-accent-dark);
  display: flex; align-items: center; justify-content: center;
  flex: none;
  transition: background-color 300ms var(--ease-out), color 300ms var(--ease-out), transform 300ms var(--ease-out);
}
.folder-icon svg { width: 24px; height: 24px; }
.folder-item.is-open .folder-icon { background: var(--folder-accent); color: #fff; transform: scale(1.08); }
.folder-heading { flex: 1; min-width: 0; }
.folder-heading h3 { font-size: var(--step-0); margin-bottom: 0.2rem; }
.folder-heading p { font-size: var(--step--1); color: var(--color-fg-muted); margin: 0; }
.folder-chevron { width: 20px; height: 20px; flex: none; color: var(--color-fg-muted); transition: transform 300ms var(--ease-out), color 300ms var(--ease-out); }
.folder-item.is-open .folder-chevron { transform: rotate(180deg); color: var(--folder-accent-dark); }
.folder-panel { max-height: 0; overflow: hidden; transition: max-height 350ms var(--ease-out); }
.folder-panel-inner { padding: 0 var(--sp-4) var(--sp-4) calc(52px + var(--sp-3) + var(--sp-4)); }
@media (max-width: 560px) { .folder-panel-inner { padding-left: var(--sp-4); } }
.folder-panel .feature-list { margin-top: 0; }
.folder-panel .feature-list svg { color: var(--folder-accent); }
.card-icon {
  width: 52px; height: 52px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-tint);
  color: var(--color-primary-dark);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--sp-3);
}
.card-icon svg { width: 26px; height: 26px; }
.card-icon--blue { background: var(--color-accent-blue-tint); color: var(--color-accent-blue-dark); }
.card h3 { margin-bottom: var(--sp-1); font-size: var(--step-1); }
.card p { font-size: var(--step--1); }

/* Process steps */
.steps { display: grid; gap: var(--sp-3); counter-reset: step; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { position: relative; padding-top: var(--sp-3); border-top: 2px solid var(--color-border); }
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-2);
  color: var(--color-primary);
  display: block;
  margin-bottom: var(--sp-1);
}
.step h4 { margin-bottom: 0.3rem; }
.step p { font-size: var(--step--1); }

/* ============================================
   CTA banner
   ============================================ */
.cta-banner {
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--color-accent-2), #0d1320);
  color: #fff;
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-banner::before {
  content: '';
  position: absolute;
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(255,90,54,0.4), transparent 70%);
  top: -160px; right: -120px;
}
.cta-banner::after {
  content: '';
  position: absolute;
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(61,139,255,0.28), transparent 70%);
  bottom: -180px; left: -140px;
}
/* Mouse-tracking spotlight, same mechanism as the hero visual but tinted
   orange (brand accent) instead of white. */
.cta-banner .cursor-spotlight {
  position: absolute;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,90,54,0.32), transparent 72%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease-out;
  z-index: 0;
}
.cta-banner.is-active .cursor-spotlight { opacity: 1; }
.cta-banner h2 { color: #fff; margin-bottom: var(--sp-2); }
.cta-banner p { color: rgba(255,255,255,0.72); margin-inline: auto; margin-bottom: var(--sp-4); }
.cta-actions { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; position: relative; z-index: 1; }

/* ============================================
   Footer
   ============================================ */
.site-footer { border-top: 1px solid var(--color-border); padding-block: var(--sp-6) var(--sp-4); }
.footer-grid { display: grid; gap: var(--sp-4); margin-bottom: var(--sp-5); }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer-grid h4 { font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-fg-muted); margin-bottom: var(--sp-2); }
.footer-links { display: flex; flex-direction: column; gap: 0.6rem; }
.footer-links a { color: var(--color-fg-muted); font-size: var(--step--1); transition: color 200ms; }
.footer-links a:hover { color: var(--color-primary-dark); }
.footer-bottom { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: space-between; align-items: center; padding-top: var(--sp-3); border-top: 1px solid var(--color-border); font-size: var(--step--1); color: var(--color-fg-muted); }
.social-row { display: flex; gap: var(--sp-2); }
.social-row a {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: center;
  transition: background-color 200ms, border-color 200ms, color 200ms;
}
.social-row a:hover { background: var(--color-fg); border-color: var(--color-fg); color: #fff; }
.social-row svg { width: 17px; height: 17px; }

/* ============================================
   Text scramble — line breaks are measured and locked in as explicit <br>-
   equivalent blocks before any animation starts, with white-space: nowrap
   so a line can never re-wrap. That's what makes the effect structurally
   unable to reflow surrounding layout — letters keep their real, natural
   proportional width (no monospace look), only line *count* is fixed.
   ============================================ */
[data-scramble] { display: block; }
.scramble-line { display: block; white-space: nowrap; }

/* ============================================
   Scroll reveal — same dependency-free system as the
   Cotswold Lake Lodges site: plain CSS transitions toggled by an
   IntersectionObserver class (no animation library, no CDN, file:// safe).
   ============================================ */
[data-hero-anim] {
  opacity: 0;
  transform: translateY(18px) scale(.995);
  filter: blur(6px);
  transition: opacity .7s var(--ease-out), transform .8s var(--ease-out), filter .7s var(--ease-out);
  will-change: opacity, transform;
}
[data-hero-anim].is-visible { opacity: 1; transform: none; filter: none; }

[data-reveal] {
  opacity: 0;
  transform: translateY(24px) scale(.992);
  filter: blur(7px);
  transition: opacity .7s var(--ease-out), transform .85s var(--ease-out), filter .7s var(--ease-out);
  will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: none; filter: none; }

[data-reveal-group] > * {
  opacity: 0;
  transform: translateY(22px);
  filter: blur(5px);
  transition: opacity .6s var(--ease-out), transform .7s var(--ease-out), filter .6s var(--ease-out);
}
[data-reveal-group].is-visible > * { opacity: 1; transform: none; filter: none; }

@media (prefers-reduced-motion: reduce) {
  [data-hero-anim], [data-reveal], [data-reveal-group] > * { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* ============================================
   Page hero (sub pages)
   ============================================ */
.page-hero { padding-top: var(--sp-6); padding-bottom: var(--sp-5); text-align: left; }
.page-hero .eyebrow { margin-bottom: var(--sp-2); }
.page-hero p.lede { font-size: var(--step-1); max-width: 56ch; margin-top: var(--sp-2); }
.breadcrumb { display: flex; gap: 0.4rem; font-size: var(--step--1); color: var(--color-fg-muted); margin-bottom: var(--sp-3); }
.breadcrumb a:hover { color: var(--color-primary-dark); }

/* ============================================
   Magnetic reveal headline (projects hero) — vanilla recreation of a
   React "MagneticText". Without JS / on touch it just shows its normal
   heading text; main.js enhances it on pointer-fine devices into a base
   word with a brand-orange disc that trails the cursor and reveals the
   second word through it. See the [data-magnetic] block in main.js.
   ============================================ */
.magnetic-head { margin-bottom: var(--sp-2); }
.magnetic-head.is-magnetic { cursor: none; }

.mag {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: none;
  user-select: none;
  line-height: 1;
}
.mag__base { color: var(--color-fg); }

.mag__circle {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: var(--color-primary);
  overflow: hidden;
  pointer-events: none;
  will-change: transform, width, height;
  transition: width .5s cubic-bezier(0.33, 1, 0.68, 1), height .5s cubic-bezier(0.33, 1, 0.68, 1);
}
.mag.is-hovering .mag__circle { width: 170px; height: 170px; }

.mag__inner {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
}
.mag__hover { color: var(--color-on-primary); white-space: nowrap; }

/* Centred projects hero + a "hover the title" cue (hidden where there's no
   hover). The description keeps a wide measure and is just centred, so it
   stays spread across rather than bunching into a narrow column. */
.page-hero--center { text-align: center; }
.page-hero--center .eyebrow { justify-content: center; }
.page-hero--center p.lede { margin-inline: auto; max-width: 60ch; }

.hover-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: var(--sp-3);
  font-size: var(--step--1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-fg-muted);
}
.hover-hint svg { width: 16px; height: 16px; color: var(--color-primary); animation: hint-bob 2s ease-in-out infinite; }
@keyframes hint-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@media (hover: none), (pointer: coarse) { .hover-hint { display: none; } }
@media (prefers-reduced-motion: reduce) { .hover-hint svg { animation: none; } }

/* ============================================
   Services page specifics
   ============================================ */
.services-hero-grid { display: grid; gap: var(--sp-5); align-items: center; }
@media (min-width: 960px) { .services-hero-grid { grid-template-columns: 1.05fr 0.95fr; } }
/* The hero text now shares the row with the robot panel instead of running
   full-width, so it needs to be sized down a notch from the page default —
   otherwise the heading wraps awkwardly inside the narrower column. */
.services-hero-grid h1 { font-size: var(--step-4); }
.services-hero-grid .lede { max-width: 42ch; }
.services-hero-robot-wrap {
  position: relative;
  aspect-ratio: 1/1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(160deg, var(--color-accent-2), #0d1320);
  box-shadow: var(--shadow-lg);
}
.services-hero-robot { width: 100%; height: 100%; display: block; }

.service-block { display: grid; gap: var(--sp-4); padding-block: var(--sp-5); border-bottom: 1px solid var(--color-border); }
.service-block:last-of-type { border-bottom: none; }
@media (min-width: 880px) { .service-block { grid-template-columns: 0.9fr 1.1fr; align-items: start; } }
.service-num { font-family: var(--font-display); font-weight: 700; font-size: var(--step-3); color: var(--color-border); }
.feature-list { display: flex; flex-direction: column; gap: 0.7rem; margin-top: var(--sp-3); }
.feature-list li { display: flex; gap: 0.6rem; font-size: var(--step--1); color: var(--color-fg); align-items: flex-start; }
.feature-list svg { width: 18px; height: 18px; color: var(--color-primary); flex: none; margin-top: 2px; }
.feature-list--blue svg { color: var(--color-accent-blue); }
.service-tagline { display: block; color: var(--color-accent-blue-dark); font-weight: 600; margin-top: 0.3rem; }

/* ============================================
   Services cards — light "spec sheet" cards, one per service. A monospace
   code-comment eyebrow (// websites) nods to the developer behind the brand
   and labels each service instead of a generic 01/02/03 sequence. The accent
   (--svc) drives the icon, eyebrow, check marks, top-bar wipe, hover border
   and CTA arrow. One orchestrated hover: lift + bar wipe + arrow nudge. Pure
   CSS — no per-card JS — and calm under reduced motion.
   ============================================ */
.svc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
@media (min-width: 640px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .svc-grid { grid-template-columns: repeat(3, 1fr); } }

.svc-card {
  --svc: var(--color-primary);
  --svc-tint: var(--color-primary-tint);
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(21, 19, 15, 0.04);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s var(--ease-out);
}
.svc-card--orange { --svc: var(--color-primary);          --svc-tint: var(--color-primary-tint); }
.svc-card--navy   { --svc: var(--color-accent-2);          --svc-tint: #e9ecf2; }
.svc-card--blue   { --svc: var(--color-accent-blue-dark);  --svc-tint: var(--color-accent-blue-tint); }

/* Accent bar that wipes across the top on hover. */
.svc-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--svc), color-mix(in srgb, var(--svc) 30%, transparent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease-out);
}
.svc-card:hover,
.svc-card:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 22px 48px rgba(21, 19, 15, 0.12);
  border-color: color-mix(in srgb, var(--svc) 45%, var(--color-border));
}
.svc-card:hover::before,
.svc-card:focus-within::before { transform: scaleX(1); }

.svc-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: var(--svc-tint);
  color: var(--svc);
}
.svc-card__icon svg { width: 26px; height: 26px; }

.svc-card__tag {
  display: block;
  margin-top: var(--sp-3);
  font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--svc);
}
.svc-card__title { margin: 0.35rem 0 0; font-size: var(--step-2); }
.svc-card__desc { margin-top: 0.6rem; font-size: var(--step--1); color: var(--color-fg-muted); }

.svc-card__list {
  list-style: none;
  margin: var(--sp-3) 0 var(--sp-4);
  padding: var(--sp-3) 0 0;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.svc-card__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: var(--step--1);
  line-height: 1.35;
  color: var(--color-fg);
}
.svc-card__list svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--svc); }

.svc-card__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: var(--step--1);
  color: var(--svc);
}
.svc-card__cta svg { width: 18px; height: 18px; transition: transform .25s var(--ease-out); }
.svc-card:hover .svc-card__cta svg { transform: translateX(4px); }
/* The CTA stretches over the whole card so the entire card is one click target. */
.svc-card__cta::after { content: ""; position: absolute; inset: 0; }
.svc-card__cta:focus-visible { outline: none; }
.svc-card:focus-within { outline: 2px solid var(--svc); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .svc-card, .svc-card__cta svg { transition: none; }
  .svc-card:hover, .svc-card:focus-within { transform: none; }
}

/* ============================================
   Glassmorphism pricing — vanilla WebGL2 port of a React/Three.js component.
   Animated shader behind frosted-glass cards instead of a flat background,
   so the backdrop-blur actually has something interesting to blur. See
   assets/js/pricing-shader.js. No React/Tailwind/shadcn — same approach as
   the rest of this site.
   ============================================ */
.pricing-glass-wrap {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #0b0e16;
  padding: var(--sp-6) var(--sp-4) var(--sp-4);
  box-shadow: var(--shadow-lg);
}
.pricing-glass-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pricing-glass-cards {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--sp-3);
}
@media (min-width: 880px) { .pricing-glass-cards { grid-template-columns: repeat(3, 1fr); align-items: start; } }
.pricing-glass-card {
  position: relative;
  backdrop-filter: blur(14px);
  background: linear-gradient(160deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 45px rgba(0,0,0,0.35);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  color: #fff;
  transition: transform 280ms var(--ease-out);
}
.pricing-glass-card.is-popular {
  background: linear-gradient(160deg, rgba(255,90,54,0.22), rgba(255,255,255,0.05));
  border-color: rgba(255,154,118,0.45);
  box-shadow: 0 24px 55px rgba(255,90,54,0.22);
}
@media (min-width: 880px) { .pricing-glass-card.is-popular { transform: scale(1.04); } }
.pricing-glass-badge {
  position: absolute;
  top: calc(-1 * var(--sp-2)); left: var(--sp-4);
  background: var(--color-primary);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}
.pricing-glass-card h3 { font-family: var(--font-display); font-size: var(--step-2); font-weight: 700; }
.pricing-glass-desc { font-size: var(--step--1); color: rgba(255,255,255,0.7); margin-top: 0.2rem; }
.pricing-glass-amount { font-family: var(--font-display); font-size: var(--step-3); font-weight: 700; margin-top: var(--sp-3); }
.pricing-glass-amount span { font-size: var(--step-0); font-weight: 500; color: rgba(255,255,255,0.6); }
.pricing-glass-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22) 50%, transparent); margin: var(--sp-3) 0; }
.pricing-glass-card ul { display: flex; flex-direction: column; gap: 0.6rem; margin: 0 0 var(--sp-4); flex: 1; }
.pricing-glass-card li { display: flex; gap: 0.55rem; font-size: var(--step--1); color: rgba(255,255,255,0.88); align-items: flex-start; }
.pricing-glass-card li svg { width: 16px; height: 16px; color: var(--color-primary); flex: none; margin-top: 3px; }
.pricing-glass-card.is-popular li svg { color: #FF9478; }
.pricing-glass-card .btn { justify-content: center; }
.pricing-glass-card .btn-ghost { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.25); color: #fff; }
.pricing-glass-card .btn-ghost:hover { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.4); }
.pricing-note {
  position: relative;
  z-index: 1;
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 0.8rem;
  color: rgba(255,255,255,0.55);
  text-align: center;
}

/* Ripple click effect — vanilla recreation of the React ripple button */
.ripple-btn { position: relative; overflow: hidden; isolation: isolate; }
.ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.45);
  transform: scale(0);
  opacity: 1;
  pointer-events: none;
  animation: ripple-expand 600ms ease-out forwards;
}
.btn-primary .ripple-effect { background: rgba(255,255,255,0.5); }
@keyframes ripple-expand { to { transform: scale(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ripple-effect { display: none; } }

.faq-item { border-bottom: 1px solid var(--color-border); padding-block: var(--sp-3); }
.faq-q { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: var(--step-0); }
.faq-q svg { width: 20px; height: 20px; flex: none; transition: transform 250ms var(--ease-out); color: var(--color-primary); }
.faq-item[open] .faq-q svg { transform: rotate(45deg); }
.faq-a { padding-top: var(--sp-2); font-size: var(--step--1); }
.faq-item summary { list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }

/* ============================================
   About page specifics
   ============================================ */
/* Split hero — two-column layout with diagonal clip-path image reveal */
.split-hero {
  display: flex;
  flex-direction: column;
  min-height: 520px;
  overflow: hidden;
  background: var(--color-bg);
}
@media (min-width: 768px) {
  .split-hero { flex-direction: row; min-height: 540px; }
}
.split-hero__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--sp-6) var(--sp-4);
  width: 100%;
}
@media (min-width: 768px) {
  .split-hero__content { width: 55%; padding: var(--sp-5) var(--sp-6) var(--sp-5) max(var(--sp-4), calc((100vw - var(--container)) / 2 + var(--sp-4))); }
}
@media (min-width: 1080px) {
  .split-hero__content { width: 60%; padding: var(--sp-6) var(--sp-7) var(--sp-6) max(var(--sp-5), calc((100vw - var(--container)) / 2 + var(--sp-5))); }
}
.split-hero__inner { max-width: 580px; }
.split-hero__inner h1 { margin-top: var(--sp-1); font-size: var(--step-4); }
.text-primary { color: var(--color-primary); }
.split-hero__bar {
  width: 5rem;
  height: 4px;
  background: var(--color-primary);
  border-radius: 2px;
  margin: var(--sp-3) 0;
}
.split-hero__inner .lede {
  font-size: var(--step-1);
  max-width: 50ch;
  margin-bottom: var(--sp-4);
}
.split-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-primary);
  transition: color 200ms var(--ease-out);
}
.split-hero__cta:hover { color: var(--color-primary-dark); }
.split-hero__cta svg { transition: transform 200ms var(--ease-out); }
.split-hero__cta:hover svg { transform: translateX(4px); }

.split-hero__image {
  position: relative;
  width: 100%;
  min-height: 340px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  animation: hero-clip-mobile 1s var(--ease-out) 0.3s both;
}
@media (min-width: 768px) {
  .split-hero__image {
    width: 45%;
    min-height: unset;
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    animation: hero-clip-desktop 1.2s cubic-bezier(.22,1,.36,1) 0.3s both;
  }
}
@media (min-width: 1080px) {
  .split-hero__image { width: 40%; }
}
.split-hero__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
@keyframes hero-clip-mobile {
  from { clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); }
  to   { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}
@keyframes hero-clip-desktop {
  from { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); }
  to   { clip-path: polygon(25% 0, 100% 0, 100% 100%, 0% 100%); }
}

/* About features — now a 2-column grid below the split hero */
.about-hero { padding-bottom: var(--sp-7); }
.about-feature-grid {
  display: grid;
  gap: var(--sp-5);
  align-items: start;
  margin-bottom: var(--sp-7);
}
@media (min-width: 680px) { .about-feature-grid { grid-template-columns: 1fr 1fr; } }
.about-feature-col { display: flex; flex-direction: column; gap: var(--sp-5); }
.about-feature-item h4 { font-size: var(--step-0); margin: var(--sp-2) 0 0.3rem; }
.about-feature-item p { font-size: var(--step--1); }

.about-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); margin-bottom: var(--sp-6); }
@media (min-width: 720px) { .about-stats { grid-template-columns: repeat(4, 1fr); } }
.about-stat {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--sp-4) var(--sp-3);
  text-align: center;
}
.about-stat-value { display: block; font-family: var(--font-display); font-weight: 700; font-size: var(--step-2); color: var(--color-fg); }
.about-stat-label { display: block; font-size: var(--step--1); color: var(--color-fg-muted); margin-top: 0.2rem; }

.value-row { display: flex; gap: var(--sp-3); padding-block: var(--sp-3); border-top: 1px solid var(--color-border); }
.value-row:first-of-type { border-top: none; }
.value-row .num { font-family: var(--font-display); font-weight: 700; color: var(--color-primary); font-size: var(--step-1); flex: none; width: 2.2rem; }

.timeline { display: flex; flex-direction: column; gap: var(--sp-4); position: relative; padding-left: var(--sp-4); border-left: 2px solid var(--color-border); }
.timeline-item { position: relative; }
.timeline-item::before {
  content: ''; position: absolute; left: calc(-1 * var(--sp-4) - 6px); top: 4px;
  width: 12px; height: 12px; border-radius: 50%; background: var(--color-primary);
  border: 3px solid var(--color-bg);
}
.timeline-item .tl-date { font-size: var(--step--1); font-weight: 700; color: var(--color-primary-dark); text-transform: uppercase; letter-spacing: 0.05em; }

/* ============================================
   Contact page
   ============================================ */
.contact-grid { display: grid; gap: var(--sp-5); }
@media (min-width: 960px) { .contact-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.contact-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
}
.field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: var(--sp-3); }
.field label { font-size: var(--step--1); font-weight: 600; }
.field .req { color: var(--color-primary); }
.field input, .field select, .field textarea {
  font-family: inherit;
  font-size: var(--step-0);
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-fg);
  min-height: 50px;
  transition: border-color 200ms, box-shadow 200ms;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 4px var(--color-primary-tint);
}
.field-error { font-size: 0.78rem; color: #B42318; min-height: 1em; }
.field.has-error input, .field.has-error textarea, .field.has-error select { border-color: #B42318; }
.helper { font-size: 0.8rem; color: var(--color-fg-muted); }

.contact-info-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.contact-info-item { display: flex; gap: var(--sp-2); align-items: flex-start; }
.contact-info-item .ico {
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  background: var(--color-primary-tint); color: var(--color-primary-dark);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.contact-info-item .ico svg { width: 22px; height: 22px; }
.contact-info-item .ico--blue { background: var(--color-accent-blue-tint); color: var(--color-accent-blue-dark); }
.contact-info-item strong { display: block; font-family: var(--font-display); font-size: var(--step-0); margin-bottom: 2px; }
.contact-info-item a, .contact-info-item span { font-size: var(--step--1); color: var(--color-fg-muted); }
.contact-info-item a:hover { color: var(--color-primary-dark); }

.map-frame {
  margin-top: var(--sp-4);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  aspect-ratio: 16/10;
}
.map-frame iframe { width: 100%; height: 100%; border: 0; }

.form-status {
  display: none;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-sm);
  font-size: var(--step--1);
  font-weight: 600;
  margin-bottom: var(--sp-3);
}
.form-status.success { display: block; background: #EAF7EF; color: var(--color-success); }
.form-status.error { display: block; background: #FBEAE8; color: #B42318; }

/* ============================================
   Projects / portfolio page
   ============================================ */
.filter-row { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: var(--sp-5); }
.filter-pill {
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-border);
  font-size: var(--step--1);
  font-weight: 600;
  cursor: pointer;
  background: var(--color-surface);
  transition: background-color 200ms, color 200ms, border-color 200ms;
}
.filter-pill.is-active, .filter-pill:hover { background: var(--color-fg); color: #fff; border-color: var(--color-fg); }

.case-study {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--sp-6);
}
.case-meta { display: flex; flex-wrap: wrap; gap: var(--sp-4); padding: var(--sp-4) var(--sp-4) 0; }
.case-meta-item span { display: block; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-fg-muted); margin-bottom: 2px; }
.case-meta-item strong { font-family: var(--font-display); font-size: var(--step-0); }
.case-body { padding: var(--sp-4); display: grid; gap: var(--sp-4); }
@media (min-width: 880px) { .case-body { grid-template-columns: 1fr 1fr; } }
.case-copy h3 { margin-bottom: var(--sp-2); }
.case-copy p { font-size: var(--step--1); margin-bottom: var(--sp-2); }
.case-copy ul { display: flex; flex-direction: column; gap: 0.5rem; margin-top: var(--sp-2); }
.case-copy li { font-size: var(--step--1); display: flex; gap: 0.5rem; }
.case-copy li svg { width: 16px; height: 16px; color: var(--color-primary); flex: none; margin-top: 3px; }

/* Before/after slider */
.ba-slider {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--radius-md);
  overflow: hidden;
  user-select: none;
  touch-action: none;
  box-shadow: var(--shadow-md);
}
.ba-pane { position: absolute; inset: 0; overflow: hidden; background: #15130F; }
.ba-pane img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ba-pane.after { clip-path: inset(0 0 0 50%); }
.ba-pane .tag {
  position: absolute;
  bottom: var(--sp-2);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: #fff;
  background: rgba(0,0,0,0.55);
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.ba-pane.before .tag { left: var(--sp-2); }
.ba-pane.after .tag { right: var(--sp-2); }
.ba-handle {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 0; cursor: ew-resize;
}
.ba-handle .bar { position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.1); }
.ba-handle .grip {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%; background: #fff;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  box-shadow: var(--shadow-md);
}
.ba-handle .grip svg { width: 14px; height: 14px; color: var(--color-fg); }
.ba-label { position: absolute; top: var(--sp-2); padding: 0.3rem 0.7rem; border-radius: var(--radius-pill); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; background: rgba(0,0,0,0.5); color: #fff; backdrop-filter: blur(4px); }
.ba-label.before-label { left: var(--sp-2); }
.ba-label.after-label { right: var(--sp-2); }

.upload-cta {
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--sp-5) var(--sp-3);
  text-align: center;
}
.upload-cta svg { width: 36px; height: 36px; color: var(--color-fg-muted); margin: 0 auto var(--sp-2); }

/* ============================================
   Placeholder photos (swap for real images later)
   ============================================ */
.placeholder-img {
  position: relative;
  border-radius: var(--radius-md);
  border: 1.5px dashed var(--color-border);
  background: linear-gradient(150deg, var(--color-primary-tint), var(--color-accent-blue-tint));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  padding: var(--sp-3);
  color: var(--color-fg-muted);
  overflow: hidden;
}
.placeholder-img svg { width: 30px; height: 30px; color: var(--color-primary-dark); opacity: 0.7; }
.placeholder-img .ph-label { font-size: 0.78rem; font-weight: 600; color: var(--color-fg-muted); max-width: 22ch; }
.placeholder-img .ph-tag {
  position: absolute; top: 10px; left: 10px;
  font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  background: rgba(21,19,15,0.08); color: var(--color-fg-muted);
  padding: 3px 8px; border-radius: var(--radius-pill);
}

.testimonial-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
}
.testimonial-card p.quote { color: var(--color-fg); font-size: var(--step-0); margin-bottom: var(--sp-3); }
.testimonial-card .stars { display: flex; gap: 3px; margin-bottom: var(--sp-2); color: var(--color-primary); }
.testimonial-card .stars svg { width: 16px; height: 16px; }
.testimonial-person { display: flex; align-items: center; gap: 0.7rem; }
.avatar-placeholder {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: linear-gradient(150deg, var(--color-primary-tint), var(--color-bg-alt));
  border: 1.5px dashed var(--color-border);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; color: var(--color-primary-dark);
}
.testimonial-person strong { display: block; font-size: var(--step--1); }
.testimonial-person span { font-size: 0.78rem; color: var(--color-fg-muted); }

.photo-strip { display: grid; gap: var(--sp-2); grid-template-columns: 1fr; }
@media (min-width: 640px) { .photo-strip { grid-template-columns: repeat(3, 1fr); } }
.photo-strip .placeholder-img { aspect-ratio: 4/3; }
.photo-strip__shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  box-shadow: 0 6px 18px rgba(21, 19, 15, 0.08);
}

/* Utility */
.text-center { text-align: center; }
.mt-0 { margin-top: 0 !important; }
.flex { display: flex; }
.gap-2 { gap: var(--sp-2); }
.flex-wrap { flex-wrap: wrap; }
.justify-center { justify-content: center; }