/* ========================================
   PSYCHEMETA - Main Stylesheet
   Brand v1.0 — May 2026
   ======================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@300;400;500;600&family=Instrument+Serif:ital@0;1&display=swap');

:root {
    /* ── Brand palette ── */
    --obsidian: #0B0C10;
    --ink: #16181F;
    --bone: #F3EFE6;
    --paper: #EDE8DC;
    --ash: #6E6E76;
    --line: #D7D2C5;
    --signal: #D6F25E;     /* electric lime */
    --plum: #3D2A5E;       /* deep psyche violet */
    --plum-soft: #6E5BA0;

    /* ── Typography ── */
    --font-sans: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
    --font-serif: "Instrument Serif", "Times New Roman", Georgia, serif;

    /* ── Semantic tokens (light theme — default) ── */
    --bg: var(--bone);
    --bg-surface: var(--paper);
    --bg-elevated: #ffffff;
    --text: var(--ink);
    --text-muted: var(--ash);
    --border: var(--line);
    --accent: var(--plum);
    --accent-hover: var(--plum-soft);
    --highlight: var(--signal);
    --on-accent: var(--bone);
    --on-highlight: var(--ink);

    /* ── Remaining legacy aliases (only used as accents now) ── */
    --warm-coral: var(--accent);     /* accent — plum in light, plum-soft in dark */
    --electric-lemon: var(--signal); /* signal lime — same in both modes */
    --stone: var(--text-muted);      /* muted text — ash in light, lighter grey in dark */
}

[data-theme="dark"] {
    --bg: var(--obsidian);
    --bg-surface: var(--ink);
    --bg-elevated: #1a1c25;
    --text: var(--bone);
    --text-muted: #9c9ca5;
    --border: rgba(215, 210, 197, 0.14);
    --accent: var(--plum-soft);
    --accent-hover: var(--signal);
    --highlight: var(--signal);
    --on-accent: var(--bone);
    --on-highlight: var(--ink);

    /* Legacy aliases inherit correctly from the semantic tokens above */
    --warm-coral: var(--accent);
    --electric-lemon: var(--signal);
    --stone: var(--text-muted);
}

/* ========================================
   Reset & Base
   ======================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    font-size: 17px;
    line-height: 1.6;
    color: var(--text);
    background-color: var(--bg);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    transition: background-color 0.25s ease, color 0.25s ease;
}

/* ========================================
   Typography
   ======================================== */
h1, h2, h3, h4 {
    font-family: var(--font-serif);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--text);
}

h1 {
    font-size: clamp(3rem, 8vw, 5.5rem);
    font-weight: 400;
    letter-spacing: -0.025em;
}

h1 em, h2 em {
    font-style: italic;
    color: var(--text-muted);
}

h2 {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(2rem, 4.2vw, 3.25rem);
    letter-spacing: -0.02em;
    line-height: 1.05;
}

h2 em {
    font-style: italic;
    color: var(--text-muted);
}

h3 {
    font-family: var(--font-sans);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

h4 {
    font-family: var(--font-sans);
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.005em;
}

p {
    max-width: 65ch;
}

a {
    color: inherit;
    transition: color 0.3s ease;
}

/* ========================================
   Layout
   ======================================== */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 clamp(1.5rem, 5vw, 4rem);
}

section {
    padding: clamp(4rem, 12vw, 8rem) 0;
}

/* ========================================
   Navigation
   ======================================== */
nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 1.25rem 0;
    background: color-mix(in oklab, var(--bg) 86%, transparent);
    -webkit-backdrop-filter: saturate(150%) blur(14px);
    backdrop-filter: saturate(150%) blur(14px);
    border-bottom: 1px solid var(--border);
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

nav .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    line-height: 0;
    color: var(--text);
}

/* New SVG-based logo: inherits currentColor, true transparency, scales perfectly */
.logo {
    color: var(--text);
    gap: 0.55rem;
    line-height: 1;
    align-items: center;
}

.logo .logo-mark {
    width: 38px;
    height: 24px;
    flex-shrink: 0;
    color: currentColor;
    display: block;
}

.logo .logo-word {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 1.0625rem;
    letter-spacing: -0.018em;
    color: currentColor;
    line-height: 1;
}

/* Legacy: hide any leftover img-based logo variants from older HTML files */
.logo img { display: none !important; }

/* Fallback text logo (hidden when image present) */
.logo-text {
    font-family: var(--font-sans);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text);
    text-decoration: none;
}
.logo-text span {
    color: var(--accent);
}

.nav-links {
    display: flex;
    gap: 2.5rem;
    list-style: none;
}

.nav-links a {
    text-decoration: none;
    color: var(--text);
    font-weight: 500;
    font-size: 0.95rem;
    position: relative;
    padding: 0.25rem 0;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--warm-coral);
    transition: width 0.3s ease;
}

.nav-links a:hover::after,
.nav-links a.active::after {
    width: 100%;
}

.nav-cta {
    background: var(--accent);
    color: var(--on-accent) !important;
    padding: 0.6rem 1.25rem !important;
    border-radius: 50px;
    transition: background 0.25s ease, color 0.25s ease !important;
    font-weight: 500;
}

.nav-cta::after {
    display: none !important;
}

.nav-cta:hover {
    background: var(--signal);
    color: var(--ink) !important;
}

.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
}

/* Legacy hamburger-span and ≤768px nav-toggle styles removed (June 2026) —
   superseded by the slide-in drawer at the bottom of this file.
   Mobile / desktop responsiveness is now controlled by the
   `@media (min-width: 1024px)` and `@media (max-width: 1023px)` blocks. */

/* ========================================
   Buttons
   ======================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.625rem;
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 0.95rem;
    letter-spacing: -0.005em;
    text-decoration: none;
    border-radius: 10px;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
    border: 1px solid transparent;
}

.btn-primary {
    background: var(--accent);
    color: var(--on-accent);
    border-color: var(--accent);
}

.btn-primary:hover {
    background: var(--signal);
    color: var(--ink);
    border-color: var(--signal);
    transform: translateY(-1px);
}

.btn-secondary {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--text);
}

.btn-secondary:hover {
    background: var(--text);
    color: var(--bg);
    transform: translateY(-1px);
}

.btn-full {
    width: 100%;
}

/* ========================================
   Section Headers
   ======================================== */
.section-header {
    margin-bottom: 4rem;
}

.section-header.center {
    text-align: center;
}

.section-header.center p {
    margin: 0 auto;
}

.section-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-muted);
    margin-bottom: 1.25rem;
}

.section-tag::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--signal);
    display: inline-block;
}

.section-subtitle {
    font-family: var(--font-sans);
}

.section-subtitle {
    font-size: 1.125rem;
    color: var(--stone);
    margin-top: 1rem;
    max-width: 50ch;
}

/* ========================================
   Hero Sections
   ======================================== */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: var(--ink);
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 80%;
    height: 150%;
    background: radial-gradient(ellipse, rgba(232, 255, 89, 0.15) 0%, transparent 70%);
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 1;
    padding-top: 6rem;
}

.hero h1 {
    color: var(--bone);
    margin-bottom: 1.75rem;
    font-family: var(--font-serif);
    font-weight: 400;
    letter-spacing: -0.025em;
    line-height: 1.02;
}

.hero h1 .highlight,
.highlight {
    color: var(--signal);
    font-style: italic;
    display: inline-block;
    letter-spacing: -0.01em;
}

.hero-subtitle {
    font-family: var(--font-sans);
    font-size: clamp(1.125rem, 2.4vw, 1.375rem);
    color: rgba(243, 239, 230, 0.72);
    margin-bottom: 2.5rem;
    max-width: 56ch;
    line-height: 1.5;
    font-weight: 400;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.hero-contact {
    margin-top: 1.2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hero-contact a {
    color: var(--signal);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.hero-contact a:hover {
    color: var(--bone);
}

.hero .btn-secondary {
    color: var(--bone);
    border-color: rgba(255, 248, 240, 0.3);
}

.hero .btn-secondary:hover {
    border-color: var(--signal);
    color: var(--signal);
    background: transparent;
}

/* Brand-aligned hero decoration — soft architectural blobs (no animation) */
.shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
}

.shape-1 {
    width: 480px;
    height: 480px;
    background: radial-gradient(circle, var(--plum-soft) 0%, transparent 70%);
    opacity: 0.35;
    top: -8%;
    right: -6%;
}

.shape-2 {
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, var(--signal) 0%, transparent 70%);
    opacity: 0.12;
    bottom: 8%;
    right: 18%;
}

.shape-3 {
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, var(--plum) 0%, transparent 70%);
    opacity: 0.45;
    top: 50%;
    left: -4%;
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .shape { animation: none !important; }
}

/* Page Hero (inner pages) */
.page-hero {
    padding: clamp(8rem, 15vw, 11rem) 0 clamp(4rem, 8vw, 5.5rem);
    background: var(--ink);
    color: var(--bone);
    position: relative;
    overflow: hidden;
}

.page-hero::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -10%;
    width: 60%;
    height: 160%;
    background: radial-gradient(ellipse, rgba(214, 242, 94, 0.08) 0%, transparent 65%);
    pointer-events: none;
}

.page-hero h1 {
    margin-bottom: 1.5rem;
    color: var(--bone);
    font-family: var(--font-serif);
    font-weight: 400;
}

.page-hero h1 em,
.page-hero h1 .highlight {
    color: var(--signal);
    font-style: italic;
}

.page-hero-subtitle {
    font-family: var(--font-sans);
    font-size: clamp(1.0625rem, 2vw, 1.25rem);
    color: rgba(243, 239, 230, 0.72);
    max-width: 58ch;
    line-height: 1.5;
}

.page-hero > .container {
    position: relative;
    z-index: 1;
}

/* ========================================
   Services Cards (Home)
   ======================================== */
.services {
    background: var(--bg-surface);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.service-card {
    background: var(--paper);
    padding: 2.25rem;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
    border: 1px solid var(--line);
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--signal);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.service-card:hover {
    background: var(--bg-elevated);
    border-color: var(--accent);
    transform: translateY(-3px);
}

.service-card:hover::before {
    transform: scaleX(1);
}

.service-icon {
    width: 48px;
    height: 48px;
    background: var(--ink);
    color: var(--signal);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
}

.service-card h3 {
    margin-bottom: 0.75rem;
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.service-card p {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.55;
}

/* Ensure fade-in animations complete even if user has scrolled past */
.service-card.fade-in,
.result-card.fade-in {
    opacity: 1;
    transform: none;
    animation: none;
}

/* ========================================
   Services Detail Page
   ======================================== */
.services-detail {
    background: var(--bg-surface);
}

.service-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    padding: 4rem 0;
    border-bottom: 1px solid rgba(10, 61, 71, 0.1);
}

.service-block:last-child {
    border-bottom: none;
}

.service-block.reverse {
    direction: rtl;
}

.service-block.reverse > * {
    direction: ltr;
}

@media (max-width: 900px) {
    .service-block,
    .service-block.reverse {
        grid-template-columns: 1fr;
        gap: 2rem;
        direction: ltr;
    }
}

.service-number {
    font-family: 'Fraunces', serif;
    font-size: 4rem;
    font-weight: 900;
    color: var(--signal);
    line-height: 1;
    margin-bottom: 1rem;
    text-shadow: 3px 3px 0 var(--ink);
}

.service-block h2 {
    margin-bottom: 1.5rem;
    color: var(--text);
}

.service-lead {
    font-size: 1.125rem;
    margin-bottom: 2rem;
}

.service-includes {
    margin-bottom: 2rem;
}

.service-includes h4 {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--warm-coral);
    margin-bottom: 1rem;
}

.service-includes ul {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

@media (max-width: 600px) {
    .service-includes ul {
        grid-template-columns: 1fr;
    }
}

.service-includes li {
    position: relative;
    padding-left: 1.5rem;
    color: var(--stone);
}

.service-includes li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--warm-coral);
    font-weight: 700;
}

/* Service Visual Cards */
.visual-card {
    aspect-ratio: 4/3;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.visual-card-brand {
    background: linear-gradient(135deg, var(--ink), #0d5563);
}

.brand-shapes {
    position: relative;
    width: 150px;
    height: 150px;
}

.brand-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--electric-lemon);
    position: absolute;
    top: 0;
    left: 0;
}

.brand-square {
    width: 70px;
    height: 70px;
    background: var(--warm-coral);
    position: absolute;
    bottom: 0;
    right: 0;
    transform: rotate(15deg);
}

.brand-line {
    width: 100px;
    height: 8px;
    background: var(--bg-surface);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-30deg);
}

.visual-card-content {
    background: linear-gradient(135deg, var(--ink), #333);
}

.content-lines {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 60%;
}

.content-lines span {
    height: 12px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 6px;
}

.visual-card-web {
    background: linear-gradient(135deg, var(--bg-surface), #efe5d8);
}

.browser-mockup {
    width: 80%;
    background: var(--bg-elevated);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.browser-dots {
    padding: 12px 16px;
    background: #f5f5f5;
    display: flex;
    gap: 6px;
}

.browser-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ddd;
}

.browser-dots span:first-child { background: #ff5f57; }
.browser-dots span:nth-child(2) { background: #ffbd2e; }
.browser-dots span:nth-child(3) { background: #28c840; }

.browser-content {
    padding: 16px;
}

.mock-header {
    height: 20px;
    width: 60%;
    background: var(--ink);
    border-radius: 4px;
    margin-bottom: 12px;
}

.mock-hero {
    height: 60px;
    background: linear-gradient(135deg, var(--warm-coral), #ff8578);
    border-radius: 8px;
    margin-bottom: 12px;
}

.mock-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.mock-grid div {
    height: 40px;
    background: #f0f0f0;
    border-radius: 4px;
}

.visual-card-marketing {
    background: linear-gradient(135deg, var(--warm-coral), #E04E3E);
}

.chart-bars {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    height: 120px;
}

.chart-bars .bar {
    width: 30px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px 4px 0 0;
    transition: height 0.5s ease;
}

.chart-bars .bar:nth-child(4) {
    background: var(--electric-lemon);
}

.visual-card-creative {
    background: linear-gradient(135deg, #6B4E9E, #4a3570);
}

.creative-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    width: 60%;
}

.creative-item {
    aspect-ratio: 1;
    border-radius: 12px;
}

.ci-1 { background: var(--electric-lemon); }
.ci-2 { background: var(--warm-coral); transform: rotate(5deg); }
.ci-3 { background: var(--bg-surface); transform: rotate(-5deg); }
.ci-4 { background: var(--ink); }

/* ========================================
   Packages Section
   ======================================== */
.packages {
    background: var(--ink);
    color: var(--bone);
}

.packages .section-tag {
    color: var(--signal);
}

.packages .section-tag::before {
    background: var(--electric-lemon);
}

.packages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.package-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 2.5rem;
    transition: all 0.3s ease;
}

.package-card:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-4px);
}

.package-card.featured {
    background: var(--warm-coral);
    border-color: transparent;
}

.package-tag {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--signal);
    margin-bottom: 1rem;
}

.package-card.featured .package-tag {
    color: var(--bone);
}

.package-card h3 {
    margin-bottom: 0.75rem;
}

.package-card > p {
    color: rgba(255, 248, 240, 0.7);
    margin-bottom: 1.5rem;
}

.package-card.featured > p {
    color: rgba(255, 255, 255, 0.9);
}

.package-card ul {
    list-style: none;
    margin-bottom: 2rem;
}

.package-card li {
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
    color: rgba(255, 248, 240, 0.8);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.package-card li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--signal);
}

.package-card.featured li::before {
    color: var(--bone);
}

.package-card .btn-secondary {
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--bone);
}

.package-card .btn-secondary:hover {
    background: var(--bg-surface);
    color: var(--text);
    border-color: var(--bone);
}

.package-card.featured .btn-primary {
    background: var(--bg-surface);
    color: var(--warm-coral);
}

.package-card.featured .btn-primary:hover {
    background: var(--ink);
    color: var(--bone);
}

/* ========================================
   About Section
   ======================================== */
.about {
    background: var(--ink);
    color: var(--bone);
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

@media (max-width: 900px) {
    .about-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
}

.about-content h2 {
    margin-bottom: 1.5rem;
}

.about-content h2 span {
    color: var(--warm-coral);
}

.about-content p {
    color: rgba(255, 248, 240, 0.8);
    margin-bottom: 1.5rem;
}

.about-card {
    background: rgba(255, 248, 240, 0.05);
    border: 1px solid rgba(255, 248, 240, 0.1);
    border-radius: 24px;
    padding: 3rem;
    position: relative;
}

.about-card::before {
    content: '"';
    font-family: 'Fraunces', serif;
    font-size: 8rem;
    color: var(--warm-coral);
    opacity: 0.3;
    position: absolute;
    top: -1rem;
    left: 1.5rem;
    line-height: 1;
}

.about-card blockquote {
    font-family: 'Fraunces', serif;
    font-size: 1.5rem;
    font-style: italic;
    position: relative;
    z-index: 1;
}

.about-card cite {
    display: block;
    margin-top: 1.5rem;
    font-style: normal;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    color: var(--signal);
}

/* ========================================
   Story Section (About Page)
   ======================================== */
.story-section {
    background: var(--bg-surface);
}

.story-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 4rem;
    align-items: start;
}

@media (max-width: 900px) {
    .story-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
}

.story-content h2 {
    margin-bottom: 1.5rem;
    color: var(--text);
}

.story-content .lead {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
}

.story-content p {
    margin-bottom: 1.25rem;
    color: var(--stone);
}

.story-content em {
    color: var(--warm-coral);
    font-style: normal;
}

.story-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.stat-card {
    background: var(--bg-elevated);
    padding: 2rem;
    border-radius: 16px;
    text-align: center;
    border: 1px solid rgba(10, 61, 71, 0.08);
}

.stat-number {
    display: block;
    font-family: 'Fraunces', serif;
    font-size: 3rem;
    font-weight: 900;
    color: var(--text);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 0.875rem;
    color: var(--stone);
}

/* ========================================
   Values Section
   ======================================== */
.values-section {
    background: var(--ink);
    color: var(--bone);
}

.values-section .section-tag {
    color: var(--signal);
}

.values-section .section-tag::before {
    background: var(--electric-lemon);
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.value-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 2rem;
    transition: all 0.3s ease;
}

.value-card:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-4px);
}

.value-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.value-card h3 {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
}

.value-card p {
    color: rgba(255, 248, 240, 0.7);
    font-size: 0.95rem;
}

/* ========================================
   Team Section
   ======================================== */
.team-section {
    background: var(--bg-surface);
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.team-card {
    background: var(--bg-elevated);
    border-radius: 20px;
    padding: 2rem;
    text-align: center;
    border: 1px solid rgba(10, 61, 71, 0.08);
    transition: all 0.3s ease;
}

.team-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 30px rgba(10, 61, 71, 0.1);
}

.team-photo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.team-initials {
    font-family: 'Fraunces', serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--bone);
}

.team-card h3 {
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
    color: var(--text);
}

.team-role {
    display: block;
    font-size: 0.875rem;
    color: var(--warm-coral);
    font-weight: 500;
    margin-bottom: 1rem;
}

.team-card p {
    font-size: 0.95rem;
    color: var(--stone);
    margin: 0 auto;
}

.team-social {
    margin-top: 1rem;
}

.team-social a {
    font-size: 0.875rem;
    color: var(--text);
    text-decoration: none;
}

.team-social a:hover {
    color: var(--warm-coral);
}

/* ========================================
   Process Preview (About Page)
   ======================================== */
.process-preview {
    background: var(--ink);
    color: var(--bone);
}

.process-preview .section-tag {
    color: var(--signal);
}

.process-preview .section-tag::before {
    background: var(--electric-lemon);
}

.process-preview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

@media (max-width: 900px) {
    .process-preview-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
}

.process-preview-content h2 {
    margin-bottom: 1.5rem;
}

.process-preview-content p {
    color: rgba(255, 248, 240, 0.8);
    margin-bottom: 1.25rem;
}

.process-steps-mini {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.step-mini {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
}

.step-mini-num {
    font-family: 'Fraunces', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--signal);
}

.step-mini-text {
    font-weight: 500;
}

.step-connector {
    width: 2px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    margin-left: 2rem;
}

/* ========================================
   Process Section (Home)
   ======================================== */
.process {
    background: linear-gradient(180deg, var(--bg-surface) 0%, white 100%);
}

.process-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-top: 4rem;
}

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

@media (max-width: 600px) {
    .process-steps {
        grid-template-columns: 1fr;
    }
}

.process-step {
    text-align: center;
    position: relative;
}

