/* ===================================
   Retro display font (Raster Forge, CC0)
   =================================== */
@font-face {
    font-family: 'Raster Forge';
    src: url('../fonts/RasterForge-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ===================================
   Neobrutalist Design System (dark base)
   Layered on top of style.css tokens.
   Keeps --primary-color teal as the semantic accent.
   =================================== */

:root {
    --neo-border: #ffffff;
    --neo-border-width: 3px;
    --neo-radius: 10px;
    --neo-shadow-color: #000000;
    --neo-shadow-offset: 6px;
    --neo-shadow: var(--neo-shadow-offset) var(--neo-shadow-offset) 0 0 var(--neo-shadow-color);
    --neo-shadow-sm: 4px 4px 0 0 var(--neo-shadow-color);
    --neo-shadow-lg: 8px 8px 0 0 var(--neo-shadow-color);
    --neo-surface: #141936;
    --neo-surface-alt: #1a1f3a;
    --neo-accent: var(--primary-color);
    --neo-accent-2: var(--secondary-color);
    /* --accent-color (coral/red, #fc7753) was defined site-wide but barely
       used in the neo-brutalist layer — reserve it for statements of
       conviction/urgency (philosophy, warnings) so it reads as a deliberate
       third accent, not decoration. */
    --neo-accent-3: var(--accent-color);
}

/* ===================================
   Base overrides
   =================================== */

/* style.css sets body to the lighter --navy-bg. On neo pages the
   centred content sits on --dark-bg, so that lighter colour showed as
   pale bands down both sides. Paint the page ground dark instead. */
body {
    background: var(--dark-bg);
}

.neo-page {
    background: var(--dark-bg);
}

/* Alternate band so sections read as distinct passes down the page instead
   of one continuous dark scroll. Apply to every other section. */
.neo-page-alt {
    background: var(--neo-surface);
}

.neo-heading {
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: -0.5px;
    text-transform: none;
}

/* ===================================
   Buttons
   =================================== */
.neo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 16px;
    color: var(--dark-bg);
    background: var(--neo-accent);
    border: var(--neo-border-width) solid var(--neo-border);
    border-radius: var(--neo-radius);
    box-shadow: var(--neo-shadow);
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.neo-btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 8px 8px 0 0 var(--neo-shadow-color);
}

.neo-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 0 var(--neo-shadow-color);
}

.neo-btn-outline {
    background: transparent;
    color: var(--text-light);
}

.neo-btn-secondary {
    background: var(--neo-accent-2);
    color: var(--dark-bg);
}

/* ===================================
   Cards (generic)
   =================================== */
.neo-card {
    background: var(--neo-surface);
    border: var(--neo-border-width) solid var(--neo-border);
    border-radius: var(--neo-radius);
    box-shadow: var(--neo-shadow);
    padding: 28px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.neo-card:hover {
    transform: translate(-3px, -3px);
    box-shadow: 10px 10px 0 0 var(--neo-shadow-color);
}

/* ===================================
   Project cards (clickable, "story" affordance)
   =================================== */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 28px;
}

.project-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--neo-surface);
    border: var(--neo-border-width) solid var(--neo-border);
    border-radius: var(--neo-radius);
    box-shadow: var(--neo-shadow);
    padding: 26px;
    text-decoration: none;
    color: var(--text-light);
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    overflow: hidden;
}

.project-card:hover,
.project-card:focus-visible {
    transform: translate(-4px, -4px);
    box-shadow: 12px 12px 0 0 var(--neo-shadow-color);
    outline: none;
}

.project-card:active {
    transform: translate(1px, 1px);
    box-shadow: 3px 3px 0 0 var(--neo-shadow-color);
}

.project-card-tag {
    display: inline-block;
    align-self: flex-start;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--dark-bg);
    background: var(--neo-accent);
    border: 2px solid var(--neo-border);
    border-radius: 6px;
    padding: 4px 10px;
    margin-bottom: 14px;
}

.project-card-company {
    font-size: 14px;
    font-weight: 600;
    color: var(--neo-accent);
    margin-bottom: 6px;
}

/* Rotate the tag pill, company name, and hover CTA through all three
   accents by grid position — every card repeated the same yellow tag
   before, so the grid read as white-on-navy with one small accent dot
   per card instead of an actually vibrant palette. */
.project-card:nth-of-type(3n+2) .project-card-tag { background: var(--neo-accent-2); }
.project-card:nth-of-type(3n+2) .project-card-company,
.project-card:nth-of-type(3n+2) .project-card-cta { color: var(--neo-accent-2); }

.project-card:nth-of-type(3n+3) .project-card-tag { background: var(--neo-accent-3); color: #ffffff; }
.project-card:nth-of-type(3n+3) .project-card-company,
.project-card:nth-of-type(3n+3) .project-card-cta { color: var(--neo-accent-3); }

.project-card-title {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 10px;
    color: var(--text-light);
}

.project-card-desc {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.55;
    margin-bottom: 20px;
    flex-grow: 1;
}

.project-card-cta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 14px;
    color: var(--neo-accent);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.project-card:hover .project-card-cta,
.project-card:focus-visible .project-card-cta {
    opacity: 1;
    transform: translateX(0);
}

.project-card-cta svg {
    width: 16px;
    height: 16px;
    transition: transform 0.18s ease;
}

.project-card:hover .project-card-cta svg {
    transform: translateX(4px);
}

/* touch devices: no hover, show affordance permanently */
@media (hover: none) {
    .project-card-cta {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ===================================
   Section headers
   =================================== */
.neo-section {
    padding: 90px 0;
}

/* Short, single-element sections (a belief statement, a CTA banner) don't
   need the same 90px rhythm as a full grid section — at that padding they
   read as dead space rather than a deliberate pause. */
.neo-section-compact {
    padding: 56px 0;
}

@media (max-width: 640px) {
    .neo-section-compact {
        padding: 40px 0;
    }
}

.neo-section-header {
    max-width: 640px;
    margin: 0 0 48px;
}

.neo-eyebrow {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--dark-bg);
    background: var(--neo-accent);
    border: 2px solid var(--neo-border);
    border-radius: 6px;
    padding: 5px 12px;
    margin-bottom: 16px;
}

.neo-section-title {
    font-family: var(--font-heading);
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 14px;
}

.neo-section-subtitle {
    font-size: 17px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
}

/* ===================================
   Steps (How it works, simplified)
   =================================== */
.neo-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
}

.neo-step {
    background: var(--neo-surface-alt);
    border: var(--neo-border-width) solid var(--neo-border);
    border-radius: var(--neo-radius);
    box-shadow: var(--neo-shadow-sm);
    padding: 24px;
}

.neo-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 18px;
    color: var(--dark-bg);
    background: var(--neo-accent-2);
    border: 2px solid var(--neo-border);
    border-radius: 8px;
    margin-bottom: 14px;
}

