/*
Theme Name: Design-Chaos
Theme URI: https://design-chaos.studio
Author: Design-Chaos (Amanda) — spun out of The Clone Shop
Author URI: https://cloneshop.com
Description: Custom WordPress theme for Design-Chaos, an independent brand, web & marketing studio in Tyler, TX. Mobile-first, no templates. Built to the CloneShop web-build standard — WCAG AA, SEO/JSON-LD schema, hardened. Launches January 2027.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: design-chaos
*/

/* ============================================================
   TABLE OF CONTENTS
   1. Design tokens (:root)
   2. Reset & base
   3. Accessibility helpers
   4. Typography utilities
   5. Layout
   6. Buttons & atoms
   7. Site header & navigation
   8. Site footer
   9. Page-specific styles are appended per template below this block
   ============================================================ */

/* ---- 1. DESIGN TOKENS ------------------------------------------------ */
/* Canonical palette = the homepage-mockup token set (see BUILD-NOTES.md). */
:root {
  --bg:        #0E0B16;
  --bg-2:      #16101F;
  --bg-3:      #1F1730;
  --ink:       #F4EFE6;
  --ink-soft:  #B8B0A6;
  /* --ink-dim: lifted from the mockup's #6F6A7A to #847F90 so small meta text
     clears WCAG AA (4.5:1) on --bg — #6F6A7A measured 3.68:1 and failed.
     #847F90 measures ~5:1. Flagged in the audit notes for Amanda. */
  --ink-dim:   #847F90;
  --rule:      rgba(244, 239, 230, 0.14);
  --rule-soft: rgba(244, 239, 230, 0.08);

  --cyan:    #3FC9E8;
  --indigo:  #6A4FE0;
  --magenta: #D440B5;
  --red:     #E83E5C;
  --orange:  #F58A3D;
  --gold:    #F2C24A;

  /* Accessible accent variants for text on the dark bg (>= 4.5:1 on --bg).
     Use these when an accent must carry body-size text. */
  --gold-text:    #F2C24A; /* 11.3:1 on --bg */
  --cyan-text:    #6FD6EE; /* lifted cyan for small text */
  --magenta-text: #E87FD0; /* lifted magenta for small text */

  --grad: linear-gradient(135deg, var(--cyan) 0%, var(--indigo) 22%, var(--magenta) 48%, var(--red) 68%, var(--orange) 84%, var(--gold) 100%);
  --grad-soft: linear-gradient(135deg, #3FC9E833 0%, #6A4FE033 22%, #D440B533 48%, #E83E5C33 68%, #F58A3D33 84%, #F2C24A33 100%);

  --maxw: 1320px;
  --gutter: 32px;
  --radius: 14px;

  --font-display: "Fraunces", "Times New Roman", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --font-hand: "Caveat", "Comic Sans MS", cursive;
  --font-mono: "JetBrains Mono", ui-monospace, "Courier New", monospace;
}

/* ---- 2. RESET & BASE ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background:
    radial-gradient(ellipse 1100px 700px at 18% 12%, rgba(106, 79, 224, 0.18), transparent 60%),
    radial-gradient(ellipse 900px 600px at 88% 22%, rgba(212, 64, 181, 0.14), transparent 60%),
    radial-gradient(ellipse 1000px 600px at 50% 100%, rgba(232, 62, 92, 0.10), transparent 65%),
    var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Film-grain + vignette overlays — decorative, never block interaction. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.32 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>");
  opacity: 0.5;
  mix-blend-mode: overlay;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse 100% 80% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
}

img { max-width: 100%; height: auto; display: block; }
svg { display: block; }
a { color: var(--ink); }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--magenta); color: var(--ink); }

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 500; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; }

/* ---- 3. ACCESSIBILITY HELPERS --------------------------------------- */
/* Skip link — first focusable element on every page. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 12px 20px;
  background: var(--ink);
  color: var(--bg);
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 8px 0;
}
.skip-link:focus {
  left: 0;
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

/* Visible focus indicator everywhere — never remove without replacement. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Screen-reader-only text. */
.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;
}

/* Scroll-reveal hidden state.
   Previous version animated clip-path with a 0.7s duration and put
   will-change on every .reveal element. On pages with several visible
   reveal blocks above the fold, the simultaneous clip-path animations
   + per-element compositor layers caused a long juddery "drag" on
   page load, especially on mobile. Switched to transform + opacity
   (GPU-cheap), halved the duration, and dropped will-change. */
.reveal {
  transform: translateY(16px);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
              opacity 0.35s ease;
}
.reveal.is-visible {
  transform: none;
  opacity: 1;
}

/* Respect reduced-motion on every animation, parallax, and auto-advance. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { transform: none; opacity: 1; }
}

/* Sticky-header anchor offset so in-page targets aren't hidden under the nav. */
:target { scroll-margin-top: 96px; }

/* ---- 4. TYPOGRAPHY UTILITIES ---------------------------------------- */
.display {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  letter-spacing: -0.02em;
}
.hand { font-family: var(--font-hand); }
.mono { font-family: var(--font-mono); }

.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.eyebrow .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--grad);
  animation: dc-pulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes dc-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.4); opacity: 0.7; }
}

/* Handwritten "tape" label. */
.tape {
  display: inline-block;
  padding: 4px 14px 5px;
  font-family: var(--font-hand);
  font-size: 18px;
  font-weight: 600;
  background: rgba(242, 194, 74, 0.9);
  color: #15131A;
  transform: rotate(-2deg);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}

/* Long-form prose blocks (case studies, journal posts, policy pages). */
.prose { max-width: 70ch; }
.prose p { font-size: 18px; line-height: 1.7; color: var(--ink-soft); }
.prose h2 { font-family: var(--font-display); font-size: 32px; margin: 1.6em 0 0.5em; color: var(--ink); }
.prose h3 { font-family: var(--font-display); font-size: 24px; margin: 1.4em 0 0.4em; color: var(--ink); }
.prose a { color: var(--cyan-text); text-decoration: underline; text-underline-offset: 3px; }
.prose ul, .prose ol { margin: 0 0 1.2em 1.2em; }
.prose li { font-size: 18px; line-height: 1.7; color: var(--ink-soft); margin-bottom: 0.4em; }
.prose blockquote {
  border-left: 3px solid var(--magenta);
  margin: 1.6em 0;
  padding: 0.2em 0 0.2em 1.2em;
  font-family: var(--font-display);
  font-size: 22px;
  font-style: italic;
  color: var(--ink);
}

/* ---- 5. LAYOUT ------------------------------------------------------ */
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  position: relative;
  z-index: 1;
}
.wrap--narrow { max-width: 880px; }

main { display: block; position: relative; z-index: 1; }

.section { padding: 120px 0; position: relative; }
.section--tight { padding: 80px 0; }
.section + .section { border-top: 1px solid var(--rule); }

.rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }

