/* Namostee Design Studio — styles.css
   Theme mirrors WEBZNS (webzns.com): day (light) is the default for every
   visitor; night is opt-in via the header toggle, which sets
   [data-theme="dark"] on <html>. The choice is never persisted.
   Day:   paper #fff · ink #1c1b1c · accent-deep #c32b96 · accent #ff83da
   Night: base #0b0a0f · paper #131218 · ink #f4f5f9 · accent #ff83da */

:root {
  /* WEBZNS palette — DAY */
  --paper: #fff;
  --soft: #f4f5f9;
  --card: #fff;
  --ink: #1c1b1c;
  --muted: #716d82;
  --line: #dcdfe9;
  --accent: #ff83da;
  --accent-deep: #c32b96;
  --accent-soft: #f7e1f7;
  /* WEBZNS pastel tiles — DAY */
  --t-butter: #fbf8ec;
  --t-lilac: #d6d9e7;
  --t-mint: #d1f9d6;
  --t-pink: #f7e1f7;
  --t-rose: #ffc5ee;
  --t-sage: #eff5f0;
  --t-sand: #fffcf6;
  --t-sky: #d2f4ff;
  /* Derived roles */
  --bg: var(--paper);
  --panel: var(--soft);
  --panel-2: var(--soft);
  --line-strong: #bfc4d4;
  --accent-strong: var(--accent-deep); /* text-sized accent moments */
  --cta-bg: var(--accent-deep);
  --cta-ink: #fff;
  --cta-bg-hover: #a8247f;
  --stats-bg: var(--accent-deep);
  --stats-ink: #fff;
  --header-bg: rgba(255, 255, 255, 0.82);
  --header-bg-solid: rgba(255, 255, 255, 0.95);
  --menu-bg: rgba(255, 255, 255, 0.98);
  --glow: rgba(195, 43, 150, 0.20);
  --glow-soft: rgba(195, 43, 150, 0.08);
  --grid-line: rgba(28, 27, 28, 0.055);
  --accent-line: rgba(195, 43, 150, 0.55);
  --hover-bg: rgba(28, 27, 28, 0.04);
  --wordmark-faint: rgba(28, 27, 28, 0.09);
  /* Device mock-ups keep a constant dark UI in both themes */
  --mock-bg: #0d0d12;
  --mock-bar: #17171e;
  --mock-tile: #1c1c24;
  --mock-line: rgba(245, 241, 232, 0.12);
  --mock-ink: #f5f1e8;
  --mock-muted: #a7a29a;
  --mock-dot: #3a3a44;
  --mock-notch: #2e2e38;
  --mock-accent: #ff83da;
  --mock-accent-ink: #1c1b1c;
  --mock-accent-soft: rgba(255, 131, 218, 0.18);
  --mock-accent-line: rgba(255, 131, 218, 0.5);
  --mock-ok-line: rgba(245, 241, 232, 0.35);
  --radius: 18px;
  --font-display: "Archivo", "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --header-h: 76px;
}

[data-theme="dark"] {
  /* WEBZNS palette — NIGHT */
  --paper: #131218;
  --soft: #1a1921;
  --card: #1e1d28;
  --ink: #f4f5f9;
  --muted: #a3a0b4;
  --line: #34334a;
  --accent: #ff83da;
  --accent-deep: #ff9ede;
  --accent-soft: #40203c;
  /* WEBZNS pastel tiles — NIGHT */
  --t-butter: #332f1a;
  --t-lilac: #2b2a3d;
  --t-mint: #1c2e26;
  --t-pink: #3a2438;
  --t-rose: #382136;
  --t-sage: #1f2f24;
  --t-sand: #26252e;
  --t-sky: #1d2f3a;
  /* Derived roles */
  --bg: #0b0a0f;
  --panel: var(--soft);
  --panel-2: var(--soft);
  --line-strong: #4c4a68;
  --accent-strong: var(--accent);
  --cta-bg: var(--accent);
  --cta-ink: #1c1b1c;
  --cta-bg-hover: #ff9ede;
  --stats-bg: var(--accent);
  --stats-ink: #1c1b1c;
  --header-bg: rgba(11, 10, 15, 0.82);
  --header-bg-solid: rgba(11, 10, 15, 0.95);
  --menu-bg: rgba(11, 10, 15, 0.98);
  --glow: rgba(255, 131, 218, 0.16);
  --glow-soft: rgba(255, 131, 218, 0.07);
  --grid-line: rgba(244, 245, 249, 0.05);
  --accent-line: rgba(255, 131, 218, 0.55);
  --hover-bg: rgba(244, 245, 249, 0.04);
  --wordmark-faint: rgba(244, 245, 249, 0.09);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color 0.35s ease, color 0.35s ease;
}

::selection { background: var(--accent); color: #1c1b1c; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-stretch: 115%;
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 3px;
  border-radius: 4px;
}

.container {
  width: min(1240px, calc(100% - 40px));
  margin-inline: auto;
}
.container--narrow { width: min(880px, calc(100% - 40px)); }

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 200;
  background: var(--cta-bg);
  color: var(--cta-ink);
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 999px;
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 12px; }

/* ---------- Buttons & kickers ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 12px 24px;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--accent { background: var(--cta-bg); color: var(--cta-ink); }
.btn--accent:hover { background: var(--cta-bg-hover); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--small { padding: 9px 18px; font-size: 0.88rem; }
.btn--large { padding: 16px 30px; font-size: 1.02rem; }

.kicker {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin-bottom: 18px;
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--header-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.site-header.is-scrolled {
  background: var(--header-bg-solid);
  border-bottom-color: var(--line);
}
.header-inner {
  width: min(1240px, calc(100% - 40px));
  margin-inline: auto;
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 28px;
  transition: min-height 0.25s ease;
}
.site-header.is-scrolled .header-inner { min-height: 58px; }

.wordmark {
  font-family: var(--font-display);
  font-stretch: 120%;
  font-weight: 900;
  font-size: 1.3rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
}
.wordmark sup { font-size: 0.55em; color: var(--accent-strong); }

.site-nav {
  display: flex;
  gap: 30px;
  margin-left: auto;
}
.site-nav a {
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--muted);
  transition: color 0.15s ease;
}
.site-nav a:hover { color: var(--ink); }
.header-cta { margin-left: 4px; }

/* Day/night toggle — icon shows the theme you'll switch to */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.35s ease, color 0.35s ease;
}
.theme-toggle:hover { border-color: var(--ink); }
.theme-toggle svg { width: 20px; height: 20px; display: block; }
.theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

.theme-toggle--menu {
  width: 100%;
  height: auto;
  justify-content: flex-start;
  gap: 12px;
  margin-top: 10px;
  padding: 12px 4px;
  border: 0;
  border-radius: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
}
.theme-toggle--menu:hover { border-color: transparent; }

.menu-toggle {
  display: none;
  margin-left: auto;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  padding: 12px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}
.menu-toggle span {
  display: block;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  display: none;
  border-top: 1px solid var(--line);
  padding: 14px 20px 22px;
  flex-direction: column;
  gap: 4px;
  background: var(--menu-bg);
  transition: background-color 0.35s ease;
}
.mobile-menu a {
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  padding: 10px 4px;
}
.mobile-menu .btn { margin-top: 10px; font-size: 1rem; }
.mobile-menu.is-open { display: flex; }

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

.hero {
  position: relative;
  padding: clamp(72px, 11vw, 148px) 0 clamp(64px, 8vw, 104px);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(640px 340px at 85% -60px, var(--glow), transparent 65%),
    radial-gradient(520px 300px at -80px 70%, var(--glow-soft), transparent 60%);
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, black 30%, transparent 75%);
  pointer-events: none;
}
.hero-inner { position: relative; z-index: 1; }

.hero-title {
  font-weight: 900;
  font-size: clamp(3.1rem, 9.2vw, 8.2rem);
  text-transform: none;
  margin-bottom: 28px;
}
.hero-line { display: block; }
.hero-line--accent {
  color: var(--accent-strong);
  font-size: 0.62em;
  letter-spacing: -0.01em;
  margin-top: 0.12em;
}

.hero-sub {
  max-width: 620px;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--muted);
  margin-bottom: 36px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 48px; }

.proof-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 0;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 500;
}
.proof-row li { display: inline-flex; align-items: center; }
.proof-row li + li::before {
  content: "•";
  color: var(--accent-strong);
  margin: 0 14px;
  font-weight: 700;
}

/* ---------- Marquee ---------- */

.marquee {
  border-block: 1px solid var(--line);
  background: var(--panel);
  overflow: hidden;
  padding: 16px 0;
  transition: background-color 0.35s ease;
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 30s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-set {
  display: flex;
  align-items: center;
  gap: 28px;
  padding-right: 28px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.marquee-star { color: var(--accent-strong); font-size: 0.95rem; }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

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

.section { padding: clamp(76px, 9vw, 128px) 0; }
.section--panel { background: var(--panel); transition: background-color 0.35s ease; }

.section-title {
  font-weight: 900;
  font-size: clamp(2.4rem, 5.6vw, 4.4rem);
  margin-bottom: 16px;
}
.section-intro {
  max-width: 640px;
  color: var(--muted);
  font-size: 1.05rem;
  margin-bottom: 52px;
}

/* ---------- Work ---------- */

.work-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
}
.work-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.25s ease, border-color 0.25s ease, background-color 0.35s ease;
}
.work-card:hover {
  transform: translateY(-6px);
  border-color: var(--accent-line);
}

.card-art {
  position: relative;
  aspect-ratio: 16 / 9.5;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.35s ease;
}
.card-mark {
  position: absolute;
  right: 18px;
  bottom: 8px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 3.4rem;
  line-height: 1;
  color: var(--ink);
  opacity: 0.13;
  letter-spacing: -0.02em;
}

/* Work cards wear the WEBZNS pastel tiles — day and night pairs */
.art--webzns { background: var(--t-sky); }
.art--hosplus { background: var(--t-lilac); }
.art--crm { background: var(--t-pink); }
.art--tols { background: var(--t-rose); }
.art--nexus { background: var(--t-mint); }
.art--servicebid { background: var(--t-butter); }
.card-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.nx-stop-a { stop-color: var(--accent-deep); }
.nx-stop-b { stop-color: var(--ink); }
.nx-nodes { fill: var(--ink); }

.card-art-type {
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 120%;
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  line-height: 0.98;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0.01em;
  transform: rotate(-4deg);
}

/* Motion variables (theme-aware shadows) */
:root {
  --card-shadow: 0 24px 48px rgba(28, 27, 28, 0.14);
  --cta-shadow: 0 10px 24px rgba(195, 43, 150, 0.32);
}
[data-theme="dark"] {
  --card-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);
  --cta-shadow: 0 10px 24px rgba(255, 131, 218, 0.30);
}

/* CSS device mock-ups inside cards — constant dark UI */
.mock {
  position: relative;
  z-index: 1;
  background: var(--mock-bg);
  border: 1px solid var(--mock-line);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45);
}
.mock--browser {
  width: 72%;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.35s ease;
}
.work-card:hover .mock--browser,
.work-card:hover .mock--phone { transform: translateY(-6px) scale(1.02); }
.mock-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 10px;
  background: var(--mock-bar);
  border-bottom: 1px solid var(--mock-line);
}
.mock-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--mock-dot); }
.mock-bar i:first-child { background: var(--mock-accent); }
.mock-bar em {
  font-style: normal;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mock-muted);
  margin-left: 6px;
}
.mock-screen { padding: 14px; display: grid; gap: 8px; }
.mock-screen:not(.mock-screen--rooms):not(.mock-screen--pipeline) { grid-template-columns: 1fr 1fr; }
.mock-tile {
  background: var(--mock-tile);
  border: 1px solid var(--mock-line);
  border-radius: 8px;
  color: var(--mock-muted);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 12px 10px;
}
.mock-tile--accent { background: var(--mock-accent); color: var(--mock-accent-ink); border-color: transparent; }
.mock-tile--wide { grid-column: 1 / -1; }