.step-number {
    width: 80px;
    height: 80px;
    background: var(--ink);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-family: 'Fraunces', serif;
    font-size: 2rem;
    font-weight: 900;
    color: var(--signal);
    position: relative;
}

.process-step:not(:last-child) .step-number::after {
    content: '';
    position: absolute;
    right: -100%;
    top: 50%;
    width: 100%;
    height: 2px;
    background: repeating-linear-gradient(
        90deg,
        var(--ink) 0,
        var(--ink) 8px,
        transparent 8px,
        transparent 16px
    );
}

@media (max-width: 1000px) {
    .process-step:not(:last-child) .step-number::after {
        display: none;
    }
}

.process-step h3 {
    color: var(--text);
    margin-bottom: 0.75rem;
    font-size: 1.25rem;
}

.process-step p {
    color: var(--stone);
    font-size: 0.95rem;
    margin: 0 auto;
}

/* ========================================
   Work / Portfolio
   ======================================== */
.work-filter {
    padding: 2rem 0;
    background: var(--bg-surface);
}

.filter-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 0.75rem 1.5rem;
    background: transparent;
    border: 2px solid rgba(10, 61, 71, 0.2);
    border-radius: 50px;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-btn:hover,
.filter-btn.active {
    background: var(--ink);
    border-color: var(--text);
    color: var(--bone);
}

.work-grid-section {
    background: var(--bg-surface);
    padding-bottom: 6rem;
}

.work-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

@media (max-width: 768px) {
    .work-grid {
        grid-template-columns: 1fr;
    }
}

.work-card {
    border-radius: 24px;
    overflow: hidden;
    background: var(--bg-elevated);
    transition: all 0.4s ease;
}

.work-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px rgba(10, 61, 71, 0.15);
}

.work-card.large {
    grid-column: span 2;
}

@media (max-width: 768px) {
    .work-card.large {
        grid-column: span 1;
    }
}

.work-card-image {
    aspect-ratio: 16/10;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.work-card.large .work-card-image {
    aspect-ratio: 21/9;
}

.work-card-mockup {
    transform: scale(0.9);
    transition: transform 0.4s ease;
}

.work-card:hover .work-card-mockup {
    transform: scale(1);
}

.work-card-content {
    padding: 2rem;
}

.work-tags {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.work-tags span {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.35rem 0.75rem;
    background: rgba(10, 61, 71, 0.08);
    border-radius: 50px;
    color: var(--text);
}

.work-card h3 {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
    color: var(--text);
}

.work-card p {
    color: var(--stone);
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

.work-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--warm-coral);
    text-decoration: none;
}

.work-link span {
    transition: transform 0.3s ease;
}

.work-link:hover span {
    transform: translateX(4px);
}

/* Work Card Mockup Elements */
.mockup-logo {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    color: var(--bone);
}

.bloom-logo {
    font-size: 3rem;
}

.kinetic-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.k-letter {
    font-size: 4rem;
    color: var(--signal);
}

.k-lines {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.k-lines span {
    width: 30px;
    height: 4px;
    background: var(--warm-coral);
}

.hex-grid {
    width: 80px;
    height: 80px;
}

.mockup-browser.small {
    width: 200px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
}

.mockup-browser.small .browser-dots {
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.1);
}

.mockup-browser.small .browser-dots span {
    width: 6px;
    height: 6px;
}

.browser-screen {
    padding: 12px;
}

.wave-lines svg {
    width: 100%;
}

.lumina-logo {
    position: relative;
    width: 80px;
    height: 80px;
}

.lumina-circle {
    width: 50px;
    height: 50px;
    background: var(--bg-surface);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.lumina-rays span {
    position: absolute;
    width: 4px;
    height: 20px;
    background: var(--electric-lemon);
    top: 0;
    left: 50%;
    transform-origin: bottom center;
}

.lumina-rays span:nth-child(1) { transform: translateX(-50%) rotate(0deg); }
.lumina-rays span:nth-child(2) { transform: translateX(-50%) rotate(90deg); top: 30px; }
.lumina-rays span:nth-child(3) { transform: translateX(-50%) rotate(45deg); top: 8px; left: 65px; }
.lumina-rays span:nth-child(4) { transform: translateX(-50%) rotate(-45deg); top: 8px; left: 35%; }

.foundry-logo {
    text-align: center;
}

.foundry-anvil {
    margin-bottom: 0.5rem;
}

.anvil-top {
    width: 60px;
    height: 15px;
    background: var(--bg-surface);
    margin: 0 auto;
    border-radius: 4px 4px 0 0;
}

.anvil-body {
    width: 40px;
    height: 25px;
    background: var(--bg-surface);
    margin: 0 auto;
    border-radius: 0 0 4px 4px;
}

.foundry-text {
    font-size: 1.25rem;
    letter-spacing: 0.2em;
    color: var(--bone);
}

.mockup-app {
    width: 120px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 12px;
}

.app-header {
    height: 12px;
    width: 60%;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    margin-bottom: 12px;
}

.app-chart svg {
    width: 100%;
}

.morsel-logo {
    text-align: center;
}

.morsel-m {
    font-size: 5rem;
    color: var(--bone);
    font-family: 'Fraunces', serif;
}

.morsel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.morsel-dots span {
    width: 10px;
    height: 10px;
    background: var(--electric-lemon);
    border-radius: 50%;
}

/* ========================================
   Testimonials
   ======================================== */
.testimonials {
    background: var(--ink);
    color: var(--bone);
}

.testimonials .section-tag {
    color: var(--signal);
}

.testimonials .section-tag::before {
    background: var(--electric-lemon);
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.testimonial-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 2rem;
}

.testimonial-stars {
    color: var(--signal);
    margin-bottom: 1rem;
    letter-spacing: 4px;
}

.testimonial-card blockquote {
    font-size: 1.1rem;
    font-style: italic;
    margin-bottom: 1.5rem;
    color: rgba(255, 248, 240, 0.9);
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.author-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--warm-coral);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
}

.author-info strong {
    display: block;
    font-size: 0.95rem;
}

.author-info span {
    font-size: 0.8rem;
    color: rgba(255, 248, 240, 0.6);
}

/* ========================================
   Contact Page
   ======================================== */
.contact-hero {
    padding: clamp(8rem, 15vw, 11rem) 0 clamp(4rem, 8vw, 5.5rem);
    background: var(--ink);
    color: var(--bone);
    position: relative;
    overflow: hidden;
}

.contact-hero::before {
    content: '';
    position: absolute;
    top: -25%;
    right: -8%;
    width: 55%;
    height: 140%;
    background: radial-gradient(ellipse at center, rgba(214, 242, 94, 0.07) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.contact-hero > .container { position: relative; z-index: 1; }

.contact-hero .section-tag,
.contact-hero h1,
.contact-hero .page-hero-subtitle {
    color: var(--bone);
}

.contact-hero .section-tag {
    color: var(--text-muted);
}

.contact-hero h1 .highlight {
    color: var(--signal);
    font-style: italic;
}

.contact-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 4rem;
    align-items: start;
}

@media (max-width: 1000px) {
    .contact-hero-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
}

.contact-hero-content h1 {
    margin-bottom: 1.5rem;
}

.contact-info {
    margin-top: 3rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.contact-item {
    padding-left: 1.5rem;
    border-left: 2px solid var(--warm-coral);
}

.contact-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--signal);
    margin-bottom: 0.25rem;
}

.contact-item a {
    color: var(--bone);
    text-decoration: none;
    font-size: 1.1rem;
}

.contact-item a:hover {
    color: var(--warm-coral);
}

.contact-item address {
    font-style: normal;
    color: rgba(255, 248, 240, 0.8);
    font-size: 0.95rem;
    line-height: 1.6;
}

.hero-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 2rem;
    display: grid;
    gap: 0.75rem;
}

.hero-list li {
    background: rgba(0, 0, 0, 0.35);
    border: 2px solid var(--electric-lemon);
    color: var(--bone);
    padding: 0.75rem 1rem;
    text-transform: uppercase;
    font-family: var(--font-sans);
    letter-spacing: 0.05em;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.3);
}

/* Contact Form */
.contact-form-wrapper {
    background: var(--bg-surface);
    border-radius: 24px;
    padding: 2.5rem;
}

.contact-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

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

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group.full-width {
    grid-column: span 2;
}

@media (max-width: 600px) {
    .form-group.full-width {
        grid-column: span 1;
    }
}

.form-group label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 0.5rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 1rem;
    border: 2px solid rgba(10, 61, 71, 0.15);
    border-radius: 12px;
    font-family: var(--font-sans);
    font-size: 1rem;
    color: var(--text);
    background: var(--bg-elevated);
    transition: all 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--warm-coral);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--stone);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.contact-form .btn {
    grid-column: span 2;
}

@media (max-width: 600px) {
    .contact-form .btn {
        grid-column: span 1;
    }
}

.form-note {
    grid-column: span 2;
    text-align: center;
    font-size: 0.875rem;
    color: var(--stone);
    margin: 0;
}

@media (max-width: 600px) {
    .form-note {
        grid-column: span 1;
    }
}

/* ========================================
   FAQ Section
   ======================================== */
.faq-section {
    background: var(--bg-surface);
}

.faq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

@media (max-width: 500px) {
    .faq-grid {
        grid-template-columns: 1fr;
    }
}

.faq-item {
    background: var(--bg-elevated);
    padding: 2rem;
    border-radius: 16px;
    border: 1px solid rgba(10, 61, 71, 0.08);
}

.faq-item h3 {
    font-size: 1.125rem;
    color: var(--text);
    margin-bottom: 0.75rem;
}

.faq-item p {
    color: var(--stone);
    font-size: 0.95rem;
}

/* ========================================
   Map Section
   ======================================== */
.map-section {
    height: clamp(280px, 50vw, 420px);
    position: relative;
    padding: 0;
}

.map-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--ink), #0d5563);
    position: relative;
}

.map-embed {
    width: 100%;
    height: 100%;
    background: var(--bg-elevated);
}

.map-embed iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.map-placeholder::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.map-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.map-content {
    text-align: center;
    color: var(--bone);
}

.map-content h3 {
    margin-bottom: 0.75rem;
}

.map-content p {
    margin-bottom: 1.5rem;
    color: rgba(255, 248, 240, 0.8);
}

.map-content .btn-secondary {
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--bone);
}

.map-content .btn-secondary:hover {
    background: var(--bg-surface);
    color: var(--text);
    border-color: var(--bone);
}

/* ========================================
   CTA Section
   ======================================== */
.cta {
    background: var(--warm-coral);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.5;
}

.cta-content {
    position: relative;
    z-index: 1;
}

.cta h2 {
    color: var(--bone);
    margin-bottom: 1rem;
}

.cta p {
    color: rgba(255, 248, 240, 0.9);
    font-size: 1.25rem;
    margin: 0 auto 2.5rem;
}

.cta .btn-primary {
    background: var(--ink);
    color: var(--bone);
}

.cta .btn-primary:hover {
    background: var(--ink);
}

/* ========================================
   Footer
   ======================================== */
footer {
    background: var(--ink);
    color: var(--bone);
    padding: 4rem 0 2rem;
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
}

@media (max-width: 900px) {
    .footer-content {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .footer-content {
        grid-template-columns: 1fr;
    }
}

.footer-brand .logo {
    display: inline-flex;
    align-items: center;
    margin-bottom: 1.25rem;
    color: var(--bone);
    gap: 0.6rem;
}

.footer-brand .logo .logo-mark {
    width: 46px;
    height: 29px;
}

.footer-brand .logo .logo-word {
    font-size: 1.25rem;
}

.footer-brand p {
    color: rgba(255, 248, 240, 0.6);
    font-size: 0.95rem;
}

.footer-section h4 {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--signal);
    margin-bottom: 1.5rem;
}

.footer-section ul {
    list-style: none;
}

.footer-section li {
    margin-bottom: 0.75rem;
}

.footer-section a {
    color: rgba(255, 248, 240, 0.7);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-section a:hover {
    color: var(--warm-coral);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 248, 240, 0.1);
    padding-top: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-bottom p {
    color: rgba(255, 248, 240, 0.5);
    font-size: 0.875rem;
}

.social-links {
    display: flex;
    gap: 1rem;
}

.social-links a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 248, 240, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bone);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.75rem;
    transition: all 0.3s ease;
}

.social-links a:hover {
    background: var(--warm-coral);
    transform: translateY(-3px);
}

/* ========================================
   Animations
   ======================================== */
/* Static appearance — animation removed. Content was getting hidden during
   the brief opacity transition (especially when captured/loaded pre-animation).
   Brand prefers a calm, immediate read anyway. */
.fade-in {
    opacity: 1;
}

.delay-1, .delay-2, .delay-3, .delay-4 { /* delays no-op now */ }

@keyframes fadeIn {
    from { opacity: 1; }
    to   { opacity: 1; }
}

/* Scroll animations - paused until in view */
.scroll-fade {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.scroll-fade.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ========================================
   Home + Portfolio Enhancements
   ======================================== */

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--signal);
    border: 1px solid rgba(232, 255, 89, 0.4);
    background: rgba(7, 15, 31, 0.35);
    margin-bottom: 1rem;
}

.hero-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 2.5rem;
}

@media (max-width: 900px) {
    .hero-kpis {
        grid-template-columns: 1fr;
    }
}

.hero-kpi {
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    padding: 1rem 1.25rem;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
}

.hero-kpi strong {
    display: block;
    font-family: 'Fraunces', serif;
    font-size: 1.25rem;
    line-height: 1.1;
    color: var(--signal);
    margin-bottom: 0.35rem;
}

.hero-kpi span {
    display: block;
    font-size: 0.875rem;
    color: rgba(255, 248, 240, 0.85);
}

.results-band {
    background: var(--ink);
    color: var(--bone);
    border-top: 1px solid rgba(215, 210, 197, 0.08);
}

.results-band .section-tag {
    color: var(--text-muted);
}

.results-band .section-tag::before {
    background: var(--signal);
}

.results-band h2 {
    color: var(--bone);
}

.results-band .section-subtitle {
    color: rgba(243, 239, 230, 0.7);
}

.results-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}

@media (max-width: 800px) {
    .results-grid {
        grid-template-columns: 1fr;
    }
}

.result-card {
    border-radius: 10px;
    padding: 1.75rem;
    border: 1px solid rgba(215, 210, 197, 0.14);
    background: rgba(243, 239, 230, 0.04);
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.result-card:hover {
    background: rgba(243, 239, 230, 0.07);
    border-color: rgba(214, 242, 94, 0.4);
    transform: translateY(-2px);
}

.result-card h3 {
    color: var(--signal);
    font-family: var(--font-sans);
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.6rem;
    letter-spacing: -0.01em;
}

.result-card p {
    color: rgba(243, 239, 230, 0.78);
    font-size: 0.95rem;
    line-height: 1.55;
}

.featured-work {
    background: var(--ink);
    color: var(--bone);
    border-top: 1px solid rgba(215, 210, 197, 0.08);
}

.featured-work .section-tag {
    color: var(--signal);
}

.featured-work .section-tag::before {
    background: var(--electric-lemon);
}

.featured-work h2 {
    color: var(--bone);
}

.featured-work .section-subtitle {
    color: rgba(255, 248, 240, 0.75);
}

.work-preview-bg {
    position: relative;
    background-size: cover;
    background-position: center;
}

.work-preview-bg::before {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    z-index: 2;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bone);
    padding: 0.45rem 0.8rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(7, 15, 31, 0.5);
}

.work-preview-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(160deg, rgba(5, 10, 24, 0.15), rgba(5, 10, 24, 0.68));
}

.preview-foregate {
    background-image: url('preview/foregate/hero-optimized.jpg');
}

.preview-foregate::before {
    content: 'The Foregate';
}