.neo-step h3 {
    font-size: 18px;
    margin-bottom: 8px;
}

.neo-step p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.55;
}

/* ===================================
   FAQ teaser
   =================================== */
.neo-faq-item {
    background: var(--neo-surface);
    border: var(--neo-border-width) solid var(--neo-border);
    border-radius: var(--neo-radius);
    box-shadow: var(--neo-shadow-sm);
    margin-bottom: 16px;
    overflow: hidden;
}

.neo-faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 18px 22px;
    background: none;
    border: none;
    color: var(--text-light);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 16px;
    text-align: left;
    cursor: pointer;
}

.neo-faq-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    background: var(--neo-accent);
    color: var(--dark-bg);
    border: 2px solid var(--neo-border);
    border-radius: 6px;
}

.neo-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
}

.neo-faq-item.open .neo-faq-answer {
    max-height: 400px;
}

.neo-faq-answer-inner {
    padding: 0 22px 20px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 15px;
    line-height: 1.6;
}

/* ===================================
   Case study page
   =================================== */
.case-hero {
    padding: 140px 0 60px;
    border-bottom: var(--neo-border-width) solid var(--neo-accent-2);
}

.case-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.case-meta-pill {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    padding: 6px 14px;
    border: 2px solid var(--neo-border);
    border-radius: 999px;
    color: var(--text-light);
    background: var(--neo-surface-alt);
}

.case-meta-pill.accent {
    background: var(--neo-accent);
    color: var(--dark-bg);
}

/* Each case study leads with 3 meta pills (discipline / client / sector).
   The first is filled teal via .accent above; give the other two an
   outline in yellow and coral so the hero doesn't read as all-navy — one
   filled pill was the only color on the entire page otherwise. */
.case-meta-pill:nth-of-type(2) {
    border-color: var(--neo-accent-2);
    color: var(--neo-accent-2);
}

.case-meta-pill:nth-of-type(3) {
    border-color: var(--neo-accent-3);
    color: var(--neo-accent-3);
}

.case-title {
    font-family: var(--font-heading);
    font-size: 44px;
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 16px;
    max-width: 800px;
    color: var(--neo-accent-2);
}

.case-summary {
    font-size: 19px;
    color: rgba(255, 255, 255, 0.8);
    max-width: 700px;
    line-height: 1.6;
}

.case-section {
    padding: 56px 0;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.case-section h2 {
    font-family: var(--font-heading);
    font-size: 26px;
    margin-bottom: 18px;
    color: var(--neo-accent-3);
}

.case-section p {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.7;
    max-width: 760px;
}

.case-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.case-tool-chip {
    font-size: 13px;
    font-weight: 600;
    padding: 6px 12px;
    background: var(--neo-surface-alt);
    border: 2px solid var(--neo-border);
    border-radius: 6px;
}

/* Rotate the tool/skill chips through all three accents instead of a flat
   row of identical navy-outlined chips. */
.case-tool-chip:nth-of-type(3n+1) { border-color: var(--neo-accent); color: var(--neo-accent); }
.case-tool-chip:nth-of-type(3n+2) { border-color: var(--neo-accent-2); color: var(--neo-accent-2); }
.case-tool-chip:nth-of-type(3n+3) { border-color: var(--neo-accent-3); color: var(--neo-accent-3); }

.neo-philosophy-card {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
    background: var(--neo-surface);
    border: var(--neo-border-width) solid var(--neo-accent-3);
    border-radius: var(--neo-radius);
    box-shadow: var(--neo-shadow-offset) var(--neo-shadow-offset) 0 0 var(--neo-accent-3);
    padding: 48px 40px;
}

/* This is a statement of conviction, not a CTA — give it the coral accent
   instead of the teal/yellow used for buttons and tags everywhere else, so
   red-family color gets real use in the palette rather than sitting unused. */
.neo-philosophy-card .neo-eyebrow {
    margin-bottom: 20px;
    background: var(--neo-accent-3);
    color: #ffffff;
}

.neo-philosophy-text {
    font-family: var(--font-heading);
    font-size: 24px;
    line-height: 1.55;
    color: #ffffff;
}

@media (max-width: 640px) {
    .neo-philosophy-card { padding: 32px 24px; }
    .neo-philosophy-text { font-size: 19px; }
}

.case-figure {
    /* `auto` left/right (was 0) so figures centre in the container instead
       of sitting flush left under the body copy. Applies to all three
       case studies that use figures — each one is a standalone visual, not
       an inline-with-text element, so centring is right for all of them. */
    margin: 28px auto 0;
    max-width: 860px;
}

.case-figure img {
    display: block;
    width: 100%;
    height: auto;
    border: var(--neo-border-width) solid var(--neo-border);
    border-radius: var(--neo-radius);
    background: var(--neo-surface);
}

.case-figure figcaption {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.6;
    margin-top: 12px;
    /* Centred under the now-centred image — a left-aligned caption beneath a
       centred figure reads as a misalignment. */
    text-align: center;
}

/* ===================================
   Testimonials
   =================================== */
.neo-testimonials {
    display: grid;
    /* auto-fit so a single testimonial sits centred and full-width rather
       than stranded in a narrow left column; more will flow into a row. */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 28px;
    max-width: 820px;
    margin: 0 auto;
}

.neo-testimonial {
    background: var(--neo-surface);
    border: var(--neo-border-width) solid var(--neo-border);
    border-radius: var(--neo-radius);
    box-shadow: var(--neo-shadow);
    padding: 32px;
}

.neo-testimonial-quote {
    font-size: 17px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.88);
    margin: 0 0 24px;
}

.neo-testimonial-author {
    display: flex;
    align-items: center;
    gap: 16px;
}

.neo-testimonial-photo {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 2px solid var(--neo-accent);
    object-fit: cover;
}

.neo-testimonial-name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 16px;
    color: var(--text-light);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

a.neo-testimonial-name:hover {
    color: var(--neo-accent);
}

.neo-testimonial-name i {
    font-size: 14px;
    color: var(--neo-accent);
}

.neo-testimonial-role {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 3px;
}

@media (max-width: 640px) {
    .neo-testimonial {
        padding: 24px;
    }
    .neo-testimonial-quote {
        font-size: 16px;
    }
}

/* Result highlights — large standalone icons with one short line under each.
   Deliberately NOT reusing .neo-info-card: that component is a bordered,
   shadowed box used across the blog pages, and these are meant to read as
   bare icons with no container. Kept as its own class so the blog cards
   stay untouched. */
.case-highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 36px;
    /* `auto` left/right (was 0) so the 760px grid centres in the container
       instead of sitting flush left like the body copy above it. */
    margin: 40px auto 8px;
    max-width: 760px;
}

.case-highlight {
    text-align: center;
}

