/* ============================================================
   AutomateWithClark — design system
   Flat, banded, developer-tool marketing surface. Ink #151515
   and paper #f7f8f4 alternate as whole sections rather than
   stacking as tints, so the page reads in slabs. Warm neutral
   greys carry every border and secondary text. Depth comes from
   luminance and hairlines, never from shadow. Jade is the single
   accent; forest teal is the one saturated panel. Space Grotesk
   sets display, Geist sets everything else.
   ============================================================ */

:root {
  /* typography — overridable from the admin Typography card */
  --font-body: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Space Grotesk', 'Geist', ui-sans-serif, system-ui, sans-serif;
  /* no separate caption face — a second grotesk on small labels reads as costume */
  --font-caption: var(--font-body);

  /* type scale — display steps are fluid, text steps are fixed */
  --t-display: clamp(2.25rem, 1.1rem + 4.6vw, 4.5rem);
  --t-h2: clamp(1.875rem, 1rem + 2.6vw, 3rem);
  --t-h3: clamp(1.25rem, 0.9rem + 1.6vw, 2rem);
  --t-lead: clamp(1.0625rem, 0.9rem + 0.7vw, 1.5rem);
  --t-body: 1.125rem;
  --t-sm: 0.9375rem;
  --t-xs: 0.8125rem;
  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.5;

  /* radii — controls stay tight, panels open up */
  --r-sm: 0.25rem;
  --r-md: 0.375rem;
  --r-lg: 0.5rem;
  --r-xl: 0.75rem;
  --r-2xl: 1rem;
  --r-3xl: 1.5rem;

  /* accent palette — overridable from the admin Appearance card */
  --primary: #4d9987;
  --secondary: #518dd2;
  /* gradient stops are separate vars so the admin panel can override them.
     They drive the meter fill only — never text. */
  --grad-1: #4d9987;
  --grad-2: #41a0a8;
  --grad-3: #518dd2;
  --gradient: linear-gradient(90deg, var(--grad-1), var(--grad-2) 50%, var(--grad-3));
  /* admin-overridable; the -ink pair is for dark surfaces, -paper for light */
  --gold-ink: #d9b876;
  --gold-ink-2: #b08d4f;
  --gold-paper: #7a5a22;
  --gold-paper-2: #b3893a;
  --gold: var(--gold-ink);
  --gold-2: var(--gold-ink-2);

  /* ink band (default) — warm neutral greys, no blue in the greys */
  --bg: #151515;
  --bg-alt: #0e0e0e;
  --card: #1e1d1b;
  --card-hover: #282522;
  --border: #282522;
  --border-strong: #433e38;
  --text: #f7f8f4;
  --text-soft: #ded9d3;
  --text-muted: #8b867f;
  --nav-alpha: 0.85;
  --nav-bg: rgba(21, 21, 21, var(--nav-alpha));
  /* solid buttons invert their own band */
  --btn-bg: #f7f8f4;
  --btn-fg: #151515;
  /* brand panel */
  --teal: #185849;
  --teal-deep: #0e352c;
  --ease: cubic-bezier(0.72, 0, 0.12, 1);

  /* the opposing band. .section-alt rebinds the surface tokens to these, so a
     whole section flips ink-for-paper and everything inside follows. */
  --inv-bg: #f7f8f4;
  --inv-card: #ffffff;
  --inv-card-hover: #f1f0ec;
  --inv-border: #ded9d3;
  --inv-border-strong: #c8bfb5;
  --inv-text: #151515;
  --inv-text-soft: #433e38;
  --inv-text-muted: #6f6a63;
  --inv-btn-bg: #151515;
  --inv-btn-fg: #f7f8f4;
  --inv-primary: #2f6d5d;
  --inv-gold: var(--gold-paper);
  --inv-gold-2: var(--gold-paper-2);
}