.preview-act {
    background-image: linear-gradient(140deg, #002241 0%, #005492 100%);
}

.preview-act::before {
    content: 'ACT Electrical';
}

.preview-arch {
    background-image: linear-gradient(140deg, #1f2833 0%, #3d4f67 100%);
}

.preview-arch::before {
    content: 'Nick Carroll Architects';
}

.preview-volk {
    background-image: linear-gradient(140deg, #0f1424 0%, #28456b 100%);
}

.preview-volk::before {
    content: 'Volkstop';
}

.preview-key {
    background-image: linear-gradient(140deg, #073b40 0%, #1e8e8d 100%);
}

.preview-key::before {
    content: 'Key Ductwork';
}

.preview-care {
    background-image: linear-gradient(140deg, #14534f 0%, #1c9f95 100%);
}

.preview-care::before {
    content: 'Evergreen Home Care';
}

.preview-chads {
    background-image: linear-gradient(140deg, #37224c 0%, #654299 100%);
}

.preview-chads::before {
    content: 'Chaddesley Sports';
}

.work-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.seo-content {
    background: radial-gradient(circle at 12% 18%, rgba(232, 255, 89, 0.18), transparent 45%), #eef4ff;
}

.seo-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}

@media (max-width: 900px) {
    .seo-grid {
        grid-template-columns: 1fr;
    }
}

.seo-card {
    background: var(--bg-elevated);
    border: 1px solid rgba(10, 61, 71, 0.1);
    border-radius: 18px;
    padding: 1.5rem;
    box-shadow: 0 15px 30px rgba(10, 61, 71, 0.06);
}

.seo-card h3 {
    color: var(--text);
    font-size: 1.2rem;
    margin-bottom: 0.75rem;
}

.seo-card p {
    color: var(--stone);
    font-size: 0.95rem;
}

.visual-card-ai {
    background: var(--ink);
}

.ai-nodes {
    position: relative;
    width: 140px;
    height: 140px;
}

.ai-nodes::before,
.ai-nodes::after {
    content: '';
    position: absolute;
    background: rgba(232, 255, 89, 0.28);
}

.ai-nodes::before {
    top: 50%;
    left: 10%;
    right: 10%;
    height: 2px;
}

.ai-nodes::after {
    left: 50%;
    top: 10%;
    bottom: 10%;
    width: 2px;
}

.ai-nodes span {
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--electric-lemon);
    box-shadow: 0 0 20px rgba(232, 255, 89, 0.8);
}

.ai-nodes span:nth-child(1) {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.ai-nodes span:nth-child(2) {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.ai-nodes span:nth-child(3) {
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.ai-nodes span:nth-child(4) {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.ai-nodes span:nth-child(5) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--warm-coral);
    box-shadow: 0 0 20px rgba(159, 61, 15, 0.75);
}

/* ========================================
   Tool Stack Logos
   ======================================== */

.tool-stack {
    background: var(--bg-surface);
}

.tool-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
}

.tool-card {
    border: 3px solid var(--text);
    background: var(--bg-elevated);
    box-shadow: 8px 8px 0 var(--text);
    padding: 1.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    min-height: 150px;
    text-align: center;
}

.tool-card img {
    max-width: 180px;
    width: 100%;
    height: 44px;
    object-fit: contain;
    object-position: center;
}

.tool-card h3 {
    font-size: 1rem;
    color: var(--text);
    margin: 0;
}

.tool-note {
    margin-top: 1.2rem;
    color: var(--stone);
    font-size: 0.85rem;
}

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

@media (max-width: 580px) {
    .tool-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   Contrast Safety Overrides
   ======================================== */

.hero,
.page-hero,
.contact-hero,
.results-band,
.featured-work,
.testimonials,
.packages,
.process-preview,
.about,
.cta,
footer {
    color: var(--bone);
}

.hero h1,
.page-hero h1,
.contact-hero h1,
.results-band .section-header h2,
.featured-work .section-header h2,
.testimonials .section-header h2,
.packages .section-header h2,
.process-preview-content h2,
.about-content h2,
.cta h2 {
    color: var(--bone);
}

.hero-subtitle,
.page-hero-subtitle,
.results-band .section-subtitle,
.featured-work .section-subtitle,
.testimonials .section-subtitle,
.packages .section-subtitle,
.process-preview-content p,
.about-content p,
.cta p,
.footer-brand p,
.footer-bottom p {
    color: rgba(255, 255, 255, 0.92);
}

.service-card,
.work-card,
.result-card,
.seo-card,
.testimonial-card,
.about-card,
.package-card,
.value-card,
.team-card,
.faq-item,
.stat-card,
.step-mini,
.contact-form-wrapper,
.map-content,
.service-block,
.story-content,
.story-stats {
    color: var(--text);
}

.service-card h3,
.work-card h3,
.result-card h3,
.seo-card h3,
.testimonial-card h3,
.about-card h3,
.package-card h3,
.value-card h3,
.team-card h3,
.faq-item h3,
.story-content h2,
.story-content .lead,
.service-block h2,
.service-lead,
.step-mini-text,
.form-group label {
    color: var(--text);
}

.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.form-success,
.form-error {
    display: none;
    margin-top: 1.25rem;
    padding: 1rem 1.25rem;
    border: 3px solid var(--text);
    background: var(--bg-elevated);
    color: var(--text);
    box-shadow: 8px 8px 0 var(--text);
    font-family: var(--font-sans);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.form-success {
    border-color: var(--signal);
}

.form-error {
    border-color: var(--warm-coral);
}

.package-card.featured,
.package-card.featured > p,
.package-card.featured li,
.package-card.featured .package-tag,
.package-card.featured h3 {
    color: var(--text);
}

.work-link:hover {
    color: var(--text);
}

.results-band .result-card p {
    color: var(--text);
}

/* ========================================
   Performance & Accessibility Hardening
   ======================================== */

.results-band .result-card {
    background: var(--bg-elevated);
    border: 3px solid var(--text);
    box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.25);
}

.results-band .result-card h3,
.results-band .result-card p {
    color: var(--text) !important;
}

.section-subtitle,
.service-card p,
.work-card p,
.seo-card p,
.faq-item p,
.team-card p,
.stat-label,
.value-card p,
.tool-note {
    color: #374151;
}

footer .footer-section h4,
footer .footer-section a:hover {
    color: var(--signal);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid var(--electric-lemon);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@supports (content-visibility: auto) {
    .services,
    .tool-stack,
    .featured-work,
    .seo-content,
    .testimonials,
    .about,
    .cta,
    footer {
        content-visibility: auto;
        contain-intrinsic-size: 1px 900px;
    }
}

/* ========================================
   Responsive Heading Scale
   ======================================== */

h1,
h2,
h3,
h4 {
    text-wrap: balance;
    overflow-wrap: break-word;
}

h1 {
    font-size: clamp(2rem, 7.8vw + 0.5rem, 7.8rem);
}

h2 {
    font-size: clamp(1.55rem, 5.4vw + 0.4rem, 4.8rem);
}

h3 {
    font-size: clamp(1.05rem, 2.4vw + 0.45rem, 2rem);
}

.hero h1,
.page-hero h1,
.contact-hero h1 {
    font-size: clamp(2rem, 10.5vw, 8.4rem);
    line-height: 0.9;
}

@media (max-width: 1024px) {
    .hero h1,
    .page-hero h1,
    .contact-hero h1 {
        font-size: clamp(1.95rem, 10vw, 5.8rem);
        letter-spacing: -0.01em;
    }
}

@media (max-width: 768px) {
    .hero h1,
    .page-hero h1,
    .contact-hero h1 {
        font-size: clamp(1.85rem, 11.8vw, 4.4rem);
        line-height: 0.92;
    }
}

@media (max-width: 480px) {
    .hero h1,
    .page-hero h1,
    .contact-hero h1 {
        font-size: clamp(1.6rem, 11vw, 3.2rem);
        line-height: 0.96;
    }

    h2 {
        font-size: clamp(1.35rem, 8.5vw, 2.5rem);
        line-height: 0.96;
    }

    h3 {
        font-size: clamp(1rem, 5.4vw, 1.6rem);
    }
}

/* ========================================
   Projects
   ======================================== */

.projects-showcase {
    background: var(--bg-surface);
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.project-card,
.project-panel {
    background: var(--bg-elevated);
    border: 1px solid var(--line);
    box-shadow: none;
    padding: 1.75rem;
    border-radius: 10px;
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.project-card:hover,
.project-panel:hover {
    transform: translateY(-3px);
    border-color: var(--accent);
}

/* Cancel fade-in animation lock on project cards */
.project-card.fade-in,
.project-panel.fade-in {
    opacity: 1;
    transform: none;
    animation: none;
}

.project-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.project-stage {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: 0.4rem 0.7rem;
    border: 2px solid var(--text);
    background: var(--ink);
    color: var(--bone);
    font-family: var(--font-sans);
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.project-stage.live {
    background: var(--electric-lemon);
    color: var(--text);
}

.project-stage.progress {
    background: var(--warm-coral);
    color: var(--bone);
}

.project-meta {
    color: var(--stone);
    font-size: 0.95rem;
}

.project-card p,
.project-panel p {
    color: var(--stone);
}

.project-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: auto;
}

.project-page-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 2rem;
    align-items: start;
}

.project-list {
    list-style: none;
    display: grid;
    gap: 0.8rem;
    margin-top: 1.25rem;
}

.project-list li {
    position: relative;
    padding-left: 1rem;
    color: var(--text);
}

.project-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6rem;
    width: 0.45rem;
    height: 0.45rem;
    background: var(--warm-coral);
}

.project-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.project-note {
    margin-top: 1rem;
    font-size: 0.9rem;
    color: var(--stone);
}

@media (max-width: 980px) {
    .project-grid,
    .project-page-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   Brand v1.0 — Eyebrows, Theme Toggle, Signal
   ======================================== */

/* Monospace eyebrow label */
.eyebrow {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.eyebrow::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--highlight);
    display: inline-block;
}

/* Signal accent button (electric lime CTA) */
.btn-signal {
    background: var(--signal);
    color: var(--on-highlight);
    border: 1px solid var(--signal);
}

.btn-signal:hover {
    background: transparent;
    color: var(--text);
    border-color: var(--text);
    transform: translateY(-2px);
}

/* Theme toggle */
.theme-toggle {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-left: 1rem;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.theme-toggle:hover {
    border-color: var(--text);
    background: var(--bg-surface);
}

.theme-toggle svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
}

.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* Selection — must stay readable on every background incl. signal-lime blocks */
::selection {
    background: var(--ink);
    color: var(--signal);
    text-shadow: none;
}
/* Inside lime emphasis blocks the selection must invert again so it stays
   visible — bone (cream) background with ink text reads on the lime. */
.highlight::selection,
.highlight ::selection,
h1 em::selection, h1 em ::selection,
.display em::selection, .display em ::selection,
.eyebrow::selection, .eyebrow ::selection,
.section-tag::selection, .section-tag ::selection,
.btn-primary::selection, .btn-primary ::selection,
.founder-eyebrow::selection, .founder-eyebrow ::selection {
    background: var(--bone);
    color: var(--ink);
    text-shadow: none;
}

/* Dark-mode tuning for common patterns */
[data-theme="dark"] nav {
    background: color-mix(in oklab, var(--obsidian) 88%, transparent);
}

[data-theme="dark"] .btn-secondary {
    border-color: var(--bone);
    color: var(--bone);
}

[data-theme="dark"] .btn-secondary:hover {
    background: var(--bone);
    color: var(--ink);
}

/* Focus states */
:focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 3px;
    border-radius: 2px;
}

/* ========================================
   Editorial Layout — Brand Kit Pattern v1.0
   Two-col label/content sections with serif display + meta tables
   ======================================== */

/* Display heading — Instrument Serif, large, italic emphasis */
.display {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(2.75rem, 6.5vw, 5.5rem);
    line-height: 0.98;
    letter-spacing: -0.025em;
    color: var(--text);
    margin: 0;
}

.display em,
.display .em {
    font-style: italic;
    color: var(--text-muted);
}

/* Lede — large serif paragraph after display headings */
.lede {
    font-family: var(--font-serif);
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    line-height: 1.4;
    color: var(--text-muted);
    margin: 1.75rem 0 0 0;
    max-width: 56ch;
    font-weight: 400;
    letter-spacing: -0.005em;
}

/* Section heading — smaller serif */
.h-section {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(2.25rem, 4vw, 3.5rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 0;
}

.h-section em {
    font-style: italic;
    color: var(--text-muted);
}

/* Mono meta label */
.meta-label {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-muted);
}

/* Editorial hero (homepage) */
.hero-editorial {
    background: var(--ink);
    color: var(--bone);
    min-height: auto;
    padding: clamp(8rem, 14vw, 11rem) 0 clamp(5rem, 8vw, 7rem);
    position: relative;
    overflow: hidden;
    display: block;
    border-bottom: 1px solid rgba(215, 210, 197, 0.1);
}

.hero-editorial::before {
    content: '';
    position: absolute;
    top: -25%;
    right: -8%;
    width: 55%;
    height: 140%;
    background: radial-gradient(ellipse at center, rgba(214, 242, 94, 0.07) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.hero-editorial::after {
    content: '';
    position: absolute;
    bottom: -20%;
    left: -10%;
    width: 50%;
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(110, 91, 160, 0.18) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}

.hero-editorial > .container {
    position: relative;
    z-index: 1;
}

.hero-editorial .eyebrow {
    color: rgba(243, 239, 230, 0.6);
}

.hero-editorial .display {
    color: var(--bone);
    margin-top: 1.5rem;
}

.hero-editorial .display em {
    color: var(--signal);
    font-style: italic;
}

.hero-editorial .lede {
    color: rgba(243, 239, 230, 0.72);
    font-family: var(--font-serif);
}

/* Full-width single-column hero: headline uses the entire content width */
.hero-grid {
    display: block;
    max-width: 100%;
}

.hero-main {
    min-width: 0;
    max-width: 18ch; /* hold lines around 18 chars for the dramatic display H1 */
}

/* For larger viewports allow the headline to breathe wider */
@media (min-width: 1100px) {
    .hero-main { max-width: 100%; }
}

.hero-editorial .display {
    /* Tighter font-size to fit headline within first viewport on most screens */
    font-size: clamp(2.5rem, 7vw, 5.25rem);
}

.hero-editorial .lede {
    max-width: 56ch;
}

/* Meta band — flows horizontally below the hero content, 3-4 columns */
.hero-meta {
    border-top: 1px solid rgba(215, 210, 197, 0.18);
    margin-top: 3.5rem;
    padding-top: 1.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.5rem 2.5rem;
}

.hero-meta-row {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    padding: 0.5rem 0;
    border-bottom: none;
}

.hero-meta-row .meta-label {
    color: rgba(243, 239, 230, 0.5);
}

.hero-meta-row .meta-label {
    color: rgba(243, 239, 230, 0.5);
}

.hero-meta-row .meta-val {
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--bone);
    line-height: 1.3;
}

.hero-meta-row .meta-val a {
    color: var(--bone);
    text-decoration: none;
    border-bottom: 1px solid rgba(214, 242, 94, 0.35);
    transition: color 0.2s ease, border-color 0.2s ease;
}

.hero-meta-row .meta-val a:hover {
    color: var(--signal);
    border-bottom-color: var(--signal);
}

.hero-editorial .hero-buttons {
    display: flex;
    gap: 0.875rem;
    flex-wrap: wrap;
    margin-top: 2.5rem;
}

.hero-editorial .btn-primary {
    background: var(--signal);
    color: var(--ink);
    border-color: var(--signal);
}

.hero-editorial .btn-primary:hover {
    background: var(--bone);
    color: var(--ink);
    border-color: var(--bone);
}

.hero-editorial .btn-secondary {
    color: var(--bone);
    border-color: rgba(243, 239, 230, 0.35);
}

.hero-editorial .btn-secondary:hover {
    background: var(--bone);
    color: var(--ink);
    border-color: var(--bone);
}

@media (max-width: 900px) {
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
}

/* Editorial section — two-col label/content pattern */
.section-editorial {
    padding: clamp(4rem, 8vw, 7rem) 0;
    border-top: 1px solid var(--border);
}

.section-editorial-grid {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 4rem;
    align-items: start;
}

.section-editorial-label {
    position: sticky;
    top: 6rem;
}

.section-editorial-label .eyebrow {
    margin-bottom: 0.875rem;
}

@media (max-width: 900px) {
    .section-editorial-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .section-editorial-label {
        position: static;
    }
}

/* Pull quote — large serif italic block */
.pull-quote {
    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-style: italic;
    line-height: 1.3;
    letter-spacing: -0.005em;
    color: var(--text);
    margin: 0;
    padding-left: 1.25rem;
    border-left: 2px solid var(--signal);
}

/* ========================================
   Nav over dark hero — invert logo and link colours
   Uses :has() — supported in Safari 15.4+, Chrome 105+, Firefox 121+
   ======================================== */

body:has(.hero-editorial) nav {
    background: color-mix(in oklab, var(--ink) 70%, transparent);
    border-bottom-color: rgba(215, 210, 197, 0.12);
}

body:has(.hero-editorial) nav .logo { color: var(--bone); }

body:has(.hero-editorial) nav .nav-links a {
    color: var(--bone);
}

body:has(.hero-editorial) nav .nav-links a::after {
    background: var(--signal);
}

body:has(.hero-editorial) nav .nav-cta {
    background: var(--signal);
    color: var(--ink) !important;
    border-color: var(--signal);
}

body:has(.hero-editorial) nav .nav-cta:hover {
    background: var(--bone);
    color: var(--ink) !important;
    border-color: var(--bone);
}

body:has(.hero-editorial) .theme-toggle {
    color: var(--bone);
    border-color: rgba(243, 239, 230, 0.3);
}

body:has(.hero-editorial) .theme-toggle:hover {
    border-color: var(--bone);
    background: rgba(243, 239, 230, 0.08);
}

body:has(.hero-editorial) .menu-toggle span {
    background: var(--bone);
}

/* Fallback selectors using .has-dark-hero body class (for browsers w/o :has() support) */
body.has-dark-hero nav {
    background: color-mix(in oklab, var(--ink) 70%, transparent);
    border-bottom-color: rgba(215, 210, 197, 0.12);
}

body.has-dark-hero nav .logo { color: var(--bone); }

body.has-dark-hero nav .nav-links a { color: var(--bone); }
body.has-dark-hero nav .nav-links a::after { background: var(--signal); }

body.has-dark-hero nav .nav-cta {
    background: var(--signal);
    color: var(--ink) !important;
    border-color: var(--signal);
}

body.has-dark-hero nav .nav-cta:hover {
    background: var(--bone);
    color: var(--ink) !important;
    border-color: var(--bone);
}

body.has-dark-hero .theme-toggle {
    color: var(--bone);
    border-color: rgba(243, 239, 230, 0.3);
}

body.has-dark-hero .theme-toggle:hover {
    border-color: var(--bone);
    background: rgba(243, 239, 230, 0.08);
}

body.has-dark-hero .menu-toggle span {
    background: var(--bone);
}

/* When scrolled past the hero, revert nav to bone background */
body.has-dark-hero.scrolled-past-hero nav {
    background: color-mix(in oklab, var(--bg) 92%, transparent);
    border-bottom-color: var(--border);
}

body.has-dark-hero.scrolled-past-hero nav .logo { color: var(--text); }

body.has-dark-hero.scrolled-past-hero nav .nav-links a { color: var(--text); }

body.has-dark-hero.scrolled-past-hero nav .nav-cta {
    background: var(--accent);
    color: var(--on-accent) !important;
    border-color: var(--accent);
}

body.has-dark-hero.scrolled-past-hero .theme-toggle {
    color: var(--text);
    border-color: var(--border);
}

body.has-dark-hero.scrolled-past-hero .menu-toggle span {
    background: var(--text);
}

/* Footer logo (SVG-based) keeps bone color on dark footer bg */
body footer .logo { color: var(--bone); }

/* ========================================
   Product Showcase — Image-led cards
   For internal product cards on homepage and projects page
   ======================================== */

.products-showcase {
    padding: clamp(5rem, 8vw, 8rem) 0;
    background: var(--bg);
}

.products-showcase .section-header {
    margin-bottom: 3.5rem;
}

/* Featured products: large image-led cards (3 wide on desktop) */
.products-featured-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
    align-items: stretch;
}

@media (max-width: 1100px) {
    .products-featured-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
    .products-featured-grid { grid-template-columns: 1fr; }
}

.product-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    text-decoration: none;
    color: inherit;
}

.product-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent);
    box-shadow: 0 18px 40px -22px rgba(11, 12, 16, 0.25);
}

[data-theme="dark"] .product-card:hover {
    box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.7);
}

.product-card-image {
    position: relative;
    aspect-ratio: 1200 / 630;
    overflow: hidden;
    background: var(--ink);
}

.product-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.product-card-stage {
    position: absolute;
    top: 0.85rem;
    left: 0.85rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    background: var(--signal);
    color: var(--ink);
}

.product-card-stage.progress {
    background: rgba(243, 239, 230, 0.95);
    color: var(--ink);
}

.product-card-body {
    padding: 1.5rem 1.5rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    flex-grow: 1;
}

.product-card-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-muted);
}

.product-card-title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 1.75rem;
    letter-spacing: -0.015em;
    line-height: 1.05;
    color: var(--text);
    margin: 0;
}

.product-card-desc {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0;
}

.product-card-actions {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-top: auto;
    padding-top: 1rem;
}

.product-card-link {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
    transition: color 0.2s ease;
}

.product-card-link:hover {
    color: var(--signal);
}

.product-card-link.external::after {
    content: " ↗";
    font-weight: 400;
}

/* In-Progress products — smaller, text-led row below the featured */
.products-progress-grid {
    margin-top: 4rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

@media (max-width: 1100px) { .products-progress-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .products-progress-grid { grid-template-columns: 1fr; } }

.product-mini-card {
    padding: 1.25rem 1.25rem 1.5rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-surface);
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.product-mini-card:hover {
    border-color: var(--text);
}

.product-mini-stage {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.product-mini-stage::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
    display: inline-block;
}

.product-mini-title {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    color: var(--text);
    margin: 0 0 0.35rem 0;
}

.product-mini-desc {
    color: var(--text-muted);
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0 0 0.75rem 0;
}

.product-mini-link {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent);
    text-decoration: none;
}

.product-mini-link:hover {
    color: var(--signal);
}

/* =========================================================================
   BRAND BRUTALIST OVERRIDE — Raw industrial design with Psychemeta palette
   Heavy borders, hard shadows, Impact display, signal/plum accents
   Replaces the editorial pass. Last block wins specificity battles.
   ========================================================================= */

body {
    font-family: var(--font-sans);
    font-size: 18px;
    line-height: 1.5;
    background-image:
        linear-gradient(rgba(22, 24, 31, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(22, 24, 31, 0.05) 1px, transparent 1px);
    background-size: 32px 32px;
}

[data-theme="dark"] body {
    background-image:
        linear-gradient(rgba(243, 239, 230, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(243, 239, 230, 0.04) 1px, transparent 1px);
}

/* ── Brutalist headings: Impact uppercase ── */
h1, h2, h3, h4 {
    font-family: 'Impact', 'Arial Black', 'Haettenschweiler', 'Franklin Gothic Bold', 'Helvetica Neue', sans-serif !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    letter-spacing: -0.02em !important;
    line-height: 0.95 !important;
    font-style: normal !important;
    color: var(--text) !important;
}

h1 { font-size: clamp(3.5rem, 12vw, 9rem) !important; }
h2 { font-size: clamp(2.3rem, 8vw, 5.25rem) !important; }
h3 { font-size: clamp(1.15rem, 3vw, 2rem) !important; }
h4 { font-size: clamp(0.95rem, 2vw, 1.25rem) !important; }

h1 em, h2 em, h3 em, h1 .highlight, h2 .highlight {
    font-style: normal !important;
    background: var(--signal);
    color: var(--ink) !important;
    padding: 0 0.18em;
    display: inline-block;
    transform: skew(-7deg);
    box-shadow: 4px 4px 0 var(--ink);
}

/* ── Hard section dividers ── */
section { border-top: 4px solid var(--text) !important; }
.hero, .hero-editorial, .page-hero, .contact-hero { border-top: none !important; }

/* ── Brutalist nav ── */
nav {
    background: var(--ink) !important;
    border-bottom: 4px solid var(--ink) !important;
    backdrop-filter: none !important;
    padding: 0.85rem 0 !important;
    position: sticky !important;
}

body.has-dark-hero nav, body:has(.hero-editorial) nav,
body.has-dark-hero.scrolled-past-hero nav { background: var(--ink) !important; }

nav .logo { color: var(--bone) !important; }
nav .logo .logo-word { font-family: 'Impact', 'Arial Black', sans-serif !important; text-transform: uppercase; letter-spacing: -0.02em; font-size: 1.4rem; }

.nav-links a {
    font-family: 'Impact', 'Arial Black', 'Helvetica Neue', sans-serif !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.9rem;
    padding: 0.45rem 0.65rem !important;
    border: 2px solid transparent !important;
    color: var(--bone) !important;
}

.nav-links a::after { display: none !important; }
.nav-links a:hover, .nav-links a.active {
    border-color: var(--bone) !important;
    background: var(--accent) !important;
    color: var(--bone) !important;
}

.nav-cta {
    border-radius: 0 !important;
    border: 2px solid var(--bone) !important;
    background: var(--signal) !important;
    color: var(--ink) !important;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.4) !important;
    font-family: 'Impact', 'Arial Black', sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}
.nav-cta:hover { background: var(--bone) !important; color: var(--ink) !important; }

.menu-toggle span { background: var(--bone) !important; height: 3px; }

.theme-toggle { color: var(--bone) !important; border: 2px solid var(--bone) !important; border-radius: 0 !important; }
.theme-toggle:hover { background: var(--signal) !important; color: var(--ink) !important; }

/* ── Brutalist buttons ── */
.btn {
    border-radius: 0 !important;
    border: 3px solid var(--text) !important;
    box-shadow: 6px 6px 0 var(--text) !important;
    font-family: 'Impact', 'Arial Black', sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    font-size: 0.9rem !important;
    font-weight: 400 !important;
    transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.2s ease !important;
}

.btn-primary { background: var(--signal) !important; color: var(--ink) !important; }
.btn-secondary { background: var(--bg-elevated) !important; color: var(--text) !important; }
.btn-primary:hover, .btn-secondary:hover {
    transform: translate(4px, 4px) !important;
    box-shadow: 2px 2px 0 var(--text) !important;
}

/* ── Section tag (brutalist label, not eyebrow dot) ── */
.section-tag, .eyebrow {
    display: inline-block !important;
    font-family: 'Impact', 'Arial Black', sans-serif !important;
    font-size: 0.78rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    padding: 0.4rem 0.7rem !important;
    border: 2px solid var(--ink) !important;
    background: var(--ink) !important;
    color: var(--signal) !important;
    border-radius: 0 !important;
    font-weight: 400 !important;
}
.section-tag::before, .eyebrow::before, .eyebrow .dot { display: none !important; }

/* ── Hero: dark cliff with signal lime accent stripe ── */
.hero, .hero-editorial {
    background: var(--ink) !important;
    color: var(--bone) !important;
    position: relative;
    overflow: hidden;
    min-height: auto !important;
    padding: clamp(7rem, 11vw, 10rem) 0 clamp(4rem, 7vw, 6rem) !important;
}

.hero::before, .hero::after, .hero-editorial::before, .hero-editorial::after {
    display: none !important;
}

.hero h1, .hero-editorial h1, .hero-editorial .display {
    color: var(--bone) !important;
    text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.45);
    margin-bottom: 1.5rem;
}