.case-highlight i {
    display: block;
    font-size: 52px;
    line-height: 1;
    color: var(--neo-accent-2); /* yellow, per design direction */
    margin-bottom: 16px;
}

.case-highlight span {
    display: block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 640px) {
    .case-highlights {
        gap: 28px;
    }
    .case-highlight i {
        font-size: 44px;
    }
}

/* Wider spacing for the homepage "What I Do" row specifically. Scoped to
   #what-i-do rather than changing .case-highlights globally — the same
   component is used on four case-study pages, where the tighter 36px gap
   still reads correctly under a body-copy column. The extra max-width is
   what actually lets the columns breathe; a bigger gap alone would just
   squeeze each column narrower. */
#what-i-do .case-highlights {
    gap: 72px;
    max-width: 940px;
}

@media (max-width: 640px) {
    #what-i-do .case-highlights {
        gap: 40px;
    }
}

/* Case-study figures stack full-width rather than sitting side by side: the
   n8n workflow is a wide, detail-dense diagram that becomes unreadable when
   squeezed into a half-width column. */
.case-figure-stack {
    display: flex;
    flex-direction: column;
    gap: 36px;
    margin-top: 28px;
}

/* The backend workflow diagram gets the full content width. */
.case-figure.is-wide {
    max-width: 1100px;
}

.case-figure.is-wide img {
    padding: 12px;
}

/* The portrait UI shot is capped so it does not tower over the page. */
.case-figure.is-portrait {
    max-width: 520px;
}

.case-figure.is-portrait img {
    padding: 12px;
}

.case-results-placeholder {
    background: var(--neo-surface);
    border: var(--neo-border-width) dashed var(--neo-border);
    border-radius: var(--neo-radius);
    padding: 28px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 15px;
    max-width: 760px;
}

.case-back-link {
    /* flex (not inline-flex) so the eyebrow pill that follows starts on
       its own line instead of sitting beside the back link. */
    display: flex;
    align-self: flex-start;
    width: fit-content;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--neo-accent);
    margin-bottom: 24px;
}

/* ===================================
   Hero photo (neobrutalist portrait)
   =================================== */
.neo-hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 40px;
    align-items: center;
    padding: 40px 0 60px;
}

/* Text-only hero (no photo) — the belief statement and CTA carry the
   opening instead of a portrait, so credibility/work comes first and the
   founder photo appears once, later, alongside the About story. */
.neo-hero-centered .neo-hero-text {
    max-width: 760px;
    /* Bottom padding trimmed (was 64px) as part of closing the gap between
       the hero and the Projects section — see .neo-hero-centered .hero-buttons
       below for the full accounting of what was stacking up down there. */
    padding: 48px 0 8px;
    position: relative;
    /* Above the bubble field (z-index:2), so a bubble drifting leftward can
       never cover the headline or CTA buttons. Both sit above the following
       section, which is pinned to z-index:0. */
    z-index: 3;
    flex: 0 1 760px; /* claim up to 760px, but shrink first if the flex row is tighter than that — never grows into the bubble field's space */
    min-width: 0; /* allow that shrink; flex items default to min-width:auto, which would block it */
}

/* Moved out of inline style="" attributes in index.html. They had to move:
   an inline `margin: 20px 0 12px` sets left/right margin to 0, and inline
   styles beat stylesheet rules — so the centring rules below could never
   have taken effect while those attributes were still on the elements. */
.neo-hero-centered .hero-subtitle {
    max-width: 680px;
}

.neo-hero-centered .hero-subtitle-lead {
    margin: 20px 0 12px;
}

.neo-hero-centered .hero-subtitle-clients {
    margin: 0 0 32px;
}

/* Below 1300px the bubble field is hidden (see .neo-bubble-field), so the
   hero text is the only thing in the row. Left-aligning it there leaves a
   large empty gap on the right where the bubbles used to be — so centre the
   column and its text instead. Breakpoint deliberately matches the bubble
   field's exactly: the layout should flip at the same width the bubbles
   disappear, not before or after. */
