/* ============================================
   PEGVIX Technologies — site stylesheet
   Tokens live in tokens.css, which must load first.
   ============================================ */

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg-dark);
    color: var(--text-white);
    line-height: 1.6;
    overflow-x: hidden;
}

/* ============================================
   Navigation
   ============================================ */

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 1rem 2rem;
    transition: all 0.3s ease;
    background: transparent;
}

.navbar.scrolled {
    background: rgba(3, 16, 19, 0.95);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    padding: 0.75rem 2rem;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
}

/* .nav-logo-icon removed in P6 — it styled the placeholder "P" tile that the
   horse emblem replaced in P3. Flagged by the unused-class check. */

.nav-logo-text {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--text-white);
    letter-spacing: -0.5px;
}

.nav-links {
    display: flex;
    gap: 2rem;
    list-style: none;
    align-items: center;
}

.nav-links a {
    color: var(--text-light);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.3s ease;
}

.nav-links a:hover {
    color: var(--primary);
}

.nav-cta {
    background: var(--gradient-cta);
    color: white !important;
    padding: 0.6rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.nav-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--glow);
}

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

.mobile-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--text-white);
    margin: 6px 0;
    transition: all 0.3s ease;
}

/* ============================================
   Hero Section
   ============================================ */

.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 5rem 2rem 4rem;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 30%, rgba(234, 71, 67, 0.08) 0%, transparent 60%),
                radial-gradient(ellipse at 80% 80%, rgba(234, 71, 67, 0.04) 0%, transparent 50%);
}

.hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(234, 71, 67, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(234, 71, 67, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 1120px;
    width: 100%;
}

/* The headline column stays narrow for readability even though the
   Build Box below it runs the full 1120px. */
.hero-copy {
    max-width: 820px;
    margin: 0 auto;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(234, 71, 67, 0.1);
    border: 1px solid var(--border);
    padding: 0.5rem 1.25rem;
    border-radius: 50px;
    font-size: 0.85rem;
    color: var(--primary-light);
    margin-bottom: 2rem;
    font-weight: 500;
}

.hero-badge-dot {
    width: 8px;
    height: 8px;
    background: var(--primary);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.5); }
}

.hero-title {
    font-family: 'Space Grotesk', sans-serif;
    /* capped at 3.9rem, not 4.5rem: the Build Box is the thing that has
       to be in the fold, and every rem here pushes it down */
    font-size: clamp(2.25rem, 5.2vw, 3.9rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.25rem;
    letter-spacing: -1.5px;
}

.hero-title span {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: var(--text-light);
    max-width: 650px;
    margin: 0 auto 2rem;
    line-height: 1.7;
}

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

.btn-primary {
    /* --gradient-cta, not --gradient-primary: white text needs 4.5:1 at this
       size and the brand red only reaches 3.83:1. See tokens.css. */
    background: var(--gradient-cta);
    color: white;
    padding: 1rem 2.5rem;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px var(--glow);
}

.btn-secondary {
    background: transparent;
    color: var(--text-white);
    padding: 1rem 2.5rem;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-secondary:hover {
    border-color: var(--primary);
    background: rgba(234, 71, 67, 0.05);
    transform: translateY(-3px);
}

/* ============================================
   About Section
   ============================================ */

.section {
    padding: 6rem 2rem;
    position: relative;
}

.section-container {
    max-width: 1200px;
    margin: 0 auto;
}

.section-header {
    text-align: center;
    margin-bottom: 4rem;
}

.section-tag {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1rem;
}

.section-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    letter-spacing: -1px;
    margin-bottom: 1rem;
}

.section-desc {
    font-size: 1.1rem;
    color: var(--text-light);
    max-width: 600px;
    margin: 0 auto;
}

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

.about-content h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    letter-spacing: -0.5px;
}

.about-content p {
    color: var(--text-light);
    margin-bottom: 1.5rem;
    line-height: 1.8;
}

.about-highlights {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 2rem;
}

.highlight-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--bg-card);
    border-radius: 10px;
    border: 1px solid var(--border);
}

.highlight-icon {
    width: 36px;
    height: 36px;
    background: rgba(234, 71, 67, 0.1);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.highlight-text {
    font-size: 0.85rem;
    font-weight: 500;
}

.about-visual {
    position: relative;
}

.about-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 3rem;
    position: relative;
    overflow: hidden;
}

.about-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-primary);
}

.about-card-icon {
    width: 64px;
    height: 64px;
    background: rgba(234, 71, 67, 0.1);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.about-card h4 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
}

.about-card p {
    color: var(--text-light);
    font-size: 0.95rem;
    line-height: 1.7;
}

/* ============================================
   Product Section (Kridaxa)
   ============================================ */

.product-section {
    background: var(--gradient-dark);
}

.product-showcase {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 3rem;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-glow);
}

.product-showcase::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(234, 71, 67, 0.08) 0%, transparent 70%);
    border-radius: 50%;
}

.product-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
    position: relative;
    z-index: 2;
}

.product-logo {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
}

.product-logo img {
    width: 100%;
    height: 100%;
}

.product-name {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -1px;
}

.product-tagline {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.product-description {
    position: relative;
    z-index: 2;
    color: var(--text-light);
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 2.5rem;
    max-width: 700px;
}

.product-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    position: relative;
    z-index: 2;
}

.feature-card {
    background: rgba(3, 16, 19, 0.6);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 2rem;
    transition: all 0.3s ease;
}

.feature-card:hover {
    border-color: rgba(234, 71, 67, 0.3);
    transform: translateY(-4px);
    box-shadow: var(--shadow-glow);
}

.feature-icon {
    width: 48px;
    height: 48px;
    background: rgba(234, 71, 67, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    font-size: 1.5rem;
}

.feature-card h4 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.feature-card p {
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.6;
}

/* ============================================
   Services Section
   ============================================ */

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

.service-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 2.5rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0;
    background: var(--gradient-primary);
    transition: height 0.3s ease;
    opacity: 0.1;
}

.service-card:hover {
    border-color: rgba(234, 71, 67, 0.3);
    transform: translateY(-5px);
    box-shadow: var(--shadow-card);
}

.service-card:hover::before {
    height: 100%;
}

.service-icon {
    width: 56px;
    height: 56px;
    background: rgba(234, 71, 67, 0.1);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    position: relative;
    z-index: 2;
}

.service-card h4 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.2rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
    position: relative;
    z-index: 2;
}

.service-card p {
    color: var(--text-light);
    font-size: 0.9rem;
    line-height: 1.7;
    position: relative;
    z-index: 2;
}

/* ============================================
   Tech Stack Section
   ============================================ */

.tech-section {
    background: var(--bg-darker);
}

.tech-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.tech-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
}

.tech-item:hover {
    border-color: rgba(234, 71, 67, 0.3);
    transform: translateY(-3px);
}

/* .tech-icon removed in P6 — it sized the emoji glyphs dropped in P3. */

.tech-name {
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
}

.tech-desc {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ============================================
   CTA Section
   ============================================ */

.cta-section {
    padding: 8rem 2rem;
    position: relative;
    overflow: hidden;
}

.cta-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(234, 71, 67, 0.1) 0%, transparent 60%);
}