/* Keyword-rich interior page header strip. */
.page-head {
  padding: 44px 0 64px;
  border-bottom: 1px solid var(--rule);
  position: relative;
  z-index: 1;
}
.page-head .eyebrow { margin-bottom: 22px; }
.page-head h1 {
  font-family: var(--font-display);
  font-size: clamp(44px, 6.5vw, 96px);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: 0;
  max-width: 16ch;
}
.page-head .lede {
  margin: 26px 0 0;
  max-width: 60ch;
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.55;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* Breadcrumbs on interior pages (also emitted as BreadcrumbList JSON-LD). */
.breadcrumbs {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 18px;
}
.breadcrumbs a { color: var(--ink-soft); text-decoration: none; }
.breadcrumbs a:hover { color: var(--ink); }
.breadcrumbs span[aria-current] { color: var(--ink); }
.breadcrumbs .sep { margin: 0 8px; opacity: 0.5; }

/* ---- 6. BUTTONS & ATOMS --------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border: 1.5px solid var(--ink);
  background: var(--ink);
  color: var(--bg);
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
  position: relative;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 rgba(244, 239, 230, 0.55); }
.btn .arrow { transition: transform 0.2s ease; }
.btn:hover .arrow { transform: translateX(4px) rotate(-12deg); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--bg); }

.btn-grad {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 20px 34px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: #0B0B14;
  background: var(--grad);
  background-size: 220% 220%;
  background-position: 0% 50%;
  border: none;
  box-shadow: 0 10px 40px -10px rgba(106, 79, 224, 0.55), 0 4px 14px -4px rgba(212, 64, 181, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, background-position 1.2s ease;
}
.btn-grad.alt { background-position: 100% 50%; }
.btn-grad:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 56px -12px rgba(106, 79, 224, 0.7), 0 6px 18px -4px rgba(212, 64, 181, 0.5);
  filter: brightness(1.06);
  animation: dc-grad-flow 3s linear infinite;
}
@keyframes dc-grad-flow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.btn-grad .arrow { transition: transform 0.2s ease; }
.btn-grad:hover .arrow { transform: translateX(5px) rotate(-12deg); }

/* ---- 7. SITE HEADER & NAVIGATION ------------------------------------ */
/* Used on every page EXCEPT the homepage (the homepage nav is the
   constellation; see front-page styles). */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.25s ease, border-color 0.25s ease, backdrop-filter 0.25s ease;
}
.site-header.is-scrolled {
  background: rgba(14, 11, 22, 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--rule);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  gap: 24px;
}
.site-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
}
.site-logo img { width: auto; height: 56px; max-height: 56px; object-fit: contain; }
.site-header__inner { gap: 24px; }
.site-logo .site-logo__word {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 21px;
  letter-spacing: -0.03em;
}
.site-logo .site-logo__tag {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.primary-nav { display: flex; align-items: center; gap: 30px; }
.primary-nav a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  padding: 8px 2px;
  position: relative;
}
.primary-nav a::after {
  content: "";
  position: absolute;
  left: 2px; right: 2px; bottom: 2px;
  height: 2px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.primary-nav a:hover::after,
.primary-nav a:focus-visible::after { transform: scaleX(1); }
.primary-nav a[aria-current="page"] { color: var(--ink); }
.primary-nav a[aria-current="page"]::after { transform: scaleX(1); }

.header-cta { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.header-status {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
}
.header-status .live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #3DD68C;
  margin-right: 8px;
  box-shadow: 0 0 0 4px rgba(61, 214, 140, 0.18);
}

/* Mobile nav toggle — hidden on desktop, shown < 900px. */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1.5px solid var(--rule);
  border-radius: 10px;
  color: var(--ink);
}
.nav-toggle__bars { display: block; width: 20px; height: 2px; background: var(--ink); position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute; left: 0;
  width: 20px; height: 2px;
  background: var(--ink);
  transition: transform 0.2s ease, top 0.2s ease;
}
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }

/* Full-screen mobile panel. visibility:hidden when closed keeps the off-screen
   links out of the tab order (transform alone leaves them keyboard-reachable). */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  padding: 24px var(--gutter) 40px;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s linear 0.3s;
  overflow-y: auto;
}
.mobile-nav[data-open="true"] {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s linear 0s;
}
.mobile-nav__top { display: flex; align-items: center; justify-content: space-between; }
.mobile-nav__close {
  width: 44px; height: 44px;
  background: transparent;
  border: 1.5px solid var(--rule);
  border-radius: 10px;
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
}
.mobile-nav__links {
  list-style: none;
  padding: 0;
  margin: 48px 0 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mobile-nav__links a {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(34px, 9vw, 56px);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-decoration: none;
  padding: 10px 0;
}
.mobile-nav__links a[aria-current="page"] { color: transparent; background: var(--grad); -webkit-background-clip: text; background-clip: text; }
.mobile-nav__foot {
  margin-top: auto;
  padding-top: 32px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mobile-nav__foot a { color: var(--ink-soft); text-decoration: none; font-family: var(--font-mono); font-size: 13px; }

body.nav-open { overflow: hidden; }

/* ---- 8. SITE FOOTER ------------------------------------------------- */
.site-footer {
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.5));
  border-top: 1px solid var(--rule);
  padding: 80px 0 32px;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 60px;
  border-bottom: 1px solid var(--rule);
}
.site-footer__brand .display { font-weight: 700; font-size: 22px; letter-spacing: -0.02em; }
.site-footer__brand img { width: 100%; max-width: 320px; height: auto; object-fit: contain; display: block; }
.site-footer__brand .site-footer__logo-big { margin-bottom: 8px; }
.site-footer__brand p { font-size: 14px; color: rgba(250, 247, 242, 0.7); line-height: 1.55; max-width: 36ch; margin: 18px 0 0; }
.site-footer__direct { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--rule-soft); font-family: var(--font-mono); font-size: 13px; line-height: 1.8; }
.site-footer__direct a { color: var(--ink); text-decoration: none; opacity: 0.9; }
.site-footer__direct a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.site-footer__nap { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; margin-top: 20px; color: rgba(250, 247, 242, 0.55); line-height: 1.8; }
.site-footer__nap a { color: inherit; text-decoration: none; }
.site-footer__col h2 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 18px;
}
.site-footer__col ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.site-footer__col a { color: var(--ink); text-decoration: none; font-size: 15px; opacity: 0.85; }
.site-footer__col a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.site-footer__wordmark {
  text-align: center;
  padding: 28px 0 20px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(64px, 16vw, 240px);
  line-height: 1.12;
  letter-spacing: -0.06em;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.site-footer__legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgba(244, 239, 230, 0.55);
}
.site-footer__legal a { color: inherit; }