@media (max-width: 1299.98px) {
    .neo-hero-centered .neo-hero-text {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .neo-hero-centered .hero-subtitle-lead {
        margin: 20px auto 12px;
    }

    .neo-hero-centered .hero-subtitle-clients {
        margin: 0 auto 32px;
    }

    /* .hero-buttons is a flex row — text-align doesn't move it. */
    .neo-hero-centered .hero-buttons {
        justify-content: center;
    }
}

/* .hero-buttons carries a global `margin-bottom: 50px` from style.css (used
   by other pages), which was landing squarely in the dead zone under the
   hero CTAs. Zero it out here only, scoped to this hero.

   The gap between the CTA buttons and "SELECTED WORK" was 264px, stacked
   from four separate sources: this 50px button margin + 64px .neo-hero-text
   padding-bottom + 60px .hero padding-bottom + 90px .neo-section padding-top
   on #projects. Measured directly rather than guessed — an earlier attempt
   blamed the bubble field's align-self:stretch, but hiding the field left
   the height completely unchanged, so that was never it. */
.neo-hero-centered .hero-buttons {
    margin-bottom: 0;
}

/* .hero's own bottom padding (120px 0 60px in style.css) and the Projects
   section's 90px .neo-section top padding were the two largest remaining
   contributors to the 264px gap. Trimmed here, scoped to this hero and to
   the section immediately following it, so the rest of the site's section
   rhythm is untouched. */
.neo-hero-centered {
    padding-bottom: 16px;
    /* style.css sets `overflow: hidden` on .hero (kept for other pages).
       Here it was slicing the bottom bubble clean off at the hero's edge —
       the bubble field intentionally extends past the hero's bottom into
       the Projects section, so this hero must not clip. */
    overflow: visible;
}

/* The next section is position:relative with an opaque background and comes
   later in the DOM, so it painted OVER the overhanging bubble even once the
   hero stopped clipping. Drop it below the bubble field's stacking level;
   its own contents stay above their own background as normal. */
.neo-hero-centered + .neo-section {
    padding-top: 40px;
    z-index: 0;
}

/* Floating skill bubbles — fill the open space beside the hero copy on wide
   screens. Laid out with flexbox, not hand-computed absolute-position math
   against an assumed container width: several rounds of `right: X%` /
   fixed-px / clamp() approaches all either overlapped the text or spilled
   past the container at some width in the 1100–1500px range, because they
   assumed a container width that didn't hold in every environment this
   was tested in. Flexbox has the browser itself compute the split — the
   text takes its own 760px, the bubble strip gets `flex: 1` of whatever
   is left, and the two can never occupy the same space by construction.
   Hidden below 1300px, where .container hasn't yet reached its 1200px cap
   and there usually isn't a meaningful gap left over once the text takes
   its 760px. */
.neo-hero-centered > .container {
    display: flex;
    align-items: center;
    gap: 24px;
    /* .hero is itself display:flex (style.css), which makes this .container a
       flex ITEM — and a flex item shrink-wraps to its content instead of
       filling to its own max-width. That left the hero container 1044px wide
       against the Projects section's full 1200px, so the hero headline sat
       78px further right than "Projects & Case Studies" below it. width:100%
       makes it claim the full 1200px like every other section's container, so
       both columns share one left edge. */
    width: 100%;
}

.neo-bubble-field {
    display: none;
}

@media (min-width: 1300px) {
    .neo-bubble-field {
        display: block;
        /* Stays a FLEX ITEM so flexbox keeps computing the text/field split
           (an absolute-positioned version let the text expand to its full
           760px, leaving the field only its 220px min-width and shifting
           every bubble ~76px left). But `height: 0` means it contributes
           nothing to the row's height — as a 601px-tall flex sibling it was
           the tallest item in the row and propped the hero open to 601px
           even though the text only needs ~495px, re-opening the very gap
           under the CTA buttons the spacing trim was meant to close
           (measured: hiding the field dropped the hero 737px → 631px).
           The bubbles are absolutely positioned against this box and are
           free to overflow it (no overflow:hidden here), so a zero-height
           box still positions them correctly. */
        position: relative;
        flex: 1 1 auto;
        min-width: 220px;
        align-self: flex-start;
        height: 0;
        /* No overflow:hidden — bubbles are allowed to spill past this box's
           own edges; only their CENTER point has to stay inside it (each
           bubble's `left`/`top` below is deliberately kept clear of 0%/100%
           so its center never reaches the boundary, let alone its edge).
           overflow:hidden was clipping bubbles outright, which is worse
           than a bit of harmless spill past a box nothing else visually
           reacts to. */
        pointer-events: none;
        /* Above the following section (which is pushed to z-index:0), so the
           part of the field that overhangs the hero's bottom edge paints on
           top of the Projects section instead of being covered by its
           opaque background. */
        z-index: 2;
    }
}

.neo-bubble {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 18px 22px;
    border-radius: 999px;
    border: var(--neo-border-width) solid var(--neo-border);
    box-shadow: var(--neo-shadow-sm);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 14px;
    line-height: 1.25;
    text-decoration: none;
    pointer-events: auto;
    /* Movement is driven entirely by JS (see js/script.js
       initFloatingBubbles), not a CSS keyframe: each bubble gets its own
       randomized path, speed, and pause, re-rolled every cycle, so nothing
       ever visibly repeats.

       transition-duration is split into its own property and driven by a
       custom property (--neo-bubble-drift-active) rather than being folded
       into a literal inline `transition` value. The hover rule below
       overrides that property to a fast value with !important while
       :hover/:focus-visible matches. On its own this still isn't quite
       enough for hover-OUT, since the moment :hover stops matching, the
       cascade falls back to whatever inline value JS last set — which is
       usually a slow drift duration. JS's `mouseleave`/`blur` listeners
       (see initFloatingBubbles) close that gap by explicitly writing a
       fast value to this same property right as hover ends, so the
       shrink-back is fast, and the NEXT drift call restores normal speed.
       Earlier versions set transition-duration as a literal inline value
       instead of through this property — nothing in CSS could override
       that on the way out, so hover-out silently reused whatever slow
       duration the drift had last set, for as long as several seconds. */
    --neo-bubble-drift-active: 0.25s;
    transition-property: transform, box-shadow;
    transition-duration: var(--neo-bubble-drift-active), 0.2s;
    transition-timing-function: ease-in-out, ease;
}

.neo-bubble:hover,
.neo-bubble:focus-visible {
    transform: translateY(-6px) scale(1.05) !important;
    --neo-bubble-drift-active: 0.2s !important;
    box-shadow: var(--neo-shadow);
    outline: none;
}

/* One-time "breathing" pulse on load: every bubble grows and settles back
   before the randomized drift takes over, so the cluster visibly announces
   itself instead of just appearing static and immediately drifting.
   `forwards` + ending at transform:none hands off cleanly to the drift
   loop's own inline transform once initFloatingBubbles takes over a
   moment later. Skipped under prefers-reduced-motion, same as the drift. */
.neo-bubble.neo-bubble-breathe {
    animation: neo-bubble-breathe-in 1.1s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes neo-bubble-breathe-in {
    0%   { transform: scale(0.85); opacity: 0; }
    55%  { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .neo-bubble.neo-bubble-breathe {
        animation: none;
    }
}

/* The 3 core site accents (teal / yellow / coral), rotated across the 6
   bubbles — same palette used everywhere else on the site (project cards,
   case-study pills, blog tags), not a separate one-off palette for this
   component.

   Positioned against .neo-bubble-field (a `flex: 1 1 auto` item — width
   varies with viewport, always the real remaining row space). `left` is
   expressed as `calc(X% - half-the-bubble's-own-width)` so X% lands the
   BUBBLE'S CENTER at that point, not its top-left corner — per explicit
   design constraint: a bubble's edge is allowed to spill past the field's
   own boundary (the field no longer clips — see .neo-bubble-field above),
   but its center must never cross the field's right edge. Centers here
   stay within roughly 15–82% horizontally and 12–85% vertically, with
   enough gap between every pair that no two bubbles touch even at their
   largest (150px) size — a 2-column, 3-row-ish scatter rather than the
   earlier layout, where two bubbles landed at nearly the same spot. */
/* `top` is in PIXELS, not percentages. The field is now a zero-height flex
   item (see .neo-bubble-field above — it must not contribute to the hero's
   height), and a percentage top against a zero-height parent resolves to 0,
   which would stack all six bubbles at the very top. These px values are
   the exact offsets the percentages produced against the old 601px field,
   so the bubbles render in identical positions. `left` stays in % because
   the field's WIDTH is still real (flexbox computes it). */
.neo-bubble-1 { top: 24px;   left: calc(78% - 75px);  width: 150px; height: 150px; background: var(--neo-accent);   color: var(--dark-bg); }
.neo-bubble-2 { top: 72px;   left: calc(15% - 61px);  width: 122px; height: 122px; background: var(--neo-accent-2); color: var(--dark-bg); }
.neo-bubble-3 { top: 276px;  left: calc(82% - 68px);  width: 136px; height: 136px; background: var(--neo-accent-3); color: #ffffff; }
.neo-bubble-4 { top: 445px;  left: calc(22% - 58px);  width: 116px; height: 116px; background: var(--neo-accent-2); color: var(--dark-bg); }
.neo-bubble-5 { top: 228px;  left: calc(12% - 52px);  width: 104px; height: 104px; background: var(--neo-accent-3); color: #ffffff; }
.neo-bubble-6 { top: 529px;  left: calc(62% - 56px);  width: 112px; height: 112px; background: var(--neo-accent);   color: var(--dark-bg); }

/* Hero typewriter effect (see js/script.js .neo-typewriter init). The
   cursor is a CSS pseudo-element so no JS is needed for the blink itself. */
.neo-typewriter-cursor::after {
    content: '|';
    display: inline-block;
    margin-left: 2px;
    animation: neo-cursor-blink 0.9s step-end infinite;
}

.neo-typewriter-cursor.done::after {
    animation: neo-cursor-blink 0.9s step-end infinite;
}

@keyframes neo-cursor-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .neo-typewriter-cursor::after {
        animation: none;
    }
}

/* About section: photo paired with the founder's story, placed after the
   Projects grid so proof (case studies) lands before personality. */
.neo-about-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 56px;
    align-items: center;
}

.neo-about-photo-wrap {
    position: relative;
    justify-self: center;
    width: 100%;
    max-width: 320px;
    aspect-ratio: 1 / 1.05;
}

.neo-about-text p {
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.82);
    margin-bottom: 16px;
    max-width: 640px;
}

@media (max-width: 900px) {
    .neo-about-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .neo-about-photo-wrap { max-width: 260px; margin: 0 auto 8px; }
    .neo-about-text p { margin-left: auto; margin-right: auto; }
    .neo-about-text .hero-buttons { justify-content: center; }
}

.neo-hero-photo-wrap {
    position: relative;
    justify-self: center;
    width: 100%;
    max-width: 360px;
    aspect-ratio: 1 / 1.05;
}

/* The colored blob sits behind, fully clipped (nothing needs to escape
   it) so its border/shadow stay crisp. */
.neo-hero-shape-bg {
    position: absolute;
    inset: 0;
    background: var(--neo-accent-2);
    border: var(--neo-border-width) solid var(--neo-border);
    border-radius: 46% 54% 55% 45% / 48% 46% 54% 52%;
    transform: rotate(-4deg);
    box-shadow: var(--neo-shadow-lg);
    overflow: hidden;
}

/* Photo container: same width/bottom edge and exact same (pixel-based,
   not percentage) corner radii as the shape behind it, but extended
   upward so the head can rise above the shape's top edge while the
   bottom/side curve still matches the shape exactly. */
.neo-hero-photo-emerge {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: -55%;
    overflow: hidden;
    /* Only the bottom corners are rounded: the top of this box is far
       above the shape and never visible, and leaving the top radii at 0
       stops the browser scaling every radius down proportionally (which
       flattened the bottom curve and broke the cut). */
    border-radius: 0 0 198px 162px / 0 0 204px 197px;
    /* Rotate about the SHAPE's centre, not this taller box's own centre,
       so both rotate around the same pivot and their bottom/side edges
       stay perfectly aligned. */
    transform-origin: 50% calc(100% - 189px);
    transform: rotate(-4deg);
}

.neo-hero-photo-img {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 155%;
    width: 100%;
    object-fit: contain;
    object-position: bottom center;
    filter: grayscale(1) contrast(1.08);
    /* Counter-rotate about the same pivot as the container so the photo
       sits upright without shifting inside the clip. */
    transform-origin: 50% calc(100% - 189px);
    transform: rotate(4deg) scale(1.05);
}

.neo-hero-badge {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background: var(--neo-surface);
    border: 3px solid var(--neo-border);
    border-radius: 50%;
    box-shadow: var(--neo-shadow-sm);
    font-size: 20px;
    color: var(--neo-accent);
}

.neo-hero-badge-1 {
    top: 4%;
    left: -6%;
    color: var(--neo-accent-2);
    transform: rotate(-8deg);
}

.neo-hero-badge-2 {
    bottom: 6%;
    right: -8%;
    color: var(--neo-accent);
    transform: rotate(10deg);
}

.neo-hero-badge-pill {
    position: absolute;
    top: 10%;
    right: -14%;
    background: var(--dark-bg);
    color: var(--text-light);
    border: 2px solid var(--neo-border);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 700;
    box-shadow: var(--neo-shadow-sm);
    white-space: nowrap;
}

/* The old two-column photo hero (.neo-hero-grid / .neo-hero-photo-wrap) was
   removed from index.html when the founder photo moved out of the hero and
   into the About section — this mobile-reorder block was dead weight left
   behind. Worse than harmless: its `.neo-hero-text { order: 2; }` was a
   real, live bug once .neo-hero-text became a flex child of the new
   .container row (for the bubble layout) — it silently reordered the text
   to render AFTER the bubble field below 900px, confirmed via
   getBoundingClientRect (text and bubbles swapped sides unexpectedly).
   .neo-hero-badge-pill below is still used (About section photo), so that
   part is kept, just detached from the dead .neo-hero-grid selectors. */
@media (max-width: 900px) {
    .neo-hero-badge-pill { top: -4%; right: -14%; }
}

/* On narrow phones the -14% offset pushes the pill off-screen, so pin it
   to a fixed inset from the viewport edge instead. */
@media (max-width: 360px) {
    .neo-hero-badge-pill { right: 0; }
}

/* ===================================
   Partners section override
   =================================== */
.partner-card {
    background: var(--neo-surface);
    border: var(--neo-border-width) solid var(--neo-border);
    border-radius: var(--neo-radius);
    box-shadow: var(--neo-shadow);
    backdrop-filter: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.partner-card::before {
    display: none;
}

.featured-partner {
    box-shadow: var(--neo-shadow);
}

.partner-card:hover {
    transform: translate(-4px, -4px);
    box-shadow: 12px 12px 0 0 var(--neo-shadow-color);
    border-color: var(--neo-border);
}

.partner-card-header {
    border-bottom: 2px solid rgba(255, 255, 255, 0.15);
}

.partner-logo-text {
    letter-spacing: 1px;
}

.partner-badge {
    background: var(--neo-accent-2);
    border: 2px solid var(--neo-border);
    color: var(--dark-bg);
    border-radius: 6px;
    font-weight: 700;
}

.partner-url {
    color: var(--neo-accent);
    border-bottom: 2px solid var(--neo-accent);
    font-weight: 600;
}

.partner-url:hover {
    color: var(--neo-accent-2);
    border-color: var(--neo-accent-2);
}

.partner-founder-icon {
    color: var(--neo-accent);
    opacity: 1;
}

.collab-tag {
    background: var(--neo-surface-alt);
    border: 2px solid var(--neo-border);
    border-radius: 6px;
}

.collab-tag:hover {
    background: var(--neo-accent);
    color: var(--dark-bg);
    border-color: var(--neo-border);
}

.partner-stats {
    border: 2px solid var(--neo-border);
    border-radius: 10px;
    gap: 2px;
    background: var(--neo-border);
}

.partner-stat {
    background: var(--neo-surface);
}

.partner-card-footer {
    border-top: 2px solid rgba(255, 255, 255, 0.15);
}

.partner-location i {
    color: var(--neo-accent-2);
}

.partner-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 14px;
    color: var(--dark-bg);
    background: var(--neo-accent);
    border: 2px solid var(--neo-border);
    border-radius: 8px;
    box-shadow: var(--neo-shadow-sm);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.partner-btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 0 var(--neo-shadow-color);
}

.partner-social-link {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--neo-surface-alt);
    border: 2px solid var(--neo-border);
    border-radius: 8px;
    color: var(--text-light);
    transition: transform 0.15s ease, background 0.15s ease;
}

.partner-social-link:hover {
    background: var(--neo-accent);
    color: var(--dark-bg);
    transform: translate(-2px, -2px);
}

/* ===================================
   Contact section override (msg card)
   =================================== */
.contact-icon {
    background: var(--neo-accent);
    border: var(--neo-border-width) solid var(--neo-border);
    border-radius: 10px;
    box-shadow: var(--neo-shadow-sm);
    color: var(--dark-bg);
}

.social-icon {
    background: var(--neo-accent-2);
    border: var(--neo-border-width) solid var(--neo-border);
    border-radius: 10px;
    color: var(--dark-bg);
    box-shadow: var(--neo-shadow-sm);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.social-icon:hover {
    background: var(--neo-accent);
    color: var(--dark-bg);
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 0 var(--neo-shadow-color);
}

.cal-book-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--dark-bg) !important;
    background: var(--neo-accent-2);
    border: 2px solid var(--neo-border);
    border-radius: 8px;
    box-shadow: var(--neo-shadow-sm);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cal-book-btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 0 var(--neo-shadow-color);
}