.cta-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.cta-content h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    margin-bottom: 1rem;
    letter-spacing: -1px;
}

.cta-content p {
    color: var(--text-light);
    font-size: 1.1rem;
    margin-bottom: 2.5rem;
}

/* ============================================
   Footer
   ============================================ */

.footer {
    background: var(--bg-darker);
    border-top: 1px solid var(--border);
    padding: 4rem 2rem 2rem;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
}

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

.footer-brand p {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.7;
    margin-top: 1rem;
    max-width: 300px;
}

.footer-col h4 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1.25rem;
    color: var(--text-white);
}

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

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

.footer-col ul li a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.footer-col ul li a:hover {
    color: var(--primary);
}

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

.footer-bottom p {
    color: var(--text-muted);
    font-size: 0.85rem;
}

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

.footer-social a {
    width: 40px;
    height: 40px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 1.1rem;
}

.footer-social a:hover {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-2px);
}

/* ============================================
   Animations
   ============================================ */

.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 1024px) {
    .product-features {
        grid-template-columns: repeat(2, 1fr);
    }

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .tech-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
}

@media (max-width: 768px) {
    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(3, 16, 19, 0.98);
        backdrop-filter: blur(20px);
        flex-direction: column;
        padding: 2rem;
        gap: 1.5rem;
        border-bottom: 1px solid var(--border);
    }

    .nav-links.active {
        display: flex;
    }

    .mobile-toggle {
        display: block;
    }

    .about-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .about-highlights {
        grid-template-columns: 1fr;
    }

    .product-features {
        grid-template-columns: 1fr;
    }

    .services-grid {
        grid-template-columns: 1fr;
    }

    .tech-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }
}

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

    .product-showcase {
        padding: 1.5rem;
    }
}

/* ============================================
   THE BUILD BOX — signature hero interaction

   Drag a requirement chip into the zone. Each one stacks as a 3D
   layer and builds its artefact in the output panel. Three chips
   resolve the stack into KRIDAXA.

   Contract with the JS:
     .buildbox.js-off      no-JS / pre-hydration state. Every
                           .bb-layer and .bb-art is visible, so the
                           box reads as a static diagram. JS removes
                           this class and clears to the empty state.
     .bb-layer.is-on       layer is in the stack; --i is its depth
     .bb-art.is-on         artefact is built
     .bb-zone.is-over      a drag is hovering the dropzone
     .bb-zone.has-items    at least one layer placed (hides the hint)
     .buildbox.is-active   something placed (reveals Reset)
     .buildbox.is-resolved >= 3 placed (reveals crest + payoff)
   ============================================ */

.buildbox {
    position: relative;
    z-index: 2;
    max-width: 1120px;
    margin: 2.5rem auto 0;
    text-align: left;
    background: linear-gradient(180deg, rgba(10, 31, 36, 0.92) 0%, rgba(3, 16, 19, 0.92) 100%);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 1.25rem;
    box-shadow: var(--shadow-card), var(--shadow-glow);
    backdrop-filter: blur(10px);
}

.bb-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.25rem 0.5rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.bb-eyebrow {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.bb-reset {
    font: inherit;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-muted);
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 0.35rem 0.85rem;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.buildbox.is-active .bb-reset {
    opacity: 1;
    pointer-events: auto;
}

.bb-reset:hover {
    color: var(--text-white);
    border-color: var(--primary);
}

.bb-stage {
    display: grid;
    grid-template-columns: 215px 1fr 290px;
    gap: 1.25rem;
    padding: 1.25rem 0.5rem 0.5rem;
}

/* Grid children default to min-width:auto, so a wide min-content inside
   any column can push the whole page sideways. Pre-empted, not a fix for
   an observed bug — the layout measures clean at 390px. */
.bb-stage > * {
    min-width: 0;
}

/* --- the tray of requirement chips --- */

.bb-tray {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.bb-tray-label {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.15rem;
}

.bb-chip {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 500;
    text-align: left;
    color: var(--text-light);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 0.6rem 0.75rem;
    cursor: grab;
    transition: transform 0.25s ease, background 0.25s ease,
                border-color 0.25s ease, color 0.25s ease, opacity 0.3s ease;
}

.bb-chip:hover {
    transform: translateX(4px);
    color: var(--text-white);
    background: rgba(234, 71, 67, 0.08);
    border-color: rgba(234, 71, 67, 0.45);
}

.bb-chip:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.bb-chip[aria-pressed="true"] {
    opacity: 0.28;
    pointer-events: none;
    transform: none;
}

.bb-chip.is-dragging {
    opacity: 0.3;
}

.bb-chip-dot {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 10px var(--glow);
}

.bb-chip.is-dragging {
    cursor: grabbing;
}

/* The clone that follows the pointer. Positioned by transform off
   --gx/--gy, not left/top, so dragging never repositions a box. */
.bb-ghost {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2000;
    width: 215px;
    margin: 0;
    pointer-events: none;
    opacity: 1;
    color: var(--text-white);
    background: rgba(234, 71, 67, 0.16);
    border-color: rgba(234, 71, 67, 0.6);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
    transform: translate(calc(var(--gx, 0px) - 50%), calc(var(--gy, 0px) - 50%)) scale(1.04) rotate(-2deg);
    transition: none;
}

/* --- the dropzone and its 3D stack --- */

.bb-zone {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 300px;
    padding: 1rem;
    border: 1.5px dashed rgba(234, 71, 67, 0.28);
    border-radius: 18px;
    perspective: 1000px;
    background: radial-gradient(ellipse at 50% 120%, rgba(234, 71, 67, 0.07) 0%, transparent 70%);
    transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.bb-zone.is-over {
    border-color: var(--primary);
    border-style: solid;
    background: rgba(234, 71, 67, 0.1);
    box-shadow: inset 0 0 60px rgba(234, 71, 67, 0.14);
}

/* Explicit top + translate, not `inset: auto`: an abspos child of a
   grid container takes its static position from the padding-box
   origin, so `auto` would pin the hint to the top, not the centre. */
.bb-hint {
    position: absolute;
    top: 50%;
    left: 1rem;
    right: 1rem;
    transform: translateY(-50%);
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-muted);
    transition: opacity 0.35s ease;
}

.bb-hint strong {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-light);
    margin-bottom: 0.3rem;
}

.bb-zone.has-items .bb-hint {
    opacity: 0;
}

/* width + max-width rather than min(100%, 320px) — equivalent here, and
   max-width can never contribute a min-content floor to the grid. */
.bb-build {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    max-width: 320px;
}

/* 215px holds all six layers: the deepest sits at --i:5, i.e. 170px
   of offset plus the layer's own height. */
.bb-stack {
    position: relative;
    width: 100%;
    height: 215px;
    transform: rotateX(10deg);
    transform-style: preserve-3d;
}

.bb-layer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem 0.9rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-white);
    background: linear-gradient(135deg, rgba(234, 71, 67, 0.18) 0%, rgba(10, 31, 36, 0.96) 60%);
    border: 1px solid rgba(234, 71, 67, 0.32);
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    will-change: transform, opacity;
    transform: translate3d(0, -70px, 0) rotateX(-22deg);
    transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.bb-layer.is-on,