html[data-theme="light"] {
  --bg: #f7f8f4;
  --bg-alt: #eeefe9;
  --card: #ffffff;
  --card-hover: #f1f0ec;
  --border: #ded9d3;
  --border-strong: #c8bfb5;
  --text: #151515;
  --text-soft: #433e38;
  --text-muted: #6f6a63;
  --nav-bg: rgba(247, 248, 244, var(--nav-alpha));
  --btn-bg: #151515;
  --btn-fg: #f7f8f4;
  /* jade darkens on paper so link and accent text clear 4.5:1 */
  --primary: #2f6d5d;

  --inv-bg: #151515;
  --inv-card: #1e1d1b;
  --inv-card-hover: #282522;
  --inv-border: #282522;
  --inv-border-strong: #433e38;
  --inv-text: #f7f8f4;
  --inv-text-soft: #ded9d3;
  --inv-text-muted: #8b867f;
  --inv-btn-bg: #f7f8f4;
  --inv-btn-fg: #151515;
  --inv-primary: #4d9987;
  --gold: var(--gold-paper);
  --gold-2: var(--gold-paper-2);
  --inv-gold: var(--gold-ink);
  --inv-gold-2: var(--gold-ink-2);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

html {
  background: var(--bg);
  transition: background 0.3s ease;
}

body {
  font-family: var(--font-body);
  background: transparent;
  color: var(--text);
  font-size: var(--t-body);
  line-height: var(--lh-normal);
  transition: color 0.3s ease;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.hero-inner > *, .about-grid > *, .cards-grid > * { min-width: 0; }

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: -0.03em;
  text-wrap: balance;
  overflow-wrap: break-word;
}
h3 { font-weight: 500; line-height: var(--lh-snug); letter-spacing: -0.02em; }

::selection {
  background: color-mix(in srgb, var(--primary) 26%, transparent);
  color: var(--text);
}
/* browser surfaces the design still owns */
html { color-scheme: dark; }
[data-theme="light"] { color-scheme: light; }
* { scrollbar-color: var(--border-strong) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border: 3px solid var(--bg);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
input, textarea { caret-color: var(--primary); }
a { text-underline-offset: 0.18em; text-decoration-thickness: 1px; }

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: var(--r-md);
}

/* Emphasis inside a heading is a colour step, not a gradient. Both classes are
   kept because admin copy and the logo partial already reference them. */
.grad-text { color: var(--primary); }
.grad-gold { color: var(--gold); }

/* The eyebrow is gone from every template. The heading carries its own weight.
   These rules stay only so a stray .badge in custom admin HTML cannot leak an
   unstyled fragment onto the page. */
.badge, .badge-dot { display: none; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--r-lg);
  font-family: inherit;
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.btn-primary {
  background: var(--btn-bg);
  color: var(--btn-fg);
}
.btn-primary:hover {
  background: color-mix(in srgb, var(--btn-bg) 85%, var(--bg));
}
.btn-outline {
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong);
}
.btn-outline:hover {
  border-color: var(--text-muted);
  background: color-mix(in srgb, var(--text) 5%, transparent);
}
.btn-sm { padding: 9px 16px; font-size: var(--t-xs); }
.btn-lg { padding: 15px 28px; font-size: 1rem; }

/* ---------- navbar ---------- */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: var(--nav-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.navbar.scrolled { border-bottom-color: var(--border); }
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.logo {
  display: inline-flex;
  align-items: center;
  /* padded to a 44px hit area without changing the navbar's 64px rhythm */
  padding: 9px 0;
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -0.03em;
}
/* image logo — displays 36px tall, upload 320×80px (2×) for sharp retina */
.logo-img {
  display: block;
  height: 36px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
}

/* Two-logo theme swap. The dark-mode file is the default so a page with no
   data-theme yet still shows a logo; the light-mode file takes over under the
   light theme. Only rendered as a pair when both have been uploaded. */
.logo-img-light { display: none; }
[data-theme="light"] .logo-img-dark { display: none; }
[data-theme="light"] .logo-img-light { display: block; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a {
  color: var(--text-soft);
  text-decoration: none;
  font-size: var(--t-sm);
  font-weight: 500;
  transition: color 0.2s ease;
}
.nav-links a:hover { color: var(--text); }
/* the mobile-menu CTA is an <a> inside .nav-links — keep button colors */
.nav-links a.btn-primary, .nav-links a.btn-primary:hover { color: var(--btn-fg); }
.nav-actions { display: flex; align-items: center; gap: 12px; }
.nav-mobile-actions { display: none; }

/* theme toggle — quiet icon button */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  width: 36px;
  height: 36px;
  padding: 0;
  cursor: pointer;
  color: var(--text-muted);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.theme-toggle:hover { border-color: var(--border-strong); color: var(--text); }
.theme-toggle svg { width: 17px; height: 17px; display: block; }
.toggle-icon-img { width: 18px; height: 18px; object-fit: contain; display: block; border-radius: 3px; }
.toggle-icon-emoji { font-size: 1rem; line-height: 1; }
.theme-toggle .toggle-label {
  font-size: var(--t-xs);
  font-weight: 500;
  font-family: inherit;
}
/* mobile menu variant keeps its label and grows to fit */
.nav-mobile-actions .theme-toggle {
  width: auto;
  padding: 8px 14px;
  border-color: var(--border);
}
[data-theme="dark"] .icon-sun { display: none; }
[data-theme="dark"] .icon-moon { display: inline-flex; }
[data-theme="light"] .icon-sun { display: inline-flex; }
[data-theme="light"] .icon-moon { display: none; }

/* hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  background: none;
  border: none;
  border-radius: var(--r-lg);
  cursor: pointer;
}
.hamburger span {
  width: 22px; height: 1.5px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ---------- hero ---------- */
.hero {
  position: relative;
  padding: clamp(128px, 14vw, 176px) 0 clamp(80px, 9vw, 112px);
  overflow: hidden;
}
.hero-inner {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 72px;
  align-items: center;
  position: relative;
}
.hero h1 {
  font-size: var(--t-display);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin-bottom: 20px;
}
.hero-role {
  font-size: var(--t-lead);
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--text-soft);
  margin-bottom: 20px;
}
.hero-desc {
  font-size: var(--t-body);
  line-height: var(--lh-normal);
  color: var(--text-muted);
  max-width: 62ch;
  margin-bottom: 40px;
}
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }

.hero-visual { display: flex; justify-content: center; }
.hero-img-frame {
  width: min(360px, 80vw);
  aspect-ratio: 1;
  border-radius: var(--r-2xl);
  overflow: hidden;
  border: 1px solid var(--border-strong);
  background: var(--card);
}
.hero-img-frame img,
.hero-placeholder {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.hero-placeholder {
  background: var(--bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-initials {
  font-family: var(--font-heading);
  font-size: 4.5rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--text-muted);
}

/* ---------- tools strip ---------- */
.tools-strip {
  padding: 40px 0 44px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
}
.tools-label {
  text-align: center;
  font-size: var(--t-sm);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--text-muted);
  margin-bottom: 28px;
}
/* marquee: track holds two copies of the list; shifting -50%
   moves exactly one full copy, so the loop is seamless */
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: marquee-scroll 40s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; flex-wrap: wrap; justify-content: center; }
}
/* plain logo row — no pills, muted until hover */
.marquee-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: 56px;
  font-weight: 500;
  font-size: var(--t-sm);
  letter-spacing: -0.01em;
  color: var(--text-soft);
  white-space: nowrap;
  flex-shrink: 0;
  opacity: 0.75;
  transition: opacity 0.25s var(--ease);
}
.marquee-item:hover { opacity: 1; }
.marquee-item img {
  height: 22px;
  width: 22px;
  object-fit: contain;
}

/* ---------- sections ---------- */
.section { padding: clamp(80px, 9vw, 120px) 0; }

/* A .section-alt rebinds the surface tokens to the opposing band, so the
   section flips ink-for-paper and every card, button, border and tag inside
   it follows without a single override. */
.section-alt {
  background: var(--inv-bg);
  color: var(--inv-text);
  --bg: var(--inv-bg);
  --bg-alt: var(--inv-bg);
  --card: var(--inv-card);
  --card-hover: var(--inv-card-hover);
  --border: var(--inv-border);
  --border-strong: var(--inv-border-strong);
  --text: var(--inv-text);
  --text-soft: var(--inv-text-soft);
  --text-muted: var(--inv-text-muted);
  --btn-bg: var(--inv-btn-bg);
  --btn-fg: var(--inv-btn-fg);
  --primary: var(--inv-primary);
  --gold: var(--inv-gold);
  --gold-2: var(--inv-gold-2);
}
.section-head {
  text-align: left;
  max-width: 46rem;
  margin: 0 0 clamp(40px, 5vw, 64px);
}
.section-head h2 {
  font-size: var(--t-h2);
  letter-spacing: -0.035em;
  max-width: 20ch;
  margin-bottom: 20px;
}
.section-head p, .section-head .rich-text {
  color: var(--text-muted);
  font-size: var(--t-lead);
  line-height: 1.4;
  letter-spacing: -0.015em;
  max-width: 46ch;
}

/* ---------- cards ---------- */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 30px;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.card:hover {
  border-color: var(--border-strong);
  background: var(--card-hover);
}
.service-card h3 { font-size: 1.25rem; margin-bottom: 12px; }
.service-card .service-desc {
  color: var(--text-muted);
  font-size: var(--t-sm);
  line-height: 1.55;
  margin-bottom: 22px;
}
.service-icon {
  width: 42px; height: 42px;
  border-radius: var(--r-lg);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  margin-bottom: 22px;
}
.service-icon svg { width: 20px; height: 20px; display: block; }
.service-icon-img { width: 24px; height: 24px; object-fit: contain; display: block; }
.service-icon-emoji { font-size: 1.3rem; line-height: 1; }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; }
.tag {
  font-size: var(--t-xs);
  font-weight: 400;
  letter-spacing: -0.005em;
  padding: 5px 10px;
  max-width: 100%;
  overflow-wrap: break-word;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.card-link {
  display: inline-block;
  color: var(--primary);
  font-weight: 500;
  font-size: var(--t-sm);
  text-decoration: none;
  padding: 11px 0;
  margin: -11px 0;
}
.card-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.empty-note {
  color: var(--text-muted);
  font-size: var(--t-body);
  padding: 28px 30px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-xl);
  max-width: 52ch;
}