.contact-form-wrapper {
    background: var(--neo-surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: var(--neo-border-width) solid var(--neo-border);
    border-radius: var(--neo-radius);
    box-shadow: var(--neo-shadow-lg);
}

.form-group input,
.form-group select,
.form-group textarea {
    border: 2px solid var(--neo-border);
    border-radius: 8px;
    background: var(--neo-surface-alt);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--neo-accent);
    box-shadow: 3px 3px 0 0 var(--neo-shadow-color);
}

.form-group label {
    background: var(--neo-surface-alt);
}

.form-group input:focus ~ label,
.form-group select:focus ~ label,
.form-group textarea:focus ~ label,
.form-group input:not(:placeholder-shown) ~ label,
.form-group select:not([value=""]) ~ label,
.form-group textarea:not(:placeholder-shown) ~ label {
    color: var(--neo-accent);
    font-weight: 700;
}

.btn-submit {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--dark-bg);
    background: var(--neo-accent-2);
    border: var(--neo-border-width) solid var(--neo-border);
    border-radius: 8px;
    box-shadow: var(--neo-shadow-sm);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-submit:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 0 var(--neo-shadow-color);
}

/* ===================================
   Compact partner cards
   =================================== */
.partner-cards-grid-compact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 260px));
    justify-content: center;
    gap: 20px;
    max-width: 600px;
    margin: 0 auto;
}