.buildbox.js-off .bb-layer {
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, calc(var(--i, 0) * -34px), calc(var(--i, 0) * 14px));
}

.bb-layer-num {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.7rem;
    color: var(--primary-light);
}

/* The KRIDAXA crest that used to appear here is gone. It made our product look
   like the OUTPUT of the visitor's requirement, which is a non-sequitur: you
   assemble your own needs and someone else's logo appears. Our proof moved to a
   footnote under the box. What labels the stack now is the visitor's own build. */
.bb-stack-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    opacity: 0;
    transition: opacity var(--fast) ease;
}

.buildbox.is-active .bb-stack-label {
    opacity: 1;
}

/* --- the output panel --- */

/* Hidden artefacts use `visibility`, not `display:none`, so this panel
   reserves its full height from the start. Deliberate: the box must not
   reflow — and shove the page around — each time one appears. The
   spacing below is tight for exactly that reason. */
.bb-output {
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 18px;
    background: rgba(3, 16, 19, 0.6);
}

.bb-output-label {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.8rem;
}

.bb-art {
    margin-bottom: 0.6rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.bb-art.is-on,
.buildbox.js-off .bb-art {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.bb-art-title {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 0.3rem;
}

.bb-art:last-child {
    margin-bottom: 0;
}

/* artefact primitives, reused across the six chips */

.bb-cells {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}

.bb-cell {
    height: 11px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.06);
}

.bb-cell.on {
    background: var(--primary);
    box-shadow: 0 0 8px var(--glow);
}

.bb-cell.half {
    background: rgba(234, 71, 67, 0.4);
}

.bb-rows {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bb-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.72rem;
    color: var(--text-light);
    padding: 0.25rem 0.5rem;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 6px;
}

.bb-row b {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    color: var(--primary-light);
}

.bb-phone {
    width: 86px;
    padding: 0.4rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
}

.bb-phone span {
    display: block;
    height: 6px;
    margin-bottom: 4px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.1);
}

.bb-phone span:first-child {
    background: rgba(234, 71, 67, 0.55);
    width: 70%;
}

.bb-phone span:last-child {
    margin-bottom: 0;
    width: 50%;
}

.bb-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
}

.bb-tile {
    padding: 0.4rem 0.3rem;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
}

.bb-tile b {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.85rem;
    color: var(--primary-light);
}

.bb-tile span {
    font-size: 0.58rem;
    color: var(--text-muted);
}

/* .bb-pipe / .bb-node removed: they drew the deploy-pipeline artefact for the
   "Cloud deploy" chip, which was swapped out for "AI assistance". */

/* --- footer --- */

.bb-foot {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.95rem 0.5rem 0.2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* The progress bar is gone with the three-chip threshold. A bar needs a target
   to progress towards, and there is no longer a "right" number of requirements
   to pick — one is a complete requirement. */
.bb-status {
    flex: 1 1 auto;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0;
}

/* The payoff: an email that already contains their selection. Hidden until
   something is picked, using visibility so it is not a focusable invisible
   tab stop while empty. */
.bb-send {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    padding: 0.6rem 1.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-white);
    text-decoration: none;
    background: var(--gradient-cta);
    border-radius: var(--radius-sm);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity var(--fast) ease, transform var(--fast) var(--ease),
                box-shadow var(--fast) ease;
}

.buildbox.is-active .bb-send {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.bb-send:hover {
    box-shadow: 0 8px 24px var(--glow);
}

/* our credibility, as a footnote rather than a reveal */
.bb-proof {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.75rem 0.5rem 0;
    margin: 0;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.bb-proof a {
    color: var(--primary-light);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(234, 71, 67, 0.35);
    white-space: nowrap;
}

.bb-proof a:hover {
    color: var(--text-white);
    border-bottom-color: var(--primary);
}

/* --- Build Box responsive --- */

/* Drag needs touch-action:none, but on phones that would eat page
   scrolling — and drag is disabled there anyway, so scope it. */
@media (min-width: 768px) {
    .bb-chip {
        touch-action: none;
    }
}

@media (max-width: 1024px) {
    .bb-stage {
        grid-template-columns: 200px 1fr;
    }

    .bb-output {
        grid-column: 1 / -1;
        min-height: 0;
    }
}

@media (max-width: 768px) {
    .buildbox {
        margin-top: 2.5rem;
        padding: 1rem;
    }

    .bb-stage {
        grid-template-columns: 1fr;
        padding: 1rem 0.25rem 0.25rem;
    }

    .bb-tray {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .bb-tray-label {
        flex: 1 0 100%;
    }

    .bb-chip {
        width: auto;
        cursor: pointer;
        font-size: 0.78rem;
        padding: 0.5rem 0.7rem;
    }

    .bb-chip:hover {
        transform: none;
    }

    .bb-zone {
        min-height: 270px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bb-chip,
    .bb-layer,
    .bb-art,
    .bb-hint,
    .bb-send,
    .bb-stack-label {
        transition: none !important;
    }

    .bb-chip:hover {
        transform: none;
    }
}

/* ============================================
   PAPER SURFACE

   `.section--paper` inverts a section to the cream surface. It overrides the
   ink defaults rather than defining a parallel component set, so every card
   and heading keeps one definition.

   The accent rule from tokens.css is enforced here: #EA4743 is only 3.4:1 on
   cream, so on paper it appears as a fill, a rule, or an eyebrow — never as
   body text. Paragraph colour comes from --paper-text, which is 7.9:1.
   ============================================ */

.section--paper {
    background: var(--paper);
    color: var(--paper-ink);
}

/* soft seam into and out of the cream, so the switch is not a hard edge */
.section--paper::before,
.section--paper::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 80px;
    pointer-events: none;
}

.section--paper::before {
    top: 0;
    background: linear-gradient(180deg, rgba(3, 16, 19, 0.16) 0%, transparent 100%);
}

.section--paper::after {
    bottom: 0;
    background: linear-gradient(0deg, rgba(3, 16, 19, 0.16) 0%, transparent 100%);
}

.section--paper .section-title,
.section--paper .about-content h3,
.section--paper .about-card h4,
.section--paper .service-card h4 {
    color: var(--paper-ink);
}

.section--paper .section-desc,
.section--paper .about-content p,
.section--paper .about-card p,
.section--paper .service-card p {
    color: var(--paper-text);
}

/* the eyebrow is large-ish, bold, uppercase — the one place red is allowed
   to be type on cream */
.section--paper .section-tag {
    color: var(--primary-dark);
}

.section--paper .highlight-item,
.section--paper .about-card,
.section--paper .service-card {
    background: var(--paper-card);
    border-color: var(--paper-border);
    box-shadow: var(--shadow-paper);
}

.section--paper .highlight-text {
    color: var(--paper-ink);
}

.section--paper .highlight-icon,
.section--paper .about-card-icon,
.section--paper .service-icon {
    background: rgba(234, 71, 67, 0.08);
    color: var(--primary-dark);
}

.section--paper .service-card:hover {
    border-color: rgba(234, 71, 67, 0.4);
    box-shadow: 0 10px 30px rgba(14, 26, 29, 0.1);
}

/* the ink-on-ink hover wash would dirty the cream */
.section--paper .service-card::before {
    display: none;
}

/* ============================================
   Logo lockup

   The horse emblem plus the wordmark. Same mark and same red for the company
   and the product, by decision — the wordmark is what tells them apart.
   ============================================ */

.nav-logo-mark {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    transition: transform var(--fast) var(--ease);
}

.nav-logo:hover .nav-logo-mark {
    transform: translateY(-2px) rotate(-4deg);
}

/* ============================================
   Icon colour

   Icons now draw with currentColor instead of a hardcoded hex, so a product
   page overriding --primary recolours them for free.
   ============================================ */

.highlight-icon,
.about-card-icon,
.service-icon,
.feature-icon {
    color: var(--primary);
}

.feature-icon svg,
.service-icon svg {
    width: 24px;
    height: 24px;
}

.feature-icon svg {
    width: 22px;
    height: 22px;
}

/* ============================================
   Product status + outbound link
   ============================================ */

.product-status {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-left: auto;
    align-self: flex-start;
    padding: 0.3rem 0.75rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7ee0a8;
    background: rgba(126, 224, 168, 0.08);
    border: 1px solid rgba(126, 224, 168, 0.25);
    border-radius: 50px;
}

.product-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #7ee0a8;
    box-shadow: 0 0 10px rgba(126, 224, 168, 0.6);
}

/* No negative top margin on the base rule. It was tuned to tuck under
   .product-description inside the home showcase, and on the product page hero
   it pulled the links up into the lede text. Scoped to the showcase instead. */
.product-links {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin: 0 0 2.5rem;
}

.product-showcase .product-links {
    margin-top: -1.5rem;
}

.product-links a {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--primary-light);
    text-decoration: none;
    border-bottom: 1px solid rgba(234, 71, 67, 0.35);
}

.product-links a:hover {
    color: var(--text-white);
    border-bottom-color: var(--primary);
}

/* ============================================
   Tech items — numbered instead of iconed
   ============================================ */

.tech-item {
    counter-increment: tech;
    text-align: left;
    padding: 1.5rem 1.25rem;
}

.tech-grid {
    counter-reset: tech;
}

.tech-item::before {
    content: counter(tech, decimal-leading-zero);
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 0.85rem;
    letter-spacing: 0.1em;
}

/* ============================================
   Footer additions
   ============================================ */

.footer-meta {
    list-style: none;
    margin-top: 1rem;
}

.footer-meta li {
    margin-bottom: 0.4rem;
}

.footer-meta a {
    font-size: 0.88rem;
    color: var(--text-light);
    text-decoration: none;
}

.footer-meta a:hover {
    color: var(--primary);
}

/* .footer-soon and the aria-disabled footer-link rules removed in P6 — every
   footer link now points at a real page, so there is nothing left to mark as
   pending. Both were flagged by the unused-class check. */

/* ============================================
   Cursor spotlight

   A radial wash that follows the pointer across the hero. --mx/--my are set
   from a rAF-throttled pointermove in main.js, so the only work per frame is
   a custom-property write; the gradient itself stays on the compositor.
   Opacity is 0 until the first move, so it never shows at a stale position.
   ============================================ */

.spotlight {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s ease;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 40%),
                rgba(234, 71, 67, 0.1) 0%,
                rgba(234, 71, 67, 0.04) 40%,
                transparent 70%);
}