.mock-screen--rooms { grid-template-columns: repeat(3, 1fr); }
.mock-room {
  background: var(--mock-tile);
  border: 1px solid var(--mock-line);
  border-radius: 8px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.85rem;
  padding: 10px 4px;
  color: var(--mock-muted);
}
.mock-room--in { background: var(--mock-accent-soft); color: var(--mock-ink); border-color: var(--mock-accent-line); }

.mock-screen--pipeline { grid-template-columns: repeat(3, 1fr); align-items: start; }
.mock-col { display: grid; gap: 6px; }
.mock-col strong {
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mock-muted);
}
.mock-col span {
  display: block;
  height: 22px;
  border-radius: 6px;
  background: var(--mock-tile);
  border: 1px solid var(--mock-line);
}
.mock-col--accent span { background: var(--mock-accent-soft); border-color: var(--mock-accent-line); }

.mock--phone {
  width: 34%;
  min-width: 128px;
  border-radius: 22px;
  padding: 20px 12px 14px;
  display: grid;
  gap: 8px;
  transition: transform 0.35s ease;
}
.mock-phone-notch {
  position: absolute;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 42px;
  height: 5px;
  border-radius: 3px;
  background: var(--mock-notch);
}
.mock-bid {
  background: var(--mock-tile);
  border: 1px solid var(--mock-line);
  border-radius: 9px;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mock-muted);
  padding: 9px 10px;
}
.mock-bid--accent { background: var(--mock-accent); color: var(--mock-accent-ink); border-color: transparent; }
.mock-bid--ok { color: var(--mock-ink); border-color: var(--mock-ok-line); }

.card-body { padding: 26px 26px 28px; }
.card-body h3 {
  font-size: 1.55rem;
  font-weight: 900;
  letter-spacing: 0.01em;
  margin-bottom: 8px;
}
.card-body p { color: var(--muted); margin-bottom: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.chips li {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 5px 12px;
}
.card-link {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--accent-strong);
  text-decoration: none;
}
.card-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Clarity strip (what we do) ---------- */

.clarity-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-bottom: 40px;
}
.clarity-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 26px;
  transition: transform 0.25s ease, border-color 0.25s ease, background-color 0.35s ease;
}
.clarity-card:hover { transform: translateY(-5px); border-color: var(--accent-line); }
.tile-sky { background: var(--t-sky); }
.tile-rose { background: var(--t-rose); }
.tile-mint { background: var(--t-mint); }
.clarity-card h3 {
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}
.clarity-card p { color: var(--ink); font-size: 1.02rem; }
.clarity-line {
  max-width: 72ch;
  font-size: clamp(1.1rem, 1.9vw, 1.3rem);
  font-weight: 600;
  line-height: 1.5;
}
.clarity-line strong { color: var(--accent-strong); }

/* ---------- Accordion (services + FAQ) ---------- */

.accordion { border-top: 1px solid var(--line); }
.accordion-item { border-bottom: 1px solid var(--line); }
.accordion-heading { margin: 0; }
.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 18px;
  background: none;
  border: 0;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  padding: 24px 0;
  font-family: var(--font-display);
  transition: background 0.15s ease;
}
.accordion-trigger:hover { background: var(--hover-bg); }
.accordion-num {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--accent-strong);
  letter-spacing: 0.06em;
  min-width: 2ch;
}
.accordion-name {
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  font-weight: 800;
  line-height: 1.15;
  flex: 1;
  min-width: 0;
}
.accordion-icon {
  position: relative;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  transition: transform 0.3s ease, background 0.2s ease, border-color 0.2s ease;
}
.accordion-icon::before,
.accordion-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--ink);
  border-radius: 2px;
}
.accordion-icon::before { width: 12px; height: 2px; transform: translate(-50%, -50%); }
.accordion-icon::after { width: 2px; height: 12px; transform: translate(-50%, -50%); }
.accordion-item.is-open .accordion-icon {
  transform: rotate(45deg);
  background: var(--cta-bg);
  border-color: var(--cta-bg);
}
.accordion-item.is-open .accordion-icon::before,
.accordion-item.is-open .accordion-icon::after { background: var(--cta-ink); }

.accordion-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.38s ease;
}
.accordion-item.is-open .accordion-panel { grid-template-rows: 1fr; }
.accordion-panel-inner {
  overflow: hidden;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 12px 48px;
  padding: 0;
}
.accordion-item.is-open .accordion-panel-inner { padding-bottom: 28px; }
.accordion-panel-inner p { color: var(--muted); max-width: 52ch; }
.accordion-panel-inner p strong { color: var(--ink); }
.accordion-panel-inner ul { display: grid; gap: 8px; align-content: start; }
.accordion-panel-inner ul li {
  position: relative;
  padding-left: 22px;
  color: var(--ink);
  font-size: 0.97rem;
}
.accordion-panel-inner ul li::before {
  content: "✺";
  position: absolute;
  left: 0;
  color: var(--accent-strong);
  font-size: 0.8rem;
  top: 2px;
}
.accordion-panel-inner--single { grid-template-columns: minmax(0, 1fr); }
.accordion-panel-inner--single p { max-width: 68ch; }

/* ---------- Stats ---------- */

.stats {
  background: var(--stats-bg);
  color: var(--stats-ink);
  transition: background-color 0.35s ease, color 0.35s ease;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  padding-top: 52px;
  padding-bottom: 52px;
}
.stat strong {
  display: block;
  font-family: var(--font-display);
  font-stretch: 120%;
  font-weight: 900;
  font-size: clamp(2.6rem, 5vw, 4rem);
  line-height: 1;
  margin-bottom: 8px;
}
.stat span { font-weight: 600; font-size: 0.98rem; line-height: 1.4; display: block; }

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

.process-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  counter-reset: step;
}
.process-step {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 24px;
  transition: transform 0.25s ease, border-color 0.25s ease, background-color 0.35s ease;
}
.process-step:hover { transform: translateY(-5px); border-color: var(--accent-line); }
.process-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1rem;
  color: var(--accent-strong);
  letter-spacing: 0.08em;
  margin-bottom: 40px;
}
.process-step h3 { font-size: 1.35rem; font-weight: 800; margin-bottom: 10px; }
.process-step p { color: var(--muted); font-size: 0.96rem; }

/* ---------- Studio ---------- */

.studio-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 84px);
  align-items: start;
}
.studio-story p { color: var(--muted); margin-bottom: 18px; max-width: 56ch; }
.studio-story p strong { color: var(--ink); }
.pegasus {
  width: 200px;
  max-width: 60%;
  margin: 6px 0 22px;
  animation: floatY 6s ease-in-out infinite;
}
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.why-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(26px, 3.4vw, 40px);
  transition: background-color 0.35s ease;
}
.why-card h3 { font-size: 1.5rem; font-weight: 900; margin-bottom: 24px; }
.why-list { display: grid; gap: 22px; }
.why-list li {
  position: relative;
  padding-left: 26px;
}
.why-list li::before {
  content: "✺";
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--accent-strong);
  font-size: 0.9rem;
}
.why-list strong { display: block; font-family: var(--font-display); font-size: 1.05rem; margin-bottom: 3px; }
.why-list span { color: var(--muted); font-size: 0.96rem; }

/* ---------- Guarantee band ---------- */

.guarantee { padding-top: 0; }
.guarantee-card {
  display: flex;
  gap: 26px;
  align-items: flex-start;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius);
  padding: clamp(26px, 3.6vw, 40px);
  transition: background-color 0.35s ease;
}
.guarantee-icon {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  color: var(--accent-strong);
}
.guarantee-card h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  font-weight: 900;
  margin-bottom: 12px;
}
.guarantee-card p { max-width: 68ch; margin-bottom: 12px; }
.guarantee-fine { color: var(--muted); font-size: 0.9rem; margin-bottom: 0 !important; }
@media (max-width: 620px) {
  .guarantee-card { flex-direction: column; gap: 18px; }
}

/* ---------- Bonus band ---------- */

.bonus {
  background: var(--accent-soft);
  padding: clamp(64px, 8vw, 96px) 0;
  transition: background-color 0.35s ease;
}
.bonus-title {
  font-weight: 900;
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  margin-bottom: 16px;
  max-width: 18ch;
}
.bonus p {
  color: var(--muted);
  font-size: 1.08rem;
  max-width: 58ch;
  margin-bottom: 26px;
}
.bonus-link {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--accent-strong);
  text-decoration: none;
}
.bonus-link:hover { text-decoration: underline; text-underline-offset: 4px; }

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

.contact { background: var(--panel); border-top: 1px solid var(--line); transition: background-color 0.35s ease; }
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(36px, 6vw, 80px);
  align-items: start;
}
.contact-title {
  font-weight: 900;
  font-size: clamp(2.8rem, 6.4vw, 5.2rem);
  margin-bottom: 18px;
}
.contact-copy > p:not(.kicker) { color: var(--muted); max-width: 44ch; margin-bottom: 34px; }
.contact-offer {
  font-weight: 600;
  color: var(--ink) !important;
  max-width: 44ch;
}
.contact-facts { display: grid; gap: 16px; }
.contact-facts li { display: grid; gap: 2px; }
.contact-facts span {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-strong);
}
.contact-facts a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  text-decoration: none;
}
.contact-facts a:hover { text-decoration: underline; text-underline-offset: 4px; }
.contact-facts li {
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
}

.contact-form {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(24px, 3.4vw, 40px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  transition: background-color 0.35s ease;
}
.field { display: grid; gap: 8px; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 0.88rem; font-weight: 600; }
.field input,
.field select,
.field textarea {
  width: 100%;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  font: inherit;
  font-size: 0.97rem;
  padding: 12px 14px;
  transition: border-color 0.15s ease, background-color 0.35s ease;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--accent-strong);
  outline: none;
}
.field select option { background: var(--card); }
.form-submit { width: 100%; }
.form-note { color: var(--muted); font-size: 0.92rem; text-align: center; }
.form-note a { color: var(--accent-strong); font-weight: 600; text-decoration: none; }
.form-note a:hover { text-decoration: underline; text-underline-offset: 3px; }

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

.site-footer { border-top: 1px solid var(--line); padding: 64px 0 36px; overflow: hidden; }
.footer-wordmark {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 900;
  font-size: clamp(3.6rem, 13.5vw, 12rem);
  line-height: 0.85;
  letter-spacing: 0.01em;
  color: var(--wordmark-faint);
  white-space: nowrap;
  margin-bottom: 44px;
  user-select: none;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 1fr 0.6fr;
  gap: 28px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line);
}
.footer-col { display: grid; gap: 10px; align-content: start; }
.footer-col a { text-decoration: none; color: var(--muted); font-size: 0.97rem; width: fit-content; }
.footer-col a:hover { color: var(--ink); }
.footer-col p { color: var(--muted); font-size: 0.97rem; }
.footer-tag { color: var(--ink) !important; font-weight: 600; max-width: 30ch; }
.footer-legal { color: var(--muted); font-size: 0.88rem; padding-top: 24px; }

/* ---------- 404 ---------- */

.not-found { padding: clamp(80px, 12vw, 150px) 0; text-align: left; }
.not-found h1 {
  font-weight: 900;
  font-size: clamp(2.8rem, 8vw, 6rem);
  margin-bottom: 18px;
}
.not-found p { color: var(--muted); max-width: 52ch; margin-bottom: 32px; }
.not-found .kicker { margin-bottom: 22px; }
.not-found .hero-actions { margin-bottom: 0; }

/* ---------- Hero entrance choreography ---------- */