/* ---- RESPONSIVE: header/footer/base --------------------------------- */
@media (max-width: 900px) {
  .primary-nav,
  .header-status { display: none; }
  .nav-toggle { display: inline-flex; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  :root { --gutter: 20px; }
  .section { padding: 80px 0; }
  .page-head { padding: 32px 0 48px; }
}
@media (max-width: 560px) {
  .site-footer__grid { grid-template-columns: 1fr; }
  .site-footer__legal { flex-direction: column; align-items: flex-start; }
}

/* ---- HEADER EXTRAS -------------------------------------------------- */
.site-logo__lockup { display: flex; flex-direction: column; line-height: 0.95; }

/* Homepage hamburger — hidden on desktop (constellation is the nav),
   shown as the discoverable affordance below 900px. */
.front-nav-toggle-wrap {
  display: none;
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 100;
}
.nav-toggle--front {
  background: rgba(14, 11, 22, 0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
@media (max-width: 900px) {
  .front-nav-toggle-wrap { display: block; }
}

/* ============================================================
   PAGE-SPECIFIC STYLES
   Appended below as each template is built (homepage, about,
   services, work, faq, contact, journal). Keeps this file the
   single source of truth without one giant unsearchable block.
   ============================================================ */

/* ---- HOMEPAGE: HERO + CONSTELLATION --------------------------------- */
.hero { padding: 24px 0 32px; position: relative; overflow: hidden; }
.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none; /* canvas paints; hero element captures pointer events */
}
.hero__seo-strip {
  text-align: center;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 20px;
}
.hero__seo-strip p {
  margin: 0;
  font-size: 11px;
  color: var(--ink-soft);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.constellation-shell { margin: 0 auto; width: min(420px, 80%); }
.constellation {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  display: block;
}
.constellation__mark {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.92;
  pointer-events: none;
}
.constellation__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Server-rendered fallback list — the crawlable nav. Visible until JS
   upgrades the constellation; styled as a tidy centered cluster so a
   no-JS visitor still gets a clean menu. */
.constellation__fallback {
  position: absolute;
  inset: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.constellation__fallback a {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  padding: 6px 14px;
  border: 1px solid var(--node, var(--rule));
  border-radius: 999px;
  background: rgba(14, 11, 22, 0.7);
}
.constellation__fallback a:hover { background: var(--node); color: #0E0B16; }

/* JS-built orbiting labels — hidden until enhanced. */
.constellation__label {
  display: none;
  position: absolute;
  padding: 4px 8px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  color: rgba(244, 239, 230, 0.6);
  background: rgba(14, 11, 22, 0.6);
  border: 1px solid rgba(244, 239, 230, 0.15);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: padding 0.25s ease, background 0.25s ease, color 0.25s ease, font-size 0.25s ease;
}
.constellation.is-enhanced .constellation__label { display: inline-flex; }
.constellation.is-enhanced .constellation__fallback { display: none; }
.constellation__label.is-active {
  color: #0E0B16;
  background: var(--gold);
  border-color: var(--gold);
  font-size: 13px;
  padding: 8px 14px;
}

.hero__headline {
  font-size: clamp(28px, 5.4vw, 88px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  margin: 16px 0 0;
  text-align: center;
}

/* Rotating service word inside the headline. A single word element whose
   text JS swaps on a timer; the container's min-width is set by JS to the
   widest word so the headline doesn't reflow as the word changes. Only one
   word is ever in the DOM, keeping the crawlable H1 clean. */
.flip-words {
  display: inline-block;
  text-align: center;
  vertical-align: baseline;
  line-height: 1;
}
.flip-words__word {
  display: inline-block;
  /* Padding + matching negative margin enlarge the background-clip:text paint
     box so the italic gradient glyphs aren't clipped, without shifting layout. */
  padding: 0.08em 0.18em;
  margin: -0.08em -0.18em;
  transition:
    opacity 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.flip-words.is-changing .flip-words__word {
  opacity: 0;
  filter: blur(5px);
}
@media (prefers-reduced-motion: reduce) {
  .flip-words__word {
    transition: none;
    filter: none;
  }
}
.hero__meta {
  margin-top: 20px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}
.hero__lede {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  max-width: 52ch;
  text-wrap: pretty;
}
.hero__actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

@media (max-width: 720px) {
  .hero__meta { flex-direction: column; align-items: flex-start; gap: 24px; }
  .hero__actions { width: 100%; }
  .hero__actions .btn-grad { flex: 1 1 auto; justify-content: center; }
}

/* ---- HOMEPAGE: MARQUEE ---------------------------------------------- */
.marquee {
  border-top: 1px solid rgba(244, 239, 230, 0.18);
  border-bottom: 1px solid rgba(244, 239, 230, 0.18);
  background: var(--ink);
  color: var(--bg);
  overflow: hidden;
  padding: 22px 0;
}
.marquee__track { display: flex; width: max-content; animation: dc-marquee 38s linear infinite; }
.marquee__group { display: flex; gap: 48px; padding-right: 48px; }
.marquee__item { display: inline-flex; align-items: center; gap: 48px; }
.marquee__item .display { font-size: 36px; font-weight: 600; letter-spacing: -0.02em; }
.marquee__item .display.is-italic { font-style: italic; font-weight: 400; }
.marquee__star { flex-shrink: 0; }
@keyframes dc-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee:hover .marquee__track { animation-play-state: paused; }

/* ---- HOMEPAGE: SERVICES --------------------------------------------- */
.services__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 60px;
}
.services__title {
  font-size: clamp(40px, 6vw, 84px);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin: 16px 0 0;
  max-width: 18ch;
}
.services__intro { max-width: 42ch; font-size: 16px; line-height: 1.55; color: var(--ink-soft); margin: 0; }
.services__list { border-top: 1px solid rgba(244, 239, 230, 0.18); }
.service-row { border-bottom: 1px solid rgba(244, 239, 230, 0.18); }
.service-row.is-open { background: rgba(244, 239, 230, 0.04); }
.service-row__heading { margin: 0; }
.service-row__trigger {
  width: 100%;
  display: grid;
  grid-template-columns: 70px auto 1fr 44px;
  align-items: center;
  gap: 24px;
  padding: 32px 0;
  background: transparent;
  border: 0;
  text-align: left;
  color: var(--ink);
}
.service-row__n { font-size: 13px; color: var(--ink-soft); letter-spacing: 0.1em; }
.service-row__dot { width: 14px; height: 14px; border-radius: 50%; }
.service-row__name {
  font-size: clamp(30px, 4.5vw, 60px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
}
.service-row__plus {
  width: 44px; height: 44px;
  border: 1.5px solid rgba(244, 239, 230, 0.55);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 300;
  transition: transform 0.25s ease;
}
.service-row__trigger[aria-expanded="true"] .service-row__plus { transform: rotate(45deg); }
.service-row__panel { overflow: hidden; }
.service-row__panel-inner {
  display: grid;
  /* minmax(0, ...) keeps the bullets column from being inflated by its
     min-content size (the longest unbreakable phrase in any bullet),
     which was squeezing the summary column on narrower desktop widths. */
  grid-template-columns: 70px minmax(0, 1.4fr) minmax(0, 1fr);
  grid-template-areas: ". summary bullets";
  gap: 32px;
  padding: 0 0 36px;
}
/* The summary and link share an unnamed wrapper <div> in the markup —
   that wrapper is the actual grid item, so it has to be placed in the
   summary column. Without this rule auto-flow drops it into the 70px
   gutter column and the prose wraps one or two characters per line. */
.service-row__panel-inner > div {
  grid-area: summary;
  grid-column: 2;
  min-width: 0;
}
.service-row__summary { grid-area: summary; font-size: 18px; line-height: 1.55; color: var(--ink); margin: 0; max-width: 56ch; text-wrap: pretty; }
.service-row__price { grid-area: summary; color: var(--gold-text); margin-top: 10px; font-size: 14px; letter-spacing: 0.04em; }
.service-row__link {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 16px;
  font-weight: 600; font-size: 15px;
  color: var(--cyan-text);
  text-decoration: none;
}
.service-row__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.service-row__summary, .service-row__price, .service-row__link { grid-column: 2; }
.service-row__bullets { grid-area: bullets; grid-column: 3; list-style: none; padding: 0; margin: 0; }
.service-row__bullets li {
  font-size: 14px; padding: 6px 0;
  color: var(--ink-soft);
  display: flex; align-items: center; gap: 10px;
}
.service-row__bullet-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.services__footnote { margin-top: 40px; }

@media (max-width: 768px) {
  .service-row__trigger { grid-template-columns: auto 1fr 36px; }
  .service-row__n { display: none; }
  .service-row__panel-inner {
    grid-template-columns: 1fr;
    /* Reset the desktop 3-column areas template — otherwise both grid
       items resolve to the same cell and stack on top of one another. */
    grid-template-areas:
      'summary'
      'bullets';
  }
  .service-row__panel-inner > div { grid-column: 1; grid-area: summary; }
  .service-row__summary, .service-row__price, .service-row__link { grid-column: 1; }
  .service-row__bullets { grid-column: 1; grid-area: bullets; }
}

/* ---- HOMEPAGE: WORK GRID -------------------------------------------- */
.work-home__head { margin-bottom: 56px; }
.work-home__title {
  font-size: clamp(40px, 6vw, 84px);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin: 16px 0 0;
}
.work-home__intro { max-width: 54ch; font-size: 16px; line-height: 1.55; color: var(--ink-soft); margin: 18px 0 0; }
.work-home__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.work-home__cta { margin-top: 48px; }

.work-card { display: block; text-decoration: none; color: inherit; }
.work-card__inner {
  height: var(--card-h, 420px);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  border: 1.5px solid rgba(244, 239, 230, 0.35);
  box-shadow: 4px 4px 0 rgba(244, 239, 230, 0.18);
  transform: rotate(var(--card-rot, 0deg));
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  background: #16101F;
}
a.work-card:hover .work-card__inner,
a.work-card:focus-visible .work-card__inner {
  transform: translateY(-6px) rotate(0deg);
  box-shadow: 10px 10px 0 rgba(244, 239, 230, 0.22);
}
.work-card--placeholder .work-card__inner {
  border-style: dashed;
  border-color: rgba(244, 239, 230, 0.45);
  opacity: 0.7;
}
/* Screenshot media */
.work-card__media { flex: 1 1 auto; min-height: 0; background-repeat: no-repeat; overflow: hidden; }
.work-card__img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }
/* Title bar below the screenshot — title with category + date beneath */
.work-card__bar {
  flex: 0 0 auto;
  background: var(--grad); background-size: 220% 220%;
  color: #0B0B14;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 18px;
}
.work-card__bar-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.work-card__title { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
.work-card__sub { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 0.1em; }
.work-card__cat { font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; }
.work-card__sep { opacity: 0.55; }
.work-card__date { opacity: 0.8; }
.work-card__arrow {
  width: 36px; height: 36px; border-radius: 50%;
  background: #0B0B14; color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}
.work-card__arrow svg { width: 16px; height: 16px; display: block; }
a.work-card:hover .work-card__arrow { transform: scale(1.12) rotate(-12deg); }
.work-card__placeholder-body {
  position: absolute; inset: 60px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: rgba(255, 255, 255, 0.96);
}
.work-card__placeholder-pill {
  font-size: 11px; letter-spacing: 0.22em;
  padding: 8px 16px;
  border: 1px dashed rgba(255, 255, 255, 0.5);
  border-radius: 999px;
}
.work-card__placeholder-body p { font-size: 13px; opacity: 0.75; margin: 14px 0 0; max-width: 30ch; }

@media (max-width: 900px) {
  .work-home__grid { grid-template-columns: repeat(6, 1fr); }
  .work-card { grid-column: span 6 !important; }
  .work-card__inner { transform: none; height: 360px; }
}

/* ---- HOMEPAGE: PROCESS ---------------------------------------------- */
.process {
  background: linear-gradient(180deg, rgba(244, 239, 230, 0.04), rgba(244, 239, 230, 0.02)), var(--bg-2);
}
.process__head { max-width: 60ch; margin-bottom: 72px; }
.process__title {
  font-size: clamp(40px, 6vw, 84px);
  font-weight: 500; line-height: 0.95; letter-spacing: -0.03em;
  margin: 16px 0 0;
}
.process__intro { font-size: 18px; color: var(--ink-soft); margin: 22px 0 0; line-height: 1.55; }
.process__grid {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(244, 239, 230, 0.18);
}
.process__step {
  padding: 32px 28px 40px;
  border-right: 1px solid rgba(244, 239, 230, 0.18);
}
.process__step:last-child { border-right: 0; }
.process__n { font-size: 12px; letter-spacing: 0.16em; opacity: 0.55; display: block; margin-bottom: 22px; }
.process__step-title {
  font-size: 40px; font-weight: 500; letter-spacing: -0.025em; line-height: 1;
  display: inline-block;
}
.process__timing {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-text); margin: 14px 0 0; opacity: 0.95;
}
.process__desc { font-size: 15px; line-height: 1.55; color: var(--ink-soft); margin: 14px 0 0; text-wrap: pretty; }
.process__hand { font-size: 22px; margin: 18px 0 0; color: var(--gold-text); display: inline-block; transform: rotate(-2deg); }

@media (max-width: 900px) {
  .process__grid { grid-template-columns: repeat(2, 1fr); }
  .process__step:nth-child(2) { border-right: 0; }
  .process__step:nth-child(odd) { border-right: 1px solid rgba(244, 239, 230, 0.18); }
}
@media (max-width: 560px) {
  .process__grid { grid-template-columns: 1fr; }
  .process__step { border-right: 0; border-bottom: 1px solid rgba(244, 239, 230, 0.18); }
}

/* ---- HOMEPAGE: JOURNAL STRIP ---------------------------------------- */
.journal-home {
  background: linear-gradient(180deg, rgba(244, 239, 230, 0.04), rgba(244, 239, 230, 0.02)), var(--bg-2);
}
.journal-home__head { max-width: 60ch; margin-bottom: 56px; }
.journal-home__title {
  font-size: clamp(40px, 6vw, 84px);
  font-weight: 500; line-height: 0.95; letter-spacing: -0.03em;
  margin: 16px 0 0;
}
.journal-home__intro { font-size: 18px; color: var(--ink-soft); margin: 22px 0 0; line-height: 1.55; text-wrap: pretty; }

.journal-home__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.journal-home__card {
  position: relative;
  border: 1.5px solid rgba(244, 239, 230, 0.16);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(244, 239, 230, 0.04), rgba(244, 239, 230, 0.01));
  overflow: hidden;
  transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 280ms ease;
}
.journal-home__card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--hue, var(--magenta));
  opacity: 0.85;
  z-index: 1;
}
.journal-home__card:hover {
  transform: translateY(-3px);
  border-color: rgba(244, 239, 230, 0.32);
}
.journal-home__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0 0 26px;
  text-decoration: none;
  color: inherit;
}
.journal-home__media {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: rgba(244, 239, 230, 0.04);
  position: relative;
}
.journal-home__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 480ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.journal-home__card:hover .journal-home__media img { transform: scale(1.03); }

.journal-home__media--blank {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(60% 80% at 30% 30%, color-mix(in oklab, var(--hue, var(--magenta)) 30%, transparent), transparent 70%),
    linear-gradient(135deg, rgba(244, 239, 230, 0.06), rgba(244, 239, 230, 0.02));
}
.journal-home__mark {
  font-size: 56px;
  font-weight: 500;
  color: var(--hue, var(--magenta));
  opacity: 0.55;
  letter-spacing: -0.04em;
}
.journal-home__meta {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 22px 28px 0;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.journal-home__cat { color: var(--hue, var(--magenta)); }
.journal-home__post-title {
  font-family: var(--font-display, inherit);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 12px 28px 0;
  text-wrap: balance;
}
.journal-home__excerpt {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 12px 28px 0;
  text-wrap: pretty;
}
.journal-home__more {
  margin: 20px 28px 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--hue, var(--magenta));
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
}
.journal-home__more .arrow {
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.journal-home__card:hover .journal-home__more .arrow { transform: translateX(4px); }

.journal-home__cta { margin-top: 40px; text-align: center; }

@media (max-width: 960px) {
  .journal-home__grid { grid-template-columns: 1fr 1fr; }
  .journal-home__card:nth-child(3) { grid-column: 1 / -1; }
  .journal-home__card:nth-child(3) .journal-home__media { aspect-ratio: 21 / 9; }
}
@media (max-width: 640px) {
  .journal-home__grid { grid-template-columns: 1fr; gap: 18px; }
  .journal-home__card:nth-child(3) .journal-home__media { aspect-ratio: 16 / 10; }
}

/* ---- HOMEPAGE: CLOSING CTA ------------------------------------------ */
.home-cta { text-align: center; }
.home-cta__inner { display: flex; flex-direction: column; align-items: center; }
.home-cta__headline {
  font-size: clamp(48px, 9vw, 140px);
  font-weight: 500; line-height: 0.9; letter-spacing: -0.04em;
  margin: 24px 0 0;
}
/* Italic punctuation (?, !) overhangs its inline box. With background-clip:
   text the gradient only covers pixels inside the box, so the overhang
   reads as cut-off. A touch of right padding extends the gradient area
   so the full glyph is painted. */
.home-cta__headline .grad-text {
  padding-right: 0.12em;
}
.home-cta__lede {
  max-width: 48ch; margin: 32px 0 40px;
  font-size: 18px; line-height: 1.55; color: var(--ink-soft);
  text-wrap: pretty;
}
.home-cta__actions { display: inline-flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: center; }
.home-cta__hand { font-size: 26px; color: var(--magenta-text); margin: 28px 0 0; transform: rotate(-2deg); }

/* ---- HOMEPAGE: TESTIMONIALS (off until Jan 2027) -------------------- */
.testimonials__head { margin-bottom: 60px; }
.testimonials__title { font-size: clamp(40px, 6vw, 84px); font-weight: 500; line-height: 0.95; letter-spacing: -0.03em; margin: 16px 0 0; }
.testimonials__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.testimonial-card {
  margin: 0;
  border: 1.5px solid rgba(244, 239, 230, 0.4);
  border-radius: 16px;
  padding: 36px 28px 28px;
  background: linear-gradient(180deg, rgba(244, 239, 230, 0.06), rgba(244, 239, 230, 0.02));
}
.testimonial-card blockquote { font-size: 22px; line-height: 1.32; margin: 0 0 28px; }
.testimonial-card figcaption { display: flex; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid rgba(244, 239, 230, 0.18); }
.testimonial-card__avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--hue, var(--magenta)); flex-shrink: 0; }
.testimonial-card__name { font-weight: 600; font-size: 14px; display: block; }
.testimonial-card__role { font-size: 12px; color: var(--ink-soft); display: block; }
@media (max-width: 900px) { .testimonials__grid { grid-template-columns: 1fr; } }

/* ---- SHARED: CTA BAND + PROCESS RECAP + FACTS ----------------------- */
.cta-band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  padding: 56px 40px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.cta-band__heading { font-size: clamp(30px, 4vw, 52px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.02; max-width: 18ch; }
.cta-band__sub { color: var(--ink-soft); margin: 12px 0 0; font-size: 16px; }
.cta-band__actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

/* Ghost buttons paired with .btn-grad in a CTA row should match its height so
   the primary/secondary pair reads as intentional, not mismatched. */
.cta-band__actions .btn,
.home-cta__actions .btn {
  padding: 18px 32px;
  font-size: 18px;
}

.process-recap__title { font-size: clamp(30px, 4.5vw, 56px); font-weight: 500; letter-spacing: -0.03em; margin: 14px 0 40px; }
.process-recap__grid {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.process-recap__step { padding: 24px; background: var(--bg-2); border: 1px solid var(--bg-3); border-radius: var(--radius); }
.process-recap__n { font-size: 12px; letter-spacing: 0.16em; color: var(--ink-dim); }
.process-recap__step-title { font-size: 24px; font-weight: 500; margin: 10px 0 0; }
.process-recap__timing { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-text); margin: 8px 0 0; }
.process-recap__desc { font-size: 14px; line-height: 1.55; color: var(--ink-soft); margin: 12px 0 0; }
@media (max-width: 900px) { .process-recap__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .process-recap__grid { grid-template-columns: 1fr; } }

.fact-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  margin: 0; border-top: 1px solid var(--rule); padding-top: 40px;
}
.fact dt { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-dim); }
.fact dd { margin: 8px 0 0; font-size: clamp(28px, 3.4vw, 44px); font-weight: 500; letter-spacing: -0.02em; }
@media (max-width: 700px) { .fact-grid { grid-template-columns: 1fr 1fr; } }

/* ---- ABOUT PAGE ----------------------------------------------------- */
.about-grid { display: grid; grid-template-columns: 0.8fr 1.4fr; gap: 56px; align-items: start; }
.about-grid__lead h2 { font-size: clamp(32px, 4vw, 56px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.02; }
.about-craft__title { font-size: clamp(28px, 3.6vw, 48px); font-weight: 500; letter-spacing: -0.03em; margin: 14px 0 32px; }
.about-craft__list {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 40px;
  max-width: 760px;
}
.about-craft__list li { display: flex; align-items: center; gap: 14px; font-size: 18px; padding: 10px 0; border-bottom: 1px solid var(--rule-soft); }
.about-craft__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--grad); flex-shrink: 0; }
.about-craft__note { max-width: 64ch; color: var(--ink-soft); margin: 32px 0 0; font-size: 16px; line-height: 1.6; }
.about-facts__note { font-size: 22px; color: var(--magenta-text); margin: 24px 0 0; transform: rotate(-1.5deg); display: inline-block; }
.about-facts__tagline { font-size: 24px; color: var(--magenta-text); margin: 32px 0 0; transform: rotate(-1.5deg); display: inline-block; }