.partner-card-compact {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    background: var(--neo-surface);
    border: var(--neo-border-width) solid var(--neo-border);
    border-radius: var(--neo-radius);
    box-shadow: var(--neo-shadow-sm);
    text-decoration: none;
    color: var(--text-light);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.partner-card-compact:hover {
    transform: translate(-3px, -3px);
    box-shadow: 8px 8px 0 0 var(--neo-shadow-color);
}

.partner-card-compact .partner-logo-text {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--text-light);
}

.partner-specialty {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.4;
    margin: 0;
}

.partner-card-compact .partner-location {
    font-size: 12px;
    color: var(--neo-accent-2);
    margin: 0;
}

/* ===================================
   Footer override
   =================================== */
.footer {
    border-top: var(--neo-border-width) solid var(--neo-border);
}

.logo-text {
    font-family: 'Raster Forge', var(--font-heading);
    letter-spacing: 1px;
}

.footer-logo .logo-text {
    font-size: 26px;
    color: var(--neo-accent);
}

.footer-links a:hover {
    color: var(--neo-accent);
    transform: translateX(4px);
}

.newsletter-form input {
    border: 2px solid var(--neo-border);
    border-radius: 8px;
    background: var(--neo-surface-alt);
}

.newsletter-form button {
    background: var(--neo-accent);
    border: 2px solid var(--neo-border);
    border-radius: 8px;
    color: var(--dark-bg);
    box-shadow: var(--neo-shadow-sm);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.newsletter-form button:hover {
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 0 var(--neo-shadow-color);
}

.footer-bottom-links a:hover {
    color: var(--neo-accent);
}

/* ===================================
   Blog listing
   =================================== */
.neo-blog-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 48px;
}

.neo-blog-filter-btn {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    padding: 9px 18px;
    background: var(--neo-surface-alt);
    color: var(--text-light);
    border: 2px solid var(--neo-border);
    border-radius: 999px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.neo-blog-filter-btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0 0 var(--neo-shadow-color);
}

.neo-blog-filter-btn.active {
    background: var(--neo-accent);
    color: var(--dark-bg);
    box-shadow: 4px 4px 0 0 var(--neo-shadow-color);
}

/* Capped at 3 columns: the card sizing and the featured card's
   "span 2" are designed around a 3-up rhythm, and auto-fit was
   producing 4 cramped columns on wide screens. */
.neo-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

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

.neo-blog-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--neo-surface);
    border: var(--neo-border-width) solid var(--neo-border);
    border-radius: var(--neo-radius);
    box-shadow: var(--neo-shadow);
    padding: 26px;
    text-decoration: none;
    color: var(--text-light);
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.neo-blog-card:hover,
.neo-blog-card:focus-visible {
    transform: translate(-4px, -4px);
    box-shadow: 12px 12px 0 0 var(--neo-shadow-color);
    outline: none;
}

.neo-blog-card:active {
    transform: translate(1px, 1px);
    box-shadow: 3px 3px 0 0 var(--neo-shadow-color);
}

.neo-blog-card.featured {
    grid-column: span 2;
}

.neo-blog-card-tag {
    display: inline-block;
    align-self: flex-start;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--dark-bg);
    background: var(--neo-accent);
    border: 2px solid var(--neo-border);
    border-radius: 6px;
    padding: 4px 10px;
    margin-bottom: 14px;
}

/* Rotate the tag pill through all three accents by card position — every
   card used the same yellow tag before. nth-of-type (not nth-child) so the
   rotation stays stable when the filter bar hides cards with display:none. */
.neo-blog-card:nth-of-type(3n+2) .neo-blog-card-tag { background: var(--neo-accent-2); }
.neo-blog-card:nth-of-type(3n+3) .neo-blog-card-tag { background: var(--neo-accent-3); color: #ffffff; }

.neo-blog-card-title {
    font-family: var(--font-heading);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 10px;
    color: var(--text-light);
}

.neo-blog-card.featured .neo-blog-card-title {
    font-size: 26px;
}

.neo-blog-card-desc {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.55;
    margin-bottom: 18px;
    flex-grow: 1;
}

.neo-blog-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 18px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
}