.spotlight.is-live {
    opacity: 1;
}

/* ============================================
   Staggered reveal

   Children of a .stagger container come up in sequence once the container
   intersects. The delay is applied inline by main.js, so the step can change
   without a CSS edit per grid size.
   ============================================ */

.stagger > * {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity var(--slow) ease, transform var(--slow) var(--ease);
}

.stagger.is-on > * {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .spotlight {
        display: none;
    }

    .stagger > *,
    .fade-in {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .nav-logo:hover .nav-logo-mark {
        transform: none;
    }
}

/* ============================================
   SUBPAGE HERO

   Shorter than the home hero: no Build Box to make room for, and a subpage
   that opens with a full viewport of nothing is a page people leave.
   ============================================ */

.page-hero {
    position: relative;
    padding: 9rem 2rem 4rem;
    overflow: hidden;
}

.page-hero-inner {
    position: relative;
    z-index: 2;
    max-width: var(--shell);
    margin: 0 auto;
}

.crumbs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.crumbs a {
    color: var(--text-muted);
    text-decoration: none;
}

.crumbs a:hover {
    color: var(--primary);
}

.crumbs span {
    opacity: 0.4;
}

.page-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(2.1rem, 4.6vw, 3.4rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -1.2px;
    margin-bottom: 1.25rem;
}

.page-title span {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.page-lede {
    max-width: 680px;
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    line-height: 1.75;
    color: var(--text-light);
}

/* ============================================
   3D TILT CARD

   --rx / --ry are written by main.js from pointer position within the card.
   The children sit on different Z planes inside a preserve-3d context, so the
   emblem genuinely floats above the artwork rather than faking it with a
   shadow. Returns to rest on pointerleave via a longer transition.
   ============================================ */

.tilt {
    perspective: 1100px;
}

.tilt-inner {
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform var(--slow) var(--ease);
    will-change: transform;
}

/* While the pointer is inside, kill the transition so the card tracks the
   cursor 1:1. With it on, the card lags behind and feels like soup. */
.tilt.is-active .tilt-inner {
    transition: none;
}

.tilt-card {
    position: relative;
    padding: 2.5rem;
    background: linear-gradient(145deg, rgba(10, 31, 36, 0.98) 0%, rgba(3, 16, 19, 0.98) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

/* a specular sweep that moves opposite the tilt */
.tilt-sheen {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--fast) ease;
    background: linear-gradient(105deg,
                transparent 30%,
                rgba(255, 255, 255, 0.06) 48%,
                transparent 62%);
    transform: translateX(calc(var(--ry, 0deg) * -1.6));
}

.tilt.is-active .tilt-sheen {
    opacity: 1;
}

.tilt-float {
    transform: translateZ(55px);
}

.tilt-mid {
    transform: translateZ(26px);
}

/* ============================================
   DEVICE MOCK / SCREENSHOT SLOT

   Holds a CSS-drawn placeholder today. When the real exports arrive, the
   .device-shot child is swapped for a single <img> and nothing else changes —
   the frame, aspect ratio and tilt behaviour all stay.
   ============================================ */

.device {
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius);
    background: #06181d;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}

.device-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0.6rem 0.8rem;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.device-bar i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
}

.device-bar span {
    margin-left: 0.5rem;
    font-size: 0.68rem;
    color: var(--text-muted);
}

.device-shot {
    display: block;
    width: 100%;
}

.device-shot img {
    display: block;
    width: 100%;
    height: auto;
}

/* the placeholder drawing, replaced wholesale by the real screenshot */
.shot-skeleton {
    padding: 1.1rem;
}

.shot-row {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.shot-block {
    height: 44px;
    flex: 1;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
}

.shot-block.accent {
    background: rgba(234, 71, 67, 0.22);
    border: 1px solid rgba(234, 71, 67, 0.35);
}

.shot-block.tall {
    height: 92px;
}

.shot-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem;
    margin-top: 0.3rem;
    font-size: 0.72rem;
    color: var(--text-muted);
    border: 1px dashed rgba(255, 255, 255, 0.12);
    border-radius: 8px;
}

/* ============================================
   SCROLL-EXPLODED ARCHITECTURE STACK

   A tall runway holds a sticky scene. main.js writes --p (0 to 1) as the
   runway passes the viewport, and every layer derives its own offset from it.
   One custom-property write per frame drives the whole thing.

   The tilt is kept shallow (14deg) on purpose: a true isometric rotation
   looks better in a screenshot and makes the labels unreadable, and the
   labels are the entire point of the diagram.
   ============================================ */

.explode {
    position: relative;
    height: 240vh;
}

/* Flex column, not two independently centred absolute boxes. The heading and
   the scene were each positioned on their own, so at full spread the outer
   layers rode up over the title. Stacking them makes overlap impossible
   regardless of viewport height. */
.explode-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: 5rem 1.5rem 4rem;
    overflow: hidden;
}

.explode-head {
    text-align: center;
    flex-shrink: 0;
}

.explode-scene {
    position: relative;
    width: min(100%, 560px);
    height: 300px;
    flex-shrink: 0;
    perspective: 1400px;
}

.explode-planes {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform: rotateX(14deg);
}

/* Spread grows with scroll progress: 0 collapses the five layers into one card,
   1 fans them apart. The var() fallback is deliberately 1, not 0 — with no
   JavaScript the diagram has to render exploded and readable rather than as
   five labels piled on each other. main.js sets --p explicitly at init. */
.plane {
    --spread: calc(var(--p, 1) * 86px);
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.85rem 1.1rem;
    background: linear-gradient(135deg, rgba(234, 71, 67, 0.14) 0%, rgba(10, 31, 36, 0.97) 55%);
    border: 1px solid rgba(234, 71, 67, 0.28);
    border-radius: var(--radius);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
    will-change: transform;
    transform:
        translateY(calc(-50% + (var(--i) - 2) * var(--spread)))
        translateZ(calc(var(--i) * -12px))
        scale(calc(1 - var(--i) * 0.012));
}

.plane-name {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-white);
}