.hero-editorial .lede, .hero-subtitle {
    font-family: var(--font-sans) !important;
    font-style: normal !important;
    color: var(--bone) !important;
    background: rgba(0, 0, 0, 0.35);
    border-left: 6px solid var(--signal);
    padding: 1rem 1.2rem;
    max-width: 65ch;
    font-size: 1.05rem;
    font-weight: 400;
}

.hero-editorial .eyebrow {
    background: var(--signal) !important;
    color: var(--ink) !important;
    border-color: var(--signal) !important;
}

.hero-meta {
    border-top: 3px solid var(--signal) !important;
    margin-top: 3rem !important;
}

.hero-meta-row {
    border-bottom: 2px solid rgba(243, 239, 230, 0.15) !important;
}

.hero-meta-row .meta-label {
    font-family: 'Impact', 'Arial Black', sans-serif !important;
    text-transform: uppercase !important;
    color: var(--signal) !important;
    letter-spacing: 0.08em;
}

.hero-meta-row .meta-val a {
    color: var(--bone) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
    border: none !important;
}
.hero-meta-row .meta-val a:hover { color: var(--signal) !important; }

/* ── Page hero (inner pages): dark with brutalist split ── */
.page-hero, .contact-hero {
    background: var(--ink) !important;
    color: var(--bone) !important;
    position: relative;
    overflow: hidden;
}
.page-hero::before, .contact-hero::before { display: none !important; }
.page-hero h1, .contact-hero h1 {
    color: var(--bone) !important;
    text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.35);
}
.page-hero-subtitle { color: var(--bone) !important; background: rgba(0,0,0,0.35); border-left: 6px solid var(--signal); padding: 0.9rem 1.1rem; max-width: 65ch; font-size: 1rem; }

/* ── Dark sections (results-band, featured-work, testimonials, cta) ── */
.results-band, .featured-work, .testimonials, .packages, .process-preview, .about, .cta, footer {
    background: var(--ink) !important;
    color: var(--bone) !important;
}
.results-band h2, .featured-work h2, .testimonials h2, .cta h2, .results-band .section-subtitle, .featured-work .section-subtitle, .testimonials .section-subtitle, .cta p { color: var(--bone) !important; }
.results-band .section-subtitle, .featured-work .section-subtitle, .testimonials .section-subtitle, .cta p { background: transparent !important; border: none !important; padding: 0 !important; }

/* ── Light sections (cream bg) ── */
.services, .products-showcase, .work-grid-section, .seo-content, .story-section, .team-section, .faq-section, .services-detail, .projects-showcase {
    background: var(--bg) !important;
}

/* ── BRUTALIST CARDS — thick border + hard shadow + slight tilt ── */
.service-card, .work-card, .result-card, .seo-card, .testimonial-card,
.about-card, .package-card, .value-card, .team-card, .faq-item,
.stat-card, .step-mini, .contact-form-wrapper, .map-content,
.product-card, .product-mini-card, .project-card, .project-panel,
.tool-card {
    border: 3px solid var(--text) !important;
    border-radius: 0 !important;
    box-shadow: 8px 8px 0 var(--text) !important;
    background: var(--bg-elevated) !important;
    color: var(--text) !important;
    transition: transform 0.14s ease, box-shadow 0.14s ease !important;
}

[data-theme="dark"] .service-card, [data-theme="dark"] .work-card,
[data-theme="dark"] .result-card, [data-theme="dark"] .product-card,
[data-theme="dark"] .product-mini-card, [data-theme="dark"] .tool-card,
[data-theme="dark"] .faq-item, [data-theme="dark"] .seo-card,
[data-theme="dark"] .testimonial-card, [data-theme="dark"] .team-card,
[data-theme="dark"] .stat-card, [data-theme="dark"] .step-mini,
[data-theme="dark"] .contact-form-wrapper, [data-theme="dark"] .map-content,
[data-theme="dark"] .value-card, [data-theme="dark"] .about-card,
[data-theme="dark"] .package-card, [data-theme="dark"] .project-card,
[data-theme="dark"] .project-panel {
    background: var(--bg-surface) !important;
    border-color: var(--bone) !important;
    box-shadow: 8px 8px 0 var(--bone) !important;
    color: var(--bone) !important;
}

[data-theme="dark"] .result-card, [data-theme="dark"] .testimonial-card {
    background: var(--obsidian) !important;
}

/* Dark cards on dark sections: invert */
.results-band .result-card, .featured-work .work-card, .testimonials .testimonial-card {
    background: var(--obsidian) !important;
    border-color: var(--bone) !important;
    box-shadow: 8px 8px 0 var(--bone) !important;
    color: var(--bone) !important;
}
.results-band .result-card h3, .featured-work .work-card h3, .testimonials .testimonial-card * {
    color: var(--bone) !important;
}
.results-band .result-card p, .featured-work .work-card p { color: rgba(243, 239, 230, 0.85) !important; }

/* Slight tilt on alternating cards — brutalist signature */
.services-grid .service-card:nth-child(odd),
.values-grid .value-card:nth-child(odd),
.team-grid .team-card:nth-child(odd),
.services-grid .service-card:nth-child(even),
.values-grid .value-card:nth-child(even),
.team-grid .team-card:nth-child(even) {
    transform: rotate(0.6deg);
}

/* Product cards stay straight + uniform — no tilt (they carry imagery) */
.products-featured-grid .product-card,
.products-featured-grid .product-card:nth-child(odd),
.products-featured-grid .product-card:nth-child(even) {
    transform: none;
    align-self: stretch;
    height: 100%;
}

.service-card:hover, .work-card:hover, .result-card:hover, .product-card:hover,
.product-mini-card:hover, .tool-card:hover, .value-card:hover, .team-card:hover,
.package-card:hover, .project-card:hover, .faq-item:hover {
    transform: translate(-4px, -4px) rotate(0deg) !important;
    box-shadow: 12px 12px 0 var(--text) !important;
}
[data-theme="dark"] .service-card:hover, [data-theme="dark"] .work-card:hover,
[data-theme="dark"] .result-card:hover, [data-theme="dark"] .product-card:hover,
[data-theme="dark"] .product-mini-card:hover, [data-theme="dark"] .tool-card:hover {
    box-shadow: 12px 12px 0 var(--bone) !important;
}

/* ── Product cards (image-led but with brutalist treatment) ── */
.product-card { padding: 0; display: flex; flex-direction: column; }
.product-card-image {
    aspect-ratio: 16 / 10;
    width: 100%;
    border-bottom: 3px solid var(--text);
    background: var(--ink);
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}
[data-theme="dark"] .product-card-image { border-bottom-color: var(--bone); }
.product-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}
.product-card-stage {
    position: absolute; top: 0.7rem; left: 0.7rem; z-index: 2;
    border: 2px solid var(--ink) !important;
    background: var(--signal) !important;
    color: var(--ink) !important;
    font-family: 'Impact', 'Arial Black', sans-serif !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: 0 !important;
    padding: 0.3rem 0.55rem;
    font-size: 0.7rem;
}
.product-card-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    flex-grow: 1;
}
.product-card-eyebrow {
    font-family: 'Impact', 'Arial Black', sans-serif !important;
    text-transform: uppercase;
    color: var(--text-muted) !important;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
}
.product-card-title {
    font-family: 'Impact', 'Arial Black', sans-serif !important;
    text-transform: uppercase !important;
    font-size: 1.5rem !important;
    line-height: 0.95 !important;
    color: var(--text) !important;
    font-style: normal !important;
    margin: 0;
}
.product-card-desc { color: var(--text-muted); font-size: 0.92rem; line-height: 1.5; margin: 0; }
.product-card-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}
.product-card-link {
    font-family: 'Impact', 'Arial Black', sans-serif !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.75rem;
    color: var(--accent);
    border-bottom: 2px solid currentColor;
    padding-bottom: 1px;
    white-space: nowrap;
}
.product-card-link:hover { color: var(--signal); }

/* ── In-build mini cards ── */
.product-mini-card { padding: 1.25rem; background: var(--bg-elevated) !important; }
.product-mini-stage {
    font-family: 'Impact', 'Arial Black', sans-serif !important;
    background: var(--accent);
    color: var(--bone) !important;
    padding: 0.25rem 0.5rem;
    display: inline-block;
    font-size: 0.65rem;
    letter-spacing: 0.1em;
}
.product-mini-stage::before { display: none; }
.product-mini-title {
    font-family: 'Impact', 'Arial Black', sans-serif !important;
    text-transform: uppercase !important;
    font-size: 1.25rem !important;
    color: var(--text) !important;
}
.product-mini-link {
    font-family: 'Impact', 'Arial Black', sans-serif !important;
    color: var(--accent) !important;
}

/* ── Tool stack cards ── */
.tool-card { padding: 1.5rem 1rem; text-align: center; }
.tool-card h3 {
    font-size: 0.95rem !important;
    margin-top: 0.75rem;
    font-family: 'Impact', 'Arial Black', sans-serif !important;
}

/* ── Form fields ── */
.form-group input, .form-group select, .form-group textarea {
    border: 3px solid var(--text) !important;
    border-radius: 0 !important;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.18);
    background: var(--bg-elevated) !important;
    color: var(--text) !important;
    font-family: var(--font-sans);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    outline: none;
    border-color: var(--signal) !important;
    box-shadow: 4px 4px 0 var(--signal);
}

/* ── Footer ── */
footer { border-top: 4px solid var(--signal) !important; background: var(--ink) !important; color: var(--bone) !important; }
footer .footer-section h4 {
    font-family: 'Impact', 'Arial Black', sans-serif !important;
    color: var(--signal) !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.85rem;
}
footer .footer-section a { color: var(--bone) !important; text-decoration: underline; text-underline-offset: 3px; }
footer .footer-section a:hover { color: var(--signal) !important; }
footer p, footer address { color: rgba(243, 239, 230, 0.78) !important; }
footer .logo { color: var(--bone) !important; }

.social-links a {
    border: 2px solid var(--bone) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--bone) !important;
    font-family: 'Impact', 'Arial Black', sans-serif !important;
}
.social-links a:hover { background: var(--signal) !important; color: var(--ink) !important; border-color: var(--signal) !important; }

/* ── Disable card tilt on small screens (avoid layout chaos) ── */
@media (max-width: 1024px) {
    .services-grid .service-card:nth-child(odd),
    .services-grid .service-card:nth-child(even),
    .values-grid .value-card:nth-child(odd),
    .values-grid .value-card:nth-child(even),
    .team-grid .team-card:nth-child(odd),
    .team-grid .team-card:nth-child(even),
    .products-featured-grid .product-card:nth-child(odd),
    .products-featured-grid .product-card:nth-child(even) { transform: none; }
}

@media (max-width: 768px) {
    h1 { font-size: clamp(2.5rem, 14vw, 4.5rem) !important; }
    h2 { font-size: clamp(1.8rem, 10vw, 3rem) !important; }
    .service-card, .work-card, .result-card, .product-card, .product-mini-card,
    .tool-card, .faq-item, .seo-card, .testimonial-card, .team-card, .stat-card,
    .step-mini, .contact-form-wrapper, .map-content, .value-card, .about-card,
    .package-card, .project-card {
        box-shadow: 5px 5px 0 var(--text) !important;
    }
    [data-theme="dark"] .service-card, [data-theme="dark"] .work-card,
    [data-theme="dark"] .result-card, [data-theme="dark"] .product-card,
    [data-theme="dark"] .product-mini-card { box-shadow: 5px 5px 0 var(--bone) !important; }
}

/* 6-card services grid — 3 across on desktop, 2 across on tablet, 1 on mobile */
.services-grid-6 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
}

@media (max-width: 1100px) {
    .services-grid-6 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .services-grid-6 { grid-template-columns: 1fr; }
}

/* ── 1:90 Method — process intro card + principle line (brutalist) ── */
.process-intro-card {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 0;
    margin: 2.5rem 0 3.5rem;
    border: 3px solid var(--text);
    box-shadow: 8px 8px 0 var(--text);
    background: var(--bg-elevated);
}

[data-theme="dark"] .process-intro-card {
    background: var(--bg-surface);
    border-color: var(--bone);
    box-shadow: 8px 8px 0 var(--bone);
}

.process-intro-tag {
    background: var(--signal);
    color: var(--ink);
    font-family: 'Impact', 'Arial Black', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 1.25rem;
    line-height: 1.05;
    display: flex;
    align-items: center;
    padding: 1.75rem;
    border-right: 3px solid var(--text);
}

[data-theme="dark"] .process-intro-tag { border-right-color: var(--bone); }

.process-intro-body { padding: 1.75rem 2rem; }
.process-intro-body h3 { margin-bottom: 0.6rem; color: var(--text) !important; }
.process-intro-body p { color: var(--text-muted); font-size: 1rem; line-height: 1.6; margin: 0; max-width: 70ch; }

.process-principle {
    margin-top: 3rem;
    font-family: 'Impact', 'Arial Black', sans-serif;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    font-size: clamp(1.1rem, 2.4vw, 1.75rem);
    line-height: 1.15;
    color: var(--text);
    text-align: center;
    border-top: 3px solid var(--signal);
    padding-top: 1.75rem;
    max-width: 60ch;
    margin-left: auto;
    margin-right: auto;
}

.process .section-subtitle a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 600;
}
.process .section-subtitle a:hover { color: var(--signal); }

@media (max-width: 640px) {
    .process-intro-card { grid-template-columns: 1fr; }
    .process-intro-tag {
        border-right: none;
        border-bottom: 3px solid var(--text);
        padding: 1.25rem 1.75rem;
    }
    [data-theme="dark"] .process-intro-tag { border-bottom-color: var(--bone); }
}

/* ── Live client websites — image-led brutalist cards ── */
.live-sites-section {
    background: var(--bg) !important;
    padding: clamp(5rem, 8vw, 7rem) 0;
}

.live-sites-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-top: 3rem;
}

@media (max-width: 800px) { .live-sites-grid { grid-template-columns: 1fr; } }

.live-site-card {
    display: flex;
    flex-direction: column;
    border: 3px solid var(--text);
    box-shadow: 8px 8px 0 var(--text);
    background: var(--bg-elevated);
    transition: transform 0.14s ease, box-shadow 0.14s ease;
}

[data-theme="dark"] .live-site-card {
    background: var(--bg-surface);
    border-color: var(--bone);
    box-shadow: 8px 8px 0 var(--bone);
}

.live-site-card:hover {
    transform: translate(-4px, -4px);
    box-shadow: 12px 12px 0 var(--text);
}
[data-theme="dark"] .live-site-card:hover { box-shadow: 12px 12px 0 var(--bone); }

.live-site-image {
    display: block;
    aspect-ratio: 1000 / 562;
    overflow: hidden;
    border-bottom: 3px solid var(--text);
    background: var(--ink);
}
[data-theme="dark"] .live-site-image { border-bottom-color: var(--bone); }

.live-site-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    transition: transform 0.4s ease;
}
.live-site-card:hover .live-site-image img { transform: scale(1.03); }

.live-site-body { padding: 1.75rem; display: flex; flex-direction: column; gap: 0.75rem; flex-grow: 1; }
.live-site-body h3 { color: var(--text) !important; }
.live-site-body p { color: var(--text-muted); font-size: 0.95rem; line-height: 1.55; margin: 0; }
.live-site-actions { margin-top: auto; padding-top: 0.5rem; }

@media (max-width: 768px) {
    .live-site-card { box-shadow: 5px 5px 0 var(--text); }
    [data-theme="dark"] .live-site-card { box-shadow: 5px 5px 0 var(--bone); }
}

/* Product card link hygiene — card is now <article>, links inside behave */
.product-card-image { display: block; text-decoration: none; }
.product-card-title a {
    color: var(--text) !important;
    text-decoration: none;
}
.product-card-title a:hover { color: var(--accent) !important; }

/* ========================================
   Directory Coverage grid (SEO & Reputation page)
   ======================================== */
.coverage-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}
@media (max-width: 1100px) { .coverage-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .coverage-grid { grid-template-columns: 1fr; } }

.coverage-card {
    border: 3px solid var(--text) !important;
    border-radius: 0 !important;
    box-shadow: 6px 6px 0 var(--text) !important;
    background: var(--bg-elevated) !important;
    padding: 1.5rem 1.4rem 1.6rem;
    transition: transform 0.14s ease, box-shadow 0.14s ease;
}
[data-theme="dark"] .coverage-card {
    background: var(--bg-surface) !important;
    border-color: var(--bone) !important;
    box-shadow: 6px 6px 0 var(--bone) !important;
}
.coverage-card:hover {
    transform: translate(-3px, -3px);
    box-shadow: 9px 9px 0 var(--text) !important;
}
[data-theme="dark"] .coverage-card:hover { box-shadow: 9px 9px 0 var(--bone) !important; }

.coverage-count {
    display: inline-block;
    font-family: 'Impact', 'Arial Black', sans-serif;
    font-size: 2.75rem;
    line-height: 1;
    color: var(--ink);
    background: var(--signal);
    padding: 0.1em 0.35em;
    margin-bottom: 0.9rem;
    box-shadow: 3px 3px 0 var(--text);
}
[data-theme="dark"] .coverage-count { box-shadow: 3px 3px 0 var(--bone); }

.coverage-card h3 {
    font-family: 'Impact', 'Arial Black', sans-serif !important;
    text-transform: uppercase !important;
    font-size: 1.15rem !important;
    color: var(--text) !important;
    margin-bottom: 0.5rem;
    letter-spacing: 0.01em;
}
.coverage-card p {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 1024px) {
    .coverage-card:hover { transform: none; }
}