.hero-anim {
  opacity: 0;
  animation: heroIn 0.8s cubic-bezier(0.22, 0.61, 0.21, 1) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes heroIn {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-offer {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 10px 18px;
  margin-bottom: 36px;
}
.hero-offer svg { width: 18px; height: 18px; flex: 0 0 auto; }

/* ---------- Button / link motion ---------- */

.btn--accent:hover { box-shadow: var(--cta-shadow); }
.btn:active { transform: translateY(0) scale(0.97); }
.site-nav a { position: relative; }
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 2px;
  width: 0;
  background: var(--accent-strong);
  transition: width 0.25s ease;
}
.site-nav a:hover::after { width: 100%; }

.work-card:hover { box-shadow: var(--card-shadow); }
.work-card:active { transform: scale(0.985); }
.clarity-card:active { transform: scale(0.985); }
.process-step:active { transform: scale(0.985); }

/* ---------- Scroll reveal ---------- */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease var(--rd, 0s), transform 0.7s ease var(--rd, 0s);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  .process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clarity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .site-nav, .header-cta { display: none; }
  .menu-toggle { display: flex; margin-left: 10px; }
  .theme-toggle { margin-left: auto; }
  .mobile-menu .theme-toggle { margin-left: 0; }
  .work-grid { grid-template-columns: minmax(0, 1fr); }
  .studio-grid { grid-template-columns: minmax(0, 1fr); }
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }

  /* Mobile card entrance: slide in sideways, alternating left/right */
  .reveal.reveal--side { transform: translateX(-40px); }
  .reveal.reveal--side:nth-child(even) { transform: translateX(40px); }
  .reveal.reveal--side.is-visible { transform: none; }

  /* Mobile-only stacked deck: cards stick and the next slides over */
  .work-grid { display: flex; flex-direction: column; }
  .work-card { position: sticky; }
  .work-card:nth-child(1) { top: 88px; z-index: 1; }
  .work-card:nth-child(2) { top: 100px; z-index: 2; }
  .work-card:nth-child(3) { top: 112px; z-index: 3; }
  .work-card:nth-child(4) { top: 124px; z-index: 4; }
  .work-card:nth-child(5) { top: 136px; z-index: 5; }
  .work-card:nth-child(6) { top: 148px; z-index: 6; }

  .clarity-grid { display: flex; flex-direction: column; }
  .clarity-card { position: sticky; }
  .clarity-card:nth-child(1) { top: 88px; z-index: 1; }
  .clarity-card:nth-child(2) { top: 100px; z-index: 2; }
  .clarity-card:nth-child(3) { top: 112px; z-index: 3; }

  .process-grid { display: flex; flex-direction: column; }
  .process-step { position: sticky; }
  .process-step:nth-child(1) { top: 88px; z-index: 1; }
  .process-step:nth-child(2) { top: 100px; z-index: 2; }
  .process-step:nth-child(3) { top: 112px; z-index: 3; }
  .process-step:nth-child(4) { top: 124px; z-index: 4; }
}

@media (max-width: 620px) {
  .container, .container--narrow, .header-inner { width: calc(100% - 32px); }
  .hero { padding-top: 56px; }
  .hero-actions .btn { flex: 1 1 100%; }
  .proof-row { flex-direction: column; gap: 6px; }
  .proof-row li + li::before { display: none; }
  .accordion-trigger { gap: 12px; padding: 20px 0; }
  .accordion-panel-inner { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .accordion-item.is-open .accordion-panel-inner { padding-bottom: 24px; }
  .process-grid { grid-template-columns: minmax(0, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; padding-top: 40px; padding-bottom: 40px; }
  .clarity-grid { grid-template-columns: minmax(0, 1fr); }
  .contact-form { grid-template-columns: minmax(0, 1fr); }
  .card-body { padding: 22px 20px 24px; }
  .mock--browser { width: 84%; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Covered cards in the mobile stack scale down slightly */
.work-card.is-covered,
.process-step.is-covered,
.clarity-card.is-covered { transform: scale(0.96); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee-track { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-anim { opacity: 1; animation: none; }
  .pegasus { animation: none; }
  .work-card, .process-step, .btn, .mock--browser, .mock--phone, .clarity-card { transition: none; }
  .work-card.is-covered,
  .process-step.is-covered,
  .clarity-card.is-covered { transform: none; }
}

/* ---------- Inner pages ---------- */

.page-hero { padding: clamp(72px, 9vw, 118px) 0 clamp(30px, 4vw, 48px); }
.page-title {
  font-weight: 900;
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  line-height: 1.02;
  margin-bottom: 16px;
}
.page-intro { color: var(--muted); font-size: 1.12rem; max-width: 62ch; }
.page-intro strong { color: var(--ink); }

.section--tight { padding-top: clamp(20px, 3vw, 36px); }
.section-more { margin-top: 30px; }

/* Link rows (homepage teasers) */
.link-rows { border-top: 1px solid var(--line); margin-top: 8px; }
.link-row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 6px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.link-row:hover { background: var(--hover-bg); }
.lr-name { font-family: var(--font-display); font-weight: 800; font-size: 1.12rem; }
.lr-line { color: var(--muted); margin-left: auto; text-align: right; }
.lr-arrow { color: var(--accent-strong); font-size: 1.25rem; line-height: 1; margin-left: auto; flex: 0 0 auto; }
.lr-line + .lr-arrow { margin-left: 18px; }
@media (max-width: 620px) {
  .link-row { flex-wrap: wrap; row-gap: 4px; }
  .lr-line { margin-left: 0; text-align: left; flex: 1 1 100%; order: 3; }
  .lr-line + .lr-arrow { margin-left: auto; }
}

/* CTA band (inner pages + homepage contact band) */
.cta-band {
  background: var(--panel);
  border-top: 1px solid var(--line);
  padding: clamp(64px, 8vw, 96px) 0;
  transition: background-color 0.35s ease;
}
.cta-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
.contact-cta-line { color: var(--muted); font-size: 1.08rem; max-width: 52ch; }

/* Compact guarantee strip (services page) */
.mini-guarantee { padding-top: 0; }
.mini-guarantee .guarantee-card { align-items: center; }
.mini-guarantee .guarantee-card p { margin-bottom: 0; max-width: 74ch; }
.mini-guarantee .guarantee-card a {
  color: var(--accent-strong);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.mini-guarantee .guarantee-card a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Process teaser: names only */
.process-step--mini .process-num { margin-bottom: 16px; }
.process-step--mini h3 { margin-bottom: 0; }

/* ---------- Hero visual panels (illustrations) ---------- */
/* The light pastel illustrations sit in a soft themed mat so they read
   intentionally in both day and night themes. */
.hero-visual {
  margin: clamp(30px, 4.5vw, 48px) 0 0;
  padding: clamp(8px, 1.2vw, 14px);
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--card-shadow);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}
.hero-visual img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}
.hero-visual--top {
  margin-top: 0;
  margin-bottom: clamp(36px, 5vw, 56px);
}

/* ---------- Footer legal links (404 page) ---------- */
.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-bottom: 6px;
}
.footer-legal-links a {
  color: var(--muted);
  font-size: 0.92rem;
  text-decoration: none;
  width: fit-content;
}
.footer-legal-links a:hover { color: var(--ink); }

/* ---------- Legal pages ---------- */
.legal { max-width: 46rem; }
.legal h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.35rem, 2.4vw, 1.6rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 2.5rem 0 0.75rem;
}
.legal h2:first-child { margin-top: 0; }
.legal p { line-height: 1.8; margin-bottom: 1rem; }
.legal ul { margin: 0 0 1rem; padding-left: 1.25rem; }
.legal li { line-height: 1.75; margin-bottom: 0.5rem; }
.legal li:last-child { margin-bottom: 0; }
.legal a {
  color: var(--accent-strong);
  font-weight: 600;
  text-decoration: none;
}
.legal a:hover { text-decoration: underline; text-underline-offset: 3px; }
.legal strong { color: var(--ink); }
.legal-fine {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.7;
  margin-top: 2rem;
}

/* ---------- Services dropdown (desktop nav) + mobile group ---------- */

.nav-item { position: relative; display: flex; align-items: center; }
.nav-item > a { display: inline-flex; align-items: center; gap: 5px; }
.nav-caret {
  width: 14px; height: 14px; flex: 0 0 auto;
  transition: transform 0.2s ease;
}
.nav-item--services:hover .nav-caret,
.nav-item--services:focus-within .nav-caret,
.nav-item--services.is-open .nav-caret { transform: rotate(180deg); }

.services-panel {
  position: absolute;
  top: calc(100% + 18px);
  left: 50%;
  transform: translate(-50%, 8px);
  z-index: 120;
  width: 520px;
  max-width: calc(100vw - 32px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(6, auto);
  grid-auto-flow: column;
  gap: 2px 10px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--card-shadow);
  padding: 14px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease,
    background-color 0.35s ease, border-color 0.35s ease;
}
.services-panel::before {
  content: "";
  position: absolute;
  top: -18px;
  left: 0;
  right: 0;
  height: 18px;
}
.nav-item--services:hover .services-panel,
.nav-item--services:focus-within .services-panel,
.nav-item--services.is-open .services-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.services-panel a {
  display: block;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 0.93rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.services-panel a::after { display: none; }
.services-panel a:hover,
.services-panel a:focus-visible { background: var(--accent-soft); }

/* Current page in the desktop nav */
.site-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.site-nav a[aria-current="page"]::after { width: 100%; }

/* Mobile menu: expandable Services group */
.mobile-group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  padding: 10px 4px;
}
.mobile-group-caret { width: 18px; height: 18px; flex: 0 0 auto; transition: transform 0.2s ease; }
.mobile-group.is-open .mobile-group-caret { transform: rotate(180deg); }
.mobile-group-panel { display: none; flex-direction: column; padding: 0 0 10px 18px; }
.mobile-group.is-open .mobile-group-panel { display: flex; }
.mobile-group-panel a {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--muted);
  padding: 8px 4px;
}
.mobile-group-panel a:hover { color: var(--ink); }

/* ---------- Services page: clarity sections ---------- */

.tile-butter { background: var(--t-butter); }
.tile-lilac { background: var(--t-lilac); }
.tile-pink { background: var(--t-pink); }
.tile-sage { background: var(--t-sage); }
.tile-sand { background: var(--t-sand); }

.svc-list { border-top: 1px solid var(--line); }
.svc {
  padding: clamp(32px, 4.5vw, 48px) 0;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 20px;
}
.svc-head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.svc-badge {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1rem;
  color: var(--ink);
  transition: background-color 0.35s ease;
}
.svc-title { font-weight: 900; font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
.svc-offer {
  font-size: clamp(1.08rem, 1.8vw, 1.28rem);
  font-weight: 600;
  line-height: 1.5;
  max-width: 72ch;
  margin-bottom: 24px;
}
.svc-offer strong { color: var(--accent-strong); }
.svc-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 44px;
  margin-bottom: 22px;
}
.svc-label {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin-bottom: 8px;
}
.svc-block p { color: var(--muted); max-width: 56ch; }
.svc-proof {
  display: flex;
  gap: 12px;
  align-items: baseline;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px 18px;
  font-size: 0.96rem;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}
.svc-proof-label {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-strong);
  padding-top: 2px;
}
.svc-proof a { color: var(--accent-strong); font-weight: 600; text-decoration: none; }
.svc-proof a:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 760px) {
  .svc-cols { grid-template-columns: minmax(0, 1fr); }
  .svc-proof { flex-direction: column; gap: 4px; }
}

/* ---------- Alignment & spacing rhythm (one shared grid) ---------- */
/* Every band now breathes on one tighter scale; adjacent sections no
   longer double up their padding into dead air. */
.section { padding: clamp(54px, 6.5vw, 88px) 0; }
.section--tight {
  padding-top: clamp(16px, 2.5vw, 28px);
  padding-bottom: clamp(40px, 5vw, 60px);
}
.section-intro { margin-bottom: 40px; }
.page-hero { padding-bottom: clamp(24px, 3vw, 36px); }
.cta-band { padding: clamp(48px, 6vw, 72px) 0; }
.bonus { padding: clamp(48px, 6vw, 72px) 0; }
.stats-grid { padding-top: 44px; padding-bottom: 44px; }