/* ---- ABOUT: RECEIPTS + RANGE SIDE-BY-SIDE ----------------------------
   Two columns share a row: highlights (left) and range (right). At
   narrow widths they stack. The range list drops its internal 2-column
   grid when it lives in this layout — it's already getting narrow
   real estate, so it reads cleaner as a single-column list.
---------------------------------------------------------------------- */
.about-rr {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.about-rr__col { min-width: 0; }
.about-rr__title {
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 500;
  letter-spacing: -0.03em;
  margin: 14px 0 28px;
  line-height: 1.05;
}

/* Range list — when stacked into the side-by-side row, drop the
   internal 2-up grid and stretch full width of its column. */
.about-craft__list--stacked {
  display: block;
  grid-template-columns: none;
  max-width: none;
}
.about-craft__list--stacked li { padding: 12px 0; }

@media (max-width: 960px) {
  .about-rr { grid-template-columns: 1fr; gap: 56px; }
}

/* ---- ABOUT: HIGHLIGHTS / CREDENTIALS ---------------------------------
   A vertical numbered list. Each item: mono "(NN)", a brand-hue dot, a
   bold lead line, and an optional supporting body. Reads as a credentials
   strip — concrete trust signals — without the visual weight of a fact
   grid. The hue rotates per row so the section picks up the studio
   palette without leaning on any one color.
---------------------------------------------------------------------- */
.about-highlights__title {
  font-size: clamp(28px, 3.6vw, 48px);
  font-weight: 500;
  letter-spacing: -0.03em;
  margin: 14px 0 32px;
}
.about-highlights__list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 880px;
  border-top: 1px solid var(--rule-soft);
}
.about-highlights__item {
  display: grid;
  grid-template-columns: 56px 18px 1fr;
  gap: 18px;
  align-items: baseline;
  padding: 20px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.about-highlights__n {
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--ink-dim);
  align-self: center;
}
.about-highlights__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--hue, var(--magenta));
  align-self: center;
  justify-self: center;
}
.about-highlights__copy { min-width: 0; }
.about-highlights__lead {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
  line-height: 1.25;
}
.about-highlights__body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 6px 0 0;
  text-wrap: pretty;
}