.neo-blog-card-meta span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.neo-blog-card-cta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 14px;
    color: var(--neo-accent);
}

.neo-blog-card-cta i {
    transition: transform 0.18s ease;
}

.neo-blog-card:hover .neo-blog-card-cta i {
    transform: translateX(4px);
}

/* ===================================
   Blog article prose
   =================================== */
.neo-article {
    max-width: 1400px;
    margin: 0 auto;
    padding: 60px 20px 80px;
}

/* Blog pages use a wider container than the rest of the site, so less
   space is wasted on the sides on large screens. */
.neo-wide > .container {
    max-width: 1400px;
}

.neo-article p {
    font-size: 17px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.82);
    margin-bottom: 22px;
}

.neo-article h2 {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 700;
    margin: 50px 0 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.neo-article h2 i {
    color: var(--neo-accent);
    font-size: 22px;
}

.neo-article h3 {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 700;
    color: var(--neo-accent-2);
    margin: 32px 0 14px;
}

/* Long articles with many h3 subsections (e.g. a numbered trends list) get
   the h3 color rotated through all three accents instead of a wall of
   identical yellow headings. */
.neo-article h3:nth-of-type(3n+2) { color: var(--neo-accent); }
.neo-article h3:nth-of-type(3n+3) { color: var(--neo-accent-3); }

.neo-lead {
    font-size: 20px !important;
    line-height: 1.7 !important;
    color: var(--text-light) !important;
    padding-bottom: 28px;
    border-bottom: var(--neo-border-width) solid var(--neo-border);
    margin-bottom: 36px !important;
}

.neo-pull-quote {
    background: var(--neo-surface);
    border: var(--neo-border-width) solid var(--neo-border);
    border-radius: var(--neo-radius);
    box-shadow: var(--neo-shadow-sm);
    padding: 22px 28px;
    margin: 36px 0;
}

.neo-pull-quote p {
    font-size: 19px !important;
    font-style: italic;
    color: var(--text-light) !important;
    margin: 0 !important;
}

.neo-principle-card {
    background: var(--neo-surface);
    border: var(--neo-border-width) solid var(--neo-border);
    border-radius: var(--neo-radius);
    box-shadow: var(--neo-shadow-sm);
    padding: 24px;
    margin: 18px 0;
    display: flex;
    gap: 20px;
    align-items: flex-start;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.neo-principle-card:hover {
    transform: translate(-3px, -3px);
    box-shadow: 8px 8px 0 0 var(--neo-shadow-color);
}

.neo-principle-num {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 18px;
    color: var(--dark-bg);
    background: var(--neo-accent);
    border: 2px solid var(--neo-border);
    border-radius: 8px;
}

.neo-principle-body h4 {
    color: var(--text-light);
    margin: 0 0 8px;
    font-size: 17px;
}

.neo-principle-body p {
    margin: 0 !important;
    font-size: 15px !important;
}

.neo-warning-box {
    background: var(--neo-surface);
    border: var(--neo-border-width) solid var(--neo-accent-2);
    border-radius: var(--neo-radius);
    box-shadow: var(--neo-shadow-sm);
    padding: 22px 26px;
    margin: 26px 0;
}

.neo-warning-box h4 {
    color: var(--neo-accent-2);
    margin: 0 0 10px;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.neo-warning-box p {
    margin: 0 !important;
    font-size: 15px !important;
}

.neo-highlight-box {
    background: var(--neo-surface);
    border: var(--neo-border-width) solid var(--neo-accent);
    border-radius: var(--neo-radius);
    box-shadow: var(--neo-shadow-sm);
    padding: 22px 26px;
    margin: 26px 0;
}

.neo-highlight-box h4 {
    color: var(--neo-accent);
    margin: 0 0 10px;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.neo-highlight-box p {
    margin: 0 !important;
    font-size: 15px !important;
}

.neo-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    margin: 28px 0;
}

.neo-info-card {
    background: var(--neo-surface);
    border: var(--neo-border-width) solid var(--neo-border);
    border-radius: var(--neo-radius);
    box-shadow: var(--neo-shadow-sm);
    padding: 22px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.neo-info-card:hover {
    transform: translate(-3px, -3px);
    box-shadow: 8px 8px 0 0 var(--neo-shadow-color);
}

.neo-info-card i {
    font-size: 22px;
    color: var(--neo-accent);
    margin-bottom: 10px;
    display: block;
}

.neo-info-card h4 {
    color: var(--neo-accent-2);
    margin: 0 0 8px;
    font-size: 15px;
}

.neo-info-card p {
    font-size: 14px !important;
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

.neo-info-card .stat-num { display:block; font-family: var(--font-heading); font-weight:700; font-size:22px; color: var(--neo-accent); margin-bottom: 6px; }
.neo-info-card .stat-label { display: block; font-size: 14px; color: rgba(255, 255, 255, 0.7); line-height: 1.5; }

/* Every 3rd info card picks up the coral accent (icon, heading, stat number)
   instead of the grid alternating only teal/yellow — red was missing from
   this component entirely. */
.neo-info-card:nth-of-type(3n) i,
.neo-info-card:nth-of-type(3n) .stat-num { color: var(--neo-accent-3); }
.neo-info-card:nth-of-type(3n) h4 { color: var(--neo-accent-3); }

.neo-cta-box {
    background: var(--neo-accent);
    border: var(--neo-border-width) solid var(--neo-border);
    border-radius: var(--neo-radius);
    box-shadow: var(--neo-shadow-lg);
    padding: 44px;
    text-align: center;
    margin: 56px 0;
}

.neo-cta-box h3 {
    font-family: var(--font-heading);
    font-size: 28px;
    color: var(--dark-bg);
    margin-bottom: 12px;
}

.neo-cta-box p {
    font-size: 16px !important;
    color: rgba(20, 25, 54, 0.85) !important;
    margin-bottom: 24px !important;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.neo-author-box {
    display: flex;
    gap: 22px;
    align-items: center;
    background: var(--neo-surface);
    border: var(--neo-border-width) solid var(--neo-border);
    border-radius: var(--neo-radius);
    box-shadow: var(--neo-shadow-sm);
    padding: 28px;
    margin: 48px 0;
}

.neo-author-box img {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    border: var(--neo-border-width) solid var(--neo-border);
    flex-shrink: 0;
    object-fit: cover;
}

.neo-author-box h4 {
    color: var(--text-light);
    margin: 0 0 4px;
    font-size: 17px;
}

.neo-author-box .role {
    color: var(--neo-accent);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    display: block;
}

.neo-author-box p {
    margin: 0 !important;
    font-size: 14px !important;
}

.neo-related-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-top: 14px;
}

.neo-rel-card {
    display: block;
    background: var(--neo-surface);
    border: var(--neo-border-width) solid var(--neo-border);
    border-radius: var(--neo-radius);
    box-shadow: var(--neo-shadow-sm);
    padding: 20px;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.neo-rel-card:hover {
    transform: translate(-3px, -3px);
    box-shadow: 8px 8px 0 0 var(--neo-shadow-color);
}

.neo-rel-card h4 {
    color: var(--text-light);
    margin: 0 0 8px;
    font-size: 15px;
    line-height: 1.4;
}

.neo-rel-card p {
    color: rgba(255, 255, 255, 0.55) !important;
    font-size: 13px !important;
    margin: 0 !important;
}

/* "Related Articles" cards were plain white-on-navy with no accent at
   all — give each a rotating top-border stripe instead of a heading-color
   change, since the title itself should stay readable white. */
.neo-rel-card { border-top: 4px solid var(--neo-accent); }
.neo-rel-card:nth-of-type(3n+2) { border-top-color: var(--neo-accent-2); }
.neo-rel-card:nth-of-type(3n+3) { border-top-color: var(--neo-accent-3); }

/* Numeric/badge variant for .neo-info-card grids (levels, stats) */
.neo-info-card .neo-info-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 16px;
    color: var(--dark-bg);
    background: var(--neo-accent-2);
    border: 2px solid var(--neo-border);
    border-radius: 8px;
    margin-bottom: 10px;
}

/* Tool comparison card (icon + name/tag header, verdict pill, meta footer) */
.neo-tool-card {
    background: var(--neo-surface);
    border: var(--neo-border-width) solid var(--neo-border);
    border-radius: var(--neo-radius);
    box-shadow: var(--neo-shadow-sm);
    padding: 24px;
    margin: 20px 0;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.neo-tool-card:hover {
    transform: translate(-3px, -3px);
    box-shadow: 8px 8px 0 0 var(--neo-shadow-color);
}

.neo-tool-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
    position: relative;
}

.neo-tool-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--dark-bg);
    background: var(--neo-accent);
    border: 2px solid var(--neo-border);
    border-radius: 8px;
}

.neo-tool-icon.yellow {
    background: var(--neo-accent-2);
}

.neo-tool-icon.coral {
    background: var(--accent-color);
}

.neo-tool-name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 16px;
    color: var(--text-light);
    margin: 0;
}

.neo-tool-tag {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: rgba(255, 255, 255, 0.6);
}

.neo-verdict {
    margin-left: auto;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    padding: 5px 12px;
    border: 2px solid var(--neo-border);
    border-radius: 999px;
    color: var(--dark-bg);
    background: var(--neo-accent-2);
    white-space: nowrap;
}

.neo-verdict.good {
    background: var(--neo-accent);
}

.neo-verdict.niche {
    background: var(--neo-surface-alt);
    color: var(--text-light);
}

.neo-tool-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 2px solid rgba(255, 255, 255, 0.1);
    font-size: 14px;
    color: rgba(255, 255, 255, 0.65);
}

/* Old vs. new comparison tag pair */
.neo-tag-old {
    display: inline-block;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    text-decoration: line-through;
    margin-right: 8px;
}

.neo-tag-new {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--dark-bg);
    background: var(--neo-accent);
    border: 2px solid var(--neo-border);
    border-radius: 6px;
    padding: 4px 10px;
}