/* Guarantee band flows straight into Selected Work on the homepage */
.section.guarantee { padding-bottom: clamp(20px, 3vw, 36px); }
.guarantee + .section { padding-top: clamp(20px, 3vw, 36px); }

/* CTA bands: content centered and filling the band — no dead right half */
.cta-band .container { text-align: center; }
.cta-band .section-intro { margin-inline: auto; }
.cta-band .cta-actions { justify-content: center; }

/* Homepage work teaser: never an orphan cell.
   Wide: 3 across. In-between: two across + the third as a full-width
   horizontal feature card. Phone: the existing stacked deck. */
@media (min-width: 1201px) {
  .work-grid--teaser { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 901px) and (max-width: 1200px) {
  .work-grid--teaser .work-card:last-child {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
  }
  .work-grid--teaser .work-card:last-child .card-art {
    aspect-ratio: auto;
    height: 100%;
  }
  .work-grid--teaser .work-card:last-child .card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* About: in the in-between band the studio grid goes full-width stacked
   (no dead column); on desktop the story centers beside the why-card,
   which stretches to the shared row height. */
.studio-grid { align-items: stretch; }
.studio-story { align-self: center; }
.why-card { height: 100%; }
@media (max-width: 1100px) {
  .studio-grid { grid-template-columns: minmax(0, 1fr); }
  .studio-story { align-self: auto; }
  .studio-story p { max-width: 72ch; }
}

/* ---------- Floating pill header ---------- */
:root {
  --pill-bg: #16151c;
  --pill-ink: #f4f5f9;
  --pill-muted: rgba(244, 245, 249, 0.68);
  --pill-border: rgba(22, 21, 28, 0.5);
  --pill-shadow: 0 18px 40px rgba(11, 10, 15, 0.28);
}
[data-theme="dark"] { --pill-border: rgba(244, 245, 249, 0.16); }

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  border-bottom: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;
}
.site-header.is-scrolled {
  background: transparent;
  border-bottom-color: transparent;
}
.header-inner {
  pointer-events: auto;
  margin-top: 14px;
  min-height: 64px;
  padding: 0 10px 0 24px;
  gap: 22px;
  background: var(--pill-bg);
  border: 1px solid var(--pill-border);
  border-radius: 999px;
  box-shadow: var(--pill-shadow);
  position: relative;
}
.site-header.is-scrolled .header-inner {
  min-height: 56px;
  box-shadow: 0 14px 34px rgba(11, 10, 15, 0.36);
}
.wordmark { color: var(--pill-ink); }
.site-nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin-left: 0;
  gap: 24px;
}
.site-nav a { color: var(--pill-muted); }
.site-nav a:hover { color: var(--pill-ink); }
.site-nav a::after { background: var(--accent); }
.site-nav a[aria-current="page"] { color: #fff; }
.services-panel { top: calc(100% + 26px); }
.services-panel::before { top: -26px; height: 26px; }
.site-nav .services-panel a { color: var(--ink); }
.site-nav .services-panel a:hover,
.site-nav .services-panel a:focus-visible { color: var(--ink); background: var(--accent-soft); }
.header-cta { order: 4; margin-left: 0; }
.theme-toggle {
  order: 3;
  margin-left: auto;
  border-color: rgba(244, 245, 249, 0.28);
  background: rgba(244, 245, 249, 0.06);
  color: var(--pill-ink);
}
.theme-toggle:hover { border-color: rgba(244, 245, 249, 0.65); }
.menu-toggle { order: 5; border-color: rgba(244, 245, 249, 0.28); }
.menu-toggle span { background: var(--pill-ink); }

.mobile-menu {
  pointer-events: auto;
  width: min(1240px, calc(100% - 40px));
  margin: 10px auto 0;
  background: var(--pill-bg);
  border: 1px solid var(--pill-border);
  border-radius: 24px;
  box-shadow: var(--pill-shadow);
  padding: 16px 20px 20px;
}
.mobile-menu a { color: var(--pill-ink); }
.mobile-group-toggle { color: var(--pill-ink); }
.mobile-group-panel a { color: var(--pill-muted); }
.mobile-group-panel a:hover { color: var(--pill-ink); }
.theme-toggle--menu {
  margin-left: 0;
  background: transparent;
  color: var(--pill-ink);
}
@media (max-width: 900px) {
  .theme-toggle { margin-left: auto; }
  .mobile-menu .theme-toggle { margin-left: 0; }
}
@media (max-width: 620px) {
  .mobile-menu { width: calc(100% - 32px); }
  .header-inner { padding-left: 18px; margin-top: 10px; }
}

/* Clearance for the floating pill + anchor offset */
html { scroll-padding-top: 122px; }
.svc { scroll-margin-top: 108px; }
.page-hero { padding-top: calc(88px + clamp(40px, 5.5vw, 64px)); }
.not-found { padding-top: calc(88px + clamp(48px, 8vw, 96px)); }
main > .contact:first-child { padding-top: calc(88px + clamp(36px, 5vw, 56px)); }

/* ---------- Homepage hero: full-bleed color band ---------- */
.hero {
  padding: calc(96px + clamp(44px, 6vw, 76px)) 0 clamp(64px, 8vw, 104px);
  text-align: center;
  background:
    radial-gradient(720px 420px at 88% -40px, rgba(255, 255, 255, 0.55), transparent 60%),
    radial-gradient(560px 380px at 6% 108%, rgba(195, 43, 150, 0.30), transparent 62%),
    linear-gradient(158deg, #ffe9f8 0%, #ffc9ee 42%, #ff9ede 74%, #ff83da 100%);
}
.hero::before { display: none; }
.hero::after {
  background-image:
    linear-gradient(rgba(28, 27, 28, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28, 27, 28, 0.05) 1px, transparent 1px);
}
.hero .kicker { color: #a8247f; }
.hero-title {
  color: #1c1b1c;
  font-size: clamp(1.85rem, 7.4vw, 6.2rem);
  font-stretch: normal;
  letter-spacing: -0.03em;
}
.hero-line--accent { font-size: 1em; color: #c32b96; margin-top: 0; }
.hero-sub { color: rgba(28, 27, 28, 0.74); margin-inline: auto; }
.hero-offer {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(195, 43, 150, 0.40);
  color: #8f1d6d;
}
.hero-actions { justify-content: center; }
.hero .btn--ghost { color: #1c1b1c; border-color: rgba(28, 27, 28, 0.42); }
.hero .btn--ghost:hover { border-color: #1c1b1c; }
.proof-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 600;
  font-size: 0.98rem;
  color: rgba(28, 27, 28, 0.78);
}
.proof-line::before,
.proof-line::after {
  content: "✺";
  color: #c32b96;
  font-size: 0.85rem;
}
/* ---------- Delight & polish ---------- */
/* Springier scroll reveals */
.reveal {
  transition: opacity 0.7s ease var(--rd, 0s),
    transform 0.78s cubic-bezier(0.22, 1.18, 0.36, 1) var(--rd, 0s);
}

/* Drifting pastel shapes in the hero band (transform/opacity only) */
.hero-blob {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(28px);
  pointer-events: none;
}
.hero-blob--a {
  width: 340px; height: 340px;
  top: 4%; left: -90px;
  background: rgba(255, 255, 255, 0.55);
  animation: blobDrift 15s ease-in-out infinite;
}
.hero-blob--b {
  width: 260px; height: 260px;
  bottom: 2%; right: -70px;
  background: rgba(195, 43, 150, 0.22);
  animation: blobDrift 19s ease-in-out infinite reverse;
}
@keyframes blobDrift {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.85; }
  50% { transform: translate(34px, 22px) scale(1.08); opacity: 1; }
}

/* Pegasus motif placements */
.pegasus--hero {
  display: block; /* was carried by the retired mask class; the width below needs it */
  width: 132px;
  max-width: 44%;
  margin: 0 auto 12px;
  position: relative;
  z-index: 1;
}

/* Marker highlight under key words */
.mark {
  background-image: linear-gradient(to top, var(--accent-soft) 44%, transparent 44%);
  background-repeat: no-repeat;
  padding: 0 3px;
  border-radius: 2px;
}

/* Oversized soft words behind section headings */
.has-bgword { position: relative; }
.has-bgword::before {
  content: attr(data-word);
  position: absolute;
  top: 10px;
  right: -6px;
  font-family: var(--font-display);
  font-stretch: 120%;
  font-weight: 900;
  font-size: clamp(4.2rem, 13vw, 10.5rem);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--wordmark-faint);
  pointer-events: none;
  user-select: none;
}
.has-bgword .container { position: relative; z-index: 1; }

/* Inner page heroes share the hero band's glow language */
.page-hero {
  background:
    radial-gradient(640px 300px at 86% -30px, var(--glow-soft), transparent 65%),
    radial-gradient(480px 260px at -40px 108%, var(--glow-soft), transparent 60%);
}

/* Cards: gentle tilt + glow on hover, shine sweep across the art */
@media (hover: hover) {
  .work-card:hover { transform: translateY(-6px) rotate(-0.4deg); }
  .clarity-card:hover { transform: translateY(-5px) rotate(0.4deg); }
}
.card-art::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.38) 50%, transparent 58%);
  transform: translateX(-130%);
  transition: transform 0.7s ease;
  pointer-events: none;
}
.work-card:hover .card-art::after { transform: translateX(130%); }

/* Arrows nudge; buttons feel alive */
.lr-arrow { transition: transform 0.2s ease; }
.link-row:hover .lr-arrow { transform: translateX(5px); }
.card-link span, .bonus-link span { display: inline-block; transition: transform 0.2s ease; }
.card-link:hover span { transform: translate(2px, -2px); }
.bonus-link:hover span { transform: translateX(4px); }
.btn:hover { transform: translateY(-2px) scale(1.02); }

/* Confetti-dot warmth on the bonus band + guarantee card */
.bonus {
  background-image:
    radial-gradient(circle, rgba(195, 43, 150, 0.13) 2.5px, transparent 3.2px),
    radial-gradient(circle, rgba(195, 43, 150, 0.09) 2px, transparent 2.6px);
  background-size: 92px 92px, 132px 132px;
  background-position: 0 0, 36px 54px;
}
[data-theme="dark"] .bonus {
  background-image:
    radial-gradient(circle, rgba(255, 131, 218, 0.15) 2.5px, transparent 3.2px),
    radial-gradient(circle, rgba(255, 131, 218, 0.09) 2px, transparent 2.6px);
}
.guarantee-card {
  background-image: radial-gradient(circle, rgba(195, 43, 150, 0.10) 2px, transparent 2.6px);
  background-size: 46px 46px;
}
[data-theme="dark"] .guarantee-card {
  background-image: radial-gradient(circle, rgba(255, 131, 218, 0.12) 2px, transparent 2.6px);
}

/* About mission lead */
.story-lead {
  color: var(--ink) !important;
  font-weight: 600;
  font-size: 1.12rem;
}

/* Inner-page hero panels float gently, like the homepage hero */
.page-hero .hero-visual { animation: floatY 7s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; }
  .hero-blob { animation: none; }
  .page-hero .hero-visual { animation: none; }
  .card-art::after { transition: none; }
  .btn:hover { transform: none; }
}

/* ---------- Dropdown amendment: two headed columns ---------- */
.services-panel {
  width: 660px;
  grid-template-columns: 1.12fr 1fr;
  grid-template-rows: none;
  grid-auto-flow: row;
  gap: 6px 30px;
  padding: 20px 22px;
}
.panel-head {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-strong);
  padding: 0 12px 8px;
}
.panel-col a { white-space: nowrap; }
@media (max-width: 1100px) {
  .panel-col a { white-space: normal; }
}
.mobile-group-head {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 12px 4px 4px;
}
.mobile-group-head:first-child { padding-top: 4px; }