/* Linked service cards (homepage) — "Learn more" affordance */
a.service-card { text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.service-card-link {
    margin-top: auto;
    padding-top: 1rem;
    font-family: 'Impact', 'Arial Black', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
    color: var(--accent);
}
a.service-card:hover .service-card-link { color: var(--signal); }

/* ========================================
   Nav Services dropdown (brutalist)
   ======================================== */
.nav-dropdown { position: relative; }
.nav-caret { font-size: 0.7em; opacity: 0.8; }

.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 260px;
    list-style: none;
    margin: 0;
    padding: 0.4rem;
    background: var(--ink);
    border: 3px solid var(--ink);
    box-shadow: 6px 6px 0 rgba(0,0,0,0.45);
    z-index: 1100;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu { display: block; }

.nav-dropdown-menu li { margin: 0; }
.nav-dropdown-menu a {
    display: block;
    padding: 0.6rem 0.8rem !important;
    font-family: 'Impact', 'Arial Black', sans-serif !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.82rem;
    color: var(--bone) !important;
    border: 2px solid transparent !important;
    white-space: nowrap;
}
.nav-dropdown-menu a:hover {
    background: var(--signal) !important;
    color: var(--ink) !important;
    border-color: var(--ink) !important;
}
.nav-dropdown-menu a::after { display: none !important; }
.nav-dropdown-all { border-top: 2px solid rgba(243,239,230,0.18); margin-top: 0.25rem; padding-top: 0.25rem; }
.nav-dropdown-all a { color: var(--signal) !important; }

/* Mobile: dropdown expands inline inside the open menu */
@media (max-width: 768px) {
    .nav-dropdown-menu {
        display: block;
        position: static;
        min-width: 0;
        border: none;
        box-shadow: none;
        background: transparent;
        padding: 0.25rem 0 0.25rem 1rem;
        border-left: 3px solid var(--signal);
        margin: 0.25rem 0 0.5rem 0.5rem;
    }
    .nav-dropdown-menu a { font-size: 0.78rem; padding: 0.4rem 0 !important; }
    .nav-dropdown-menu a:hover { background: transparent !important; color: var(--signal) !important; border-color: transparent !important; }
    .nav-dropdown-all { border-top: none; }
}


/* =========================================================================
   RESPONSIVE — consolidated (30 May 2026)
   Single source of truth for phone + tablet behaviour.
   Replaces earlier passes 1-4 which contradicted each other.
   ========================================================================= */

/* ---- Safety net at all viewports ---- */
html, body { overflow-x: hidden; max-width: 100vw; }
*, *::before, *::after { box-sizing: border-box; }
img, svg, video, iframe { max-width: 100%; height: auto; }
/* Grid/flex children with image content default min-width:auto, which
   inflates to image intrinsic width. Reset so they shrink with parent. */
.product-card, .live-site-card, .service-card, .result-card, .tool-card,
.products-featured-grid > *, .live-sites-grid > *, .services-grid > *,
.tool-grid > *, .work-grid > * { min-width: 0; }

/* ---- Tablet portrait (601-1099px): free hero column, comfortable display ---- */
@media (max-width: 1099px) and (min-width: 601px) {
    .hero-grid { display: block; }
    .hero-main { max-width: 100%; min-width: 0; }
    .hero-editorial .display, .hero h1 {
        font-size: clamp(2.4rem, 6.5vw, 3.6rem) !important;
        line-height: 1.05 !important;
        letter-spacing: -0.02em !important;
    }
    h1, .page-hero h1, .contact-hero h1 {
        font-size: clamp(2.2rem, 6vw, 3.4rem) !important;
        line-height: 1.05 !important;
    }
    h2 { font-size: clamp(1.6rem, 4vw, 2.4rem) !important; }
    .hero-meta {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem 2rem !important;
    }
}

/* ---- Phones (≤600px): confident brutalist that fits ---- */
@media (max-width: 600px) {
    /* Free hero column */
    .hero-grid { display: block !important; }
    .hero-main, .hero-content { max-width: 100% !important; width: 100% !important; min-width: 0 !important; }

    /* Display headlines — big and confident, 2-3 words per line */
    h1, .display, .hero-editorial .display, .page-hero h1, .contact-hero h1 {
        font-size: clamp(1.85rem, 8.5vw, 2.4rem) !important;
        line-height: 1.05 !important;
        letter-spacing: -0.02em !important;
        max-width: 12ch;
    }
    .hero h1 { max-width: 14ch; }
    h2, .section-header h2 {
        font-size: clamp(1.4rem, 5.8vw, 1.95rem) !important;
        line-height: 1.1 !important;
        letter-spacing: -0.015em !important;
    }
    h3 { font-size: 1.1rem !important; line-height: 1.25 !important; }

    /* Drop skew transform on phones — it pokes past the right edge */
    .highlight, h1 em, h1 .highlight, .display em, .display .highlight,
    .hero h1 em, .hero h1 .highlight {
        transform: none !important;
        display: inline-block !important;
        padding: 0 0.2em !important;
        box-shadow: 3px 3px 0 var(--ink) !important;
        max-width: 100%;
    }

    /* Hero meta band stacks single-column */
    .hero-meta {
        grid-template-columns: 1fr !important;
        gap: 0.6rem 0 !important;
        margin-top: 2rem !important;
        padding-top: 1rem !important;
    }
    .hero-meta-row { padding: 0.4rem 0 !important; }

    /* Buttons full width on phones */
    .hero-buttons, .hero-editorial .hero-buttons, .cta-actions {
        flex-direction: column !important;
        gap: 0.65rem !important;
        margin-top: 1.5rem !important;
    }
    .hero-buttons .btn, .cta-actions .btn, .hero-editorial .hero-buttons .btn {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        justify-content: center;
        text-align: center;
    }

    /* Cards and content respect container */
    .lede, .hero-editorial .lede, .hero-subtitle, .page-hero-subtitle, p,
    .service-card, .result-card, .coverage-card, .product-card, .live-site-card,
    .work-grid, .services-grid, .coverage-grid, .results-grid, .products-featured-grid,
    .products-progress-grid, .live-sites-grid, .tool-grid {
        max-width: 100% !important;
        min-width: 0 !important;
    }
    .hero-editorial .lede, .hero-subtitle, .page-hero-subtitle {
        padding: 0.85rem 0.9rem !important;
        font-size: 0.95rem !important;
        line-height: 1.45 !important;
        max-width: 88vw !important;
        width: auto !important;
        box-sizing: border-box !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
        border-left-width: 4px !important;
        margin-right: 1rem !important;
    }
    /* Eyebrow chip respects viewport on phones */
    .eyebrow, .section-tag {
        max-width: 88vw !important;
        box-sizing: border-box !important;
        white-space: normal !important;
        word-break: normal !important;
    }
    /* H2s with long all-caps phrases need to wrap on phones */
    .section-header h2, .page-hero + .services h2 {
        word-break: normal !important;
        overflow-wrap: break-word !important;
        hyphens: auto;
    }
    .products-featured-grid, .live-sites-grid, .services-grid, .results-grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }

    /* Tighter container padding on phones for more usable width */
    .container { padding-left: 1.1rem !important; padding-right: 1.1rem !important; }

    /* Section vertical rhythm tighter on phones */
    section { padding-top: 3rem !important; padding-bottom: 3rem !important; }
    .hero, .page-hero, .contact-hero { padding-top: 5rem !important; padding-bottom: 3rem !important; min-height: 0 !important; }
}

/* ───── Founder card (about.php) ───── */
.founder-card {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 2.5rem;
    align-items: start;
    background: var(--surface, var(--bg));
    border: 3px solid var(--ink);
    box-shadow: 10px 10px 0 var(--ink);
    padding: 2.2rem;
    margin-top: 1.5rem;
}
[data-theme="dark"] .founder-card { box-shadow: 10px 10px 0 var(--bone); }
.founder-card-photo {
    width: 100%;
    aspect-ratio: 1;
    background: linear-gradient(135deg, var(--ink), #2a2f3a);
    border: 3px solid var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--signal);
    font-family: 'Impact', 'Arial Black', sans-serif;
    font-size: clamp(4rem, 7vw, 6rem);
    letter-spacing: -0.04em;
    line-height: 1;
}
.founder-initials { display: block; transform: translateY(-0.05em); }
.founder-card-body { display: flex; flex-direction: column; gap: 0.9rem; }
.founder-eyebrow {
    display: inline-block;
    background: var(--signal);
    color: var(--ink);
    font-family: 'Impact', 'Arial Black', sans-serif;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.35rem 0.75rem;
    border: 2px solid var(--ink);
    align-self: flex-start;
}
.founder-card h3 {
    font-family: 'Impact', 'Arial Black', sans-serif;
    text-transform: uppercase;
    font-size: clamp(2rem, 3.6vw, 2.8rem);
    letter-spacing: -0.015em;
    line-height: 1.05;
    margin: 0;
}
.founder-postnom {
    color: var(--signal);
    font-size: 0.7em;
    letter-spacing: 0;
}
.founder-lede {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    line-height: 1.4;
    color: var(--text);
    margin: 0;
}
.founder-card p { margin: 0; line-height: 1.55; color: var(--text-muted); }
.founder-card p a { color: var(--ink); border-bottom: 2px solid var(--signal); text-decoration: none; font-weight: 600; }
[data-theme="dark"] .founder-card p a { color: var(--bone); }
.founder-card p a:hover { background: var(--signal); color: var(--ink); }
.founder-facts {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem 1.5rem;
    border-top: 2px solid var(--ink);
    padding-top: 1rem;
}
[data-theme="dark"] .founder-facts { border-top-color: var(--bone); }
.founder-facts li {
    font-size: 0.95rem;
    line-height: 1.35;
    color: var(--text);
    padding-left: 1.4em;
    position: relative;
}
.founder-facts li::before {
    content: '◆';
    color: var(--signal);
    position: absolute;
    left: 0;
    top: 0.05em;
    font-size: 0.85em;
}
.founder-facts strong { font-weight: 700; }
.founder-actions {
    display: flex;
    gap: 0.875rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}
@media (max-width: 900px) {
    .founder-card { grid-template-columns: 1fr; gap: 1.75rem; padding: 1.75rem; }
    .founder-card-photo { width: 180px; aspect-ratio: 1; }
}
@media (max-width: 600px) {
    .founder-card { padding: 1.25rem; box-shadow: 6px 6px 0 var(--ink); }
    .founder-card-photo { width: 140px; }
    .founder-facts { grid-template-columns: 1fr; }
    .founder-actions .btn { width: 100%; justify-content: center; text-align: center; }
}

/* ───── FAQ section (service pages) ───── */
.faq-section {
    padding: clamp(3.5rem, 7vw, 6rem) 0;
    border-top: 1px solid var(--border, #2a2f3a);
}
.faq-list {
    max-width: 920px;
    margin: 2rem auto 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.faq-item {
    border: 3px solid var(--ink);
    background: var(--surface, var(--bg));
    box-shadow: 4px 4px 0 var(--ink);
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}
[data-theme="dark"] .faq-item { box-shadow: 4px 4px 0 var(--bone); }
.faq-item[open] {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--ink);
}
[data-theme="dark"] .faq-item[open] { box-shadow: 6px 6px 0 var(--bone); }
.faq-question {
    cursor: pointer;
    list-style: none;
    padding: 1.1rem 1.3rem;
    font-family: 'Impact', 'Arial Black', sans-serif;
    text-transform: uppercase;
    letter-spacing: -0.005em;
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    line-height: 1.2;
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after {
    content: '+';
    flex-shrink: 0;
    width: 1.6em;
    height: 1.6em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--signal);
    color: var(--ink);
    border: 2px solid var(--ink);
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.1em;
    line-height: 1;
    transition: transform 0.18s ease;
}
.faq-item[open] .faq-question::after {
    content: '−';
    transform: rotate(0);
}
.faq-answer {
    padding: 0 1.3rem 1.3rem;
    color: var(--text-muted);
    line-height: 1.6;
    font-size: 1.02rem;
}
.faq-answer p { margin: 0.4rem 0; }
.faq-answer a {
    color: var(--ink);
    border-bottom: 2px solid var(--signal);
    text-decoration: none;
    font-weight: 600;
}
[data-theme="dark"] .faq-answer a { color: var(--bone); }
.faq-answer a:hover { background: var(--signal); color: var(--ink); }
@media (max-width: 600px) {
    .faq-question { padding: 0.95rem 1rem; font-size: 1rem; }
    .faq-answer { padding: 0 1rem 1rem; font-size: 0.97rem; }
}

/* ───── Article / long-form pages ───── */
.article-page { background: var(--bg); }
.container-narrow { max-width: 760px; margin: 0 auto; padding: 0 clamp(1.1rem, 3vw, 2rem); }
.article-meta {
    font-family: var(--font-sans);
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-top: 1rem;
    letter-spacing: 0.02em;
}
.article-meta a { color: var(--ink); border-bottom: 2px solid var(--signal); text-decoration: none; }
[data-theme="dark"] .article-meta a { color: var(--bone); }
.article-body { padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(3.5rem, 7vw, 6rem); }
.article-body .lede-paragraph {
    font-family: var(--font-serif);
    font-size: clamp(1.2rem, 1.6vw, 1.4rem);
    line-height: 1.5;
    color: var(--text);
    margin: 0 0 1.5rem 0;
    padding-left: 1.2rem;
    border-left: 4px solid var(--signal);
}
.article-body h2 {
    font-family: 'Impact', 'Arial Black', sans-serif;
    text-transform: uppercase;
    font-size: clamp(1.7rem, 2.8vw, 2.4rem);
    line-height: 1.05;
    letter-spacing: -0.015em;
    margin: 2.5rem 0 0.9rem;
    color: var(--text);
}
.article-body h3 {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: clamp(1.1rem, 1.5vw, 1.3rem);
    line-height: 1.3;
    margin: 1.6rem 0 0.5rem;
    color: var(--text);
}
.article-body p {
    font-family: var(--font-sans);
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--text-muted);
    margin: 0 0 1.1rem;
}
.article-body p strong { color: var(--text); font-weight: 700; }
.article-body a { color: var(--ink); border-bottom: 2px solid var(--signal); text-decoration: none; font-weight: 600; }
[data-theme="dark"] .article-body a { color: var(--bone); }
.article-body a:hover { background: var(--signal); color: var(--ink); }
.article-list { padding-left: 1.3rem; margin: 0 0 1.4rem; color: var(--text-muted); line-height: 1.6; }
.article-list li { margin-bottom: 0.55rem; }
.article-list li strong { color: var(--text); }
.cost-factors {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0 2rem;
}
.cost-factor {
    border: 3px solid var(--ink);
    box-shadow: 4px 4px 0 var(--ink);
    background: var(--surface, var(--bg));
    padding: 1.2rem 1.3rem;
    position: relative;
}
[data-theme="dark"] .cost-factor { box-shadow: 4px 4px 0 var(--bone); }
.cost-factor-num {
    display: inline-block;
    font-family: 'Impact', 'Arial Black', sans-serif;
    background: var(--signal);
    color: var(--ink);
    border: 2px solid var(--ink);
    padding: 0.15rem 0.5rem;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    margin-bottom: 0.6rem;
}
.cost-factor h3 {
    font-family: 'Impact', 'Arial Black', sans-serif !important;
    text-transform: uppercase;
    font-weight: 400 !important;
    font-size: 1.05rem !important;
    letter-spacing: -0.005em !important;
    margin: 0.3rem 0 0.5rem !important;
    line-height: 1.15 !important;
}
.cost-factor p { font-size: 0.95rem; margin: 0; line-height: 1.5; }
.cost-table-wrap {
    overflow-x: auto;
    margin: 1.5rem 0 2rem;
    border: 3px solid var(--ink);
    box-shadow: 6px 6px 0 var(--ink);
}
[data-theme="dark"] .cost-table-wrap { box-shadow: 6px 6px 0 var(--bone); }
.cost-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface, var(--bg));
    font-family: var(--font-sans);
    font-size: 0.96rem;
}
.cost-table thead {
    background: var(--ink);
    color: var(--bone);
    font-family: 'Impact', 'Arial Black', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.cost-table th, .cost-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border, rgba(0,0,0,0.1));
}
.cost-table tbody tr:last-child td { border-bottom: none; }
.cost-table tbody tr:nth-child(even) { background: rgba(0,0,0,0.025); }
[data-theme="dark"] .cost-table tbody tr:nth-child(even) { background: rgba(255,255,255,0.03); }
.cost-table td:nth-child(2) { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.article-cta {
    display: flex;
    gap: 0.875rem;
    flex-wrap: wrap;
    margin: 2rem 0 1.5rem;
}
.article-divider { border: none; border-top: 2px solid var(--border, rgba(0,0,0,0.1)); margin: 2.5rem 0 1.5rem; }
.article-bio { font-size: 0.95rem; line-height: 1.55; color: var(--text-muted); }
@media (max-width: 600px) {
    .article-body h2 { font-size: 1.55rem !important; }
    .article-body p { font-size: 1rem; }
    .cost-table { font-size: 0.88rem; }
    .cost-table th, .cost-table td { padding: 0.55rem 0.7rem; }
    .article-cta .btn { width: 100%; justify-content: center; }
}

/* ───── Writing band (homepage) ───── */
.writing-band {
    padding: clamp(3.5rem, 7vw, 6rem) 0;
    border-top: 1px solid var(--border, rgba(0,0,0,0.1));
}
.writing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 1.25rem;
    margin-top: 2rem;
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
}
.writing-card {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 1.75rem;
    background: var(--surface, var(--bg));
    border: 3px solid var(--ink);
    box-shadow: 6px 6px 0 var(--ink);
    text-decoration: none;
    color: var(--text);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
[data-theme="dark"] .writing-card { box-shadow: 6px 6px 0 var(--bone); }
.writing-card:hover {
    transform: translate(-3px, -3px);
    box-shadow: 9px 9px 0 var(--ink);
}
[data-theme="dark"] .writing-card:hover { box-shadow: 9px 9px 0 var(--bone); }
.writing-eyebrow {
    display: inline-block;
    background: var(--signal);
    color: var(--ink);
    font-family: 'Impact', 'Arial Black', sans-serif;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.3rem 0.65rem;
    border: 2px solid var(--ink);
    align-self: flex-start;
}
.writing-card h3 {
    font-family: 'Impact', 'Arial Black', sans-serif;
    text-transform: uppercase;
    font-size: clamp(1.25rem, 2vw, 1.6rem);
    line-height: 1.1;
    letter-spacing: -0.015em;
    margin: 0.2rem 0 0;
}
.writing-card p {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.55;
    color: var(--text-muted);
}
.writing-link {
    font-family: 'Impact', 'Arial Black', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.9rem;
    margin-top: 0.4rem;
    border-bottom: 2px solid var(--signal);
    align-self: flex-start;
    padding-bottom: 2px;
}
@media (max-width: 600px) {
    .writing-grid { grid-template-columns: 1fr; }
    .writing-card { padding: 1.25rem; box-shadow: 4px 4px 0 var(--ink); }
}

/* ═══════════════════════════════════════════════════════════════
   BUSINESS DISCOVERY — Typeform-style multi-step form
   ═══════════════════════════════════════════════════════════════ */

.discovery-page { background: var(--bg); }
.discovery-section {
    padding: clamp(2rem, 4vw, 4rem) 0 clamp(4rem, 7vw, 7rem);
    min-height: calc(100vh - 80px);
}
.discovery-section .container {
    max-width: 760px;
    padding: 0 clamp(1.1rem, 3vw, 2rem);
}

/* Hero / step shell */
.discovery-hero {
    text-align: center;
    margin: 2rem 0 3rem;
}
.discovery-h1 {
    font-family: 'Impact', 'Arial Black', sans-serif;
    text-transform: uppercase;
    font-size: clamp(2rem, 5.5vw, 3.6rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0.8rem 0 1rem;
    color: var(--text);
}
.discovery-h1 em, .discovery-h1 .highlight {
    color: var(--ink);
    background: var(--signal);
    font-style: normal;
    display: inline-block;
    padding: 0 0.3em;
    box-shadow: 4px 4px 0 var(--ink);
}
[data-theme="dark"] .discovery-h1 em, [data-theme="dark"] .discovery-h1 .highlight {
    box-shadow: 4px 4px 0 var(--bone);
}
.discovery-lede {
    font-family: var(--font-serif);
    font-size: clamp(1.1rem, 1.7vw, 1.35rem);
    line-height: 1.5;
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto;
}

/* Progress bar */
.discovery-progress {
    margin-bottom: 2.5rem;
}
.discovery-progress-bar {
    height: 8px;
    background: var(--bg);
    border: 2px solid var(--ink);
    box-shadow: 3px 3px 0 var(--ink);
    overflow: hidden;
}
[data-theme="dark"] .discovery-progress-bar { box-shadow: 3px 3px 0 var(--bone); }
.discovery-progress-fill {
    height: 100%;
    background: var(--signal);
    transition: width 0.35s ease;
}
.discovery-progress-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.7rem;
    font-family: 'Impact', 'Arial Black', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.82rem;
    color: var(--text-muted);
}
.discovery-progress-path { color: var(--text); }

/* Step container */
.discovery-step {
    margin-top: 1.5rem;
}
.discovery-question {
    font-family: 'Impact', 'Arial Black', sans-serif;
    text-transform: uppercase;
    font-size: clamp(1.6rem, 3.3vw, 2.4rem);
    line-height: 1.1;
    letter-spacing: -0.015em;
    margin: 0 0 0.75rem;
    color: var(--text);
}
.discovery-help {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text-muted);
    margin: 0 0 1.5rem;
    font-family: var(--font-sans);
}
.discovery-label {
    display: block;
    font-family: 'Impact', 'Arial Black', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.85rem;
    color: var(--text);
    margin: 1.2rem 0 0.4rem;
}