.plane-tech {
    font-size: 0.74rem;
    color: var(--primary-light);
}

.plane-desc {
    margin-left: auto;
    text-align: right;
    font-size: 0.74rem;
    color: var(--text-muted);
    max-width: 220px;
    /* only legible once the layers have parted */
    opacity: calc((var(--p, 1) - 0.45) * 2.6);
}

.plane-num {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--primary);
    flex-shrink: 0;
}

/* the spine the layers hang off, drawn as they separate */
.explode-spine {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1px;
    height: calc(var(--p, 1) * 400px);
    transform: translate(-50%, -50%);
    background: linear-gradient(180deg, transparent, rgba(234, 71, 67, 0.4), transparent);
    opacity: calc(var(--p, 1) * 0.9);
}

.explode-hint {
    position: absolute;
    bottom: 8vh;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-muted);
    opacity: calc(1 - var(--p, 1) * 3);
}

/* ============================================
   WORK / PORTFOLIO HUB
   ============================================ */

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

.work-card {
    display: flex;
    flex-direction: column;
    padding: 2rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    transition: transform var(--fast) var(--ease), border-color var(--fast) ease,
                box-shadow var(--fast) ease;
}

.work-card:hover {
    transform: translateY(-5px);
    border-color: rgba(234, 71, 67, 0.4);
    box-shadow: var(--shadow-card), var(--shadow-glow);
}

.work-card-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.work-card-head img {
    width: 44px;
    height: 44px;
}

.work-card h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.4px;
}

.work-card p {
    color: var(--text-light);
    font-size: 0.92rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.work-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: auto;
}

.work-tag {
    padding: 0.25rem 0.6rem;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 6px;
}

/* the honest empty slot, instead of inventing a second product */
.work-card--empty {
    justify-content: center;
    align-items: flex-start;
    background: transparent;
    border-style: dashed;
    border-color: rgba(255, 255, 255, 0.1);
    cursor: default;
}

.work-card--empty:hover {
    transform: none;
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: none;
}

.work-card--empty h3 {
    color: var(--text-muted);
    margin-bottom: 0.6rem;
}

/* ============================================
   Product page content blocks
   ============================================ */

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

.split--wide-left {
    grid-template-columns: 1.15fr 0.85fr;
}

.prose h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-bottom: 1.1rem;
}

.prose p {
    color: var(--text-light);
    line-height: 1.8;
    margin-bottom: 1.1rem;
}

.prose p:last-child {
    margin-bottom: 0;
}

.section--paper .prose h3 {
    color: var(--paper-ink);
}

.section--paper .prose p {
    color: var(--paper-text);
}

.facts {
    list-style: none;
    display: grid;
    gap: 0.6rem;
}