.neo-impact-tag {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    padding: 5px 12px;
    border: 2px solid var(--neo-border);
    border-radius: 999px;
    color: var(--dark-bg);
    background: var(--neo-accent-2);
}

.neo-trend-block .neo-impact-tag {
    margin: 10px 0 16px;
}

/* Data table */
.neo-table-wrap {
    overflow-x: auto;
    margin: 28px 0;
    border: var(--neo-border-width) solid var(--neo-border);
    border-radius: var(--neo-radius);
    box-shadow: var(--neo-shadow-sm);
}

.neo-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--neo-surface);
}

.neo-table th {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    text-align: left;
    color: var(--dark-bg);
    background: var(--neo-accent);
    padding: 14px 18px;
    border-bottom: var(--neo-border-width) solid var(--neo-border);
}

.neo-table td {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.neo-table tr:last-child td {
    border-bottom: none;
}

.neo-table td.neo-table-highlight {
    font-weight: 700;
    color: var(--dark-bg);
    background: var(--neo-accent-2);
}

/* Code block */
.neo-code-block {
    background: #0a0e24;
    border: var(--neo-border-width) solid var(--neo-border);
    border-radius: var(--neo-radius);
    box-shadow: var(--neo-shadow-sm);
    padding: 20px 24px;
    margin: 28px 0;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
    overflow-x: auto;
    white-space: pre-wrap;
}

.neo-code-block .comment {
    color: rgba(255, 255, 255, 0.4);
}

/* Trend / labeled callout block */
.neo-trend-block {
    background: var(--neo-surface);
    border: var(--neo-border-width) solid var(--neo-border);
    border-radius: var(--neo-radius);
    box-shadow: var(--neo-shadow-sm);
    padding: 26px 28px;
    margin: 26px 0;
}

.neo-trend-num {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--neo-accent);
    margin-bottom: 10px;
}

/* Prompt before/after example */
.neo-prompt-label {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 8px;
}

.neo-prompt-example {
    background: var(--neo-surface);
    border: var(--neo-border-width) solid var(--neo-border);
    border-radius: var(--neo-radius);
    box-shadow: var(--neo-shadow-sm);
    padding: 18px 22px;
    margin: 0 0 26px;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.85);
    font-style: italic;
}

.neo-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.55);
}

.neo-breadcrumb a {
    color: var(--neo-accent);
    text-decoration: none;
    font-weight: 600;
}

.neo-breadcrumb a:hover {
    text-decoration: underline;
}

/* Every direct child of the article shares one column width so text and
   cards line up on the same left/right edges. Previously only body copy
   was constrained, leaving cards ~170px wider than the text beside them. */
.neo-article > * {
    max-width: 900px;
    margin-inline: auto;
}

/* Multi-column grids are the deliberate exception: they need the extra
   room to fit their tracks. */
.neo-article > .neo-info-grid,
.neo-article > .neo-related-row {
    max-width: 1100px;
}

.neo-article > .neo-prompt-label {
    display: block;
}

/* ===================================
   Responsive
   =================================== */
@media (max-width: 768px) {
    .neo-section { padding: 60px 0; }
    .neo-section-title { font-size: 30px; }
    .case-title { font-size: 32px; }
    .case-hero { padding: 120px 0 40px; }
    .neo-blog-grid { grid-template-columns: 1fr; }
    .neo-blog-card.featured { grid-column: span 1; }
    .neo-principle-card { flex-direction: column; }
    .neo-author-box { flex-direction: column; text-align: center; }
    .neo-tool-header { flex-wrap: wrap; }
    .neo-verdict { margin-left: 0; }
}