/* ---------- portfolio ---------- */
.filter-row {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 40px;
}
.filter-btn {
  padding: 9px 16px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: var(--t-xs);
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background 0.2s var(--ease);
}
.filter-btn:hover { border-color: var(--border-strong); color: var(--text); }
.filter-btn.active {
  background: var(--btn-bg);
  color: var(--btn-fg);
  border-color: transparent;
}
.portfolio-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.portfolio-card.hidden { display: none; }
.portfolio-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
}
.portfolio-thumb.has-media { cursor: zoom-in; }
.thumb-slides { position: absolute; inset: 0; }
.thumb-slide { position: absolute; inset: 0; display: none; }
.thumb-slide.active { display: block; }
.thumb-slide img,
.thumb-slide video {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.4s var(--ease);
}
.portfolio-card:hover .thumb-slide.active img { transform: scale(1.03); }
.play-badge {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(14, 14, 14, 0.7);
  border: 1px solid rgba(233, 235, 223, 0.25);
  color: #e9ebdf;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  backdrop-filter: blur(4px);
}
.play-badge svg { width: 20px; height: 20px; display: block; }
.zoom-hint {
  position: absolute;
  top: 12px; right: 12px;
  width: 30px; height: 30px;
  border-radius: 6px;
  background: rgba(14, 14, 14, 0.7);
  border: 1px solid rgba(233, 235, 223, 0.2);
  color: #e9ebdf;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s var(--ease);
  pointer-events: none;
}
.zoom-hint svg { width: 14px; height: 14px; display: block; }
.portfolio-thumb.has-media:hover .zoom-hint,
.portfolio-thumb.has-media:focus-visible .zoom-hint { opacity: 1; }
.thumb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(233, 235, 223, 0.2);
  background: rgba(14, 14, 14, 0.65);
  color: #f7f8f4;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}