.facts li {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.85rem 1rem;
    font-size: 0.9rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.facts b {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    color: var(--primary-light);
    flex-shrink: 0;
    min-width: 92px;
}

.facts span {
    color: var(--text-light);
}

.section--paper .facts li {
    background: var(--paper-card);
    border-color: var(--paper-border);
    box-shadow: var(--shadow-paper);
}

.section--paper .facts b {
    color: var(--primary-dark);
}

.section--paper .facts span {
    color: var(--paper-text);
}

/* ============================================
   Responsive — P4 additions
   ============================================ */

@media (max-width: 900px) {
    .split,
    .split--wide-left {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .explode {
        height: 200vh;
    }

    .plane {
        --spread: calc(var(--p, 1) * 70px);
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .plane-desc {
        margin-left: 0;
        text-align: left;
        max-width: none;
        flex: 1 0 100%;
    }
}

@media (max-width: 768px) {
    .page-hero {
        padding: 7rem 1.5rem 3rem;
    }

    .tilt-card {
        padding: 1.5rem;
    }

    .explode-scene {
        height: 340px;
    }
}

/* Short viewports — a laptop at 1366x768 has roughly 600px of usable height
   once browser chrome is deducted. Five layers at 86px apart need ~400px plus
   the heading, which does not fit, so the spread tightens instead of clipping. */
@media (max-height: 820px) {
    .plane {
        --spread: calc(var(--p, 1) * 62px);
    }

    .explode-scene {
        height: 240px;
    }

    .explode-sticky {
        gap: 1.25rem;
        padding: 4.5rem 1.5rem 3rem;
    }

    .explode-head .section-title {
        font-size: clamp(1.6rem, 3vw, 2.1rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    /* No tilt, and the stack renders already exploded so the diagram is
       readable without scrolling through an animation. */
    .tilt-inner {
        transform: none !important;
    }

    .tilt-sheen {
        display: none;
    }

    .explode {
        height: auto;
    }

    .explode-sticky {
        position: static;
        height: auto;
        padding: 4rem 0;
    }

    .explode-head {
        position: static;
        margin-bottom: 3rem;
    }

    .explode-hint {
        display: none;
    }

    .work-card:hover {
        transform: none;
    }
}

/* ============================================
   P4 corrections

   .plane-name / .plane-tech sit inside a wrapping <span> so each plane is a
   three-part flex row (number, label block, description). They have to be
   block-level or the name and tech run together on one line.
   ============================================ */

.plane-name,
.plane-tech {
    display: block;
}

/* The product lockup is reused as a page heading on a product page, where the
   2rem from the home-page card is too quiet for an h1. */
.page-hero .product-name {
    font-size: clamp(1.9rem, 4.2vw, 3rem);
}

.page-hero .product-header {
    margin-bottom: 1.5rem;
}

.page-hero .product-links {
    margin-top: 1.75rem;
}

/* In the home showcase the pill belongs hard right, away from the name. In a
   page heading that leaves it stranded across a 1200px gap, so it sits with
   the title instead. */
.page-hero .product-status {
    margin-left: 0;
    align-self: center;
}

/* Current page in the nav. Subtle on purpose — it is orientation, not a CTA.
   The underline must skip .nav-cta: inside that filled pill the ::after block
   rendered as a red slab hanging out of the button and pushed its label past
   the container edge. The pill is already its own emphasis. */
.nav-links a[aria-current="page"] {
    color: var(--text-white);
}

.nav-links a[aria-current="page"]:not(.nav-cta)::after {
    content: '';
    display: block;
    height: 1px;
    margin-top: 3px;
    background: var(--primary);
}

/* Work-card heading block: the status pill should hug the name, not stretch. */
.work-card-head .product-status {
    margin-left: 0;
    margin-top: 0.35rem;
}

/* ============================================
   P5 — standard pages

   [TO CONFIRM] markers.

   Visible on purpose, and loud enough to notice. An unreviewed legal page that
   looks finished is the dangerous kind; one that visibly flags its own gaps
   cannot be deployed by accident.
   ============================================ */

.todo {
    display: inline-block;
    padding: 0.05rem 0.4rem;
    font-size: 0.82em;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #f3c969;
    background: rgba(243, 201, 105, 0.1);
    border: 1px dashed rgba(243, 201, 105, 0.45);
    border-radius: 4px;
    white-space: nowrap;
}

.section--paper .todo {
    color: #8a6a12;
    background: rgba(243, 201, 105, 0.18);
    border-color: rgba(138, 106, 18, 0.45);
}

/* ============================================
   Numbered process list
   ============================================ */

.steps {
    list-style: none;
    counter-reset: step;
    display: grid;
    gap: 1.1rem;
}

.steps li {
    counter-increment: step;
    position: relative;
    padding-left: 3rem;
    font-size: 0.92rem;
    line-height: 1.75;
    color: var(--text-light);
}

.steps li::before {
    content: counter(step, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0.1rem;
    width: 2rem;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--primary);
    padding-top: 0.15rem;
    border-top: 1px solid rgba(234, 71, 67, 0.35);
}

.steps b {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-white);
    margin-bottom: 0.2rem;
}

.section--paper .steps li {
    color: var(--paper-text);
}

.section--paper .steps b {
    color: var(--paper-ink);
}

.section--paper .steps li::before {
    color: var(--primary-dark);
}

/* ============================================
   Capabilities — long form

   A wide row rather than a card grid: these entries carry two paragraphs each,
   and two paragraphs inside a narrow card is a wall.
   ============================================ */

.caps {
    display: grid;
    gap: 1.25rem;
    max-width: 920px;
    margin: 0 auto;
}

.cap {
    display: flex;
    gap: 1.5rem;
    padding: 2rem;
    background: var(--paper-card);
    border: 1px solid var(--paper-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-paper);
}

.cap h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.4px;
    color: var(--paper-ink);
    margin-bottom: 0.75rem;
}

.cap p {
    color: var(--paper-text);
    font-size: 0.92rem;
    line-height: 1.8;
    margin-bottom: 0.8rem;
}

.cap p:last-child {
    margin-bottom: 0;
}

.cap .service-icon {
    flex-shrink: 0;
    margin-bottom: 0;
    background: rgba(234, 71, 67, 0.08);
    color: var(--primary-dark);
}

/* ============================================
   Contact cards
   ============================================ */

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

.contact-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 2rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: transform var(--fast) var(--ease), border-color var(--fast) ease,
                box-shadow var(--fast) ease;
}

.contact-card:hover {
    transform: translateY(-4px);
    border-color: rgba(234, 71, 67, 0.4);
    box-shadow: var(--shadow-card), var(--shadow-glow);
}

.contact-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.contact-value {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--primary-light);
    word-break: break-word;
}

.contact-note {
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--text-light);
}

/* ============================================
   Legal pages

   Narrow measure, generous leading. Legal text that runs the full 1200px shell
   is text nobody reads.
   ============================================ */

.legal {
    max-width: 720px;
    margin: 0 auto;
}

.legal-updated {
    font-size: 0.82rem;
    color: var(--paper-muted);
    padding-bottom: 1.75rem;
    margin-bottom: 2.25rem;
    border-bottom: 1px solid var(--paper-border);
}

.legal h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--paper-ink);
    margin: 2.25rem 0 0.85rem;
}

.legal h2:first-of-type {
    margin-top: 0;
}

.legal p {
    color: var(--paper-text);
    font-size: 0.95rem;
    line-height: 1.85;
    margin-bottom: 1rem;
}

.legal a {
    color: var(--primary-dark);
    font-weight: 500;
}

@media (max-width: 700px) {
    .cap {
        flex-direction: column;
        gap: 1rem;
        padding: 1.5rem;
    }

    .steps li {
        padding-left: 2.5rem;
    }
}

/* ============================================
   P6 — careers and writing

   EMPTY STATE

   Both pages ship empty, because there are no openings and no posts. An empty
   state that looks designed reads as honesty; a page padded with "exciting
   opportunities coming soon" reads as neither.
   ============================================ */

.empty-state {
    max-width: 620px;
    margin: 0 auto;
    padding: 3.5rem 2.5rem;
    text-align: center;
    background: var(--bg-card);
    border: 1px dashed rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-xl);
}

.empty-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin-bottom: 1.5rem;
    background: rgba(234, 71, 67, 0.07);
    border: 1px solid var(--border);
    border-radius: 50%;
}

.empty-state h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-bottom: 0.9rem;
}

.empty-state p {
    color: var(--text-light);
    font-size: 0.95rem;
    line-height: 1.8;
    margin-bottom: 2rem;
}

/* ============================================
   POST AND ROLE LISTS

   Unused today. Defined now because the templates in pegvix-templates/ tell
   the reader to swap the empty state for these, and a template that references
   classes with no styles is a trap for whoever follows the instructions.
   ============================================ */

.post-list,
.role-list {
    display: grid;
    gap: 1.25rem;
    max-width: 820px;
    margin: 0 auto;
}

.post-card,
.role-card {
    display: block;
    padding: 1.75rem 2rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    transition: transform var(--fast) var(--ease), border-color var(--fast) ease,
                box-shadow var(--fast) ease;
}