/* ---------- Industries band (/services) ---------- */
.industries { padding-top: clamp(20px, 3vw, 36px); }
.industry-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.industry-tile {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 20px;
  transition: transform 0.25s ease, border-color 0.25s ease, background-color 0.35s ease;
}
.industry-tile:hover { transform: translateY(-4px); border-color: var(--accent-line); }
.industry-tile h3 { font-size: 1.12rem; font-weight: 800; line-height: 1.25; }
.industry-proof {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--accent-strong);
  text-decoration: none;
}
.industry-proof:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 960px) {
  .industry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .industry-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Contact photo is portrait: crop it gracefully in its landscape panel */
.contact .hero-visual img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center 15%;
}


/* ============================================================
   EDITORIAL MEGA-TYPE LAYER — a bolder, quieter design language:
   one neo-grotesque family, viewport-scale display type with tight
   leading and negative tracking, long confident motion, hairlines
   instead of boxes, and sections paced like a manifesto — one big
   statement, short support, then the work. Palette, copy, photos
   and structure are unchanged from the passes above.
   ============================================================ */

:root {
  --font-display: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease-out: cubic-bezier(0.625, 0.05, 0, 1);
  --radius: 10px;
}

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

body { font-size: 1.0625rem; line-height: 1.62; }

h1, h2, h3 {
  font-stretch: normal;
  line-height: 0.98;
  letter-spacing: -0.038em;
  font-weight: 800;
}

.kicker {
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  margin-bottom: 22px;
}
.kicker::before { content: "✺  "; letter-spacing: 0; }

.wordmark { font-weight: 800; letter-spacing: -0.01em; font-size: 1.32rem; }
.site-nav a { font-size: 1rem; font-weight: 600; }

/* ---------- Shared grid: wider, fluid margins ---------- */

.container,
.header-inner {
  width: min(1480px, calc(100% - clamp(32px, 5vw, 96px)));
}
.container--narrow { width: min(920px, calc(100% - clamp(32px, 5vw, 96px))); }
.mobile-menu { width: min(1480px, calc(100% - clamp(32px, 5vw, 96px))); }
@media (max-width: 620px) {
  .container, .container--narrow, .header-inner, .mobile-menu {
    width: calc(100% - 28px);
  }
}
@media (min-width: 112.5rem) {
  .container, .header-inner, .mobile-menu { width: min(1680px, calc(100% - 8rem)); }
}

/* ---------- Manifesto pacing: sections breathe ---------- */

.section { padding: clamp(92px, 10.5vw, 172px) 0; }
.section--tight {
  padding-top: clamp(24px, 3.5vw, 48px);
  padding-bottom: clamp(72px, 8vw, 120px);
}
.section-intro {
  max-width: 56ch;
  font-size: clamp(1.08rem, 1.5vw, 1.28rem);
  line-height: 1.55;
  margin-bottom: 56px;
}
/* Adjacent bands still share one breath, never two */
.section.guarantee { padding-bottom: clamp(28px, 3.5vw, 48px); }
.guarantee + .section { padding-top: clamp(28px, 3.5vw, 48px); }
.cta-band { padding: clamp(88px, 10vw, 150px) 0; }
.bonus { padding: clamp(88px, 10vw, 150px) 0; }
.page-hero {
  padding-top: calc(88px + clamp(72px, 9vw, 128px));
  padding-bottom: clamp(36px, 4.5vw, 64px);
}

.section-title {
  font-size: clamp(2.85rem, 6.6vw, 6rem);
  font-weight: 850;
  line-height: 0.97;
  margin-bottom: 22px;
  max-width: 16ch;
}
.section-title[id="work-title"],
.section-title[id="services-title"],
.section-title[id="process-title"],
.section-title[id="faq-title"] { max-width: none; }

.page-title {
  font-size: clamp(3.1rem, 8.6vw, 7.75rem);
  font-weight: 850;
  line-height: 0.95;
  letter-spacing: -0.042em;
  margin-bottom: 24px;
}
.page-intro {
  font-size: clamp(1.16rem, 1.7vw, 1.42rem);
  line-height: 1.5;
  max-width: 54ch;
}

/* ---------- Hero: the poster ---------- */

.hero {
  padding: calc(96px + clamp(72px, 9vw, 128px)) 0 clamp(84px, 9vw, 132px);
}
.hero-title {
  font-size: clamp(2.05rem, 8.3vw, 8.5rem);
  font-weight: 850;
  line-height: 0.95;
  letter-spacing: -0.045em;
  margin-bottom: 34px;
}
.hero-sub {
  font-size: clamp(1.14rem, 1.8vw, 1.42rem);
  line-height: 1.5;
  max-width: 58ch;
  margin-bottom: 42px;
}
.hero-offer { font-size: 1rem; padding: 12px 22px; margin-bottom: 42px; }
.proof-line { font-size: 1.05rem; }
.hero-visual { border-radius: 8px; padding: clamp(6px, 0.9vw, 10px); }
.hero-visual img { border-radius: 5px; }

/* Buttons: bigger targets, color-led motion */
.btn {
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0;
  padding: 16px 32px;
  transition: background-color 0.45s var(--ease-out), color 0.45s var(--ease-out),
    border-color 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
.btn--large { padding: 20px 40px; font-size: 1.08rem; }
.btn--small { padding: 12px 22px; font-size: 0.92rem; }

/* ---------- Marquee: display type, slower ---------- */

.marquee { padding: 24px 0; background: transparent; }
.marquee-track { animation-duration: 48s; }
.marquee-set {
  font-weight: 800;
  font-size: clamp(1.45rem, 3.2vw, 2.6rem);
  letter-spacing: -0.01em;
  gap: 36px;
  padding-right: 36px;
}
.marquee-star { font-size: 0.62em; }

/* ---------- Work: image-led stories, minimal chrome ---------- */

.work-grid { gap: clamp(28px, 4vw, 64px) clamp(24px, 3vw, 48px); }
.work-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
  container-type: inline-size;
  transition: none;
}
.card-art {
  aspect-ratio: 4 / 3;
  border-radius: 6px;
}
.card-art-type { font-size: clamp(2.2rem, 11cqi, 4rem); }
.card-mark { font-size: 4.2rem; }
.card-body { padding: 24px 2px 0; }
.card-body h3 {
  font-size: clamp(1.7rem, 8.5cqi, 2.45rem);
  font-weight: 850;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 10px;
}
.card-body p { font-size: 1.05rem; line-height: 1.55; max-width: 46ch; }
.chips { gap: 6px 16px; margin-bottom: 20px; }
.chips li {
  border: 0;
  border-radius: 0;
  padding: 0;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
}
.chips li + li::before { content: "·"; margin-right: 16px; color: var(--accent-strong); font-weight: 800; }
.card-link { font-size: 1.02rem; }
.mock--browser { width: 76%; }
.mock--phone { width: 36%; }

/* Alternating rhythm on the case grid (desktop ladder rung) */
@media (min-width: 64rem) {
  .work-grid { align-items: start; }
  .work-grid .work-card:nth-child(even) { margin-top: clamp(28px, 4.5vw, 72px); }
}

/* ---------- Clarity strip: bigger tiles, less box ---------- */

.clarity-grid { gap: clamp(20px, 2.6vw, 36px); margin-bottom: 48px; }
.clarity-card {
  border: 0;
  border-radius: 8px;
  padding: clamp(32px, 3.4vw, 48px);
}
.clarity-card h3 {
  font-size: clamp(1.55rem, 2.6vw, 2.05rem);
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.clarity-card p { font-size: 1.08rem; line-height: 1.55; }
.clarity-line { font-size: clamp(1.3rem, 2.4vw, 1.75rem); line-height: 1.4; max-width: 46ch; }

/* ---------- Process: editorial numbered columns ---------- */

.process-grid { gap: clamp(24px, 3vw, 44px); }
.process-step {
  background: transparent;
  border: 0;
  border-top: 2px solid var(--ink);
  border-radius: 0;
  padding: 28px 2px 0;
}
.process-num {
  font-size: clamp(2.7rem, 4.6vw, 4rem);
  font-weight: 850;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--ink);
  margin-bottom: 44px;
}
.process-step h3 { font-size: 1.5rem; letter-spacing: -0.02em; margin-bottom: 12px; }
.process-step p { font-size: 1rem; line-height: 1.6; }
.process-step--mini .process-num { margin-bottom: 20px; }

/* ---------- Stats: numbers as display type ---------- */

.stats-grid { gap: clamp(24px, 3.4vw, 48px); padding-top: 64px; padding-bottom: 64px; }
.stat strong {
  font-size: clamp(3.4rem, 6.8vw, 6.25rem);
  font-weight: 850;
  letter-spacing: -0.045em;
  line-height: 0.92;
  margin-bottom: 12px;
}
.stat span { font-size: 1.05rem; }

/* ---------- Accordions: statement rows ---------- */

.accordion-trigger { padding: 30px 0; gap: 22px; }
.accordion-name { font-size: clamp(1.4rem, 3vw, 2.15rem); font-weight: 800; letter-spacing: -0.025em; }
.accordion-num { font-size: 1rem; }
.accordion-panel { transition: grid-template-rows 0.55s var(--ease-out); }
.accordion-panel-inner p { font-size: 1.05rem; line-height: 1.65; }
.accordion-icon { transition: transform 0.45s var(--ease-out), background-color 0.3s ease, border-color 0.3s ease; }

/* ---------- Services page: statements, hairlines ---------- */

.svc { padding: clamp(52px, 6.5vw, 88px) 0; }
.svc-badge { border-radius: 8px; }
.svc-title { font-size: clamp(2.3rem, 5.2vw, 4rem); font-weight: 850; line-height: 0.98; }
.svc-offer { font-size: clamp(1.28rem, 2.3vw, 1.68rem); line-height: 1.42; font-weight: 600; margin-bottom: 32px; }
.svc-block p { font-size: 1.05rem; line-height: 1.65; }
.svc-proof {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: 20px 2px 0;
  font-size: 1rem;
}
.industry-tile { border-radius: 8px; padding: 28px 24px; }
.industry-tile h3 { font-size: 1.32rem; letter-spacing: -0.02em; }

/* ---------- Guarantee / bonus / contact statements ---------- */

.guarantee-card { border-radius: 8px; padding: clamp(32px, 4vw, 52px); }
.guarantee-card h2 { font-size: clamp(2.05rem, 4.4vw, 3.4rem); line-height: 1; margin-bottom: 16px; }
.guarantee-card p { font-size: 1.06rem; line-height: 1.6; }

.bonus-title { font-size: clamp(2.7rem, 5.8vw, 5rem); line-height: 0.98; max-width: 16ch; margin-bottom: 22px; }
.bonus p { font-size: 1.14rem; }

.contact-title { font-size: clamp(3.1rem, 8.2vw, 7.25rem); font-weight: 850; line-height: 0.95; letter-spacing: -0.042em; }
.contact-form { border-radius: 8px; }
.field input, .field select, .field textarea { border-radius: 6px; }

.link-row { padding: 26px 6px; }
.lr-name { font-size: clamp(1.32rem, 2.6vw, 1.95rem); font-weight: 800; letter-spacing: -0.025em; }
.lr-line { font-size: 1.02rem; }

/* ---------- Background words: bigger, quieter ---------- */

.has-bgword::before {
  font-size: clamp(6rem, 17.5vw, 17rem);
  top: -14px;
  letter-spacing: -0.02em;
}

/* ---------- Footer: the giant wordmark moment ---------- */

.site-footer { padding: clamp(84px, 10vw, 140px) 0 40px; }
.footer-wordmark {
  font-weight: 850;
  font-stretch: normal;
  font-size: clamp(3.9rem, 14.6vw, 15.5rem);
  line-height: 0.84;
  letter-spacing: -0.048em;
  color: var(--ink);
  margin-bottom: clamp(48px, 6vw, 72px);
}
.footer-grid { padding-bottom: 48px; }
.footer-col a, .footer-col p { font-size: 1rem; }
.footer-legal { font-size: 0.92rem; }
.not-found h1 { font-size: clamp(3.2rem, 9vw, 8rem); font-weight: 850; line-height: 0.95; letter-spacing: -0.042em; }