.thumb-nav svg { width: 16px; height: 16px; display: block; }
.thumb-nav:hover { background: rgba(14, 14, 14, 0.9); }
.thumb-nav.prev { left: 10px; }
.thumb-nav.next { right: 10px; }
.thumb-dots {
  position: absolute;
  bottom: 10px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 2;
}
.thumb-dots .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(233, 235, 223, 0.35);
  transition: background 0.2s ease;
}
.thumb-dots .dot.active { background: #e9ebdf; }
.thumb-placeholder {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  opacity: 0.6;
}
.thumb-placeholder svg { width: 40px; height: 40px; }
a.thumb-link {
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
a.thumb-link:hover { opacity: 1; }
.cat-chip {
  position: absolute;
  top: 12px; left: 12px;
  padding: 5px 10px;
  border-radius: var(--r-md);
  background: rgba(14, 14, 14, 0.75);
  border: 1px solid rgba(233, 235, 223, 0.15);
  color: #f7f8f4;
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: -0.005em;
  backdrop-filter: blur(6px);
}
.portfolio-body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.portfolio-body h3 { font-size: 1.1875rem; margin-bottom: 10px; }
.portfolio-body .portfolio-desc { color: var(--text-muted); font-size: var(--t-sm); line-height: 1.55; flex: 1; }
.portfolio-links { display: flex; gap: 16px; margin-top: 16px; flex-wrap: wrap; }

/* ---------- about ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: start;
}
.about-text h2 {
  font-size: var(--t-h2);
  letter-spacing: -0.035em;
  margin-bottom: 16px;
}
.about-role {
  font-size: var(--t-lead);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.35;
  color: var(--text-soft);
  margin-bottom: 24px;
}
.about-bio { color: var(--text-muted); font-size: var(--t-body); line-height: var(--lh-normal); max-width: 62ch; margin-bottom: 32px; }
.about-skills h3 { font-size: 1.25rem; margin-bottom: 20px; }
.skills-list { display: flex; flex-direction: column; gap: 8px; }
.skill-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 15px;
  border-radius: var(--r-lg);
  background: var(--card);
  border: 1px solid var(--border);
  font-size: var(--t-sm);
  color: var(--text-soft);
  transition: border-color 0.2s var(--ease);
}
.skill-item:hover { border-color: var(--border-strong); }
.check {
  color: var(--primary);
  flex-shrink: 0;
  display: block;
  width: 17px;
  height: 17px;
  margin-top: 0.18em;
}

/* ---------- contact — the one saturated brand moment ---------- */
.contact-box {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(48px, 6vw, 80px) clamp(28px, 4vw, 56px);
  border-radius: var(--r-3xl);
  background: linear-gradient(180deg, var(--teal), var(--teal-deep));
  border: 1px solid color-mix(in srgb, var(--teal) 55%, #f7f8f4 12%);
  position: relative;
  overflow: hidden;
}
.contact-box .badge { color: rgba(233, 235, 223, 0.6); }
.contact-box .badge-dot { background: #e9ebdf; }
.contact-box h2 {
  font-size: var(--t-h2);
  letter-spacing: -0.035em;
  color: #f7f8f4;
  margin-bottom: 18px;
}
/* on the saturated panel the emphasis word tints from the panel's own hue */
.contact-box h2 .grad-text { color: #afd1c6; }
.contact-box p, .contact-box .contact-desc {
  color: #cfe0d8;
  font-size: var(--t-lead);
  line-height: 1.45;
  letter-spacing: -0.015em;
  max-width: 46ch;
  margin: 0 auto 36px;
}
.contact-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.contact-box .btn-primary { background: #f7f8f4; color: #0e352c; }
.contact-box .btn-primary:hover { background: #d7e9e0; }
.contact-box .btn-outline {
  color: #e9ebdf;
  border-color: rgba(233, 235, 223, 0.3);
}
.contact-box .btn-outline:hover {
  border-color: rgba(233, 235, 223, 0.6);
  background: rgba(233, 235, 223, 0.06);
}

/* ---------- testimonials ---------- */
.testimonials-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.testimonial-card { display: flex; flex-direction: column; }
.stars { display: flex; gap: 3px; margin-bottom: 18px; }
.star { display: block; width: 15px; height: 15px; color: var(--border-strong); }
.star.filled { color: var(--gold); }
.testimonial-text {
  color: var(--text-soft);
  font-size: var(--t-body);
  line-height: 1.55;
  letter-spacing: -0.01em;
  flex: 1;
  margin-bottom: 26px;
}
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--teal);
  color: #f7f8f4;
  font-weight: 500;
  font-size: var(--t-xs);
}
.testimonial-author strong { display: block; font-size: var(--t-sm); font-weight: 500; }
.author-role { color: var(--text-muted); font-size: var(--t-xs); }

/* ---------- footer ---------- */
.footer {
  border-top: 1px solid var(--border);
  padding: 32px 0;
  background: var(--bg-alt);
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.footer p {
  color: var(--text-muted);
  font-size: var(--t-xs);
}
.footer-admin {
  display: inline-block;
  color: var(--text-muted);
  font-size: var(--t-xs);
  text-decoration: none;
  padding: 12px 0;
  margin: -12px 0;
  opacity: 0.6;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.footer-admin:hover { color: var(--text); opacity: 1; }

/* ---------- lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(10, 10, 10, 0.94);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 56px 72px 64px;
}
.lightbox.open { display: flex; }
.lb-stage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  touch-action: pan-y;
}
.lb-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.38s var(--ease);
  will-change: transform;
}
.lb-stage img,
.lb-stage video {
  max-width: min(1100px, 88vw);
  max-height: 80vh;
  border-radius: 8px;
  border: 1px solid rgba(233, 235, 223, 0.12);
}
.lb-close {
  position: absolute;
  top: 18px; right: 22px;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(233, 235, 223, 0.2);
  background: rgba(233, 235, 223, 0.06);
  color: #f7f8f4;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: background 0.2s ease;
}
.lb-close svg, .lb-nav svg { width: 18px; height: 18px; display: block; }
.lb-close:hover { background: rgba(233, 235, 223, 0.16); }
.lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(233, 235, 223, 0.2);
  background: rgba(233, 235, 223, 0.06);
  color: #f7f8f4;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: background 0.2s ease;
}
.lb-nav:hover { background: rgba(233, 235, 223, 0.16); }
.lb-prev { left: 18px; }
.lb-next { right: 18px; }
/* Caption panel. Without a caption it stays the compact title pill it always
   was; with one it becomes a readable block — capped measure, generous
   line-height, and its own scroll so a 200-word caption never pushes the
   image off screen. */
.lb-footer {
  position: absolute;
  bottom: 18px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #e9ebdf;
  font-size: 0.85rem;
  font-weight: 500;
  background: rgba(14, 14, 14, 0.7);
  border: 1px solid rgba(233, 235, 223, 0.12);
  padding: 10px 18px;
  border-radius: var(--r-xl);
  max-width: 90vw;
}
.lb-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.lb-caption { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lb-counter { color: rgba(233, 235, 223, 0.55); flex-shrink: 0; }
.lb-desc { display: none; }
.lb-footer.has-desc {
  border-radius: 16px;
  padding: 14px 20px 16px;
  width: min(72ch, 90vw);
  backdrop-filter: blur(8px);
}
.lb-footer.has-desc .lb-meta {
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(233, 235, 223, 0.12);
}
.lb-footer.has-desc .lb-desc {
  display: block;
  margin: 0;
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.65;
  color: rgba(233, 235, 223, 0.86);
  white-space: pre-wrap;   /* keep the admin's paragraph breaks */
  overflow-y: auto;
  max-height: min(30vh, 240px);
  overscroll-behavior: contain;
}
.lb-footer.has-desc .lb-desc::-webkit-scrollbar { width: 6px; }
.lb-footer.has-desc .lb-desc::-webkit-scrollbar-thumb {
  background: rgba(233, 235, 223, 0.22);
  border-radius: 3px;
}

/* caption preview over the card thumbnail — overlaid rather than stacked so
   flipping between slides never changes the card's height */
.thumb-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 22px 12px 10px;
  font-size: 0.76rem;
  line-height: 1.45;
  color: #e9ebdf;
  background: linear-gradient(to top, rgba(10, 10, 10, 0.92) 30%, rgba(10, 10, 10, 0));
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  pointer-events: none;
}
/* clear the carousel dots when this card has more than one media item */
.portfolio-thumb.has-dots .thumb-caption { padding-bottom: 24px; }

/* thumbnail that navigates to a page instead of opening the lightbox */
.portfolio-thumb.is-link { display: block; cursor: pointer; text-decoration: none; }
.portfolio-thumb.is-link img,
.portfolio-thumb.is-link video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease);
}
.portfolio-card:hover .portfolio-thumb.is-link img { transform: scale(1.03); }
/* the affordance says where the click goes — a zoom cursor would lie here */
.thumb-open {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 26px 14px 12px;
  font-family: var(--font-caption);
  font-size: 0.78rem;
  font-weight: 500;
  color: #f7f8f4;
  background: linear-gradient(to top, rgba(10, 10, 10, 0.9) 32%, rgba(10, 10, 10, 0));
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
}
.portfolio-card:hover .thumb-open,
.portfolio-thumb.is-link:focus-visible .thumb-open { opacity: 1; transform: none; }
.portfolio-thumb.is-link:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
@media (hover: none) {
  .thumb-open { opacity: 1; transform: none; }
}
@media (max-width: 700px) {
  .lightbox { padding: 56px 12px 64px; }
  .lb-nav { width: 40px; height: 40px; }
  .lb-prev { left: 8px; }
  .lb-next { right: 8px; }
  .lb-stage img, .lb-stage video { max-width: 94vw; }
}

/* ---------- case study page ---------- */
.cs-hero { padding: clamp(112px, 12vw, 152px) 0 16px; }
.cs-hero-head { max-width: 860px; }
.cs-title {
  font-size: clamp(2rem, 4.6vw, 3.25rem);
  letter-spacing: -0.035em;
  margin-bottom: 22px;
}
.cs-summary {
  color: var(--text-muted);
  font-size: var(--t-lead);
  line-height: 1.45;
  letter-spacing: -0.015em;
  max-width: 52ch;
  margin-bottom: 44px;
}
.cs-client-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.cs-client-cell {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cs-client-label {
  font-size: var(--t-xs);
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--text-muted);
}
.cs-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.cs-metric {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 26px 24px;
}
.cs-metric-value {
  display: block;
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  margin-bottom: 6px;
}
.cs-metric-label { color: var(--text-muted); font-size: var(--t-sm); line-height: 1.45; }

.cs-section-head { margin-bottom: 28px; }
.cs-num {
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
  margin-right: 12px;
}
.cs-label {
  display: inline-block;
  font-size: var(--t-sm);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.cs-section-head h2 { font-size: var(--t-h3); letter-spacing: -0.03em; }
.cs-text {
  color: var(--text-muted);
  max-width: 760px;
  margin-bottom: 36px;
  font-size: 1rem;
}
.cs-cards { margin-top: 8px; }
.cs-card h3 { font-size: 1.05rem; margin-bottom: 10px; }
.cs-card p { color: var(--text-muted); font-size: 0.9rem; }
.cs-card-tag {
  display: inline-block;
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: -0.005em;
  margin-bottom: 12px;
}
.cs-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.cs-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--text-muted);
}
.cs-quote {
  margin-top: 40px;
  padding: 28px 32px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  color: var(--text-soft);
  font-size: var(--t-lead);
  line-height: 1.45;
  letter-spacing: -0.015em;
  max-width: 46ch;
}
.cs-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-xl); }
.cs-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  font-size: 0.9rem;
}
.cs-table th, .cs-table td {
  padding: 14px 20px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.cs-table th {
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--text-muted);
  background: var(--bg-alt);
}
.cs-table tr:last-child td { border-bottom: none; }
.cs-table td:first-child { font-weight: 600; }
.cs-before { color: #c4675f; }
.cs-after { color: var(--primary); font-weight: 600; }

@media (max-width: 700px) {
  .cs-num { margin-right: 10px; }
}

/* ---------- case study: extended blocks ---------- */
.cs-badge-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
/* "Demo build" style marker — gold rather than jade so it reads as a caveat,
   not as another brand accent */
.cs-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: var(--r-md);
  border: 1px solid color-mix(in srgb, var(--gold) 42%, transparent);
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  color: var(--gold);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.cs-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.cs-disclosure {
  margin-top: 26px;
  max-width: 62ch;
  padding: 18px 22px;
  border: 1px solid color-mix(in srgb, var(--gold) 34%, transparent);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--gold) 8%, transparent);
  color: var(--text-soft);
  font-size: var(--t-sm);
  line-height: 1.65;
}
.cs-disclosure p:last-child { margin-bottom: 0; }
.cs-disclosure strong { color: var(--text); }