.post-card:hover,
.role-card:hover {
    transform: translateY(-3px);
    border-color: rgba(234, 71, 67, 0.4);
    box-shadow: var(--shadow-card), var(--shadow-glow);
}

.post-meta,
.role-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.6rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.post-card h3,
.role-card h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.4px;
    margin-bottom: 0.5rem;
}

.post-card p,
.role-card p {
    color: var(--text-light);
    font-size: 0.92rem;
    line-height: 1.75;
}

.section--paper .post-card,
.section--paper .role-card {
    background: var(--paper-card);
    border-color: var(--paper-border);
    box-shadow: var(--shadow-paper);
}

.section--paper .post-card h3,
.section--paper .role-card h3 {
    color: var(--paper-ink);
}

.section--paper .post-card p,
.section--paper .role-card p {
    color: var(--paper-text);
}

@media (max-width: 600px) {
    .empty-state {
        padding: 2.5rem 1.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .post-card:hover,
    .role-card:hover,
    .contact-card:hover {
        transform: none;
    }
}


/* ============================================
   CROSS-DOCUMENT VIEW TRANSITIONS

   Pure progressive enhancement: browsers without support simply navigate as
   normal, and nothing about the pages depends on it. Costs a few lines and is
   the single largest polish-per-byte win available to a multi-page static site.

   The logo and the navbar carry stable view-transition-names so they are
   treated as the same element across a navigation and stay put instead of
   cross-fading with the rest of the page.
   ============================================ */

@view-transition {
    navigation: auto;
}

.nav-logo-mark {
    view-transition-name: brand-mark;
}

.navbar {
    view-transition-name: site-nav;
}

::view-transition-group(root) {
    animation-duration: 260ms;
}

@media (prefers-reduced-motion: reduce) {
    /* Opt out entirely rather than shortening it. */
    @view-transition {
        navigation: none;
    }

    .nav-logo-mark,
    .navbar {
        view-transition-name: none;
    }
}

/* ============================================
   SKIP LINK

   Visually hidden until focused. Must not use display:none — a hidden-by-
   display element cannot receive focus, which defeats the purpose.
   ============================================ */

.skip-link {
    /* fixed, not absolute: an absolutely positioned skip link sits at the top
       of the DOCUMENT, so it would be off-screen if focus ever happened while
       the page was scrolled. */
    position: fixed;
    top: 0;
    left: 50%;
    z-index: 2000;
    transform: translate(-50%, -120%);
    padding: 0.7rem 1.4rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-white);
    background: var(--primary);
    border-bottom-left-radius: var(--radius-sm);
    border-bottom-right-radius: var(--radius-sm);
    text-decoration: none;
    transition: transform var(--fast) var(--ease);
}

.skip-link:focus {
    transform: translate(-50%, 0);
    outline: 2px solid var(--text-white);
    outline-offset: -4px;
}

/* ============================================
   FOCUS VISIBILITY

   One consistent focus ring for every interactive element. The default UA ring
   is nearly invisible against the ink surface.
   ============================================ */

a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--primary-light);
    outline-offset: 3px;
    border-radius: 2px;
}

.section--paper a:focus-visible,
.section--paper button:focus-visible {
    outline-color: var(--primary-dark);
}

/* ============================================
   INLINE-STYLE REPLACEMENTS

   Every `style="..."` attribute was removed from the markup so the Content
   Security Policy in _headers can drop 'unsafe-inline' from style-src. That
   directive is the difference between "styles may only come from our own
   stylesheets" and "any attribute in any injected markup can restyle the
   page", which is the lever most HTML-injection attacks actually pull.

   CSP governs style attributes parsed from markup, not the CSSOM, so main.js
   setting element.style.setProperty() at runtime is unaffected.
   ============================================ */

/* a readable measure for long-form blocks */
.measure {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.measure-left {
    max-width: 720px;
}

/* the lockup inside the tilt card sits tighter than the page-level one */
.tilt-card .product-header {
    margin-bottom: 1.5rem;
}

/* --i was a per-element inline custom property. Position in the DOM already
   encodes it, so nth-child can supply it instead.

   The Build Box layers still accept an inline --i from main.js, which wins over
   this as an inline style — that is intended. These values are what the no-JS
   `js-off` diagram renders from. */
.bb-stack .bb-layer:nth-child(1) { --i: 0; }
.bb-stack .bb-layer:nth-child(2) { --i: 1; }
.bb-stack .bb-layer:nth-child(3) { --i: 2; }
.bb-stack .bb-layer:nth-child(4) { --i: 3; }
.bb-stack .bb-layer:nth-child(5) { --i: 4; }
.bb-stack .bb-layer:nth-child(6) { --i: 5; }

/* the architecture planes are static — nothing overrides these */
.explode-planes .plane:nth-child(1) { --i: 0; }
.explode-planes .plane:nth-child(2) { --i: 1; }
.explode-planes .plane:nth-child(3) { --i: 2; }
.explode-planes .plane:nth-child(4) { --i: 3; }
.explode-planes .plane:nth-child(5) { --i: 4; }

/* ============================================
   PROVENANCE BADGES

   Each Build Box layer states whether it is evidence or an offer. This exists
   because the AI capability is genuinely not shipped yet, and labelling it
   honestly turned out to strengthen the other five rather than weaken the set:
   "Live in KRIDAXA" means something precisely because not everything carries it.
   ============================================ */

.bb-prov {
    margin-left: auto;
    flex-shrink: 0;
    padding: 0.1rem 0.45rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #7ee0a8;
    background: rgba(126, 224, 168, 0.1);
    border: 1px solid rgba(126, 224, 168, 0.3);
    border-radius: 4px;
}

/* amber, matching the [TO CONFIRM] convention used elsewhere for "not settled" */
.bb-prov--design {
    color: #f3c969;
    background: rgba(243, 201, 105, 0.1);
    border-color: rgba(243, 201, 105, 0.38);
}

.bb-art-tag {
    margin-left: 0.4rem;
    padding: 0.05rem 0.35rem;
    font-size: 0.56rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #f3c969;
    background: rgba(243, 201, 105, 0.1);
    border: 1px solid rgba(243, 201, 105, 0.35);
    border-radius: 3px;
}

/* the question the AI artefact answers */
.bb-ask {
    margin-bottom: 0.4rem;
    padding: 0.4rem 0.55rem;
    font-size: 0.72rem;
    font-style: italic;
    color: var(--text-light);
    background: rgba(234, 71, 67, 0.07);
    border-left: 2px solid var(--primary);
    border-radius: 0 6px 6px 0;
}

/* A real, intended "not yet built" status. Shares the amber language of .todo
   because it means something adjacent, but is a separate class so that clearing
   [TO CONFIRM] placeholders before deploy cannot delete a genuine status. */
.flag-design {
    display: inline-block;
    padding: 0.05rem 0.4rem;
    font-size: 0.9em;
    font-weight: 600;
    color: #8a6a12;
    background: rgba(243, 201, 105, 0.18);
    border: 1px solid rgba(138, 106, 18, 0.4);
    border-radius: 4px;
}

/* .bb-crest-eyebrow removed with the crest itself — see the .bb-stack-label
   comment for why the KRIDAXA badge no longer appears inside the box. */

/* ============================================
   HEADING LEVELS vs HEADING SIZES

   The original CSS keyed card titles to h4 and prose titles to h3, which meant
   the heading LEVEL was being chosen to get a font size. That is what produced
   h1->h3 and h2->h4 skips on ten pages. Levels are now semantic and these
   rules re-point the same sizes at the corrected tags.
   ============================================ */

.feature-card h3,
.service-card h3,
.about-card h3,
.footer-col h3 {
    /* inherit the sizing previously declared for the h4 equivalents */
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
}

.feature-card h3 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.service-card h3 {
    font-size: 1.2rem;
    margin-bottom: 0.75rem;
    position: relative;
    z-index: 2;
}

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

.footer-col h3 {
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1.25rem;
    color: var(--text-white);
}

.section--paper .service-card h3,
.section--paper .about-card h3 {
    color: var(--paper-ink);
}

/* A promoted prose heading keeps the visual weight of the h3 it replaced —
   it is now an h2 for the outline's sake, not to shout louder. */
.prose .prose-h,
.about-content .prose-h {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-bottom: 1.1rem;
}

.about-content .prose-h {
    font-size: 1.75rem;
}

.section--paper .prose-h {
    color: var(--paper-ink);
}

.work-card h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.4px;
}