/* Inputs */
.discovery-input-wrap { margin: 1rem 0; }
.discovery-input {
    width: 100%;
    box-sizing: border-box;
    font-family: var(--font-sans);
    font-size: 1.05rem;
    line-height: 1.4;
    padding: 0.85rem 1rem;
    background: var(--bg);
    color: var(--text);
    border: 3px solid var(--ink);
    box-shadow: 4px 4px 0 var(--ink);
    outline: none;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
[data-theme="dark"] .discovery-input { box-shadow: 4px 4px 0 var(--bone); }
.discovery-input:focus {
    transform: translate(-1px, -1px);
    box-shadow: 5px 5px 0 var(--signal);
}
.discovery-textarea {
    min-height: 110px;
    resize: vertical;
    font-family: var(--font-sans);
}

/* Single + multi choice cards */
.discovery-choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.7rem;
    margin-top: 0.5rem;
}
.discovery-choice {
    text-align: left;
    padding: 0.95rem 1.1rem;
    background: var(--bg);
    color: var(--text);
    border: 3px solid var(--ink);
    box-shadow: 3px 3px 0 var(--ink);
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.3;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
[data-theme="dark"] .discovery-choice { box-shadow: 3px 3px 0 var(--bone); }
.discovery-choice:hover {
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 var(--ink);
}
[data-theme="dark"] .discovery-choice:hover { box-shadow: 5px 5px 0 var(--bone); }
.discovery-choice.is-selected {
    background: var(--signal);
    color: var(--ink);
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 var(--ink);
}
.discovery-choice-multi.is-selected::before {
    content: "✓ ";
    font-weight: 900;
}

/* Yes / No */
.discovery-yesno {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1rem;
}
.discovery-yesno-btn {
    padding: 1.4rem 1rem;
    background: var(--bg);
    color: var(--text);
    border: 3px solid var(--ink);
    box-shadow: 5px 5px 0 var(--ink);
    cursor: pointer;
    font-family: 'Impact', 'Arial Black', sans-serif;
    text-transform: uppercase;
    font-size: 1.3rem;
    letter-spacing: -0.01em;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
[data-theme="dark"] .discovery-yesno-btn { box-shadow: 5px 5px 0 var(--bone); }
.discovery-yesno-btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 7px 7px 0 var(--ink);
}
[data-theme="dark"] .discovery-yesno-btn:hover { box-shadow: 7px 7px 0 var(--bone); }
.discovery-yesno-btn.is-selected {
    background: var(--signal);
    color: var(--ink);
}

/* Scale 1-5 */
.discovery-scale { margin-top: 0.8rem; }
.discovery-scale-buttons {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.6rem;
}
.discovery-scale-btn {
    padding: 1.4rem 0.5rem;
    background: var(--bg);
    color: var(--text);
    border: 3px solid var(--ink);
    box-shadow: 4px 4px 0 var(--ink);
    cursor: pointer;
    font-family: 'Impact', 'Arial Black', sans-serif;
    font-size: 1.6rem;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
[data-theme="dark"] .discovery-scale-btn { box-shadow: 4px 4px 0 var(--bone); }
.discovery-scale-btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--ink);
}
[data-theme="dark"] .discovery-scale-btn:hover { box-shadow: 6px 6px 0 var(--bone); }
.discovery-scale-btn.is-selected {
    background: var(--signal);
    color: var(--ink);
}
.discovery-scale-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 0.6rem;
    font-family: 'Impact', 'Arial Black', sans-serif;
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

/* Service selector cards */
.discovery-selector-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}
.discovery-service-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.5rem 1.5rem 1.2rem;
    background: var(--bg);
    color: var(--text);
    border: 3px solid var(--ink);
    box-shadow: 6px 6px 0 var(--ink);
    cursor: pointer;
    text-align: left;
    font-family: var(--font-sans);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
[data-theme="dark"] .discovery-service-card { box-shadow: 6px 6px 0 var(--bone); }
.discovery-service-card:hover {
    transform: translate(-3px, -3px);
    box-shadow: 9px 9px 0 var(--ink);
    background: var(--signal);
    color: var(--ink);
}
[data-theme="dark"] .discovery-service-card:hover { box-shadow: 9px 9px 0 var(--bone); color: var(--ink); }
.discovery-service-card-title {
    font-family: 'Impact', 'Arial Black', sans-serif;
    text-transform: uppercase;
    font-size: 1.7rem;
    letter-spacing: -0.01em;
    line-height: 1;
}
.discovery-service-card-desc {
    font-size: 0.98rem;
    line-height: 1.45;
    color: var(--text-muted);
}
.discovery-service-card:hover .discovery-service-card-desc { color: var(--ink); }
.discovery-service-card-mins {
    font-family: 'Impact', 'Arial Black', sans-serif;
    text-transform: uppercase;
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    color: var(--signal);
    background: var(--ink);
    padding: 0.25rem 0.55rem;
    align-self: flex-start;
    margin-top: 0.3rem;
}
.discovery-service-card:hover .discovery-service-card-mins {
    background: var(--ink);
    color: var(--signal);
}

/* Action row (Back / Next) */
.discovery-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}
.discovery-back, .discovery-skip {
    font-family: 'Impact', 'Arial Black', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.95rem;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.5rem 0;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
}
.discovery-back:hover, .discovery-skip:hover { color: var(--text); }
.discovery-next, .discovery-submit {
    margin-left: auto;
}
.discovery-submit { min-width: 220px; }

/* Error */
.discovery-error {
    background: #fff0f0;
    color: #8b0000;
    border: 3px solid #8b0000;
    padding: 0.75rem 1rem;
    margin: 1rem 0;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    line-height: 1.4;
}
[data-theme="dark"] .discovery-error {
    background: #2a1414;
    color: #ff9595;
    border-color: #ff5555;
}

/* Review */
.discovery-review-list {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 0.4rem;
}
.discovery-review-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5rem 1rem;
    padding: 1rem;
    background: var(--bg);
    border: 2px solid var(--ink);
    box-shadow: 3px 3px 0 var(--ink);
}
[data-theme="dark"] .discovery-review-item { box-shadow: 3px 3px 0 var(--bone); }
.discovery-review-q {
    grid-column: 1;
    font-family: 'Impact', 'Arial Black', sans-serif;
    text-transform: uppercase;
    font-size: 0.95rem;
    letter-spacing: -0.005em;
    line-height: 1.25;
    color: var(--text);
}
.discovery-review-num {
    background: var(--signal);
    color: var(--ink);
    padding: 0.1rem 0.5rem;
    margin-right: 0.5rem;
    border: 2px solid var(--ink);
}
.discovery-review-text { display: inline; }
.discovery-review-a {
    grid-column: 1 / -1;
    font-family: var(--font-sans);
    font-size: 0.98rem;
    line-height: 1.45;
    color: var(--text-muted);
    margin-top: 0.4rem;
    white-space: pre-wrap;
}
.discovery-review-skipped { color: var(--text-muted); opacity: 0.7; }
.discovery-review-edit {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    background: transparent;
    border: 2px solid var(--ink);
    padding: 0.25rem 0.6rem;
    font-family: 'Impact', 'Arial Black', sans-serif;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    cursor: pointer;
    color: var(--text);
}
.discovery-review-edit:hover { background: var(--signal); color: var(--ink); }

/* Thank-you */
.discovery-thanks {
    text-align: center;
    padding: 2rem 0;
}
.discovery-thanks-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    justify-content: center;
    margin-top: 2rem;
}

/* Phone responsive */
@media (max-width: 600px) {
    .discovery-h1 { font-size: clamp(1.8rem, 8vw, 2.2rem) !important; }
    .discovery-question { font-size: clamp(1.4rem, 5.5vw, 1.8rem) !important; }
    .discovery-input { font-size: 1rem; padding: 0.75rem 0.9rem; }
    .discovery-choice-grid { grid-template-columns: 1fr; }
    .discovery-selector-grid { grid-template-columns: 1fr; }
    .discovery-actions { flex-direction: column-reverse; align-items: stretch; }
    .discovery-next, .discovery-submit { width: 100%; margin-left: 0; }
    .discovery-back, .discovery-skip { text-align: center; }
    .discovery-scale-btn { font-size: 1.2rem; padding: 1rem 0.3rem; }
    .discovery-review-item { grid-template-columns: 1fr; }
    .discovery-review-edit { grid-column: 1; grid-row: auto; justify-self: start; }
}

/* Contact page → Discovery CTA */
.contact-discovery-cta {
    margin-top: 1.2rem;
    padding: 0.9rem 1rem;
    background: var(--bg);
    border-left: 4px solid var(--signal);
    font-size: 0.98rem;
    line-height: 1.5;
    color: var(--text-muted);
    font-family: var(--font-sans);
}
.contact-discovery-cta a {
    color: var(--text);
    border-bottom: 2px solid var(--signal);
    text-decoration: none;
}
.contact-discovery-cta a:hover {
    background: var(--signal);
    color: var(--ink);
}

/* ───── Local-intent anchor band (service pages) ─────
   Slim band immediately after the hero that carries the local-keyword
   H2 and service-area mentions. Local SEO weight without disrupting
   the brand-voice H1 above it. */
.local-anchor {
    padding: clamp(2rem, 4vw, 3.5rem) 0;
    border-top: 3px solid var(--ink);
    border-bottom: 3px solid var(--ink);
    background: var(--bg);
}
[data-theme="dark"] .local-anchor {
    border-top-color: var(--bone);
    border-bottom-color: var(--bone);
    background: rgba(255,255,255,0.025);
}
.local-anchor .container {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.8rem;
}
.local-anchor-h2 {
    font-family: 'Impact', 'Arial Black', sans-serif;
    text-transform: uppercase;
    font-size: clamp(1.4rem, 2.8vw, 2rem);
    line-height: 1.1;
    letter-spacing: -0.015em;
    margin: 0;
    color: var(--text);
}
.local-anchor-sub {
    font-family: var(--font-sans);
    font-size: clamp(0.95rem, 1.4vw, 1.05rem);
    line-height: 1.55;
    color: var(--text-muted);
    margin: 0;
    max-width: 70ch;
}
@media (max-width: 600px) {
    .local-anchor { padding: 1.5rem 0 1.7rem; }
    .local-anchor-h2 { font-size: clamp(1.2rem, 5.5vw, 1.6rem) !important; }
    .local-anchor-sub { font-size: 0.95rem; }
}

/* ═══════════════════════════════════════════════════════════════
   PRICING TIER CARDS — bundle + standalone tier pricing
   ═══════════════════════════════════════════════════════════════ */
.pricing-section {
    padding: clamp(3rem, 6vw, 5rem) 0;
}
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-top: 2rem;
    align-items: stretch;
}
.pricing-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px) {
    .pricing-grid, .pricing-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
    .pricing-grid, .pricing-grid-3 { grid-template-columns: 1fr; }
}

.pricing-tier-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--text);
    border: 3px solid var(--ink);
    box-shadow: 8px 8px 0 var(--ink);
    padding: 1.6rem 1.4rem 1.4rem;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
[data-theme="dark"] .pricing-tier-card { box-shadow: 8px 8px 0 var(--bone); }
.pricing-tier-card:hover {
    transform: translate(-3px, -3px);
    box-shadow: 11px 11px 0 var(--ink);
}
[data-theme="dark"] .pricing-tier-card:hover { box-shadow: 11px 11px 0 var(--bone); }

.pricing-tier-popular {
    background: var(--signal);
    color: var(--ink);
}
.pricing-tier-popular .tier-features li::before { color: var(--ink); }
.pricing-tier-popular .tier-price-amount,
.pricing-tier-popular .tier-name { color: var(--ink); }

.pricing-tier-enterprise {
    background: var(--ink);
    color: var(--bone);
}
.pricing-tier-enterprise .tier-name,
.pricing-tier-enterprise .tier-band,
.pricing-tier-enterprise .tier-price-label,
.pricing-tier-enterprise .tier-price-amount,
.pricing-tier-enterprise .tier-features li,
.pricing-tier-enterprise .tier-discount { color: var(--bone); }
.pricing-tier-enterprise .tier-features li::before { color: var(--signal); }

.tier-badge-popular {
    position: absolute;
    top: -14px;
    right: 1rem;
    background: var(--ink);
    color: var(--signal);
    font-family: 'Impact', 'Arial Black', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.75rem;
    padding: 0.3rem 0.6rem;
    border: 2px solid var(--ink);
}

.tier-name {
    font-family: 'Impact', 'Arial Black', sans-serif;
    text-transform: uppercase;
    font-size: clamp(1.5rem, 2vw, 1.85rem);
    letter-spacing: -0.015em;
    line-height: 1;
    color: var(--text);
}
.tier-band {
    display: block;
    margin-top: 0.4rem;
    font-family: 'Impact', 'Arial Black', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.78rem;
    color: var(--text-muted);
}
.pricing-tier-popular .tier-band { color: rgba(0,0,0,0.65); }
.pricing-tier-enterprise .tier-band { color: rgba(243,239,230,0.7); }

.tier-pricing {
    margin: 1.1rem 0 1.2rem;
    border-top: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    padding: 0.8rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.tier-price { display: flex; justify-content: space-between; align-items: baseline; }
.tier-price-label {
    font-family: 'Impact', 'Arial Black', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.78rem;
    color: var(--text-muted);
}
.pricing-tier-popular .tier-price-label { color: rgba(0,0,0,0.65); }
.pricing-tier-enterprise .tier-price-label { color: rgba(243,239,230,0.7); }
.tier-price-amount {
    font-family: 'Impact', 'Arial Black', sans-serif;
    font-size: clamp(1.35rem, 2vw, 1.65rem);
    color: var(--text);
    font-feature-settings: 'tnum';
}
.tier-price-amount small {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 500;
    margin-top: 0.15rem;
    opacity: 0.7;
}

/* Enterprise bespoke pricing variant — single full-width block with a note */
.tier-price-bespoke {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
}
.tier-price-bespoke .tier-price-amount {
    font-size: clamp(1.6rem, 2.4vw, 2rem);
    line-height: 1;
}
.tier-price-note {
    display: block;
    font-family: var(--font-sans) !important;
    font-size: 0.78rem;
    line-height: 1.4;
    font-weight: 400;
    margin-top: 0.4rem;
    opacity: 0.85;
    letter-spacing: 0;
    text-transform: none;
}

/* ═══════════════════════════════════════════════════════════════
   BUNDLE vs SEPARATE — comparison table per tier
   ═══════════════════════════════════════════════════════════════ */
.bundle-compare {
    background: var(--bg);
    padding: clamp(3rem, 6vw, 5rem) 0;
    border-top: 4px solid var(--ink);
    border-bottom: 4px solid var(--ink);
}
[data-theme="dark"] .bundle-compare {
    border-color: var(--bone);
}
.compare-tier {
    margin: 2.5rem 0;
}
.compare-tier:first-of-type {
    margin-top: 2.5rem;
}
.compare-tier-title {
    font-family: 'Impact', 'Arial Black', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: clamp(1.3rem, 2.2vw, 1.7rem);
    margin: 0 0 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 3px solid var(--signal);
    color: var(--text);
}
.compare-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 3px solid var(--ink);
    box-shadow: 6px 6px 0 var(--ink);
    background: var(--bg);
}
[data-theme="dark"] .compare-table-wrap {
    border-color: var(--bone);
    box-shadow: 6px 6px 0 var(--bone);
}
.compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    min-width: 540px;
}
.compare-table th,
.compare-table td {
    padding: 0.7rem 0.9rem;
    text-align: left;
    border-bottom: 1px solid color-mix(in oklab, var(--text) 15%, transparent);
    font-feature-settings: 'tnum';
}
.compare-table th {
    background: var(--ink);
    color: var(--bone);
    font-family: 'Impact', 'Arial Black', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.82rem;
    border-bottom: 3px solid var(--signal);
}
.compare-table th.num,
.compare-table td.num {
    text-align: right;
    white-space: nowrap;
}
.compare-table tbody tr:hover {
    background: color-mix(in oklab, var(--signal) 8%, transparent);
}
.compare-table .compare-total {
    background: color-mix(in oklab, var(--text) 6%, transparent);
    font-weight: 600;
    border-top: 2px solid var(--ink);
}
[data-theme="dark"] .compare-table .compare-total {
    border-top-color: var(--bone);
}
.compare-table .compare-total td {
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
    border-bottom-width: 2px;
}
.compare-table .compare-bundle {
    background: var(--signal);
    color: var(--ink);
}
.compare-table .compare-bundle td {
    color: var(--ink);
    padding: 1rem 0.9rem;
    border-bottom-color: var(--ink);
}
.compare-table .compare-saving {
    background: var(--ink);
    color: var(--signal);
}
.compare-table .compare-saving td {
    color: var(--signal);
    font-family: 'Impact', 'Arial Black', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 1.05rem;
    padding: 0.95rem 0.9rem;
}
.compare-pct {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    opacity: 0.85;
    margin-left: 0.25rem;
}
.compare-footnote {
    margin: 2.5rem auto 0;
    max-width: 820px;
    padding: 1.25rem 1.5rem;
    border-left: 4px solid var(--signal);
    background: color-mix(in oklab, var(--signal) 6%, transparent);
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--text);
}
@media (max-width: 640px) {
    .compare-table { font-size: 0.85rem; }
    .compare-table th,
    .compare-table td { padding: 0.55rem 0.65rem; }
    .compare-table .compare-saving td { font-size: 0.92rem; }
}

/* ═══════════════════════════════════════════════════════════════
   EXCLUSIVITY BAND — one agency per local authority
   ═══════════════════════════════════════════════════════════════ */
.exclusivity-band {
    background: var(--ink);
    color: var(--bone);
    padding: clamp(3rem, 7vw, 6rem) 0;
    position: relative;
}
.exclusivity-band::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 6px;
    background: var(--signal);
}
.exclusivity-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}
@media (max-width: 880px) {
    .exclusivity-grid { grid-template-columns: 1fr; }
}
.exclusivity-main .section-tag {
    color: var(--signal);
    background: transparent;
    border-color: var(--signal);
}
.exclusivity-main h2 {
    color: var(--bone);
    margin: 1rem 0 1.25rem;
}
.exclusivity-main h2 em {
    color: var(--signal);
    font-style: normal;
}
.exclusivity-lede {
    color: var(--bone);
    font-size: clamp(1.05rem, 1.5vw, 1.2rem);
    line-height: 1.5;
    opacity: 0.92;
}
.exclusivity-mech {
    background: color-mix(in oklab, var(--bone) 6%, transparent);
    border: 2px solid var(--signal);
    padding: 1.5rem 1.6rem;
}
.exclusivity-mech h3 {
    color: var(--signal);
    font-family: 'Impact', 'Arial Black', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 1rem;
    margin: 0 0 1rem;
}
.exclusivity-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.exclusivity-list li {
    color: var(--bone);
    font-size: 0.93rem;
    line-height: 1.5;
    padding-left: 1.2rem;
    position: relative;
}
.exclusivity-list li::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: var(--signal);
    font-size: 1rem;
    line-height: 1.4;
}
.exclusivity-list strong { color: var(--signal); }
.exclusivity-check {
    margin: 1.2rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid color-mix(in oklab, var(--bone) 20%, transparent);
    font-size: 0.95rem;
}
.exclusivity-link {
    color: var(--signal);
    text-decoration: none;
    font-family: 'Impact', 'Arial Black', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.92rem;
    border-bottom: 2px solid var(--signal);
    padding-bottom: 0.15rem;
}
.exclusivity-link:hover {
    background: var(--signal);
    color: var(--ink);
}

/* ═══════════════════════════════════════════════════════════════
   ANNUAL GATHERING — community / roadmap / celebration band
   ═══════════════════════════════════════════════════════════════ */
.annual-gathering {
    background: var(--bone);
    color: var(--ink);
    padding: clamp(3rem, 6vw, 5rem) 0;
    border-top: 4px solid var(--ink);
    border-bottom: 4px solid var(--ink);
}
[data-theme="dark"] .annual-gathering {
    border-color: var(--bone);
}
.gathering-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}
@media (max-width: 880px) {
    .gathering-grid { grid-template-columns: 1fr; }
}
.gathering-main .section-tag {
    color: var(--ink);
    background: var(--signal);
    border-color: var(--ink);
}
.gathering-main h2 {
    color: var(--ink);
    margin: 1rem 0 1.25rem;
}
.gathering-main h2 em {
    font-style: normal;
    background: var(--signal);
    padding: 0 0.3em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}