/* ---------- response window meter ---------- */
.cs-meter {
  margin-top: 52px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: clamp(20px, 3vw, 32px);
}
.cs-meter-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--border);
}
.cs-label-dim { color: var(--text-muted); }
.cs-lane { margin-bottom: 22px; }
.cs-lane-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
  font-size: var(--t-sm);
  letter-spacing: -0.01em;
  color: var(--text-muted);
}
.cs-lane.is-fast .cs-lane-label { color: var(--primary); }
.cs-lane-label .val { font-variant-numeric: tabular-nums; font-size: var(--t-sm); color: var(--text); }
.cs-track { height: 14px; background: var(--bg-alt); border-radius: var(--r-sm); overflow: hidden; }
/* the lane is full width and scaled from the left edge — animating transform
   keeps the fill off the layout path */
.cs-fill {
  height: 100%;
  width: 100%;
  border-radius: var(--r-sm);
  transform: scaleX(0);
  transform-origin: left center;
}
/* the slow lane is hatched so it reads as "waiting", not as a second metric */
.cs-fill.slow {
  background: repeating-linear-gradient(135deg,
    var(--border-strong) 0 6px,
    color-mix(in srgb, var(--border-strong) 55%, transparent) 6px 12px);
}
.cs-fill.fast { background: var(--gradient); }
@media (prefers-reduced-motion: no-preference) {
  .cs-fill { transition: transform 1.15s cubic-bezier(0.22, 0.85, 0.3, 1); }
}
.cs-axis {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--border);
  padding-top: 10px;
  margin-top: 4px;
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
  color: var(--text-muted);
}
.cs-meter-foot {
  margin: 22px 0 0;
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 68ch;
}