@media (max-width: 640px) {
  .about-highlights__item {
    grid-template-columns: auto 1fr;
    gap: 14px;
  }
  .about-highlights__n {
    grid-column: 1 / -1;
    margin-bottom: -4px;
  }
  .about-highlights__dot {
    align-self: start;
    margin-top: 8px;
  }
}

@media (max-width: 820px) {
  .about-grid { grid-template-columns: 1fr; gap: 28px; }
  .about-craft__list { grid-template-columns: 1fr; }
}

/* ---- SERVICES OVERVIEW + SERVICE DETAIL ----------------------------- */
.service-cards__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.service-card {
  background: var(--bg-2);
  border: 1px solid var(--bg-3);
  border-top: 3px solid var(--hue, var(--cyan));
  border-radius: var(--radius);
  padding: 32px 28px;
  display: flex; flex-direction: column;
}
.service-card__n { font-size: 12px; color: var(--ink-dim); letter-spacing: 0.1em; }
.service-card__title { font-size: 30px; font-weight: 500; letter-spacing: -0.02em; margin: 8px 0 0; }
.service-card__tagline { color: var(--hue, var(--cyan)); font-size: 15px; margin: 10px 0 0; font-weight: 500; }
.service-card__summary { color: var(--ink-soft); font-size: 15px; line-height: 1.6; margin: 14px 0 0; }
.service-card__bullets { list-style: none; padding: 0; margin: 20px 0 0; }
.service-card__bullets li { display: flex; align-items: center; gap: 10px; font-size: 14px; padding: 5px 0; color: var(--ink-soft); }
.service-card__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--hue, var(--cyan)); flex-shrink: 0; }
.service-card__price { color: var(--gold-text); margin: 18px 0 0; font-size: 14px; }
.service-card__link {
  margin-top: auto; padding-top: 22px;
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 15px; color: var(--ink); text-decoration: none;
}
.service-card__link:hover { color: var(--hue, var(--cyan)); }
.service-cards__extra { margin: 56px auto 0; }
.pricing-note {
  margin-top: 48px; padding: 32px;
  background: var(--bg-2); border: 1px solid var(--bg-3); border-radius: var(--radius);
  max-width: 70ch;
}
.pricing-note p:last-child { margin: 12px 0 0; color: var(--ink-soft); }
@media (max-width: 900px) { .service-cards__grid { grid-template-columns: 1fr; } }

.service-detail__grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; align-items: start; }
.service-detail__summary { font-size: 22px; line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.service-detail__price { color: var(--gold-text); margin: 24px 0; font-size: 16px; }
.service-detail__price-note { color: var(--ink-soft); margin: 24px 0; font-size: 15px; }
.service-detail__includes {
  background: var(--bg-2);
  border: 1px solid var(--bg-3);
  border-top: 3px solid var(--hue, var(--cyan));
  border-radius: var(--radius);
  padding: 28px;
}
.service-detail__bullets { list-style: none; padding: 0; margin: 18px 0 0; }
.service-detail__bullets li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; padding: 9px 0; border-bottom: 1px solid var(--rule-soft); color: var(--ink-soft); }
.service-detail__bullets li:last-child { border-bottom: 0; }
.service-detail__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--hue, var(--cyan)); flex-shrink: 0; margin-top: 7px; }
.service-cross__title { font-size: clamp(26px, 3.4vw, 44px); font-weight: 500; letter-spacing: -0.03em; margin-bottom: 28px; }
.service-cross__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.service-cross__card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 28px;
  background: var(--bg-2); border: 1px solid var(--bg-3);
  border-left: 3px solid var(--hue, var(--cyan));
  border-radius: var(--radius);
  text-decoration: none; color: var(--ink);
  transition: transform 0.18s ease;
}
.service-cross__card:hover { transform: translateY(-3px); }
.service-cross__n { font-size: 11px; color: var(--ink-dim); letter-spacing: 0.1em; }
.service-cross__name { font-size: 26px; font-weight: 500; letter-spacing: -0.02em; }
.service-cross__tagline { color: var(--ink-soft); font-size: 14px; }
@media (max-width: 820px) {
  .service-detail__grid { grid-template-columns: 1fr; gap: 32px; }
  .service-cross__grid { grid-template-columns: 1fr; }
}

/* ---- SERVICE PAGE: PORTFOLIO ---------------------------------------- */
.service-portfolio__title { font-size: clamp(28px, 3.6vw, 44px); font-weight: 500; letter-spacing: -0.03em; margin-bottom: 28px; }
.service-portfolio__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.service-portfolio__grid .work-card__inner { height: 320px; transform: none; }
.service-portfolio__cta { margin-top: 32px; }
@media (max-width: 900px) { .service-portfolio__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .service-portfolio__grid { grid-template-columns: 1fr; } }