.gathering-lede {
    color: var(--ink);
    font-size: clamp(1.02rem, 1.4vw, 1.15rem);
    line-height: 1.55;
    margin: 0 0 1.1rem;
}
.gathering-cta {
    margin-top: 1.5rem;
}

.gathering-mech {
    background: var(--ink);
    color: var(--bone);
    border: 3px solid var(--ink);
    box-shadow: 8px 8px 0 var(--signal);
    padding: clamp(1.5rem, 2.8vw, 2.25rem);
}
[data-theme="dark"] .gathering-mech {
    border-color: var(--bone);
}
.gathering-mech h3 {
    color: var(--signal);
    font-family: 'Impact', 'Arial Black', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 1.05rem;
    margin: 0 0 1.2rem;
}
.gathering-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}
.gathering-list li {
    color: var(--bone);
    font-size: 0.95rem;
    line-height: 1.55;
    padding-left: 0;
}
.gathering-day {
    display: inline-block;
    background: var(--signal);
    color: var(--ink);
    font-family: 'Impact', 'Arial Black', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.72rem;
    padding: 0.18rem 0.5rem;
    margin-right: 0.45rem;
    vertical-align: middle;
}
.gathering-list strong { color: var(--signal); }
.gathering-foot {
    margin: 1.5rem 0 0;
    padding-top: 1.1rem;
    border-top: 1px solid color-mix(in oklab, var(--bone) 25%, transparent);
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--bone);
    opacity: 0.92;
}

/* ── Live area availability checker ── */
.area-checker {
    margin-top: clamp(2.5rem, 5vw, 4rem);
    padding: clamp(1.75rem, 3vw, 2.5rem);
    background: color-mix(in oklab, var(--bone) 6%, transparent);
    border: 2px solid var(--signal);
}
.area-checker-head .section-tag {
    color: var(--signal);
    background: transparent;
    border-color: var(--signal);
}
.area-checker-head h3 {
    color: var(--bone);
    margin: 0.85rem 0 0.6rem;
    font-size: clamp(1.4rem, 2.4vw, 1.8rem);
}
.area-checker-head p {
    color: var(--bone);
    opacity: 0.9;
    margin: 0 0 1.4rem;
    max-width: 60ch;
}
.area-checker-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: stretch;
}
.area-checker-form select {
    flex: 1 1 280px;
    min-height: 52px;
    padding: 0 1rem;
    background: var(--bone);
    color: var(--ink);
    border: 2px solid var(--bone);
    font-family: var(--font-sans);
    font-size: 1rem;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2316181F' stroke-width='3' stroke-linecap='square' stroke-linejoin='miter'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.6rem;
}
.area-checker-form select:focus {
    outline: 3px solid var(--signal);
    outline-offset: 2px;
}
.area-checker-form optgroup {
    font-family: 'Impact', 'Arial Black', sans-serif;
    color: var(--ink);
    font-weight: normal;
    letter-spacing: 0.04em;
}
.area-checker-form .area-checker-submit {
    flex: 0 0 auto;
}
.area-checker-note {
    font-size: 0.85rem;
    color: var(--bone);
    opacity: 0.7;
    margin-top: 0.85rem;
    line-height: 1.5;
}
.area-checker-link {
    color: var(--signal);
    text-decoration: underline;
    text-decoration-thickness: 1px;
}

/* ── Result panel ── */
.area-checker-result {
    margin-top: 1.5rem;
    padding: 1.5rem;
    border: 2px solid var(--bone);
    background: var(--ink);
    animation: areaResult 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes areaResult {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.area-checker-result.is-available { border-color: var(--signal); }
.area-checker-result.is-taken     { border-color: #ff6b5e; }
.area-checker-result.is-waitlist  { border-color: #ffc857; }
.area-checker-result.is-error     { border-color: #ff6b5e; }
.area-checker-result h4 {
    color: var(--bone);
    margin: 0.4rem 0 0.6rem;
    font-size: clamp(1.15rem, 2vw, 1.4rem);
}
.area-checker-result p {
    color: var(--bone);
    opacity: 0.92;
    margin: 0 0 1rem;
    line-height: 1.5;
}
.result-badge {
    display: inline-block;
    padding: 0.35rem 0.7rem;
    font-family: 'Impact', 'Arial Black', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.85rem;
    line-height: 1.1;
}
.result-badge-ok    { background: var(--signal); color: var(--ink); }
.result-badge-taken { background: #ff6b5e;       color: var(--ink); }
.result-badge-wait  { background: #ffc857;       color: var(--ink); }
.result-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.2rem;
}
.result-actions .btn-secondary {
    background: transparent;
    color: var(--bone);
    border-color: var(--bone);
}
.result-actions .btn-secondary:hover {
    background: var(--bone);
    color: var(--ink);
}

/* ── Waitlist form (inside the taken/waitlist result) ── */
.waitlist-form {
    margin-top: 1rem;
    padding-top: 1.25rem;
    border-top: 1px solid color-mix(in oklab, var(--bone) 25%, transparent);
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.waitlist-form .form-row {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.waitlist-form label {
    font-size: 0.82rem;
    color: var(--bone);
    opacity: 0.9;
    font-family: 'Impact', 'Arial Black', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.waitlist-form .req { color: var(--signal); }
.waitlist-form .opt {
    font-family: var(--font-sans);
    text-transform: none;
    font-size: 0.78rem;
    opacity: 0.65;
    letter-spacing: 0;
}
.waitlist-form input[type="text"],
.waitlist-form input[type="email"],
.waitlist-form textarea {
    padding: 0.6rem 0.8rem;
    background: var(--bone);
    color: var(--ink);
    border: 2px solid var(--bone);
    font-family: var(--font-sans);
    font-size: 0.95rem;
}
.waitlist-form input:focus,
.waitlist-form textarea:focus {
    outline: 2px solid var(--signal);
    outline-offset: 1px;
}
.waitlist-submit {
    align-self: flex-start;
    margin-top: 0.4rem;
}
.waitlist-msg {
    margin: 0.5rem 0 0;
    padding: 0.85rem 1rem;
    font-size: 0.95rem;
    line-height: 1.45;
}
.waitlist-msg.is-success { background: var(--signal); color: var(--ink); }
.waitlist-msg.is-error   { background: #ff6b5e;       color: var(--ink); }
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ═══════════════════════════════════════════════════════════════
   RESERVATION FORM — /reserve-area.html
   ═══════════════════════════════════════════════════════════════ */
.reserve-form-band {
    background: var(--ink);
    color: var(--bone);
    padding: clamp(3rem, 6vw, 5rem) 0;
    border-top: 6px solid var(--signal);
    border-bottom: 6px solid var(--signal);
}
.reserve-form-band .section-tag {
    color: var(--signal);
    background: transparent;
    border-color: var(--signal);
}
.reserve-form-band h2, .reserve-form-band .section-subtitle {
    color: var(--bone);
}
.reserve-form {
    max-width: 720px;
    margin: 0 auto;
    background: color-mix(in oklab, var(--bone) 6%, transparent);
    border: 2px solid var(--signal);
    padding: clamp(1.5rem, 3vw, 2.5rem);
}
.reserve-form .form-row {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1.25rem;
}
.reserve-form .form-row-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 640px) {
    .reserve-form .form-row-cols { grid-template-columns: 1fr; }
}
.reserve-form label {
    font-family: 'Impact', 'Arial Black', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.84rem;
    color: var(--bone);
}
.reserve-form .req { color: var(--signal); }
.reserve-form .opt {
    font-family: var(--font-sans);
    text-transform: none;
    letter-spacing: 0;
    opacity: 0.6;
    font-size: 0.76rem;
}
.reserve-form input[type="text"],
.reserve-form input[type="email"],
.reserve-form input[type="tel"],
.reserve-form select,
.reserve-form textarea {
    background: var(--bone);
    color: var(--ink);
    border: 2px solid var(--bone);
    padding: 0.7rem 0.85rem;
    font-family: var(--font-sans);
    font-size: 0.98rem;
    width: 100%;
    box-sizing: border-box;
}
.reserve-form select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2316181F' stroke-width='3' stroke-linecap='square'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    padding-right: 2.5rem;
    cursor: pointer;
}
.reserve-form input:focus,
.reserve-form select:focus,
.reserve-form textarea:focus {
    outline: 3px solid var(--signal);
    outline-offset: 1px;
}
.reserve-form .form-hint {
    font-size: 0.78rem;
    color: var(--bone);
    opacity: 0.65;
    line-height: 1.45;
    margin-top: 0.2rem;
}
.reserve-form .form-row-consent {
    margin-top: 0.5rem;
    padding: 1rem;
    background: color-mix(in oklab, var(--signal) 8%, transparent);
    border-left: 4px solid var(--signal);
}
.reserve-form .consent-label {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
    font-family: var(--font-sans);
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--bone);
    opacity: 0.95;
}
.reserve-form .consent-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: var(--signal);
}
.reserve-submit {
    margin-top: 1rem;
    width: 100%;
    padding: 1rem 1.5rem;
    font-size: 1rem;
}
.reserve-msg {
    margin: 1.25rem 0 0;
    padding: 0;
    line-height: 1.55;
}
.reserve-msg.is-success { background: transparent; color: var(--bone); padding: 0; }
.reserve-msg.is-error   { background: #ff6b5e; color: var(--ink); padding: 1rem 1.25rem; }

/* ── Multi-area tag picker ── */
.reserve-form .area-picker {
    background: color-mix(in oklab, var(--signal) 4%, transparent);
    border: 2px solid var(--signal);
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.5rem;
}
.area-picker-tags {
    background: var(--bone);
    border: 2px solid var(--bone);
    padding: 0.65rem 0.75rem;
    min-height: 44px;
    margin: 0.2rem 0 0.8rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: flex-start;
}
.area-picker-empty {
    font-family: var(--font-sans);
    color: var(--ink);
    font-size: 0.9rem;
    opacity: 0.6;
    text-transform: none;
    letter-spacing: 0;
    align-self: center;
}
.area-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--signal);
    color: var(--ink);
    border: 2px solid var(--ink);
    font-family: var(--font-sans);
    font-size: 0.88rem;
    font-weight: 600;
    padding: 0.25rem 0.3rem 0.25rem 0.65rem;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: 0;
}
.area-chip-remove {
    background: var(--ink);
    color: var(--signal);
    border: none;
    width: 22px;
    height: 22px;
    font-size: 16px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.area-chip-remove:hover {
    background: #ff6b5e;
    color: var(--bone);
}
.area-picker-controls {
    margin-top: 0.3rem;
}
.area-picker-total {
    margin-top: 0.9rem;
    padding: 0.7rem 1rem;
    background: var(--ink);
    color: var(--bone);
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.area-picker-total-label {
    font-family: 'Impact', 'Arial Black', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.78rem;
    color: var(--signal);
}
.area-picker-total-value {
    font-family: 'Impact', 'Arial Black', sans-serif;
    font-size: 1.4rem;
    color: var(--signal);
}
.area-picker-total-note {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    color: var(--bone);
    opacity: 0.8;
    text-transform: none;
    letter-spacing: 0;
}

/* Success-card list of areas reserved */
.pay-card-areas {
    background: color-mix(in oklab, var(--signal) 14%, transparent);
    border: 2px dashed var(--ink);
    padding: 0.9rem 1.1rem;
    margin-bottom: 1.5rem;
}
.pay-card-areas-label {
    font-family: 'Impact', 'Arial Black', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.78rem;
    color: var(--ink);
    margin-bottom: 0.45rem;
}
.pay-card-areas ul {
    margin: 0;
    padding-left: 1.25rem;
    color: var(--ink);
    font-size: 0.95rem;
    line-height: 1.55;
}

/* Inline payment note above the submit button */
.reserve-form .form-payment-note {
    background: color-mix(in oklab, var(--signal) 10%, transparent);
    border-left: 4px solid var(--signal);
    padding: 1rem 1.25rem;
    margin: 1.25rem 0;
}
.reserve-form .form-payment-note p {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.92rem;
    color: var(--bone);
    line-height: 1.55;
    text-transform: none;
    letter-spacing: 0;
}
.reserve-form .form-payment-note code {
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    background: var(--bone);
    color: var(--ink);
    padding: 0.1rem 0.35rem;
    font-size: 0.88em;
    letter-spacing: 0.04em;
}

/* ── Bank-details success card (rendered after form submit) ── */
.pay-card {
    background: var(--bone);
    color: var(--ink);
    border: 3px solid var(--signal);
    box-shadow: 8px 8px 0 var(--signal);
    padding: clamp(1.5rem, 3vw, 2.25rem);
}
.pay-card-head {
    border-bottom: 2px solid var(--ink);
    padding-bottom: 1.25rem;
    margin-bottom: 1.5rem;
}
.pay-card-tag {
    display: inline-block;
    background: var(--ink);
    color: var(--signal);
    padding: 0.3rem 0.6rem;
    font-family: 'Impact', 'Arial Black', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.78rem;
    margin-bottom: 1rem;
}
.pay-card-head h3 {
    margin: 0 0 0.6rem;
    font-family: 'Impact', 'Arial Black', sans-serif;
    font-size: clamp(1.4rem, 2.6vw, 1.8rem);
    line-height: 1.15;
    color: var(--ink);
}
.pay-card-head p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--ink);
}

.pay-card-reference {
    background: var(--ink);
    color: var(--bone);
    padding: 1.25rem 1.4rem;
    margin-bottom: 1.5rem;
    position: relative;
}
.pay-card-ref-label {
    font-family: var(--font-sans);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
    color: var(--signal);
    margin-bottom: 0.45rem;
}
.pay-card-ref-value {
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: clamp(1.4rem, 3.2vw, 1.9rem);
    letter-spacing: 0.08em;
    color: var(--signal);
    font-weight: 600;
    word-break: break-all;
}
.pay-card-copy {
    margin-top: 0.85rem;
    background: var(--signal);
    color: var(--ink);
    border: 2px solid var(--signal);
    padding: 0.5rem 0.95rem;
    font-family: 'Impact', 'Arial Black', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.82rem;
    cursor: pointer;
}
.pay-card-copy:hover {
    background: var(--bone);
    color: var(--ink);
}

.pay-card-bank-list {
    margin: 0 0 1.5rem;
    padding: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 1.5rem;
    row-gap: 0.7rem;
    background: color-mix(in oklab, var(--ink) 6%, transparent);
    border: 2px solid var(--ink);
    padding: 1.1rem 1.25rem;
}
.pay-card-bank-list dt {
    font-family: 'Impact', 'Arial Black', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.82rem;
    color: var(--ink);
    align-self: center;
}
.pay-card-bank-list dd {
    margin: 0;
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 1rem;
    color: var(--ink);
    word-break: break-word;
    align-self: center;
}

.pay-card-tier {
    background: var(--signal);
    color: var(--ink);
    padding: 0.7rem 1rem;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
    font-family: var(--font-sans);
    text-transform: none;
    letter-spacing: 0;
}

.pay-card-next h4 {
    font-family: 'Impact', 'Arial Black', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.95rem;
    margin: 0 0 0.75rem;
    color: var(--ink);
}
.pay-card-next ol {
    margin: 0 0 1.5rem;
    padding-left: 1.4rem;
    color: var(--ink);
}
.pay-card-next li {
    font-size: 0.95rem;
    line-height: 1.55;
    padding: 0.2rem 0;
}

.pay-card-foot {
    margin: 0;
    padding-top: 1.1rem;
    border-top: 1px solid color-mix(in oklab, var(--ink) 20%, transparent);
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--ink);
    opacity: 0.85;
}
.pay-card-foot a { color: var(--ink); text-decoration: underline; }

@media (max-width: 640px) {
    .pay-card-bank-list {
        grid-template-columns: 1fr;
        row-gap: 0.15rem;
    }
    .pay-card-bank-list dd {
        margin-bottom: 0.55rem;
    }
}

.tier-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex-grow: 1;
}
.tier-features li {
    font-family: var(--font-sans);
    font-size: 0.93rem;
    line-height: 1.4;
    padding-left: 1.3em;
    position: relative;
    color: var(--text-muted);
}
.pricing-tier-popular .tier-features li { color: var(--ink); }
.tier-features li::before {
    content: '◆';
    position: absolute;
    left: 0;
    top: 0.1em;
    color: var(--signal);
    font-size: 0.85em;
}
.tier-discount {
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--text-muted);
    margin: 0 0 1rem;
    padding: 0.6rem 0.7rem;
    border: 2px dashed currentColor;
    border-radius: 0;
}
.tier-cta {
    margin-top: auto;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

.pricing-bundle-note {
    margin: 2rem auto 0;
    max-width: 720px;
    text-align: center;
    font-family: var(--font-sans);
    font-size: 0.98rem;
    line-height: 1.5;
    color: var(--text-muted);
    padding: 1rem 1.2rem;
    border-left: 4px solid var(--signal);
    background: var(--bg);
}
.pricing-bundle-note a {
    color: var(--ink);
    border-bottom: 2px solid var(--signal);
    text-decoration: none;
    font-weight: 600;
}
[data-theme="dark"] .pricing-bundle-note a { color: var(--bone); }

/* ═══ Hierarchy cards (Who delivers your account) ═══ */
.hierarchy-card {
    position: relative;
    padding-top: 1.8rem !important;
}
.hierarchy-tier {
    position: absolute;
    top: -12px;
    left: 1rem;
    background: var(--ink);
    color: var(--signal);
    font-family: 'Impact', 'Arial Black', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.75rem;
    padding: 0.3rem 0.65rem;
    border: 2px solid var(--ink);
}
.hierarchy-note {
    margin: 1.5rem auto 0;
    max-width: 720px;
    text-align: center;
    font-family: var(--font-sans);
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--text-muted);
    font-style: italic;
}

/* Phone responsive — pricing cards stack with full-width pricing */
@media (max-width: 600px) {
    .pricing-tier-card { padding: 1.3rem 1.1rem 1.2rem; box-shadow: 5px 5px 0 var(--ink); }
    [data-theme="dark"] .pricing-tier-card { box-shadow: 5px 5px 0 var(--bone); }
    .tier-name { font-size: 1.5rem !important; }
    .tier-price-amount { font-size: 1.4rem; }
    .tier-features li { font-size: 0.95rem; }
}

/* Nav dropdown group labels (Bundles / Strategy / Delivery) */
.nav-dropdown-group {
    display: block;
    padding: 0.45rem 0.8rem 0.2rem !important;
    font-family: 'Impact', 'Arial Black', sans-serif !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.7rem !important;
    color: var(--signal) !important;
    border-top: 1px solid rgba(243,239,230,0.15);
    margin-top: 0.3rem !important;
    pointer-events: none;
}
.nav-dropdown-group:first-child { border-top: none; margin-top: 0 !important; }

/* ───── Grouped tier features (Web / Telephony / Software / Marketing / IT / Strategy) ───── */
.tier-features-grouped {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin: 0 0 1.2rem;
    flex-grow: 1;
}
.tier-feature-group {
    border-top: 2px solid currentColor;
    padding-top: 0.7rem;
}
.tier-feature-group:first-child { border-top: none; padding-top: 0; }
.tier-feature-group-name {
    font-family: 'Impact', 'Arial Black', sans-serif !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 1.05rem !important;
    margin: 0 0 0.75rem !important;
    line-height: 1.1 !important;
    display: inline-block;
    padding: 0.4rem 0.85rem;
    border-width: 2.5px;
    border-style: solid;
    /* Default (Startup, Structured): bone-bg cards.
       Lime tag with ink text pops against the bone card body. */
    color: var(--ink);
    background: var(--signal);
    border-color: var(--ink);
}
/* Popular card (Growing) has a LIME body — a lime tag would disappear.
   Invert to ink tag with lime text — strong contrast against the lime card. */
.pricing-tier-popular .tier-feature-group-name {
    color: var(--signal);
    background: var(--ink);
    border-color: var(--ink);
}
/* Enterprise (dark-surface) card: same lime-tag-with-ink-text treatment as
   the default — pops against the dark card body. */
.pricing-tier-enterprise .tier-feature-group-name {
    color: var(--ink);
    background: var(--signal);
    border-color: var(--signal);
}
/* Dark theme: keep the same contrast logic. Default cards become darker, so
   the lime tag still pops; popular stays inverted. */
[data-theme="dark"] .tier-feature-group-name {
    color: var(--ink);
    background: var(--signal);
    border-color: var(--bone);
}
[data-theme="dark"] .pricing-tier-popular .tier-feature-group-name {
    color: var(--signal);
    background: var(--ink);
    border-color: var(--signal);
}
.tier-feature-group ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.32rem;
}
.tier-feature-group li {
    font-family: var(--font-sans);
    font-size: 0.86rem;
    line-height: 1.35;
    padding-left: 1.1em;
    position: relative;
    color: var(--text-muted);
}
.tier-feature-group li::before {
    content: '◆';
    position: absolute;
    left: 0;
    top: 0.18em;
    color: var(--signal);
    font-size: 0.7em;
}
.pricing-tier-popular .tier-feature-group li { color: var(--ink); }
.pricing-tier-popular .tier-feature-group li::before { color: var(--ink); }
.pricing-tier-enterprise .tier-feature-group li { color: var(--bone); }
.pricing-tier-enterprise .tier-feature-group li::before { color: var(--signal); }
.pricing-tier-enterprise .tier-feature-group { border-top-color: rgba(243,239,230,0.25); }
.pricing-tier-popular .tier-feature-group { border-top-color: rgba(0,0,0,0.2); }

/* Phone — keep grouped features readable */
@media (max-width: 600px) {
    .tier-feature-group li { font-size: 0.92rem; }
    .tier-feature-group-name { font-size: 1rem !important; padding: 0.4rem 0.75rem; }
}

/* ═══════════════════════════════════════════════════════════════
   MBA ESSENTIALS — book lead-magnet landing
   ═══════════════════════════════════════════════════════════════ */
.mba-book-page { background: var(--bg); }

.mba-hero { padding-bottom: clamp(3rem, 6vw, 5rem); }
.mba-hero-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
}
.mba-hero-main { min-width: 0; }
.mba-hero-bullets {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.mba-hero-bullets li {
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text-muted);
    padding-left: 1.3em;
    position: relative;
}
.mba-hero-bullets li::before {
    content: '◆';
    position: absolute;
    left: 0;
    top: 0.05em;
    color: var(--signal);
}
.mba-hero-bullets strong { color: var(--text); }
.mba-hero-cta { margin-top: 1.8rem; }