/* ---------- section note / caveat callout ---------- */
.cs-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  max-width: 72ch;
  margin: 0 0 28px;
  padding: 14px 18px;
  border: 1px solid color-mix(in srgb, var(--gold) 34%, transparent);
  background: color-mix(in srgb, var(--gold) 9%, transparent);
  border-radius: 8px;
  color: var(--text-soft);
  font-size: 0.9rem;
  line-height: 1.65;
}
.cs-note svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 3px; color: var(--gold); }
.cs-note-body { min-width: 0; }
.cs-note-body p { margin: 0; }
.cs-note-body p + p { margin-top: 0.7em; }
.cs-note strong { color: var(--text); }

/* ---------- card meta / quote attribution ---------- */
.cs-card-meta {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: var(--t-xs);
  letter-spacing: -0.005em;
  color: var(--text-muted);
}
.cs-quote-attr {
  display: block;
  margin-top: 20px;
  font-size: var(--t-sm);
  font-style: normal;
  letter-spacing: -0.01em;
  color: var(--text-muted);
}
.cs-card-tag.is-muted { background: none; color: var(--text-muted); -webkit-text-fill-color: currentColor; }
.cs-col.is-no .cs-list .check { color: var(--text-muted); }

/* ---------- metric block inside a section ---------- */
.cs-metrics-block { margin-top: 8px; }
.cs-metric-note {
  display: block;
  margin-top: 8px;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--text-muted);
}

/* ---------- ROI calculator ---------- */
.cs-calc {
  margin-top: clamp(36px, 5vw, 56px);
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  overflow: hidden;
}
.cs-calc-head { padding: clamp(20px, 2.6vw, 30px); border-bottom: 1px solid var(--border); }
.cs-calc-head h3 { margin: 12px 0 0; font-size: clamp(1.25rem, 2.4vw, 1.7rem); letter-spacing: -0.02em; }
.cs-calc-head p { margin: 12px 0 0; max-width: 58ch; color: var(--text-muted); font-size: 0.95rem; }
.cs-calc-body { display: grid; grid-template-columns: 1.05fr 0.95fr; }
.cs-calc-inputs { padding: clamp(20px, 2.6vw, 30px); border-right: 1px solid var(--border); }
.cs-field { margin-bottom: 26px; }
.cs-field:last-child { margin-bottom: 0; }
.cs-field-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; margin-bottom: 12px; }
.cs-field label { max-width: 36ch; font-size: 0.86rem; line-height: 1.5; color: var(--text-soft); }
.cs-field output {
  font-family: var(--font-caption);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
}
.cs-field-hint { margin: 10px 0 0; font-size: 0.85rem; line-height: 1.55; color: var(--text-muted); }
.cs-calc input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;
  background: transparent;
  cursor: pointer;
}
.cs-calc input[type="range"]::-webkit-slider-runnable-track { height: 3px; background: var(--border-strong); border-radius: 2px; }
.cs-calc input[type="range"]::-moz-range-track { height: 3px; background: var(--border-strong); border-radius: 2px; }
.cs-calc input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--primary);
  border: 3px solid var(--card);
  margin-top: -6.5px;
  box-shadow: 0 0 0 1px var(--primary);
}
.cs-calc input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--primary);
  border: 3px solid var(--card);
  box-shadow: 0 0 0 1px var(--primary);
}
.cs-calc input[type="range"]:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; }
.cs-curr { display: flex; gap: 6px; flex-wrap: wrap; }
.cs-curr button {
  font-family: var(--font-caption);
  font-size: 0.78rem;
  padding: 7px 13px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.cs-curr button:hover { color: var(--text); border-color: var(--text-muted); }
.cs-curr button[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--btn-fg); }
.cs-curr button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.cs-calc-results { padding: clamp(20px, 2.6vw, 30px); background: var(--bg-alt); }
/* the working is shown in full so the result never looks like a black box */
.cs-working {
  margin: 0 0 24px;
  padding: 0 0 20px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-caption);
  font-size: 0.8rem;
  line-height: 1.8;
  color: var(--text-muted);
}
.cs-working .row { display: flex; justify-content: space-between; gap: 14px; }
.cs-working b { font-weight: 500; color: var(--text-soft); text-align: right; }
.cs-working .row.total {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border-strong);
  color: var(--primary);
}
.cs-working .row.total b { color: var(--primary); }
.cs-res-list { margin: 0; }
.cs-res { padding: 16px 0; border-bottom: 1px solid var(--border); }
.cs-res:first-child { padding-top: 0; }
.cs-res:last-child { border-bottom: 0; padding-bottom: 0; }
.cs-res dt {
  font-family: var(--font-caption);
  font-size: 0.68rem;
  letter-spacing: -0.005em;
  color: var(--text-muted);
}
.cs-res dd {
  margin: 9px 0 0;
  font-family: var(--font-heading);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  line-height: 1;
  color: var(--text);
}
.cs-res.is-hero dd {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  color: var(--primary);
}
.cs-calc-foot {
  margin: 0;
  padding: 16px clamp(20px, 2.6vw, 30px);
  border-top: 1px solid var(--border);
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--text-muted);
}
.cs-footnote {
  max-width: 78ch;
  margin: 0 0 8px;
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--text-muted);
}
.cs-footnote strong { color: var(--text-soft); }
.cs-footnote p { margin: 0; }