/* ---- POST LIST / CARDS / EMPTY STATE -------------------------------- */
.post-list { display: grid; gap: 28px; }
.post-card {
  display: grid; grid-template-columns: 280px 1fr; gap: 28px;
  padding-bottom: 28px; border-bottom: 1px solid var(--rule);
  align-items: start;
}
.post-card__thumb img { border-radius: var(--radius); aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.post-card__meta { color: var(--ink-dim); font-size: 12px; letter-spacing: 0.08em; margin: 0 0 8px; }
.post-card__title { font-size: 28px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; margin: 0; }
.post-card__title a { color: var(--ink); text-decoration: none; }
.post-card__title a:hover { color: var(--cyan-text); }
.post-card__excerpt { color: var(--ink-soft); margin: 12px 0 0; }
.post-card__more { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-weight: 600; font-size: 14px; color: var(--cyan-text); text-decoration: none; }
.post-card:last-child { border-bottom: 0; }
@media (max-width: 640px) { .post-card { grid-template-columns: 1fr; gap: 16px; } }

.empty-state { text-align: center; padding: 40px 0; }
.empty-state .display { font-size: 32px; }
.empty-state p { color: var(--ink-soft); }
.empty-state .search-form, .search-again { margin-top: 24px; }

/* Pagination (the_posts_pagination). */
.pagination { margin-top: 48px; display: flex; justify-content: center; }
.pagination .nav-links { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 44px; padding: 0 12px;
  border: 1px solid var(--rule); border-radius: 10px;
  color: var(--ink); text-decoration: none; font-family: var(--font-mono); font-size: 14px;
}
.pagination .page-numbers.current { background: var(--ink); color: var(--bg); }
.pagination .page-numbers:hover { border-color: var(--ink); }

/* ---- WORK: ARCHIVE / TAXONOMY / SINGLE ------------------------------ */
.work-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.work-filter__chip {
  display: inline-flex; align-items: center;
  padding: 8px 16px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: var(--ink-soft);
}
.work-filter__chip:hover { color: var(--ink); border-color: var(--ink-dim); }
.work-filter__chip.is-current { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* Uniform card grid for the archive + Websites taxonomy. */
.work-archive__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.work-archive__grid .work-card__inner { height: 380px; transform: none; }
@media (max-width: 900px) { .work-archive__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .work-archive__grid { grid-template-columns: 1fr; } }

/* Gallery grid for the non-Websites categories. */
.work-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.work-gallery__item { margin: 0; }
.work-gallery__link { display: block; border-radius: var(--radius); overflow: hidden; }
.work-gallery__link img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.3s ease; }
.work-gallery__link:hover img { transform: scale(1.04); }
.work-gallery__caption { margin-top: 10px; }
.work-gallery__name { font-weight: 600; font-size: 15px; display: block; }
.work-gallery__sub { font-size: 13px; color: var(--ink-soft); display: block; }
@media (max-width: 900px) { .work-gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .work-gallery { grid-template-columns: 1fr; } }

/* Single project. */
.project-single__byline { color: var(--ink-soft); font-size: 13px; letter-spacing: 0.1em; margin: 16px 0 0; }
.project-single__hero { margin: 48px 0 0; }
.project-single__hero-img { width: 100%; border-radius: var(--radius); object-fit: cover; }
.project-metrics {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 24px; margin: 56px 0 0;
  border-top: 1px solid var(--rule); padding-top: 36px;
}
.project-metric { text-align: left; }
.project-metric__value { font-size: clamp(36px, 5vw, 64px); font-weight: 500; letter-spacing: -0.03em; }
.project-metric__label { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-dim); margin-top: 6px; }
.project-single__live { margin-top: 32px; }
.project-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.project-gallery__item { margin: 0; }
.project-gallery__item img { width: 100%; border-radius: var(--radius); }
.project-gallery__title { font-size: clamp(26px, 3.4vw, 40px); font-weight: 500; margin-bottom: 24px; }
.project-single__nav { padding-bottom: 80px; }
@media (max-width: 700px) {
  .project-metrics { grid-auto-flow: row; }
  .project-gallery { grid-template-columns: 1fr; }
}

/* Lightbox overlay (built by main.js). */
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(14, 11, 22, 0.94);
  display: flex; align-items: center; justify-content: center;
  padding: 40px;
}
.lightbox[hidden] { display: none; }
.lightbox__img { max-width: 92vw; max-height: 88vh; border-radius: 8px; }
.lightbox__close {
  position: absolute; top: 20px; right: 24px;
  width: 48px; height: 48px;
  background: transparent; border: 1.5px solid var(--rule);
  border-radius: 12px; color: var(--ink); font-size: 28px; line-height: 1;
}

/* ---- FAQ ------------------------------------------------------------ */
.faq-intro { margin-bottom: 40px; }
.faq-list { border-top: 1px solid var(--rule); }
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-item.is-open { background: rgba(244, 239, 230, 0.03); }
.faq-item__q { margin: 0; }
.faq-item__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 0;
  background: transparent;
  border: 0;
  text-align: left;
  color: var(--ink);
}
.faq-item__q-text { font-family: var(--font-display); font-size: clamp(19px, 2.4vw, 26px); font-weight: 500; letter-spacing: -0.01em; }
.faq-item__plus {
  width: 38px; height: 38px; flex-shrink: 0;
  border: 1.5px solid rgba(244, 239, 230, 0.5);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 300;
  transition: transform 0.25s ease;
}
.faq-item__trigger[aria-expanded="true"] .faq-item__plus { transform: rotate(45deg); }
.faq-item__a { padding: 0 0 28px; }
.faq-item__a p { font-size: 17px; line-height: 1.65; color: var(--ink-soft); margin: 0; max-width: 68ch; text-wrap: pretty; }
.faq-stillstuck { margin-top: 40px; color: var(--ink-soft); }
.faq-stillstuck a { color: var(--cyan-text); text-decoration: none; font-weight: 600; }
.faq-stillstuck a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- ON-PAGE FAQ BLOCK (service + city pages) ----------------------
   Always-visible question (H3) + answer pairs — atomic answers kept
   crawlable by default, mirrored into FAQPage JSON-LD. Distinct from the
   accordion .faq-item used on the main FAQ page. */
.faq-block__title { font-size: clamp(26px, 3.2vw, 40px); font-weight: 500; letter-spacing: -0.03em; margin: 14px 0 32px; }
.faq-block__list { display: grid; gap: 28px; max-width: 72ch; }
.faq-block__item { border-top: 1px solid var(--rule-soft); padding-top: 20px; }
.faq-block__item:first-child { border-top: 0; padding-top: 0; }
.faq-block__q {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.1vw, 23px);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 8px;
  text-wrap: balance;
}
.faq-block__a {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0;
  text-wrap: pretty;
}

/* ---- FORMS + CONTACT ------------------------------------------------ */
.contact-grid { display: grid; grid-template-columns: 1.4fr 0.9fr; gap: 56px; align-items: start; }
.contact-intro { margin-bottom: 28px; }

.form-row { margin-bottom: 20px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-grid .form-row { margin-bottom: 20px; }
.contact-form label,
.search-form__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.contact-form .req { color: var(--magenta-text); }
.contact-form .optional { text-transform: none; letter-spacing: 0; color: var(--ink-dim); }
.contact-form input,
.contact-form select,
.contact-form textarea,
.search-form__input {
  width: 100%;
  padding: 14px 16px;
  background: var(--bg-2);
  border: 1.5px solid rgba(244, 239, 230, 0.3);
  border-radius: 10px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus,
.search-form__input:focus {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-color: var(--ink-dim);
}
.contact-form textarea { resize: vertical; min-height: 140px; }
.contact-form .btn-grad { margin-top: 8px; }
.contact-form__fineprint { font-size: 13px; color: var(--ink-dim); margin-top: 16px; }

/* ---- CONTACT FORM 7 — styled to match the theme's form -------------
   Targets CF7's OWN classes (.wpcf7-form …) directly, so the styling
   applies whether or not the `contact-form` class is on the form. */
.wpcf7-form { color: var(--ink); }
.wpcf7-form .form-row { margin-bottom: 20px; }
.wpcf7-form .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* Labels — mono uppercase, matching the built-in form. */
.wpcf7-form label {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0;
}
.wpcf7-form .req { color: var(--magenta-text); }
.wpcf7-form .optional { text-transform: none; letter-spacing: 0; color: var(--ink-dim); }

/* CF7 wraps each control in a span — block it and add the label-to-field gap. */
.wpcf7-form-control-wrap { display: block; margin-top: 8px; }

/* Fields. */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form select,
.wpcf7-form textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--bg-2);
  border: 1.5px solid rgba(244, 239, 230, 0.3);
  border-radius: 10px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
}
.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-color: var(--ink-dim);
}
.wpcf7-form textarea { resize: vertical; min-height: 140px; }
.wpcf7-form select { -webkit-appearance: none; appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%), linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%); background-position: calc(100% - 20px) calc(50% - 2px), calc(100% - 14px) calc(50% - 2px); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }

/* Submit — matches .btn-grad (an input can't use ::before, so it's styled directly). */
.wpcf7-form .wpcf7-submit {
  display: inline-flex;
  align-items: center;
  width: auto;
  margin-top: 8px;
  padding: 18px 34px;
  border: none;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: #0B0B14;
  background: var(--grad);
  background-size: 220% 220%;
  background-position: 0% 50%;
  box-shadow: 0 10px 40px -10px rgba(106, 79, 224, 0.55), 0 4px 14px -4px rgba(212, 64, 181, 0.35);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, background-position 1.2s ease;
}
.wpcf7-form .wpcf7-submit:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 56px -12px rgba(106, 79, 224, 0.7), 0 6px 18px -4px rgba(212, 64, 181, 0.5);
  filter: brightness(1.06);
  animation: dc-grad-flow 3s linear infinite;
}
.wpcf7-form .wpcf7-submit:disabled { opacity: 0.6; cursor: default; transform: none; animation: none; }

/* Inline field validation. */
.wpcf7-not-valid-tip {
  display: block;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--magenta-text);
}
.wpcf7-form input.wpcf7-not-valid,
.wpcf7-form select.wpcf7-not-valid,
.wpcf7-form textarea.wpcf7-not-valid { border-color: var(--magenta-text); }

/* Response banner (success / error summary under the form). */
.wpcf7-response-output {
  margin: 20px 0 0 !important;
  padding: 14px 18px !important;
  border-radius: 10px;
  border: 1.5px solid var(--bg-3) !important;
  font-size: 15px;
  color: var(--ink);
}
.wpcf7-form.sent .wpcf7-response-output { border-color: var(--cyan-text) !important; }
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.spam .wpcf7-response-output { border-color: var(--magenta-text) !important; }

/* AJAX spinner tint. */
.wpcf7-spinner { background-color: var(--ink-soft); }

/* Honeypot — visually + AT hidden, but NOT display:none (some bots skip those). */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

.form-notice {
  padding: 16px 20px;
  border-radius: 10px;
  margin-bottom: 28px;
  font-size: 15px;
}
.form-notice--ok { background: rgba(61, 214, 140, 0.12); border: 1px solid rgba(61, 214, 140, 0.5); color: #8FE9BC; }
.form-notice--bad { background: rgba(232, 62, 92, 0.12); border: 1px solid rgba(232, 62, 92, 0.5); color: #F2899B; }

.contact-card {
  background: var(--bg-2);
  border: 1px solid var(--bg-3);
  border-radius: var(--radius);
  padding: 28px;
}
.contact-card__list { list-style: none; padding: 0; margin: 18px 0 0; }
.contact-card__list li { padding: 14px 0; border-bottom: 1px solid var(--rule-soft); }
.contact-card__list li:last-child { border-bottom: 0; }
.contact-card__label { display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 4px; }
.contact-card__list a { color: var(--cyan-text); text-decoration: none; font-size: 17px; }
.contact-card__list a:hover { text-decoration: underline; text-underline-offset: 3px; }
.contact-card__address { font-style: normal; line-height: 1.6; color: var(--ink); font-size: 16px; }
.contact-card__hours { font-size: 14px; color: var(--ink-soft); margin: 18px 0 0; line-height: 1.6; }
.contact-map {
  margin-top: 20px;
  height: 160px;
  border-radius: var(--radius);
  border: 1px dashed var(--bg-3);
  background:
    repeating-linear-gradient(45deg, rgba(244,239,230,0.03) 0 10px, transparent 10px 20px),
    var(--bg-2);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-dim); font-size: 12px; letter-spacing: 0.08em;
}

/* ---- CONTACT: SERVICE AREA BLOCK ----------------------------------- */
.contact-service-area {
  margin-top: 22px;
  padding: 22px;
  background: var(--bg-2);
  border: 1px solid var(--bg-3);
  border-radius: var(--radius);
}
.contact-service-area .eyebrow { margin-bottom: 14px; }
.contact-service-area__city {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0;
}
.contact-service-area__list {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  line-height: 1.9;
  margin: 12px 0 0;
}
.contact-service-area__note {
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.55;
  margin: 14px 0 0;
}
.contact-service-area__cta { margin: 14px 0 0; font-size: 14px; }
.contact-service-area__cta a { color: var(--cyan-text); text-decoration: none; font-weight: 600; }
.contact-service-area__cta a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- SERVICE AREA: PARENT GRID ------------------------------------- */
.service-area-grid__intro { margin: 0 auto 40px; max-width: 70ch; }
.city-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.city-card {
  background: var(--bg-2);
  border: 1px solid var(--bg-3);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.city-card__map {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--bg-3);
}
.city-card__map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.city-card__meta { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 6px; }
.city-card__name { font-size: 26px; font-weight: 500; letter-spacing: -0.02em; margin: 0; }
.city-card__name a { color: var(--ink); text-decoration: none; }
.city-card__name a:hover { color: var(--cyan-text); }
.city-card__distance {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.city-card__cta {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 14px;
  color: var(--cyan-text);
  text-decoration: none;
}
.city-card__cta:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) { .city-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .city-grid { grid-template-columns: 1fr; } }

/* ---- CITY PAGE: ZOOMED MAP ----------------------------------------- */
.city-map-section { padding-top: 0; }
.city-map {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--bg-3);
}
.city-map iframe {
  display: block;
  width: 100%;
  height: clamp(320px, 50vh, 480px);
  border: 0;
}
.city-map__attribution {
  margin: 12px 0 0;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
}
.city-map__attribution a { color: var(--ink-soft); }

/* ---- CITY PAGE: NARRATIVE (editor content) ------------------------- */
.city-narrative .entry-content { max-width: 70ch; margin: 0 auto; }

/* ---- CITY PAGE: SERVICES LIST -------------------------------------- */
.city-services__title { font-size: clamp(28px, 3.6vw, 44px); font-weight: 500; letter-spacing: -0.03em; margin-bottom: 28px; }
.city-services__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.city-services__card {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 20px 24px;
  background: var(--bg-2);
  border: 1px solid var(--bg-3);
  border-left: 3px solid var(--hue, var(--cyan));
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.18s ease;
}
.city-services__card:hover { transform: translateY(-2px); }
.city-services__n { font-size: 12px; color: var(--ink-dim); letter-spacing: 0.1em; }
.city-services__name { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; line-height: 1; }
.city-services__tagline { display: block; color: var(--ink-soft); font-size: 13px; margin-top: 4px; }
@media (max-width: 720px) { .city-services__grid { grid-template-columns: 1fr; } }

/* ---- CITY PAGE: PER-SERVICE PROSE BLOCK -----------------------------
   Replaces the older 4-up service grid on city pages. Each card name-
   checks the city in the heading, body, and link anchor — strong city +
   service co-occurrence and a city-qualified internal link target for
   every service.
---------------------------------------------------------------------- */
.city-services-prose__head { max-width: 60ch; margin-bottom: 40px; }
.city-services-prose__head .eyebrow { margin-bottom: 14px; }
.city-services-prose__title {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0;
  text-wrap: balance;
}

.city-services-prose__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
.city-services-prose__card {
  position: relative;
  padding: 28px 28px 24px;
  border: 1.5px solid rgba(244, 239, 230, 0.16);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(244, 239, 230, 0.035), rgba(244, 239, 230, 0.01));
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 280ms ease, transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.city-services-prose__card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14%;
  bottom: 14%;
  width: 3px;
  background: var(--hue, var(--magenta));
  border-radius: 0 3px 3px 0;
  opacity: 0.9;
}
.city-services-prose__card:hover {
  border-color: rgba(244, 239, 230, 0.32);
  transform: translateY(-2px);
}