.mba-hero-cover {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    perspective: 800px;
}
.mba-hero-cover img {
    width: 100%;
    max-width: 340px;
    height: auto;
    border: 3px solid var(--ink);
    box-shadow: 12px 12px 0 var(--ink);
    transform: rotate(-2deg);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
[data-theme="dark"] .mba-hero-cover img { box-shadow: 12px 12px 0 var(--bone); }
.mba-hero-cover img:hover {
    transform: rotate(0deg) translate(-2px, -2px);
    box-shadow: 14px 14px 0 var(--ink);
}
[data-theme="dark"] .mba-hero-cover img:hover { box-shadow: 14px 14px 0 var(--bone); }
.mba-hero-cover-badge {
    background: var(--ink);
    color: var(--signal);
    font-family: 'Impact', 'Arial Black', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
    padding: 0.35rem 0.7rem;
    border: 2px solid var(--ink);
}

/* TOC grid */
.mba-toc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}
.mba-toc-card {
    border: 3px solid var(--ink);
    box-shadow: 5px 5px 0 var(--ink);
    background: var(--bg);
    padding: 1.2rem 1.3rem;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
[data-theme="dark"] .mba-toc-card { box-shadow: 5px 5px 0 var(--bone); }
.mba-toc-card h3 {
    font-family: 'Impact', 'Arial Black', sans-serif;
    text-transform: uppercase;
    font-size: 1.15rem;
    letter-spacing: -0.005em;
    line-height: 1.15;
    margin: 0;
    color: var(--text);
}
.mba-toc-card p {
    font-family: var(--font-sans);
    font-size: 0.93rem;
    line-height: 1.45;
    color: var(--text-muted);
    margin: 0;
}
.mba-toc-part-name {
    font-family: 'Impact', 'Arial Black', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.72rem;
    color: var(--ink);
    background: var(--signal);
    padding: 0.2rem 0.5rem;
    border: 2px solid var(--ink);
    align-self: flex-start;
}
.mba-toc-bonus { background: var(--signal); color: var(--ink); }
.mba-toc-bonus h3, .mba-toc-bonus p { color: var(--ink); }
.mba-toc-bonus .mba-toc-part-name {
    background: var(--ink);
    color: var(--signal);
    border-color: var(--ink);
}

/* Signup section */
.mba-signup-section {
    background: var(--ink);
    color: var(--bone);
    padding: clamp(3rem, 6vw, 5rem) 0;
}
.mba-signup-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 4vw, 3rem);
    align-items: start;
}
.mba-signup-copy h2 {
    color: var(--bone);
    margin: 0.4rem 0 1rem;
    font-family: 'Impact', 'Arial Black', sans-serif;
    text-transform: uppercase;
    font-size: clamp(1.6rem, 2.6vw, 2.2rem);
    line-height: 1.1;
    letter-spacing: -0.015em;
}
.mba-signup-copy p {
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.55;
    color: rgba(243, 239, 230, 0.85);
    margin: 0 0 1.2rem;
}
.mba-signup-copy .section-tag {
    background: var(--signal);
    color: var(--ink);
    border-color: var(--signal);
}
.mba-signup-bullets {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.mba-signup-bullets li {
    font-family: var(--font-sans);
    font-size: 0.97rem;
    line-height: 1.45;
    color: rgba(243, 239, 230, 0.85);
    padding-left: 1.3em;
    position: relative;
}
.mba-signup-bullets li::before {
    content: '◆';
    position: absolute;
    left: 0;
    color: var(--signal);
}

.mba-signup-form, .mba-signup-thanks {
    background: var(--bg);
    color: var(--text);
    border: 3px solid var(--bone);
    box-shadow: 8px 8px 0 var(--signal);
    padding: 1.8rem;
}
.mba-signup-form .discovery-label { color: var(--text); }
.mba-signup-form .discovery-input {
    box-shadow: 3px 3px 0 var(--ink);
    border-color: var(--ink);
    background: var(--bg);
    color: var(--text);
}
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
.mba-signup-submit {
    margin-top: 1rem;
    width: 100%;
    text-align: center;
    justify-content: center;
}
.mba-signup-fineprint {
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--text-muted);
    margin: 0.8rem 0 0;
    font-family: var(--font-sans);
}
.mba-signup-fineprint a {
    color: var(--ink);
    border-bottom: 2px solid var(--signal);
    text-decoration: none;
    font-weight: 600;
}
[data-theme="dark"] .mba-signup-fineprint a { color: var(--bone); }

.mba-signup-thanks { text-align: left; }
.mba-signup-thanks h2 {
    color: var(--text);
    margin: 0.5rem 0 0.8rem;
    font-family: 'Impact', 'Arial Black', sans-serif;
    text-transform: uppercase;
    font-size: clamp(1.4rem, 2.4vw, 2rem);
}
.mba-download-btn {
    display: inline-block;
    margin: 1rem 0;
    text-decoration: none;
}

/* Phone */
@media (max-width: 800px) {
    .mba-hero-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: left;
    }
    .mba-hero-cover { order: -1; }
    .mba-hero-cover img {
        max-width: 240px;
        box-shadow: 8px 8px 0 var(--ink);
    }
    [data-theme="dark"] .mba-hero-cover img { box-shadow: 8px 8px 0 var(--bone); }
    .mba-signup-wrap { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .mba-signup-form, .mba-signup-thanks {
        padding: 1.3rem 1.1rem;
        box-shadow: 5px 5px 0 var(--signal);
    }
    .mba-toc-card { box-shadow: 3px 3px 0 var(--ink); }
    [data-theme="dark"] .mba-toc-card { box-shadow: 3px 3px 0 var(--bone); }
}

/* MBA hero CTA pair + Amazon band */
.mba-hero-ctas {
    display: flex;
    gap: 0.85rem;
    margin-top: 1.6rem;
    flex-wrap: wrap;
}
.mba-amazon-band {
    background: var(--bg);
    border-top: 3px solid var(--ink);
}
[data-theme="dark"] .mba-amazon-band { border-top-color: var(--bone); }
@media (max-width: 600px) {
    .mba-hero-ctas .btn { width: 100%; justify-content: center; text-align: center; }
}

/* ═══════════════════════════════════════════════════════════════
   ICON SYSTEM — Lucide-based SVG sprite at /assets/icons.svg
   ═══════════════════════════════════════════════════════════════ */
.icon {
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    vertical-align: -0.18em;
    fill: none;
    stroke: currentColor;
    flex-shrink: 0;
}
.icon-sm { width: 1em; height: 1em; vertical-align: -0.15em; }
.icon-lg { width: 1.4em; height: 1.4em; vertical-align: -0.25em; }

/* Service icon block — for replacing emoji on .service-card */
.service-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border: 3px solid var(--ink);
    background: var(--signal);
    color: var(--ink);
    box-shadow: 4px 4px 0 var(--ink);
    margin-bottom: 1rem;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
[data-theme="dark"] .service-icon { box-shadow: 4px 4px 0 var(--bone); }
.service-icon .icon {
    width: 28px;
    height: 28px;
    stroke-width: 2;
    vertical-align: 0;
}
.service-card:hover .service-icon {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--ink);
}
[data-theme="dark"] .service-card:hover .service-icon { box-shadow: 6px 6px 0 var(--bone); }

/* Caret on Services dropdown */
.icon-caret {
    width: 0.85em;
    height: 0.85em;
    transition: transform 0.22s ease;
    vertical-align: -0.12em;
    margin-left: 0.2em;
}
.nav-mega-host:hover .icon-caret,
.nav-mega-host:focus-within .icon-caret { transform: rotate(180deg); }

/* ═══════════════════════════════════════════════════════════════
   MEGA-MENU (desktop) — wide multi-column panel
   ═══════════════════════════════════════════════════════════════ */
.nav-mega {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: min(96vw, 1240px);
    margin-top: 0.6rem;
    background: var(--ink);
    color: var(--bone);
    border: 3px solid var(--ink);
    box-shadow: 12px 12px 0 rgba(0,0,0,0.45);
    z-index: 1100;
    padding: 1.6rem 1.6rem 0;
}
.nav-mega::before {
    content: '';
    position: absolute;
    inset: -16px 0 0;
    height: 16px;
}
.nav-mega-host:hover > .nav-mega,
.nav-mega-host:focus-within > .nav-mega { display: block; }

.nav-mega-inner {
    display: grid;
    grid-template-columns: 0.7fr 0.9fr 1.5fr 1.2fr 1fr;
    gap: 1.5rem;
}
.nav-mega-col { display: flex; flex-direction: column; gap: 0.5rem; }
.nav-mega-heading {
    font-family: 'Impact', 'Arial Black', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
    color: var(--signal);
    margin: 0 0 0.4rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--signal);
}
.nav-mega-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.nav-mega-item {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 0.7rem;
    align-items: start;
    padding: 0.55rem 0.6rem;
    border: 2px solid transparent;
    text-decoration: none;
    color: var(--bone);
    transition: background 0.14s ease, border-color 0.14s ease, transform 0.14s ease;
}
.nav-mega-item:hover,
.nav-mega-item:focus-visible {
    background: rgba(214, 242, 94, 0.08);
    border-color: var(--signal);
    transform: translateX(2px);
}
.nav-mega-icon {
    width: 26px;
    height: 26px;
    stroke-width: 2;
    color: var(--signal);
    margin-top: 0.1rem;
}
.nav-mega-text { display: flex; flex-direction: column; gap: 0.1rem; }
.nav-mega-name {
    font-family: 'Impact', 'Arial Black', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.005em;
    font-size: 0.92rem;
    line-height: 1.15;
    color: var(--bone);
}
.nav-mega-desc {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    line-height: 1.35;
    color: rgba(243, 239, 230, 0.62);
}

.nav-mega-foot {
    margin-top: 1.2rem;
    padding: 0.9rem 0;
    border-top: 2px solid rgba(243, 239, 230, 0.18);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.nav-mega-all, .nav-mega-discovery {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: 'Impact', 'Arial Black', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.85rem;
    color: var(--signal);
    text-decoration: none;
    padding: 0.55rem 0.85rem;
    border: 2px solid var(--signal);
}
.nav-mega-all:hover, .nav-mega-discovery:hover {
    background: var(--signal);
    color: var(--ink);
}

/* Hide the old dropdown list on desktop — mega menu replaces it */
@media (min-width: 1024px) {
    .nav-mega-host > .nav-dropdown-menu { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE DRAWER (< 1024px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
    .nav-mega { display: none !important; }
    .menu-toggle {
        display: inline-flex; align-items: center; justify-content: center;
        gap: 0; padding: 0.4rem; background: transparent; border: 2px solid var(--ink);
        position: relative; z-index: 1100; /* stays tappable above the open drawer */
    }
    .menu-toggle .icon { width: 22px; height: 22px; stroke-width: 2.5; }
    .menu-toggle .icon-close { display: none; }
    body.nav-open .menu-toggle .icon-menu { display: none; }
    body.nav-open .menu-toggle .icon-close { display: inline-block; }
    /* Lock the page behind the drawer so iOS scrolls the DRAWER, not the body */
    body.nav-open { overflow: hidden; }

    /* nav has z-index:1000 + position:sticky → it's a stacking context.
       The scrim (::before, z-index 1080) would otherwise paint ABOVE the
       whole nav subtree, swallowing every tap on the drawer. Lift nav
       above the scrim while open so the drawer + toggle stay tappable. */
    body.nav-open nav { z-index: 1085; }

    .nav-links {
        display: flex !important;
        position: fixed;
        top: 0; right: 0; bottom: 0;
        width: min(88vw, 400px);
        height: 100%;
        max-height: 100dvh;
        background: var(--ink);
        color: var(--bone);
        flex-direction: column;
        align-items: stretch;
        padding: 4.5rem 1.1rem 2rem;
        gap: 0.15rem;
        transform: translateX(110%);
        transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch; /* momentum scroll on iOS */
        overscroll-behavior: contain;      /* don't bleed scroll to the page */
        z-index: 1090;
        box-shadow: -12px 0 24px rgba(0,0,0,0.4);
    }
    body.nav-open .nav-links { transform: translateX(0); }
    body.nav-open::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.45);
        z-index: 1080;
        animation: navScrim 0.3s ease both;
    }
    @keyframes navScrim { from { opacity: 0; } to { opacity: 1; } }

    /* Standalone top-level links (Work / Projects / About / Free Book / Discovery) */
    .nav-links > li > a,
    .nav-links > li > .nav-svc-link {
        color: var(--bone);
        padding: 0.85rem 0.5rem;
        border-bottom: 1px solid rgba(243,239,230,0.12);
        display: flex;
        align-items: center;
        gap: 0.6rem;
        font-family: 'Impact', 'Arial Black', sans-serif;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        font-size: 1.02rem;
    }
    .nav-links .nav-cta {
        margin-top: 0.6rem;
        justify-content: center;
        background: var(--signal) !important;
        color: var(--ink) !important;
        border: 2px solid var(--signal) !important;
        text-align: center;
    }
    .nav-links > li > a .icon { color: var(--signal); }

    /* ── Services: top-level accordion toggle ── */
    .nav-svc-link {
        cursor: pointer;
        justify-content: space-between;
    }
    .nav-svc-link .icon-caret {
        margin-left: auto;
        color: var(--signal);
        transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .nav-dropdown.is-open > .nav-svc-link .icon-caret { transform: rotate(180deg); }

    .nav-acc {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 0.34s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .nav-dropdown.is-open > .nav-acc { grid-template-rows: 1fr; }
    .nav-acc-inner {
        overflow: hidden;
        min-height: 0;
    }

    /* ── Category sub-accordions (Bundles / Strategy / Marketing / Sales / Eng) ── */
    .nav-cat { border-bottom: 1px solid rgba(243,239,230,0.10); }
    .nav-cat-head {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 0.55rem;
        padding: 0.7rem 0.4rem 0.7rem 1.2rem;
        background: transparent;
        border: none;
        color: rgba(243,239,230,0.85);
        cursor: pointer;
        font-family: 'Impact', 'Arial Black', sans-serif;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        font-size: 0.82rem;
        position: relative;
    }
    .nav-cat-head::before {
        content: '';
        position: absolute;
        left: 0; top: 50%;
        width: 3px; height: 0;
        background: var(--signal);
        transform: translateY(-50%);
        transition: height 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .nav-cat.is-open .nav-cat-head { color: var(--signal); }
    .nav-cat.is-open .nav-cat-head::before { height: 70%; }
    .nav-cat-chevron {
        width: 0.85em; height: 0.85em;
        color: var(--signal);
        transform: rotate(-90deg); /* points right when collapsed */
        transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .nav-cat.is-open .nav-cat-chevron { transform: rotate(0deg); }
    .nav-cat-name { flex: 1; text-align: left; }
    .nav-cat-count {
        font-family: var(--font-mono, 'IBM Plex Mono', monospace);
        font-size: 0.7rem;
        letter-spacing: 0;
        color: var(--ink);
        background: var(--signal);
        border: 1.5px solid var(--signal);
        min-width: 1.5em;
        text-align: center;
        padding: 0.05rem 0.35rem;
        line-height: 1.3;
    }

    .nav-cat-panel {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 0.34s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .nav-cat.is-open .nav-cat-panel { grid-template-rows: 1fr; }
    .nav-cat-panel-inner { overflow: hidden; min-height: 0; }

    .nav-cat-link {
        display: flex;
        align-items: center;
        gap: 0.55rem;
        padding: 0.5rem 0.4rem 0.5rem 1.9rem;
        color: rgba(243,239,230,0.82) !important;
        font-family: var(--font-sans) !important;
        font-size: 0.92rem !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        text-decoration: none;
        border: none !important;
    }
    .nav-cat-link .icon { color: var(--signal); width: 16px; height: 16px; }
    .nav-cat-link:active { background: rgba(214,242,94,0.12); }
    /* Robotic stagger: each link slides in when its section opens */
    .nav-cat.is-open .nav-cat-link {
        animation: navItemIn 0.34s cubic-bezier(0.16, 1, 0.3, 1) both;
        animation-delay: calc(var(--i, 0) * 35ms);
    }
    @keyframes navItemIn {
        from { opacity: 0; transform: translateX(-10px); }
        to   { opacity: 1; transform: translateX(0); }
    }

    .nav-acc-all {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.75rem 0.4rem 0.4rem 1.2rem;
        margin-top: 0.3rem;
        color: var(--signal) !important;
        font-family: 'Impact', 'Arial Black', sans-serif;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-size: 0.8rem;
        text-decoration: none;
    }
    .nav-acc-all .icon { color: var(--signal); }

    /* Respect reduced-motion preference */
    @media (prefers-reduced-motion: reduce) {
        .nav-acc, .nav-cat-panel { transition-duration: 0.01ms; }
        .nav-cat.is-open .nav-cat-link { animation: none; }
        .nav-svc-link .icon-caret, .nav-cat-chevron { transition: none; }
    }
}

/* Desktop: hide the mobile accordion entirely */
@media (min-width: 1024px) {
    .nav-acc { display: none !important; }
}

/* Desktop: hide hamburger, keep horizontal nav */
@media (min-width: 1024px) {
    .menu-toggle { display: none; }
    .nav-links { gap: 0.4rem; }
    .nav-book { display: inline-flex; align-items: center; gap: 0.35rem; }
    .nav-book .icon { color: var(--signal); }
}

/* Nav book link — book icon next to "Free Book" */
.nav-book .icon { color: var(--signal); margin-right: 0.1rem; }

/* About page value-icon — mirror service-icon brutalist treatment */
.value-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: 3px solid var(--ink);
    background: var(--signal);
    color: var(--ink);
    box-shadow: 4px 4px 0 var(--ink);
    margin-bottom: 1rem;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
[data-theme="dark"] .value-icon { box-shadow: 4px 4px 0 var(--bone); }
.value-icon .icon { width: 26px; height: 26px; stroke-width: 2; vertical-align: 0; }
.value-card:hover .value-icon { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink); }
[data-theme="dark"] .value-card:hover .value-icon { box-shadow: 6px 6px 0 var(--bone); }

/* ───────────────────────────────────────────
   SERVICE PAGE PHOTO BAND (Pexels imagery)
   ─────────────────────────────────────────── */
.service-photo { padding: 2.5rem 0 0.5rem; }
.service-figure { margin: 0; border: 3px solid var(--ink); box-shadow: 10px 10px 0 var(--signal); background: var(--bone); }
[data-theme="dark"] .service-figure { border-color: var(--bone); box-shadow: 10px 10px 0 var(--plum-soft); }
.service-figure img { display: block; width: 100%; height: auto; max-height: 420px; object-fit: cover; }
.service-figure figcaption { padding: 0.7rem 1rem; font-size: 0.85rem; color: var(--ash); border-top: 3px solid var(--ink); }
[data-theme="dark"] .service-figure figcaption { border-top-color: var(--bone); }
@media (max-width: 720px) { .service-figure img { max-height: 300px; } .service-figure { box-shadow: 6px 6px 0 var(--signal); } }