@media (max-width: 820px) {
  .cs-calc-body { grid-template-columns: 1fr; }
  .cs-calc-inputs { border-right: 0; border-bottom: 1px solid var(--border); }
}

/* ---------- cookie consent banner ---------- */
.cookie-banner {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translate(-50%, 140%);
  z-index: 250;
  width: min(680px, calc(100vw - 32px));
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 22px;
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  transition: transform 0.35s var(--ease);
}
.cookie-banner.show { transform: translate(-50%, 0); }
.cookie-text {
  flex: 1;
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.cookie-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .cookie-banner { flex-direction: column; align-items: stretch; gap: 14px; }
  .cookie-actions { flex-direction: row; justify-content: center; flex-wrap: wrap; }
}

/* ---------- scroll to top ---------- */
.scroll-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 240;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--card);
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 500;
  cursor: pointer;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), border-color 0.2s ease;
}
.scroll-top.show {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.scroll-top:hover { border-color: var(--text-muted); }

/* ---------- rich text (WYSIWYG output) ---------- */
.rich-text p { margin: 0 0 0.9em; }
.rich-text p:last-child { margin-bottom: 0; }
.rich-text ul, .rich-text ol { margin: 0 0 0.9em 1.5em; }
.rich-text li { margin-bottom: 0.3em; }
.rich-text a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.rich-text a:hover { opacity: 0.85; }
.rich-text blockquote {
  border-left: 2px solid var(--border-strong);
  padding-left: 14px;
  margin: 0 0 0.9em;
  color: var(--text-soft);
}
/* Quill indent / align classes */
.rich-text .ql-indent-1 { padding-left: 2.5em; }
.rich-text .ql-indent-2 { padding-left: 5em; }
.rich-text .ql-indent-3 { padding-left: 7.5em; }
.rich-text .ql-indent-4 { padding-left: 10em; }
.rich-text .ql-indent-5 { padding-left: 12.5em; }
.rich-text .ql-indent-6 { padding-left: 15em; }
.rich-text .ql-indent-7 { padding-left: 17.5em; }
.rich-text .ql-indent-8 { padding-left: 20em; }
.rich-text li.ql-indent-1 { padding-left: 0; margin-left: 2.5em; }
.rich-text li.ql-indent-2 { padding-left: 0; margin-left: 5em; }
.rich-text li.ql-indent-3 { padding-left: 0; margin-left: 7.5em; }
.rich-text .ql-align-center { text-align: center; }
.rich-text .ql-align-right { text-align: right; }
.rich-text .ql-align-justify { text-align: justify; }

/* ---------- reveal animation ---------- */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
.js .reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; text-align: left; gap: 48px; }
  .hero-text { order: 2; }
  .hero-visual { order: 1; justify-content: center; }
  .hero-img-frame { width: min(220px, 60vw); }
  .about-grid { grid-template-columns: 1fr; gap: 48px; }
}

@media (max-width: 820px) {
  .container { padding: 0 20px; }
  .nav-cta { display: none; }
  .nav-actions .theme-toggle { display: none; }
  .hamburger { display: flex; }
  .nav-links {
    position: fixed;
    top: 64px;
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: 8px 20px 24px;
    transform: translateY(-130%);
    transition: transform 0.3s var(--ease);
    z-index: 99;
  }
  .nav-links.open { transform: translateY(0); }
  .nav-links a {
    padding: 14px 4px;
    border-bottom: 1px solid var(--border);
    font-size: 0.95rem;
  }
  .nav-mobile-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 18px;
  }
  .hero { padding: 128px 0 72px; }
  .section { padding: 72px 0; }
  .section-head { margin-bottom: 40px; }
  .contact-box { padding: 48px 24px; }
}