/* ---------- Legal pages: mega title, untouched measure ---------- */

.legal h2 { font-size: clamp(1.45rem, 2.6vw, 1.75rem); }

/* ---------- Motion character: long, confident, gated ---------- */

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    transition: opacity 0.85s ease var(--rd, 0s),
      transform 0.95s var(--ease-out) var(--rd, 0s);
  }
  .hero-anim { animation-duration: 1s; animation-timing-function: var(--ease-out); }
  .mock--browser, .mock--phone { transition: transform 0.7s var(--ease-out); }
  .page-hero .hero-visual img {
    animation: imgSettle 1.5s var(--ease-out) both;
  }
  @keyframes imgSettle {
    from { transform: scale(1.07); }
    to { transform: scale(1); }
  }
  .work-card .card-art { transition: transform 0.8s var(--ease-out); }
  .clarity-card, .process-step, .industry-tile {
    transition: transform 0.6s var(--ease-out), border-color 0.3s ease,
      background-color 0.35s ease;
  }
}

/* Hover states live behind hover-capable pointers only */
@media (hover: hover) {
  .work-card:hover { transform: none; box-shadow: none; }
  .work-card:hover .card-art { transform: scale(0.985); }
  .work-card:hover .mock--browser,
  .work-card:hover .mock--phone { transform: translateY(-8px) scale(1.03); }
  .clarity-card:hover { transform: translateY(-5px); }
  .process-step:hover { transform: none; border-color: var(--ink); }
  .btn:hover { transform: translateY(-1px); }
}

/* ---------- Mobile deck: de-boxed cards still stack solid ---------- */

@media (max-width: 900px) {
  .work-card { background: var(--bg); }
  .process-step { background: var(--bg); padding-bottom: 28px; }
  .marquee { padding: 18px 0; }
}
@media (max-width: 620px) {
  .hero-title { font-size: clamp(1.95rem, 10.4vw, 2.6rem); }
  .page-title { font-size: clamp(2.7rem, 12.5vw, 3.4rem); }
  .section-title { font-size: clamp(2.35rem, 10.5vw, 3rem); }
  .contact-title { font-size: clamp(2.7rem, 12.5vw, 3.4rem); }
  .footer-wordmark { font-size: clamp(3.4rem, 15.5vw, 4.6rem); }
  .card-body { padding: 20px 2px 0; }
  .stat strong { font-size: clamp(2.9rem, 13vw, 3.6rem); }
}

/* ---------- Forced colors: keep structure legible ---------- */

@media (forced-colors: active) {
  .hero, .bonus, .stats, .clarity-card, .guarantee-card { background: Canvas; }
  .services-panel, .mobile-menu, .contact-form, .industry-tile, .svc-badge {
    border: 1px solid CanvasText;
  }
  .card-art, .hero-visual { border: 1px solid CanvasText; }
  .footer-wordmark { color: CanvasText; }
  .has-bgword::before { display: none; }
  .marquee-star, .kicker::before { color: CanvasText; }
}

/* Reduced motion wins over everything in this layer */
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; }
  .marquee-track { animation: none; }
  .page-hero .hero-visual img { animation: none; }
  .work-card:hover .card-art { transform: none; }
}

/* ============================================================
   RESTYLE LAYER 3 — Reference supplement: mobile menu overlay,
   hero word rotation, scroll word-reveal, dark work band,
   stacking decks, big link rows, CTA card shape.
   All presentation; content unchanged. Patterns implemented in
   original code with this site's own words.
   ============================================================ */

/* ---------- Utilities ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Hero rotating word ---------- */
.hero-rotator { overflow: hidden; }
.rotator-word { display: inline-block; will-change: transform, opacity; }

@media (prefers-reduced-motion: no-preference) {
  .rotator-word.rot-out { animation: rot-out 0.38s var(--ease-out) both; }
  .rotator-word.rot-in { animation: rot-in 0.5s var(--ease-out) both; }
  @keyframes rot-out { to { transform: translateY(-62%); opacity: 0; } }
  @keyframes rot-in {
    from { transform: translateY(62%); opacity: 0; }
    to { transform: none; opacity: 1; }
  }
}

/* ---------- Scroll word-reveal ---------- */
.wr { opacity: 0.22; transition: opacity 0.35s linear, color 0.35s linear; }
.wr.on { opacity: 1; }
.wr-acc.on { color: var(--wr-accent, var(--accent-strong)); }
.hero-sub { --wr-accent: #8f1d6d; }

/* ---------- Dark work band (home Selected Work + Portfolio) ---------- */
.work-band { background: #100d12; color: #f4f5f9; }
[data-theme="dark"] .work-band {
  background: #17141f;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.work-band--cont { padding-top: clamp(30px, 4vw, 56px); }
.work-band .section-intro,
.work-band .page-intro { color: rgba(244, 245, 249, 0.72); }
.work-band .kicker { color: var(--accent); }
.work-band.has-bgword::before { color: rgba(244, 245, 249, 0.06); }
.work-band .section-title::after,
.work-band .page-title::after { content: "."; color: var(--accent); }
.work-band .card-body h3 { color: #f4f5f9; }
.work-band .card-body p { color: rgba(244, 245, 249, 0.74); }
.work-band .chips li { color: rgba(244, 245, 249, 0.66); }
.work-band .btn--ghost {
  border-color: rgba(244, 245, 249, 0.38); color: #f4f5f9; background: transparent;
}
@media (hover: hover) {
  .work-band .btn--ghost:hover { border-color: rgba(244, 245, 249, 0.75); }
}

/* ---------- CTA band: card shape, circle-arrow primary ---------- */
.cta-band .container { text-align: left; }
.cta-band .section-intro { margin-inline: 0; }
.cta-band .cta-actions { justify-content: flex-start; }
.cta-band .btn--accent { padding: 12px 12px 12px 30px; gap: 16px; }
.cta-band .btn--accent::after {
  content: "\2192"; display: grid; place-items: center; flex: none;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.24); font-size: 1.3rem; line-height: 1;
  transition: transform 0.45s var(--ease-out);
}
[data-theme="dark"] .cta-band .btn--accent::after { background: rgba(28, 27, 28, 0.16); }
@media (hover: hover) {
  .cta-band .btn--accent:hover::after { transform: translateX(4px); }
}

/* ---------- Big arrow link rows ---------- */
.lr-name { font-size: clamp(1.55rem, 3.6vw, 2.6rem); }
#services .lr-name::after { content: "."; color: var(--accent-strong); }
.lr-arrow { font-size: 2rem; }
@media (hover: hover) {
  .link-row:hover .lr-arrow { transform: translateX(8px); }
}

/* ---------- Mobile: header, menu overlay, decks, swipe row ---------- */
@media (max-width: 900px) {
  .header-inner { z-index: 2; }

  /* Header pill: wordmark + circle toggle + Menu pill button */
  .theme-toggle { border-radius: 999px; }
  .menu-toggle {
    display: inline-flex; flex-direction: row; align-items: center; justify-content: center;
    width: auto; height: 44px; padding: 0 22px; margin-left: 10px;
    border-radius: 999px; background: var(--pill-ink); border: 1px solid var(--pill-ink);
    color: #16151c; font-family: var(--font-display); font-size: 0.98rem; font-weight: 700;
  }
  .menu-toggle span.menu-toggle-text {
    display: inline; width: auto; height: auto; border-radius: 0;
    background: transparent; transform: none; opacity: 1;
  }
  .menu-toggle[aria-expanded="true"] span.menu-toggle-text { transform: none; opacity: 1; }
  body.menu-open .menu-toggle {
    background: var(--cta-bg); border-color: var(--cta-bg); color: var(--cta-ink);
  }
  body.menu-open { overflow: hidden; }

  /* Full-screen menu overlay: styled once for all widths in the
     NAV LAYER below (WEBZNS execution) — no mobile copies here. */

  /* Work cards: horizontal swipe row inside the dark band */
  .work-grid {
    flex-direction: row; gap: 18px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin-inline: calc(50% - 50vw);
    padding-inline: calc(50vw - 50%);
    padding-bottom: 12px;
    scroll-padding-left: calc(50vw - 50%);
  }
  .work-grid::-webkit-scrollbar { display: none; }
  .work-grid .work-card {
    position: static; flex: 0 0 min(80vw, 400px);
    scroll-snap-align: start; background: transparent;
  }

  /* Services sections: stacking deck of big rounded cards */
  .svc {
    position: sticky; top: 94px;
    background: var(--card); border: 1px solid var(--line);
    border-radius: 20px; padding: 28px 22px 30px; margin-bottom: 16px;
    box-shadow: 0 18px 34px rgba(20, 16, 24, 0.1);
    transform-origin: top center;
  }
  [data-theme="dark"] .svc { box-shadow: 0 18px 34px rgba(0, 0, 0, 0.4); }
  .svc.is-covered { transform: scale(0.96); }
  .svc-badge { width: 56px; height: 56px; border-radius: 16px; font-size: 1.18rem; }
  .svc-title { font-size: clamp(2rem, 9.5vw, 2.7rem); }

  /* Process steps: same deck language, accent numbers */
  .process-step {
    background: var(--card); border: 1px solid var(--line); border-radius: 20px;
  }
  .process-num { font-size: 1.9rem; color: var(--accent-strong); margin-bottom: 26px; }
}

/* Reduced motion: the new pieces rest too (kept last on purpose) */
@media (prefers-reduced-motion: reduce) {
  .mobile-menu { transition: none; }
  .wr { transition: none; }
  .cta-band .btn--accent::after { transition: none; }
}

/* ============================================================
   RESTYLE LAYER 4 — Homepage hero layered parallax scaffolding.
   All movement is switched on only by the .plx class, which
   script.js adds solely when motion is welcome — otherwise the
   hero is the static design, untouched. (The hero photo and its
   clip window were removed 2026-11-14 at the owner's order; the
   copy, pastel blobs and Pegasus still drift.)
   ============================================================ */
.hero-copy { will-change: transform, opacity; }
.hero.plx .pegasus--hero,
.hero.plx .hero-blob { will-change: translate; }

/* ---- Restyle Layer 5: overflow guard — background-word bleed and slide-in
   card start positions must never widen the page (sticky-safe: clip, not hidden) ---- */
.has-bgword, .clarity-grid, .work-grid, .steps-grid { overflow-x: clip; }

/* ---------- Maintenance page + gate pill ---------- */

.maint {
  padding: calc(var(--header-h) + clamp(48px, 7vw, 88px)) 0 clamp(40px, 5vw, 56px);
  text-align: center;
}
.maint-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.7rem, 7.4vw, 5.8rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: 14px 0 20px;
}
.maint-accent { color: var(--accent-strong); }
.maint-sub {
  font-size: 1.14rem;
  color: var(--muted);
  max-width: 35rem;
  margin: 0 auto;
}
.maint-contact-lead { margin-top: 34px; font-weight: 600; }
.maint-contact {
  margin-top: 14px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.maint-place { margin-top: 18px; color: var(--muted); font-size: 0.95rem; }

.btn--google {
  width: 100%;
  background: var(--card);
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn--google:hover { border-color: var(--ink); }
.btn--google svg { flex: none; }

.login-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 20px 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.login-divider::before,
.login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.login-form { display: grid; gap: 14px; }
.login-form .btn { width: 100%; }

.login-error {
  margin-top: 16px;
  border-radius: 12px;
  padding: 11px 14px;
  font-size: 0.92rem;
  font-weight: 600;
  color: #b3261e;
  background: #fdecea;
}
[data-theme="dark"] .login-error { color: #ffb4ab; background: rgba(179, 38, 30, 0.28); }

.login-note { margin-top: 16px; color: var(--muted); font-size: 0.85rem; text-align: center; }

/* Admin pill injected by gate.js on real pages for signed-in admins */
.gate-admin-pill {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 300;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
  padding: 7px 7px 7px 16px;
  font-size: 0.82rem;
  font-weight: 600;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
  max-width: calc(100vw - 32px);
}
.gate-admin-pill-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gate-admin-pill-btn {
  background: var(--accent);
  color: #1c1b1c;
  border: 0;
  border-radius: 999px;
  padding: 7px 14px;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  flex: none;
}
.gate-admin-pill-btn:hover { background: var(--accent-deep); color: #fff; }
.gate-admin-pill-btn:disabled { opacity: 0.6; cursor: wait; }

/* ============================================================
   RESTYLE LAYER 6 — Homepage scroll stages (mobile ≤ 900px only).
   Both mechanics are switched on by script.js, which adds .pin-on /
   .fan-on / .fan-static to the sections — and only ever at ≤900px —
   so desktop ≥901px is untouched by construction. Without JS, or
   with reduced motion, the sections keep the swipe row / stacked
   deck they already have; with reduced motion the fan simply rests
   already spread (the .fan-static rules below).
   ============================================================ */
@media (max-width: 900px) {

  /* ----- Mechanic 1: "Selected work" pinned horizontal gallery -----
     The section becomes a tall wrapper (height set by script.js);
     its .container is the sticky stage. The work-grid keeps its
     full-bleed padding from the swipe-row rules, but the row no
     longer scrolls itself: script.js translates the whole track. */
  #work.pin-on { overflow-x: clip; }
  #work.pin-on .container {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    display: flex;
    flex-direction: column;
    padding-top: 92px;
    padding-bottom: 22px;
  }
  #work.pin-on .kicker { margin-bottom: 10px; }
  #work.pin-on .section-title { margin-bottom: 12px; }
  #work.pin-on .section-intro { margin-bottom: 0; font-size: 1rem; line-height: 1.5; }
  #work.pin-on .work-grid {
    overflow: visible;
    scroll-snap-type: none;
    flex: none;
    gap: 4vw;
    margin-top: auto;
    margin-bottom: auto;
    padding-bottom: 0;
    will-change: transform;
  }
  #work.pin-on .work-card {
    flex: 0 0 84vw;
    scroll-snap-align: none;
    opacity: 1 !important;
    transform: none !important;
  }
  #work.pin-on .card-art { aspect-ratio: 16 / 10; }
  #work.pin-on .section-more { margin-top: 0; }

  /* Whenever the band is NOT pinned (no JS, reduced motion, short
     viewport), the swipe row must actually scroll: the Layer 5
     overflow guard otherwise wins the cascade over the swipe row's
     overflow-x: auto and silently freezes it. A scroll container
     still never widens the page. */
  #work:not(.pin-on) .work-grid { overflow-x: auto; }

  /* ----- Mechanic 2: "What we do" fan deck -----
     .fan-wrap is the tall scroll length; .fan-stage sticks; the
     clarity cards share one pivot (their bottom-center) inside the
     grid and script.js rotates them open / shut with scroll. */
  #what-we-do.fan-on,
  #what-we-do.fan-static { overflow-x: clip; }
  #what-we-do.fan-on .fan-wrap { height: 165svh; }
  #what-we-do.fan-on .fan-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    display: flex;
    flex-direction: column;
    padding-top: 92px;
  }
  #what-we-do.fan-on .clarity-grid,
  #what-we-do.fan-static .clarity-grid {
    position: relative;
    display: block;
    overflow-x: visible;
    margin-bottom: 0;
  }
  #what-we-do.fan-on .clarity-grid { flex: 1 1 auto; }
  #what-we-do.fan-on .clarity-card,
  #what-we-do.fan-static .clarity-card {
    position: absolute;
    left: 50%;
    width: min(72vw, 336px);
    margin: 0;
    opacity: 1 !important;
    transform-origin: 50% 100%;
  }
  #what-we-do.fan-on .clarity-card { top: 62%; transition: none; }

  /* The deck's resting stack (no JS, or JS before the stages sync):
     each covered card keeps a 60px title strip visible above the
     card that slides over it — same offsets the fan's stagger uses,
     so no state of this deck ever buries a title. */
  #what-we-do:not(.fan-on):not(.fan-static) .clarity-card:nth-child(1) { top: 88px; }
  #what-we-do:not(.fan-on):not(.fan-static) .clarity-card:nth-child(2) { top: 148px; }
  #what-we-do:not(.fan-on):not(.fan-static) .clarity-card:nth-child(3) { top: 208px; }
  #what-we-do.fan-on .clarity-card:nth-child(1),
  #what-we-do.fan-static .clarity-card:nth-child(1) { z-index: 3; }
  #what-we-do.fan-on .clarity-card:nth-child(2),
  #what-we-do.fan-static .clarity-card:nth-child(2) { z-index: 2; }
  #what-we-do.fan-on .clarity-card:nth-child(3),
  #what-we-do.fan-static .clarity-card:nth-child(3) { z-index: 1; }

  /* Reduced motion / stage too short to animate: the fan rests
     already spread — no pin, no link. The cards share one bottom
     baseline and stair-step up 72px per card behind, so every
     card's title band clears the sloped top edge of the card in
     front of it (the old shared-pivot spread buried the OFFLINE
     and BACK OF HOUSE titles behind ONLINE). The grid height is
     the stack's own height: tallest card + 2 × 72px stagger +
     28px baseline, so the composition hugs its content. */
  #what-we-do.fan-static .clarity-grid { height: 444px; margin-bottom: 48px; }
  #what-we-do.fan-static .clarity-card { top: auto; bottom: 28px; }
  #what-we-do.fan-static .clarity-card:nth-child(1) { transform: translate(-50%, 0) rotate(-14deg); }
  #what-we-do.fan-static .clarity-card:nth-child(2) { transform: translate(-50%, -72px) rotate(0deg); }
  #what-we-do.fan-static .clarity-card:nth-child(3) { transform: translate(-50%, -144px) rotate(14deg); }
}