.city-services-prose__n {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 0;
}
.city-services-prose__heading {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.city-services-prose__body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
  text-wrap: pretty;
}
.city-services-prose__link {
  margin: auto 0 0;
  padding-top: 6px;
}
.city-services-prose__link a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--hue, var(--magenta));
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color 200ms ease;
}
.city-services-prose__link a:hover { border-bottom-color: currentColor; }
.city-services-prose__link .arrow { transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.city-services-prose__link a:hover .arrow { transform: translateX(4px); }

@media (max-width: 760px) {
  .city-services-prose__grid { grid-template-columns: 1fr; gap: 16px; }
  .city-services-prose__card { padding: 24px 22px 22px; }
}

/* ---- CITY PAGE: TRUST BLOCK ---------------------------------------- */
.city-trust .eyebrow { margin-bottom: 14px; }
.city-trust__title { font-size: clamp(28px, 3.6vw, 44px); font-weight: 500; letter-spacing: -0.03em; margin: 0 0 28px; }
.city-trust__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.city-trust__list li {
  padding: 16px 18px;
  background: var(--bg-2);
  border: 1px solid var(--bg-3);
  border-radius: var(--radius);
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.55;
}
.city-trust__list li strong { color: var(--ink); font-weight: 600; }
.city-trust__reviews {
  margin: 28px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--rule-soft);
  font-size: 13px;
  color: var(--ink-dim);
  letter-spacing: 0.04em;
}
.city-trust__reviews a { color: var(--cyan-text); text-decoration: none; font-weight: 600; }
.city-trust__reviews a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- CITY PAGE: CROSS-LINK TO OTHER CITIES ------------------------- */
.city-cross__title { font-size: clamp(26px, 3.4vw, 40px); font-weight: 500; letter-spacing: -0.03em; margin-bottom: 22px; }
.city-cross__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.city-cross__list a {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--ink-soft);
}
.city-cross__list a:hover { color: var(--ink); border-color: var(--ink-dim); }
.city-cross__back { margin-top: 28px; }

/* Selected work in [City] — reuses .work-archive__grid + .work-card */
.city-work .city-services-prose__head { margin-bottom: 32px; }
.city-work__more { margin-top: 28px; }
.city-work__more a {
  color: var(--cyan-text);
  text-decoration: none;
  font-weight: 600;
}
.city-work__more a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* --- "Why social, why now" — social service page only ----------------- */
.social-shift { --hue: var(--magenta); }
.social-shift__head { max-width: 60ch; margin-bottom: 44px; }
.social-shift__head .eyebrow { margin-bottom: 14px; }
.social-shift__title { margin-bottom: 18px; }
.social-shift__lede { color: var(--ink-soft); margin: 0; }

.social-shift__cmp {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 0 0 18px;
}
.social-shift__cmp-card {
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 24px 22px;
  background: var(--bg-2);
}
.social-shift__cmp-label {
  margin: 0 0 12px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.social-shift__cmp-label span {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  background: var(--ink);
  color: var(--bg);
  font-weight: 700;
}
.social-shift__cmp-card:last-child .social-shift__cmp-label span {
  background: var(--hue);
  color: var(--ink);
}
.social-shift__cmp-heading {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.2;
  color: var(--ink);
}
.social-shift__cmp-body { margin: 0; color: var(--ink-soft); font-size: 15px; }

.social-shift__note {
  font-style: italic;
  color: var(--ink-soft);
  font-size: 14px;
  margin: 0 0 56px;
  padding-left: 16px;
  border-left: 2px solid var(--rule);
}

.social-shift__three {
  list-style: none;
  padding: 0;
  margin: 0 0 56px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  border-top: 1px solid var(--rule);
  padding-top: 36px;
}
.social-shift__three > li { margin: 0; }
.social-shift__three-n {
  display: inline-block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  color: var(--hue);
  margin-bottom: 10px;
}
.social-shift__three-title {
  font-family: var(--font-display);
  font-size: 18px;
  margin: 0 0 8px;
  color: var(--ink);
}
.social-shift__three > li p { margin: 0; color: var(--ink-soft); font-size: 15px; }

.social-shift__pull {
  margin: 0 0 44px;
  padding: 36px 36px;
  border-radius: 14px;
  background: var(--ink);
  color: var(--bg);
}
.social-shift__pull p {
  margin: 0;
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1.28;
  letter-spacing: -0.005em;
}
.social-shift__pull em {
  font-style: italic;
  color: var(--hue);
}

.social-shift__close {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: start;
  padding: 22px 24px;
  border-left: 3px solid var(--hue);
  background: var(--bg-2);
  border-radius: 0 10px 10px 0;
}
.social-shift__close-arrow {
  color: var(--hue);
  font-size: 22px;
  line-height: 1;
  margin-top: 2px;
}
.social-shift__close-title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--ink);
}
.social-shift__close-body p:last-child { margin: 0; color: var(--ink-soft); font-size: 15px; }

@media (max-width: 760px) {
  .social-shift__cmp { grid-template-columns: 1fr; gap: 16px; }
  .social-shift__three { grid-template-columns: 1fr; gap: 28px; }
  .social-shift__pull { padding: 28px 24px; }
  .social-shift__pull p { font-size: 22px; }
}

.search-form__row { display: flex; gap: 10px; }
.search-form__submit { flex-shrink: 0; }

@media (max-width: 820px) {
  .contact-grid { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 560px) {
  .form-grid { grid-template-columns: 1fr; }
}

/* ---- JOURNAL SINGLE / 404 ------------------------------------------- */
.journal-single__meta { color: var(--ink-soft); font-size: 13px; letter-spacing: 0.08em; margin: 16px 0 0; }
.journal-single__meta a { color: var(--ink-soft); }
.journal-single__hero { margin: 40px 0 0; }
.journal-single__hero img { width: 100%; border-radius: var(--radius); }
.journal-single__hero figcaption { font-size: 13px; color: var(--ink-dim); margin-top: 8px; }
.journal-single__tags { margin-top: 32px; color: var(--ink-dim); font-size: 13px; }
.journal-single__tags a { color: var(--ink-soft); }
.journal-single__nav {
  display: flex; justify-content: space-between; gap: 24px;
  margin-top: 48px; padding-top: 28px;
  border-top: 1px solid var(--rule);
}
.journal-single__nav-link {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px;
  max-width: 45%;
}
.journal-single__nav-link--next { margin-left: auto; text-align: right; }
.journal-single__nav-link:hover { color: var(--cyan-text); }
.page-links { margin-top: 24px; display: flex; gap: 8px; align-items: center; font-family: var(--font-mono); font-size: 14px; }
.page-links a { padding: 4px 10px; border: 1px solid var(--rule); border-radius: 6px; text-decoration: none; color: var(--ink); }

.error-404 { text-align: center; padding: 24px 0; }
.error-404__links {
  list-style: none; padding: 0; margin: 32px 0 0;
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}
.error-404__links a {
  padding: 10px 18px; border: 1px solid var(--rule); border-radius: 999px;
  text-decoration: none; color: var(--ink); font-family: var(--font-mono); font-size: 13px;
}
.error-404__links a:hover { border-color: var(--ink); }

/* ---- COMMENTS ------------------------------------------------------- */
.comments { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--rule); }
.comments__title, .comment-form__title { font-size: 26px; font-weight: 500; margin-bottom: 24px; }
.comment-list { list-style: none; padding: 0; margin: 0 0 40px; }
.comment-list ol { list-style: none; padding-left: 28px; }
.comment-list .comment { padding: 20px 0; border-bottom: 1px solid var(--rule-soft); }
.comment-list .comment-author { display: flex; align-items: center; gap: 12px; }
.comment-list .comment-author .fn { font-weight: 600; }
.comment-list .comment-meta { font-family: var(--font-mono); font-size: 12px; color: var(--ink-dim); margin: 4px 0; }
.comment-list .comment-content { color: var(--ink-soft); margin-top: 8px; }
.comment-respond { background: var(--bg-2); border: 1px solid var(--bg-3); border-radius: var(--radius); padding: 28px; }
.comment-form label { display: block; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px; }
.comment-form input:not([type="submit"]):not([type="checkbox"]),
.comment-form textarea {
  width: 100%; padding: 12px 14px; margin-bottom: 16px;
  background: var(--bg); border: 1.5px solid var(--bg-3); border-radius: 8px;
  color: var(--ink); font-family: var(--font-body); font-size: 16px;
}
.comment-form .submit {
  display: inline-flex; align-items: center;
  padding: 14px 22px; border-radius: 999px;
  font-weight: 600; font-size: 15px;
  border: 1.5px solid var(--ink); background: var(--ink); color: var(--bg);
  cursor: pointer;
}
.comments__closed { color: var(--ink-dim); font-style: italic; }