/* the inline arrow replacing U+2192, which no font subset covered */
.inline-arrow {
    width: 0.85em;
    height: 0.85em;
    vertical-align: -0.1em;
}

/* Capability entries on services.html are h2: that section has no
   section-header above it, so h3 skipped a level from the page h1. Same size
   as before — level is semantics, size is design. */
.cap h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.4px;
    color: var(--paper-ink);
    margin-bottom: 0.75rem;
}

/* ============================================
   TAP TARGET SIZE

   Nav and footer links were 17px tall — the height of their text. WCAG 2.2
   Target Size (Minimum, 2.5.8) asks for 24x24, and while the spacing
   exception arguably covered the desktop nav, the mobile menu stacks these
   into a column where a 17px target is genuinely awkward to hit.

   Padding only, so nothing moves visually beyond a few pixels of breathing
   room. Links that sit INSIDE a sentence are left alone: the inline exception
   applies to them, and padding mid-sentence would break the line rhythm.
   ============================================ */

.nav-links a {
    display: inline-block;
    padding: 0.35rem 0;
}

.nav-links .nav-cta {
    /* already has its own generous padding */
    padding: 0.6rem 1.5rem;
}

.footer-col ul li a,
.footer-meta a,
.crumbs a {
    display: inline-block;
    padding: 0.2rem 0;
}

/* the lists already had margin between items; trim it by what the padding
   now contributes so vertical rhythm is unchanged */
.footer-col ul li {
    margin-bottom: 0.4rem;
}

.footer-meta li {
    margin-bottom: 0.15rem;
}

/* ============================================
   Enquiry form (contact page)

   Sits on the paper section. Inputs use the paper card colour so they read
   as fields rather than as holes in the page.
   ============================================ */

.split--form {
    grid-template-columns: 1.2fr 0.8fr;
    align-items: start;
}

.enquiry {
    padding: 2rem;
    background: var(--paper-card);
    border: 1px solid var(--paper-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-paper);
}

.enquiry-form {
    display: grid;
    gap: 1.1rem;
    margin-top: 1.25rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.1rem;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.form-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--paper-ink);
}

.form-input {
    width: 100%;
    padding: 0.75rem 0.9rem;
    font: inherit;
    font-size: 0.95rem;
    color: var(--paper-ink);
    background: var(--paper);
    border: 1px solid rgba(14, 26, 29, 0.22);
    border-radius: var(--radius-sm);
    transition: border-color var(--fast) ease, box-shadow var(--fast) ease;
}

.form-input:focus {
    outline: none;
    border-color: var(--primary-dark);
    box-shadow: 0 0 0 3px rgba(201, 59, 55, 0.18);
}

textarea.form-input {
    resize: vertical;
    min-height: 8rem;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.25rem;
}

.form-actions .btn-primary:disabled {
    opacity: 0.6;
    cursor: progress;
    transform: none;
    box-shadow: none;
}

.form-hint {
    flex: 1 1 220px;
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--paper-muted);
}

.form-hint a {
    color: var(--primary-dark);
}

.form-status {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--paper-ink);
}

.form-status:empty {
    display: none;
}

.form-status.is-ok {
    color: #1d6b3a;
}

.form-status.is-error {
    color: var(--primary-dark);
}

.form-status a {
    color: inherit;
}

/* Turnstile renders its own iframe; this only reserves its height so the
   button does not jump when it appears. */
.cf-turnstile {
    min-height: 65px;
}

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.hp-field {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

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

/* Grid items default to min-width:auto, which would let the fixed-width
   Turnstile widget push the column past the page gutter. */
.split--form > * {
    min-width: 0;
}

@media (max-width: 600px) {
    /* Turnstile is a fixed 300px. A padded card leaves less than that on a
       phone, so the card chrome goes and the form uses the full column. */
    .enquiry {
        padding: 0;
        background: none;
        border: none;
        box-shadow: none;
    }

    .form-row {
        grid-template-columns: 1fr;
    }
}

.page-lede a {
    color: var(--primary-light);
}

/* ============================================
   Enquiry form dropdowns

   A native option list is drawn by the operating system and cannot be themed,
   so main.js swaps each select for this listbox. The select stays in the form,
   hidden, and still carries the value. Without JavaScript it simply stays
   visible, with the chevron below.
   ============================================ */

select.form-input {
    appearance: none;
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23c93b37' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
}

.pv-select {
    position: relative;
}

.pv-select-native {
    display: none;
}

.pv-select-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    text-align: left;
    cursor: pointer;
}

.pv-select-btn svg {
    flex-shrink: 0;
    color: var(--primary-dark);
    transition: transform var(--fast) ease;
}

.pv-select.is-open .pv-select-btn {
    border-color: var(--primary-dark);
    box-shadow: 0 0 0 3px rgba(201, 59, 55, 0.18);
}

.pv-select.is-open .pv-select-btn svg {
    transform: rotate(180deg);
}

.pv-select-list {
    display: none;
    position: absolute;
    z-index: 20;
    top: calc(100% + 0.4rem);
    left: 0;
    right: 0;
    padding: 0.35rem;
    list-style: none;
    background: var(--paper-card);
    border: 1px solid var(--paper-border);
    border-radius: var(--radius-sm);
    box-shadow: 0 12px 32px rgba(14, 26, 29, 0.16);
}

.pv-select.is-open .pv-select-list {
    display: block;
}

.pv-select-option {
    padding: 0.6rem 0.7rem;
    font-size: 0.92rem;
    color: var(--paper-ink);
    border-radius: 6px;
    cursor: pointer;
}

.pv-select-option.is-active {
    background: var(--paper-alt);
}

.pv-select-option[aria-selected="true"] {
    font-weight: 600;
    color: var(--primary-dark);
}