/* Small phones: the cards grow taller as they narrow, so the
   static stack needs more height; the fan also softens (±9deg,
   ±8deg on the narrowest — the script mirrors this) so the
   spread's corners stay inside the screen. */
@media (max-width: 360px) {
  #what-we-do.fan-on .clarity-card,
  #what-we-do.fan-static .clarity-card { width: 72vw; }
  #what-we-do.fan-static .clarity-grid { height: 464px; }
  #what-we-do.fan-static .clarity-card:nth-child(1) { transform: translate(-50%, 0) rotate(-9deg); }
  #what-we-do.fan-static .clarity-card:nth-child(3) { transform: translate(-50%, -144px) rotate(9deg); }
}
@media (max-width: 340px) {
  #what-we-do.fan-on .clarity-card,
  #what-we-do.fan-static .clarity-card { width: 70vw; }
  #what-we-do.fan-static .clarity-grid { height: 544px; }
  #what-we-do.fan-static .clarity-card:nth-child(1) { transform: translate(-50%, 0) rotate(-8deg); }
  #what-we-do.fan-static .clarity-card:nth-child(2) { transform: translate(-50%, -92px) rotate(0deg); }
  #what-we-do.fan-static .clarity-card:nth-child(3) { transform: translate(-50%, -184px) rotate(8deg); }
}

/* Mid phones: ±12deg keeps the spread's corners inside the
   screen without narrowing the cards (the script mirrors this). */
@media (min-width: 361px) and (max-width: 409px) {
  #what-we-do.fan-static .clarity-card:nth-child(1) { transform: translate(-50%, 0) rotate(-12deg); }
  #what-we-do.fan-static .clarity-card:nth-child(3) { transform: translate(-50%, -144px) rotate(12deg); }
}

/* Wide phones (cards at their widest, text wrapped shortest):
   the front card stands taller than the middle one, so the
   stagger grows to 88px to keep the middle title clear of the
   front card's sloped top edge (the script mirrors this). */
@media (min-width: 410px) and (max-width: 900px) {
  #what-we-do.fan-static .clarity-grid { height: 460px; }
  #what-we-do.fan-static .clarity-card:nth-child(2) { transform: translate(-50%, -88px) rotate(0deg); }
  #what-we-do.fan-static .clarity-card:nth-child(3) { transform: translate(-50%, -176px) rotate(14deg); }
}

/* ============================================================
   SIGN-IN DROPDOWN + BRANDMARK — header Sign in button (next to
   the day/night toggle) with its dropdown panel, and the owner's
   real Pegasus logo files: /img/logo-pegasus-dark.png (charcoal,
   for light grounds) and /img/logo-pegasus-light.png (warm
   cream, for dark grounds). The lockup and the mobile-menu mark
   sit on always-dark grounds, so they always carry the light
   file; the remaining motifs swap by theme further below.
   ============================================================ */

/* ---------- Brandmark lockup in the pill ---------- */
.wordmark { display: inline-flex; align-items: center; gap: 9px; }
.brand-lockup {
  flex: none;
  height: 28px;
  width: auto;
}
@media (max-width: 900px) {
  .brand-lockup { height: 24px; }
}

/* ---------- Light logo file in the mobile menu ---------- */
.brand-menu {
  display: block;
  align-self: flex-start; /* the menu is a stretch-aligned flex column */
  height: 44px;
  width: auto;
  margin: 2px 0 14px;
}

/* ---------- Sign in button + dropdown panel ---------- */
.signin-wrap {
  order: 3;
  position: relative;
  display: flex;
  align-items: center;
}
.signin-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(244, 245, 249, 0.28);
  background: rgba(244, 245, 249, 0.06);
  color: var(--pill-ink);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.signin-btn:hover { border-color: rgba(244, 245, 249, 0.65); }
.signin-btn[aria-expanded="true"] {
  border-color: rgba(244, 245, 249, 0.65);
  background: rgba(255, 131, 218, 0.16);
}
.signin-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.signin-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 130;
  width: min(330px, calc(100vw - 32px));
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--card-shadow);
  padding: 20px;
  max-height: calc(100svh - 112px);
  overflow-y: auto;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease,
    background-color 0.35s ease, border-color 0.35s ease;
}
.signin-wrap.is-open .signin-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}
.signin-panel-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.12rem;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}
.signin-who {
  color: var(--muted);
  font-size: 0.95rem;
  margin-bottom: 16px;
}
.signin-who span { color: var(--ink); font-weight: 600; word-break: break-all; }
.signin-panel .signin-logout { width: 100%; }
.signin-panel button:disabled { opacity: 0.55; cursor: wait; transform: none; }

@media (max-width: 900px) {
  /* Panel becomes a full-width card under the bar. The wrap goes
     static so the panel anchors to .header-inner instead. */
  .signin-wrap { position: static; }
  .signin-panel {
    left: 0;
    right: 0;
    top: calc(100% + 10px);
    width: auto;
  }
}
@media (max-width: 620px) {
  .signin-btn { padding: 8px 13px; font-size: 0.9rem; }
}

/* ---------- Mobile bar compaction ----------
   With the brand mark AND the Sign in pill added, the ≤900px bar
   (wordmark + toggle + Sign in + Menu) no longer fits small phones
   at the desktop spacing. These tiers only shrink spacing/sizes
   inside the pill — the layout order never changes. */
@media (max-width: 620px) {
  .header-inner { gap: 6px; padding-left: 14px; padding-right: 8px; }
  .wordmark { font-size: 1.02rem; gap: 6px; }
  .brand-lockup { height: 24px; }
  .header-inner > .theme-toggle { width: 38px; height: 38px; }
  .signin-btn { padding: 7px 9px; font-size: 0.86rem; }
  .menu-toggle { padding: 0 11px; margin-left: 0; font-size: 0.92rem; }
}
@media (max-width: 370px) {
  .wordmark { font-size: 0.98rem; gap: 6px; }
  .wordmark sup { display: none; }
  .brand-lockup { height: 19px; }
  .header-inner > .theme-toggle { width: 36px; height: 36px; }
  .signin-btn { padding: 7px 9px; font-size: 0.84rem; }
  .menu-toggle { padding: 0 11px; font-size: 0.88rem; }
}

/* ============================================================
   NAV LAYER — one nav at every width (owner, 2026-11-13 night;
   overlay execution rebuilt to match webzns.com exactly,
   owner, 2026-11-14). The bar holds only: brandmark +
   wordmark (left); theme toggle, Sign in, and the "Menu" text
   pill (right — its label swaps to "Close" while open). The
   full-screen overlay copies the WEBZNS full-screen menu's
   execution: the panel appears instantly (no fade or slide);
   links are full-width rows on a 24px gutter with hairline
   dividers, set at clamp(29px, 7.4vw, 40px) weight 800; on
   open the links fade up 16px in a 55ms-per-link stagger
   while a pink gradient sweeps through each link's letters
   (whole-link background-clip, 80ms per link + 60ms), and
   hover / press / focus re-runs the sweep on a single link.
   The current page's link rests pink. At the bottom a quiet
   contact line sits above a full-width outlined pill bar
   ("Start a project"). The cream Pegasus mark stays at the
   top of the overlay.
   ============================================================ */

/* ---------- Bar: Menu text pill at all widths ---------- */
.header-inner { z-index: 2; }
.menu-toggle {
  display: inline-flex; flex-direction: row; align-items: center; justify-content: center;
  width: auto; height: 44px; padding: 0 22px; margin-left: 10px;
  border-radius: 999px; background: var(--pill-ink); border: 1px solid var(--pill-ink);
  color: #16151c; font-family: var(--font-display); font-size: 0.98rem; font-weight: 700;
  cursor: pointer; flex: none;
}
.menu-toggle span.menu-toggle-text {
  display: inline; width: auto; height: auto; border-radius: 0;
  background: transparent; transform: none; opacity: 1;
}
.menu-toggle[aria-expanded="true"] span.menu-toggle-text { transform: none; opacity: 1; }
body.menu-open .menu-toggle {
  background: var(--cta-bg); border-color: var(--cta-bg); color: var(--cta-ink);
}
body.menu-open { overflow: hidden; }
/* small-phone compaction for the toggle (echoes the sign-in pass tiers) */
@media (max-width: 620px) {
  .menu-toggle { padding: 0 11px; margin-left: 0; font-size: 0.92rem; }
}
@media (max-width: 370px) {
  .menu-toggle { padding: 0 11px; font-size: 0.88rem; }
}

/* ---------- Full-screen overlay: WEBZNS execution ---------- */
.mobile-menu {
  position: fixed; inset: 0; z-index: 1;
  width: 100%; max-height: none; margin: 0;
  border: 0; border-radius: 0; box-shadow: none;
  background: #0d0b10; color: var(--pill-ink);
  padding: 118px 24px 28px;
  display: flex; flex-direction: column; gap: 0;
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: none; transition: none;
}
.mobile-menu.is-open {
  opacity: 1; visibility: visible; pointer-events: auto;
}

/* Rows: full width, a hairline under each (WEBZNS values) */
.mobile-menu > a,
.mobile-group-toggle {
  font-family: var(--font-display); color: #fff;
  font-size: clamp(29px, 7.4vw, 40px); font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.14;
  padding: 8px 0; text-decoration: none; text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.mobile-menu > a { display: block; }
.mobile-group-toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; background: none; cursor: pointer;
  border-top: 0; border-left: 0; border-right: 0;
}
.mobile-group-caret {
  width: 26px; height: 26px; flex: 0 0 auto; color: #fff;
  transition: transform 0.2s ease;
}

/* Services sub-rows: same row language, one step down */
.mobile-group-panel { display: none; padding: 0; }
.mobile-group.is-open .mobile-group-panel { display: flex; flex-direction: column; }
.mobile-group-panel a {
  display: block; font-family: var(--font-display); color: #fff;
  font-size: clamp(21px, 5.2vw, 28px); font-weight: 700;
  letter-spacing: -0.01em; line-height: 1.2;
  padding: 9px 0; text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.mobile-group-head {
  font-size: 0.8rem; font-weight: 700; color: var(--pill-muted);
  text-transform: uppercase; letter-spacing: 0.12em;
  padding: 16px 0 6px; margin: 0;
}

/* Bottom zone: quiet contact line over a full-width outlined bar */
.mobile-menu-bottom {
  margin-top: auto; padding-top: 30px; flex: none;
  display: flex; flex-direction: column; gap: 12px;
}
.mobile-menu-contact {
  display: flex; flex-wrap: wrap; gap: 4px 22px;
  margin: 0; padding: 0;
}
.mobile-menu-contact a {
  font-family: var(--font-display); font-size: 0.98rem; font-weight: 600;
  color: var(--pill-muted); text-decoration: none; padding: 6px 0;
}
.mobile-menu-contact a:hover { color: var(--pill-ink); }
.mobile-menu .mobile-menu-cta {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); color: #fff;
  font-weight: 800; font-size: 16px;
  text-decoration: none;
  border: 1.5px solid rgba(255, 255, 255, 0.32); border-radius: 999px;
  padding: 13px 20px; min-height: 50px;
}
.mobile-menu .mobile-menu-cta:hover { border-color: #fff; }
.theme-toggle--menu { font-size: 1.05rem; margin-top: 16px; color: var(--pill-ink); }

/* Wide screens: same rows; the Services panel opens in two columns */
@media (min-width: 901px) {
  .mobile-menu { padding-top: 128px; }
  .mobile-group-panel { max-width: 940px; }
  .mobile-group.is-open .mobile-group-panel {
    display: block; columns: 2; column-gap: 64px;
  }
  .mobile-group-panel a, .mobile-group-panel .mobile-group-head { break-inside: avoid; }
  .mobile-group-panel .mobile-group-head:nth-of-type(2) { break-before: column; }
}

/* ---------- Entrance + pink flow: the WEBZNS timeline ----------
   The panel itself appears instantly; only the links and the
   bottom zone animate. Entrance: fade + rise 16px over .55s;
   the pink sweep (background-position 100% -> 0% on a 260%-
   wide gradient clipped to the glyphs) runs .58s; both use
   cubic-bezier(.22,.7,.25,1). Per-link delays: entrance
   --i*55ms, sweep --i*80ms + 60ms. When the last link's sweep
   ends, script.js drops .cascade so a later hover sweep never
   restarts the entrance; both states end on the same colours
   (white, or pink for the current page). */
@keyframes mmLinkIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
@keyframes mmPinkFlow {
  from { background-position: 100% 0; }
  to { background-position: 0% 0; }
}
.mobile-menu .flow-item[aria-current="page"] { color: #ff83da; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .mobile-menu .flow-item {
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    background-image: linear-gradient(90deg, #fff 0%, #fff 38%, #ff83da 48%, #c32b96 56%, #fff 66%, #fff 100%);
    background-size: 260% 100%; background-repeat: no-repeat;
    background-position: 100% 0;
  }
  .mobile-menu .flow-item[aria-current="page"] {
    -webkit-text-fill-color: transparent; color: transparent;
    background-image: linear-gradient(90deg, #c32b96 0%, #ff83da 38%, #ff9ede 47%, #fff 59%, #fff 100%);
    background-position: 0% 0;
  }
}
.mobile-menu.is-open.cascade .flow-top {
  animation: mmLinkIn 0.55s cubic-bezier(0.22, 0.7, 0.25, 1) both,
    mmPinkFlow 0.58s cubic-bezier(0.22, 0.7, 0.25, 1) both;
  animation-delay: calc(var(--i, 0) * 55ms), calc(var(--i, 0) * 80ms + 60ms);
}
.mobile-menu.is-open.cascade .mobile-menu-bottom {
  animation: mmLinkIn 0.55s cubic-bezier(0.22, 0.7, 0.25, 1) both;
  animation-delay: calc(var(--i, 6) * 55ms);
}
.mobile-menu .flow-item.flow-run {
  animation: mmPinkFlow 0.58s cubic-bezier(0.22, 0.7, 0.25, 1) both;
}

/* ---------- Reduced motion: instant open, no cascade ---------- */
@media (prefers-reduced-motion: reduce) {
  .mobile-menu.is-open.cascade .flow-top,
  .mobile-menu.is-open.cascade .mobile-menu-bottom,
  .mobile-menu .flow-item.flow-run { animation: none !important; }
}

/* ============================================================
   OWNER LOGO FILES + NO LOGIN CARD — the brandmark is now the
   owner's own two finished files, used as plain images (no CSS
   masks, and no disc behind them — the owner disliked the black
   circle): the charcoal file on light grounds, the cream file
   on dark ones. Theme-swapped instances (.brand-img--swap:
   footers, the maintenance motif, the About studio motif) serve
   the dark file by day and trade it for the light file under
   [data-theme="dark"] via content:url(). The homepage hero motif
   always carries the dark file (strongest on the pink band) and
   keeps its parallax wrapper. The maintenance page's login card
   is gone: the header Sign in dropdown is the only login, and
   signin-ui.js now makes the admin redirect trip from
   /maintenance itself.
   ============================================================ */

/* ---------- Theme-swapped + fixed logo images ---------- */
.brand-img { display: block; height: auto; }
:root[data-theme="dark"] .brand-img--swap { content: url("/img/logo-pegasus-light.png"); }
.brand-footer { width: 92px; margin: 0 0 14px; animation: floatY 6s ease-in-out infinite; }
.brand-motif { width: 200px; max-width: 60%; animation: floatY 6s ease-in-out infinite; }
.brand-motif--maint { margin: 0 auto 6px; }
.brand-motif--studio { margin: 6px 0 22px; }
.pegasus--hero .brand-hero-img { display: block; width: 100%; height: auto; }

@media (prefers-reduced-motion: reduce) {
  .brand-footer, .brand-motif { animation: none; }
}

/* ---------- Maintenance page, rebalanced without the card ----------
   Statement + contact block now carry the page on their own: the
   section fills the viewport height and centers its content, so
   the gate's public face never looks hollow. */
.maint {
  display: flex;
  align-items: center;
  min-height: 100svh;
  box-sizing: border-box;
  padding-bottom: clamp(72px, 9vw, 112px);
}
.maint > .container { width: 100%; }

/* ============================================================
   STAGE-RESIDUE IMMUNITY (≥901px) — the pin / fan / drift stages
   are ≤900px systems: their CSS already lives inside the
   max-width:900px layer and their JS gates on the same query.
   The only things those systems can leave behind above 900px are
   the stage CLASSES plus the INLINE styles their JS writes (the
   work section's inline height, the track's inline transform,
   the clarity cards' inline transforms). If a stage class is
   ever present at ≥901px — a torn-down stage, a stale cached
   script — these rules neutralize every one of those residues,
   so the desktop layout renders exactly as designed. With no
   stage class present (the normal state) this layer is inert
   and hover / reveal behaviour is untouched.
   ============================================================ */
@media (min-width: 901px) {
  #work.pin-on { height: auto !important; }
  #work.pin-on .container {
    position: static !important;
    height: auto !important;
    display: block !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  #work.pin-on .work-grid,
  #work.wd-on .work-grid { transform: none !important; }
  #work.pin-on .work-grid {
    overflow-x: clip !important;
    scroll-snap-type: none !important;
    flex: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  #what-we-do.fan-on .fan-wrap { height: auto !important; }
  #what-we-do.fan-on .fan-stage {
    position: static !important;
    height: auto !important;
    display: block !important;
    padding-top: 0 !important;
  }
  #what-we-do.fan-on .clarity-grid,
  #what-we-do.fan-static .clarity-grid {
    position: static !important;
    display: grid !important;
    height: auto !important;
    flex: none !important;
  }
  #what-we-do.fan-on .clarity-card,
  #what-we-do.fan-static .clarity-card {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    transform: none !important;
  }
}