/**
 * Valkyrie – Premium Custom Theme
 * 
 * Design system built from three skills:
 * - Emil Kowalski's animation philosophy
 * - High-End Visual Design (Vanguard_UI_Architect)
 * - Redesign Existing Projects audit
 *
 * Palette: Rot / Schwarz / Weiß (red / black / white)
 * Vibe: Editorial Luxury meets Dark-Tech
 * Layout: Asymmetrical Bento + Z-Axis Depth
 */

/* ============================================================
   0. DESIGN TOKENS
   ============================================================ */

:root {
    /* Brand Palette – Rot / Schwarz / Weiß */
    --clr-black:     #0A0A0A;
    --clr-ink:       #111111;
    --clr-surface:   #161616;
    --clr-red:       #E21E26;
    --clr-red-dim:   rgba(226, 30, 38, 0.12);
    --clr-red-glow:  rgba(226, 30, 38, 0.25);
    --clr-white:     #FAFAFA;
    --clr-off-white: #F0EFED;
    --clr-muted:     rgba(250, 250, 250, 0.72);
    --clr-hairline:  rgba(250, 250, 250, 0.08);

    /* Easing Curves – never use linear/ease-in-out (Emil Kowalski) */
    --ease-out:      cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out:   cubic-bezier(0.77, 0, 0.175, 1);
    --ease-drawer:   cubic-bezier(0.32, 0.72, 0, 1);
    --ease-snap:     cubic-bezier(0.16, 1, 0.3, 1);

    /* Durations (Emil Kowalski duration table) */
    --dur-press:     120ms;
    --dur-hover:     160ms;
    --dur-popover:   180ms;
    --dur-modal:     320ms;
    --dur-reveal:    600ms;

    /* GPU-safe transitions (transform + opacity ONLY) */
    --t-hover:       transform var(--dur-hover) var(--ease-out), opacity var(--dur-hover) var(--ease-out);
    --t-reveal:      transform var(--dur-reveal) var(--ease-out), opacity var(--dur-reveal) var(--ease-out);

    /* Shadows – tinted, never pure black */
    --shadow-card:   0 1px 2px rgba(0, 0, 0, 0.8), 0 4px 24px rgba(0, 0, 0, 0.4);
    --shadow-lift:   0 0 0 1px rgba(226, 30, 38, 0.3), 0 8px 40px rgba(226, 30, 38, 0.15), 0 20px 60px rgba(0, 0, 0, 0.6);
    --shadow-glow:   0 0 60px rgba(226, 30, 38, 0.12);

    /* Radius */
    --r-outer:       28px;
    --r-inner:       calc(var(--r-outer) - 6px);
    --r-pill:        9999px;

    /* Spacing scale – macro whitespace (min py-24 as per skill) */
    --space-section: clamp(4.5rem, 6.5vw, 6.5rem);
    --space-hero:    clamp(8rem, 14vw, 14rem);
    --space-gap:     2rem;
    --container:     1280px;
    --content-wide:  1060px;
    --content:       760px;
}


/* ============================================================
   1. RESET & BASE
   ============================================================ */

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

body {
    background-color: var(--clr-black);
    color: var(--clr-white);
    font-family: var(--wp--preset--font-family--plus-jakarta-sans);
    line-height: 1.65;
    min-height: 100dvh; /* iOS Safari viewport fix */
    display: flex;
    flex-direction: column;
    /* Film-grain noise overlay via fixed pseudo-element (skill rule: never on scrolling container) */
}

/* Grain overlay – GPU safe, fixed */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 999;
    pointer-events: none;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 200px 200px;
}

main {
    flex: 1;
}

/* Remove WordPress' global block gap above the front-page hero. */
.home .wp-block-post-content {
    margin-block-start: 0;
}

.home .wp-block-post-content > * {
    margin-block-start: 0 !important;
}

/* Text quality */
p, li {
    max-width: 68ch;
    text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
    line-height: 1.08;
    letter-spacing: -0.02em;
}


/* ============================================================
   2. NAVIGATION – Floating Glass Pill (High-End Skill)
   ============================================================ */

/* WordPress admin-bar compatibility
   When logged in, WP adds 32px top space (46px on mobile) */
body.admin-bar .site-header-wrapper {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar .site-header-wrapper {
        top: 46px;
    }
}

/* Style WP admin bar to match dark theme */
#wpadminbar {
    background: var(--clr-ink) !important;
    border-bottom: 1px solid var(--clr-hairline) !important;
}

#wpadminbar .ab-item,
#wpadminbar .ab-top-menu > li > .ab-item {
    color: var(--clr-muted) !important;
}

#wpadminbar .ab-top-menu > li:hover > .ab-item,
#wpadminbar .ab-top-menu > li.hover > .ab-item {
    background: var(--clr-surface) !important;
    color: var(--clr-white) !important;
}

#wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon::before {
    color: var(--clr-red) !important;
}

.site-header-wrapper {
    background: transparent;
    padding: 1rem 1.5rem;
    position: fixed; /* Fixed position pulls the header out of flow so the hero goes underneath */
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    width: 100%;
    pointer-events: none; /* Clicks on transparent padding pass through to the hero beneath */
}

/* Floating pill container using backdrop-blur (ONLY on sticky element per skill rule) */
.site-header {
    background: rgba(10, 10, 10, 0.22) !important;
    backdrop-filter: blur(10px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(140%) !important;
    border: 1px solid rgba(250, 250, 250, 0.04) !important;
    border-radius: var(--r-pill) !important;
    padding: 0.45rem 1.25rem !important;
    max-width: var(--container) !important;
    margin: 0 auto !important;
    box-shadow: none !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    pointer-events: auto !important; /* Restore clicks on the actual navigation pill */
    transition:
        background-color 360ms var(--ease-out),
        border-color 360ms var(--ease-out),
        box-shadow 360ms var(--ease-out),
        backdrop-filter 360ms var(--ease-out);
}

.site-header[data-scroll-state="scrolled"] {
    background: rgba(10, 10, 10, 0.75) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-color: var(--clr-hairline) !important;
    box-shadow: 0 1px 0 var(--clr-hairline) inset, 0 4px 32px rgba(0,0,0,0.5) !important;
}

.site-header a {
    text-decoration: none;
    font-weight: 600;
    transition: color var(--dur-hover) var(--ease-out);
}

.site-header .wp-block-site-title {
    margin: 0;
}

.logo-group a {
    display: block;
    width: clamp(12rem, 18vw, 15rem);
    height: 3rem;
    overflow: hidden;
    background: url('../images/siegrist-logo.png') left center / contain no-repeat;
    font-size: 0;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--clr-white);
    filter: drop-shadow(0 2px 7px rgba(0, 0, 0, 0.75));
    transition:
        opacity var(--dur-hover) var(--ease-out),
        filter 360ms var(--ease-out);
}

.logo-group a:hover {
    opacity: 0.72;
}

/* Nav links */
.wp-block-navigation .wp-block-navigation-item a {
    color: var(--clr-white);
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.4rem 0.8rem;
    border-radius: var(--r-pill);
    transition: color var(--dur-hover) var(--ease-out),
                background-color var(--dur-hover) var(--ease-out),
                text-shadow 360ms var(--ease-out);
    text-shadow: 0 2px 7px rgba(0, 0, 0, 0.9);
}

.site-header[data-scroll-state="scrolled"] .logo-group a {
    filter: none;
}

.site-header[data-scroll-state="scrolled"] .wp-block-navigation .wp-block-navigation-item a {
    color: var(--clr-muted);
    text-shadow: none;
}

.wp-block-navigation .wp-block-navigation-item a:hover {
    color: var(--clr-white);
    background-color: var(--clr-hairline);
}


/* ============================================================
   3. FOOTER
   ============================================================ */

.site-footer {
    background: var(--clr-ink);
    color: var(--clr-muted);
    padding: clamp(2rem, 5vw, 4rem) 1.5rem;
    font-size: 0.85rem;
    border-top: 1px solid var(--clr-hairline);
}

.site-footer-pill {
    width: 100%;
    max-width: var(--container) !important;
    margin: 0 auto !important;
    padding: 0.65rem 0.8rem 0.65rem 1.25rem !important;
    border: 1px solid var(--clr-hairline);
    border-radius: var(--r-pill);
    background: rgba(250, 250, 250, 0.025);
    box-shadow: inset 0 1px 0 rgba(250, 250, 250, 0.025);
}

.footer-brand {
    gap: 0.8rem !important;
}

.footer-brand .wp-block-site-title {
    margin: 0;
}

.footer-brand .wp-block-site-title a {
    display: block;
    width: clamp(9rem, 13vw, 11rem);
    height: 2.4rem;
    overflow: hidden;
    background: url('../images/siegrist-logo.png') left center / contain no-repeat;
    font-size: 0;
}

.footer-year {
    padding-left: 0.8rem;
    border-left: 1px solid var(--clr-hairline);
    color: rgba(250, 250, 250, 0.38) !important;
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
}

.site-footer p {
    margin: 0;
}

.site-footer a {
    color: var(--clr-muted);
    text-decoration: none;
    transition:
        color var(--dur-hover) var(--ease-out),
        background-color var(--dur-hover) var(--ease-out);
}

.site-footer a:hover {
    color: var(--clr-white);
}

.footer-links {
    gap: 0.15rem !important;
}

.footer-links a {
    display: block;
    padding: 0.55rem 0.75rem;
    border-radius: var(--r-pill);
}

.footer-links a:hover {
    background: var(--clr-hairline);
}

.footer-email a {
    margin-left: 0.35rem;
    padding-inline: 1rem;
    border: 1px solid rgba(226, 30, 38, 0.36);
    color: var(--clr-red);
}

.footer-email a:hover {
    border-color: rgba(226, 30, 38, 0.7);
    background: rgba(226, 30, 38, 0.1);
    color: var(--clr-white);
}


/* ============================================================
   4. EYEBROW TAG (micro-badge)
   ============================================================ */

.micro-eyebrow {
    display: inline-flex !important;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--clr-red-dim);
    color: var(--clr-red);
    border: 1px solid var(--clr-red-glow);
    padding: 0.3rem 0.9rem !important;
    border-radius: var(--r-pill) !important;
    width: max-content;
    font-size: 10px !important;
    letter-spacing: 0.18em !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    margin-bottom: 1.75rem !important;
}

/* Centre alignment variant */
.has-text-align-center .micro-eyebrow,
.micro-eyebrow.has-text-align-center {
    margin-left: auto !important;
    margin-right: auto !important;
}


/* ============================================================
   5. ISLAND BUTTON – Button-in-Button (High-End Skill)
   ============================================================ */

/* All WP block buttons */
.wp-block-button__link {
    /* GPU-safe press feedback (Emil: 120ms) */
    transition: transform var(--dur-press) var(--ease-out),
                background-color var(--dur-hover) var(--ease-out) !important;
}

.wp-block-button__link:active {
    transform: scale(0.97) !important;
}

/* Pill island CTA */
.island-button a,
.island-button .wp-block-button__link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.875rem !important;
    padding: 0.75rem 1.25rem 0.75rem 1.75rem !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    letter-spacing: 0.02em !important;
    border-radius: var(--r-pill) !important;
}

/* Ghost variant: transparent pill with subtle border (replaces the former
   inline border/color styles so the saved block markup stays editor-valid) */
.island-button--ghost .wp-block-button__link {
    border: 1px solid rgba(250, 250, 250, 0.2) !important;
    background: transparent !important;
    color: #FAFAFA !important;
}

/* Improve contrast on primary red button (light text on red bg passes WCAG AA) */
.wp-block-button:not(.is-style-outline) .wp-block-button__link.has-accent-background-color,
.wp-block-button:not(.is-style-outline) a.wp-block-button__link.has-accent-background-color {
    color: var(--clr-white) !important;
}

/* Nested icon circle – the "button-in-button" from skill */
.button-arrow {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 2rem !important;
    height: 2rem !important;
    border-radius: 50% !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    transition: transform var(--dur-hover) var(--ease-out),
                background-color var(--dur-hover) var(--ease-out) !important;
    flex-shrink: 0;
}

.button-arrow img.emoji {
    display: none !important;
}

.button-arrow:has(img.emoji)::before {
    content: '↗';
    color: currentColor;
}

/* Magnetic hover: icon translates diagonally (Emil Kowalski + High-End Skill) */
@media (hover: hover) and (pointer: fine) {
    .island-button:hover .button-arrow {
        transform: translate(2px, -2px) scale(1.08);
        background-color: rgba(255, 255, 255, 0.25) !important;
    }
}


/* ============================================================
   6. DOUBLE-BEZEL CARD ARCHITECTURE (High-End Skill)
   Card = outer shell (ring + padding) → inner core (inset highlight)
   ============================================================ */

.bezel-shell {
    background-color: rgba(255, 255, 255, 0.025) !important;
    border: 1px solid var(--clr-hairline) !important;
    padding: 6px !important;
    border-radius: var(--r-outer) !important;
    transition: transform var(--dur-modal) var(--ease-drawer),
                box-shadow var(--dur-modal) var(--ease-drawer),
                border-color var(--dur-modal) var(--ease-out) !important;
}

.bezel-core {
    background-color: var(--clr-ink) !important;
    border-radius: var(--r-inner) !important;
    padding: 2.5rem 2rem !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

/* Hover: lift + red border glow */
@media (hover: hover) and (pointer: fine) {
    .bezel-shell:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow-lift) !important;
        border-color: rgba(226, 30, 38, 0.3) !important;
    }
}

/* Press feedback (Emil: scale 0.97-0.98) */
.bezel-shell:active {
    transform: scale(0.98) !important;
}


/* ============================================================
   7. HERO SECTION
   ============================================================ */

/* Full-viewport cover block */
.wp-block-cover.alignfull {
    min-height: 100dvh !important;
}

.hero-scroll-runway {
    position: relative;
    height: 120dvh;
    min-height: 120dvh;
}

.hero-scroll-stage {
    --hero-scroll-progress: 0;
    position: sticky !important;
    top: 0;
    display: block !important;
    height: 100dvh;
    min-height: 100dvh !important;
    padding: 0 !important;
    overflow: clip !important;
    isolation: isolate;
    background:
        radial-gradient(circle at 74% 42%, rgba(226, 30, 38, 0.18), transparent 34%),
        linear-gradient(135deg, var(--clr-black) 0%, var(--clr-ink) 48%, #050505 100%) !important;
}

.hero-scroll-stage::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(10, 10, 10, 0.34) 0%, rgba(10, 10, 10, 0.14) 42%, rgba(10, 10, 10, 0.02) 100%),
        radial-gradient(circle at 76% 50%, rgba(226, 30, 38, 0.08), transparent 38%);
}

.hero-scroll-stage .wp-block-cover__image-background {
    z-index: 0 !important;
    opacity: 0 !important;
}

.hero-scroll-video {
    position: sticky;
    top: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100dvh;
    margin-bottom: -100dvh;
    object-fit: cover;
    transform: scale(calc(1 + (var(--hero-scroll-progress) * 0.08)));
    transform-origin: center;
    filter:
        saturate(calc(1.04 - (var(--hero-scroll-progress) * 0.22)))
        contrast(calc(1.02 + (var(--hero-scroll-progress) * 0.08)))
        brightness(calc(1.04 - (var(--hero-scroll-progress) * 0.3)))
        blur(calc(var(--hero-scroll-progress) * 6px));
    will-change: transform, filter;
    pointer-events: none;
}

.hero-scroll-cue {
    position: absolute;
    left: 50%;
    bottom: clamp(1.25rem, 5vw, 2.25rem);
    z-index: 4;
    display: none;
    width: 3rem;
    height: 4rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--clr-white);
    transform: translateX(-50%);
    opacity: 0.86;
    cursor: pointer;
    transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
}

.hero-scroll-cue span {
    position: absolute;
    left: 50%;
    width: 1.05rem;
    height: 1.05rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateX(-50%) rotate(45deg);
    animation: heroScrollCue 1.35s var(--ease-out) infinite;
}

.hero-scroll-cue span:nth-child(1) {
    top: 0.5rem;
}

.hero-scroll-cue span:nth-child(2) {
    top: 1.25rem;
    animation-delay: 120ms;
}

.hero-scroll-cue span:nth-child(3) {
    top: 2rem;
    animation-delay: 240ms;
}

.hero-scroll-cue.is-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 0.75rem);
}

@keyframes heroScrollCue {
    0% {
        opacity: 0;
        transform: translate(-50%, -0.35rem) rotate(45deg);
    }

    35%,
    70% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translate(-50%, 0.45rem) rotate(45deg);
    }
}

.hero-scroll-stage .wp-block-cover__background {
    z-index: 2 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.hero-scroll-stage .wp-block-cover__inner-container {
    position: sticky;
    top: 0;
    z-index: 3 !important;
    display: flex;
    align-items: center;
    height: 100dvh;
    transform: translate3d(0, calc(var(--hero-scroll-progress) * -15vh), 0)
        scale(calc(1 + (var(--hero-scroll-progress) * 0.08)));
    opacity: calc(1 - (var(--hero-scroll-progress) * 0.45));
    transform-origin: center;
    will-change: transform, opacity;
}

.hero-scroll-stage .wp-block-cover__inner-container > .wp-block-group {
    transform: translate3d(0, clamp(2.5rem, 6dvh, 5rem), 0);
}

.hero-scroll-portraits {
    position: sticky;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 100dvh;
    margin-bottom: -100dvh;
    transform: scale(calc(1 + (var(--hero-scroll-progress) * 0.08)));
    transform-origin: center;
    filter:
        brightness(calc(1 - (var(--hero-scroll-progress) * 0.3)))
        blur(calc(var(--hero-scroll-progress) * 6px));
    pointer-events: none;
    will-change: transform, filter;
}

.hero-scroll-portraits::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 72% 46%, rgba(226, 30, 38, 0.06), transparent 44%);
    opacity: 0.46;
    pointer-events: none;
}

.hero-scroll-portrait {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(1.035);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    filter: saturate(1.04) contrast(1.02) brightness(1.06);
    transition: transform 220ms var(--ease-out);
    will-change: opacity, transform;
}

.hero-scroll-portrait.is-canvas-ready {
    opacity: 0 !important;
}

.hero-scroll-canvas {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    opacity: 0;
    filter: saturate(1.04) contrast(1.02) brightness(1.06);
    transition: opacity 120ms linear;
}

.hero-scroll-canvas.is-ready {
    opacity: 1;
}

.hero-scroll-portrait::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(10, 10, 10, 0.26) 0%, rgba(10, 10, 10, 0.08) 44%, rgba(10, 10, 10, 0) 100%),
        linear-gradient(180deg, rgba(10, 10, 10, 0.02) 0%, rgba(10, 10, 10, 0.18) 100%);
    pointer-events: none;
}

.hero-scroll-portrait.is-canvas-ready::after {
    display: none;
}

.hero-scroll-portrait.is-active {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

/* Hero inner layout */
.hero-inner {
    max-width: var(--content-wide);
    margin: 0 auto;
    padding: var(--space-hero) 2rem;
}

/* Large display headline */
.hero-headline {
    font-size: clamp(3rem, 8vw, 7rem) !important;
    line-height: 0.96 !important;
    font-weight: 900 !important;
    letter-spacing: -0.04em !important;
    color: var(--clr-white) !important;
}

/* Hero sub-text */
.hero-subtext {
    max-width: 52ch;
    font-size: clamp(1rem, 2vw, 1.2rem);
    line-height: 1.7;
    color: var(--clr-muted);
}

/* Red accent line above headline */
.hero-accent-line {
    width: 48px;
    height: 3px;
    background: var(--clr-red);
    border-radius: 2px;
    margin-bottom: 2rem;
}

/* Hero buttons row */
.hero-buttons {
    margin-top: 3rem !important;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Scroll-reveal entry animation for hero elements */
.hero-reveal {
    opacity: 0;
    transform: translateY(28px);
    animation: heroReveal 800ms var(--ease-out) forwards;
}

.hero-reveal:nth-child(1) { animation-delay: 100ms; }
.hero-reveal:nth-child(2) { animation-delay: 200ms; }
.hero-reveal:nth-child(3) { animation-delay: 350ms; }
.hero-reveal:nth-child(4) { animation-delay: 500ms; }

@keyframes heroReveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ============================================================
   8. SECTION CONTAINERS (macro whitespace)
   ============================================================ */

.valkyrie-section {
    padding-top: var(--space-section);
    padding-bottom: var(--space-section);
    max-width: var(--container);
    margin-left: auto;
    margin-right: auto;
    padding-left: 2rem;
    padding-right: 2rem;
}

/* Dark section */
.section-dark {
    background-color: var(--clr-ink);
}

/* Light contrast section */
.section-light {
    background-color: var(--clr-white);
    color: var(--clr-black);
}

/* Section heading */
.section-heading {
    font-size: clamp(2rem, 5vw, 3.5rem) !important;
    font-weight: 900 !important;
    letter-spacing: -0.03em !important;
    line-height: 1.05 !important;
}

/* Section sub */
.section-sub {
    color: var(--clr-muted);
    font-size: 1.05rem;
    max-width: 56ch;
    line-height: 1.7;
    margin-top: 1rem;
}

/* Centered section intro */
.section-intro {
    text-align: left;
    max-width: 1280px !important;
    margin: 0 auto 5rem auto !important;
}

.section-intro .micro-eyebrow {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.section-intro .has-text-align-center {
    text-align: left !important;
}


/* ============================================================
   9. SERVICES – ASYMMETRIC BENTO GRID (replaces generic 3-col)
   ============================================================ */

.services-bento {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    margin-top: 3rem !important;
    max-width: 1280px !important;
    width: calc(100% - 4rem) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

@media (min-width: 768px) {
    .services-bento {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Service card inner styling - Compact Layout Overrides */
.services-bento .bezel-core {
    padding: 2rem 1.75rem !important;
    min-height: 320px !important;
    background-color: var(--clr-black) !important; /* Sunken OLED Black cards */
    border: 1px solid rgba(255, 255, 255, 0.035) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 0.75rem;
}

.services-bento .service-number {
    font-size: 0.75rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--clr-red) !important;
    margin-bottom: 0.5rem !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

.services-bento .service-title {
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    margin: 0 0 0.5rem 0 !important;
}

.services-bento .service-desc {
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
    color: var(--clr-muted) !important;
    margin: 0 !important;
}

/* Deliverables list inside service card */
.services-bento ul.deliverables-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 1rem 0 0 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
}

.services-bento ul.deliverables-list li {
    font-size: 0.85rem !important;
    color: var(--clr-muted) !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    line-height: 1.4 !important;
}

.services-bento ul.deliverables-list li::before {
    content: '—';
    color: var(--clr-red) !important;
    font-weight: 700 !important;
}

/* Number label inside service card */
.service-number {
    font-size: 5rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.05em;
    color: var(--clr-red);
    opacity: 0.25;
    margin-bottom: 1.5rem;
    font-variant-numeric: tabular-nums;
}

/* Service title */
.service-title {
    font-size: 1.4rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    color: var(--clr-white) !important;
    margin: 0 0 0.75rem 0 !important;
}

/* Service desc */
.service-desc {
    color: var(--clr-muted) !important;
    font-size: 0.95rem !important;
    line-height: 1.7 !important;
    margin: 0 !important;
}

/* ============================================================
   9b. ABOUT ME SECTION (Vanguard Editorial Layout)
   ============================================================ */

.about-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: start;
    margin-top: 3.5rem;
}

@media (min-width: 992px) {
    .about-grid {
        grid-template-columns: 7fr 5fr;
        gap: 4rem;
    }
}

.about-text-content p {
    font-size: clamp(1rem, 2.2vw, 1.15rem);
    line-height: 1.75;
    color: var(--clr-muted) !important;
    margin-bottom: 1.5rem;
}

.about-text-content .micro-eyebrow {
    color: var(--clr-red) !important;
}

.about-text-content p:first-of-type:not(.micro-eyebrow) {
    color: var(--clr-white) !important;
    font-size: clamp(1.2rem, 3vw, 1.4rem) !important;
    font-weight: 600 !important;
    line-height: 1.6 !important;
}

/* Flat style for About trust card (no bezel border/padding/glow to reduce visual card clutter) */
.about-trust-card.bezel-shell {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}

.about-trust-card.bezel-shell:hover {
    transform: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

.about-trust-card .bezel-core {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.about-trust-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.about-trust-item {
    border-bottom: 1px solid var(--clr-hairline);
    padding-bottom: 1.5rem;
}

.about-trust-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.about-trust-item .trust-num {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--clr-red);
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.about-trust-item .trust-title {
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    color: var(--clr-white) !important;
    margin: 0 0 0.5rem 0 !important;
    letter-spacing: -0.02em;
}

.about-trust-item .trust-desc {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--clr-muted) !important;
    margin: 0;
}


/* ============================================================
   10. PORTFOLIO MOSAIC
   ============================================================ */

.portfolio-section .wp-block-query {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.portfolio-mosaic {
    list-style: none !important;
    padding: 0 !important;
    margin: 3rem auto 0 auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    max-width: 1280px !important;
    width: calc(100% - 4rem) !important;
}

@media (min-width: 768px) {
    .portfolio-mosaic {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        align-items: stretch;
    }
}

/* Mosaic item shell (outer bezel) */
.mosaic-item-shell {
    padding: 6px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid var(--clr-hairline) !important;
    border-radius: var(--r-outer) !important;
    min-height: 450px !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    transition: transform var(--dur-modal) var(--ease-drawer),
                box-shadow var(--dur-modal) var(--ease-drawer),
                border-color var(--dur-modal) var(--ease-out) !important;
    overflow: hidden !important;
}

/* Mosaic item core (inner) */
.mosaic-item-core {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: var(--r-inner) !important;
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
    background-color: var(--clr-surface) !important;
    overflow: hidden !important;
    padding: 0 !important; /* Reset padding inherited from bezel-core to prevent squeezing content */
}

/* Hover: lift + glow */
@media (hover: hover) and (pointer: fine) {
    .mosaic-item-shell:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-lift) !important;
        border-color: rgba(226, 30, 38, 0.3) !important;
    }

    /* Image scale on hover */
    .mosaic-item-shell:hover .wp-block-post-featured-image img {
        transform: scale(1.06) !important;
    }
}

.mosaic-item-shell:active {
    transform: scale(0.98) !important;
}

/* Featured image – stacked at the top */
.mosaic-item-core .wp-block-post-featured-image {
    position: relative !important;
    width: 100% !important;
    height: 240px !important;
    margin: 0 !important;
    z-index: 1 !important;
    overflow: hidden !important;
    flex-shrink: 0;
}

.mosaic-item-core .wp-block-post-featured-image a,
.mosaic-item-core .wp-block-post-featured-image img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
}

.mosaic-item-core .wp-block-post-featured-image img {
    transition: transform var(--dur-reveal) var(--ease-out) !important;
}

/* Text content block below image */
.mosaic-item-content {
    position: relative !important;
    z-index: 2 !important;
    background: var(--clr-ink) !important;
    padding: 1.5rem !important; /* Increase padding for a more generous, premium readability */
    width: 100% !important;
    height: auto !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    border-top: 1px solid var(--clr-hairline) !important;
    box-sizing: border-box !important;
}

.mosaic-item-content h3 {
    margin: 0 0 0.5rem 0 !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.3 !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
}

.mosaic-item-content h3 a {
    color: var(--clr-white) !important;
    text-decoration: none !important;
    transition: color var(--dur-hover) var(--ease-out);
}

.mosaic-item-content h3 a:hover {
    color: var(--clr-red) !important;
}

.mosaic-item-content p {
    margin: 0 !important;
    color: var(--clr-muted) !important;
    font-size: 0.85rem !important;
    line-height: 1.55 !important;
}

.portfolio-section > .micro-eyebrow,
.portfolio-section > h2,
.portfolio-section > p {
    margin-left: max(2rem, calc((100% - 1280px) / 2)) !important;
    margin-right: auto !important;
    text-align: left !important;
}

.portfolio-section > p {
    max-width: 52ch;
}

.portfolio-mosaic > li {
    display: flex !important;
    flex-direction: column !important;
    opacity: 0;
    transform: translate3d(-7rem, 0, 0);
    transition:
        transform 760ms var(--ease-drawer) var(--portfolio-delay, 0ms),
        opacity 560ms var(--ease-out) var(--portfolio-delay, 0ms);
}

.portfolio-mosaic > li.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.portfolio-mosaic > li.portfolio-is-hidden {
    display: none !important;
}

.portfolio-more-wrap {
    display: flex;
    justify-content: center;
    margin-top: 3rem;
}

.portfolio-more-button {
    appearance: none;
    min-height: 52px;
    padding: 0.85rem 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--clr-white);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition:
        background-color var(--dur-hover) var(--ease-out),
        border-color var(--dur-hover) var(--ease-out),
        transform var(--dur-hover) var(--ease-out);
}

.portfolio-more-button::after {
    content: '↓';
    display: inline-block;
    margin-left: 0.75rem;
    color: var(--clr-red);
}

.portfolio-more-button:hover {
    border-color: rgba(226, 30, 38, 0.55);
    background: rgba(226, 30, 38, 0.1);
    transform: translateY(-2px);
}

.portfolio-more-button:focus-visible {
    outline: 2px solid var(--clr-red);
    outline-offset: 4px;
}

.portfolio-more-wrap.is-complete {
    opacity: 0;
    transform: translateY(0.5rem);
    transition:
        opacity 240ms var(--ease-out),
        transform 240ms var(--ease-out);
}


/* ============================================================
   11. CONTACT SECTION
   ============================================================ */

/* Contact section uses the full dark background with red accent */
.contact-section {
    position: relative;
    overflow: hidden;
}

/* Red radial ambient light (design depth) */
.contact-section::before {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(226, 30, 38, 0.12) 0%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* Large contact headline */
.contact-headline {
    font-size: clamp(2.5rem, 6vw, 5rem) !important;
    font-weight: 900 !important;
    letter-spacing: -0.04em !important;
    line-height: 1 !important;
    color: var(--clr-white) !important;
    text-wrap: balance !important;
}

.valkyrie-form-container {
    position: relative;
    z-index: 1;
    margin-top: 2.75rem;
}

.valkyrie-contact-form,
.form-alert {
    border: 1px solid rgba(250, 250, 250, 0.14);
    border-radius: 24px;
    background:
        linear-gradient(145deg, rgba(250, 250, 250, 0.07), rgba(250, 250, 250, 0.015) 45%),
        rgba(10, 10, 10, 0.78);
    box-shadow:
        0 28px 80px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(250, 250, 250, 0.06);
    backdrop-filter: blur(18px);
}

.valkyrie-contact-form {
    display: grid;
    gap: 1.5rem;
    padding: clamp(1.25rem, 4vw, 2.25rem);
}

.form-topline {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(250, 250, 250, 0.1);
    color: rgba(250, 250, 250, 0.54);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.form-topline span:first-child {
    color: var(--clr-red);
}

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

.form-group {
    display: grid;
    gap: 0.55rem;
}

.form-group label {
    color: var(--clr-white);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.form-group input,
.form-group textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(250, 250, 250, 0.13);
    border-radius: 14px;
    background: rgba(250, 250, 250, 0.045);
    color: var(--clr-white);
    font: inherit;
    font-size: 1rem;
    line-height: 1.55;
    outline: none;
    transition:
        border-color var(--dur-hover) var(--ease-out),
        background-color var(--dur-hover) var(--ease-out),
        box-shadow var(--dur-hover) var(--ease-out);
}

.form-group input {
    min-height: 56px;
    padding: 0.85rem 1rem;
}

.form-group textarea {
    min-height: 168px;
    padding: 1rem;
    resize: vertical;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: rgba(250, 250, 250, 0.54);
}

.form-group input:hover,
.form-group textarea:hover {
    border-color: rgba(250, 250, 250, 0.28);
    background: rgba(250, 250, 250, 0.065);
}

.form-group input:focus,
.form-group input:focus-visible,
.form-group textarea:focus,
.form-group textarea:focus-visible {
    border-color: var(--clr-red) !important;
    background: rgba(250, 250, 250, 0.075) !important;
    box-shadow: 0 0 0 4px rgba(226, 30, 38, 0.2) !important;
}

.form-helper {
    margin: 0 !important;
    color: rgba(250, 250, 250, 0.48) !important;
    font-size: 0.76rem;
    line-height: 1.5;
}

.form-submit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 0.25rem;
}

.form-submit button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-width: 210px;
    min-height: 56px;
    border: 0;
    border-radius: 999px;
    background: var(--clr-red) !important;
    color: var(--clr-ink) !important;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 800;
    cursor: pointer;
}

.form-submit button .button-arrow {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: rgba(10, 10, 10, 0.12);
}

.form-submit > p {
    margin: 0 !important;
    color: rgba(250, 250, 250, 0.48) !important;
    font-size: 0.76rem;
}

.form-alert {
    padding: 1.25rem 1.5rem;
}

.form-alert p {
    margin: 0;
}

.form-success {
    border-color: rgba(92, 212, 143, 0.42);
}

.form-error {
    border-color: rgba(226, 30, 38, 0.55);
}


/* ============================================================
   12. SCROLL REVEAL ANIMATIONS (IntersectionObserver)
   ============================================================ */

/* Initial hidden state – elements start slightly down and invisible */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: var(--t-reveal);
}

/* When visible class is applied by JS */
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger children (Emil Kowalski: 30-80ms between items) */
.stagger-children > * {
    opacity: 0;
    transform: translateY(40px) scale(0.96);
    transition: transform var(--dur-reveal) var(--ease-out),
                opacity var(--dur-reveal) var(--ease-out);
}

.stagger-children.is-visible > *:nth-child(1) { transition-delay: 0ms;   opacity: 1; transform: none; }
.stagger-children.is-visible > *:nth-child(2) { transition-delay: 80ms;  opacity: 1; transform: none; }
.stagger-children.is-visible > *:nth-child(3) { transition-delay: 160ms; opacity: 1; transform: none; }
.stagger-children.is-visible > *:nth-child(4) { transition-delay: 240ms; opacity: 1; transform: none; }
.stagger-children.is-visible > *:nth-child(5) { transition-delay: 320ms; opacity: 1; transform: none; }
.stagger-children.is-visible > *:nth-child(6) { transition-delay: 400ms; opacity: 1; transform: none; }
.stagger-children.is-visible > *:nth-child(7) { transition-delay: 480ms; opacity: 1; transform: none; }
.stagger-children.is-visible > *:nth-child(8) { transition-delay: 560ms; opacity: 1; transform: none; }


/* ============================================================
   13. SINGLE PROJECT PAGE
   ============================================================ */

.single-project-main {
    max-width: 1280px;
    margin: 0 auto;
    padding: clamp(9rem, 12vw, 11rem) 2rem 5rem;
}

body.admin-bar .single-project-main {
    padding-top: clamp(12rem, 15vw, 14rem);
}

.single-project-hero {
    padding-top: clamp(1.5rem, 4vw, 3rem);
    border-top: 1px solid rgba(250, 250, 250, 0.16);
}

.single-project-hero > *,
.single-project-story,
.single-project-next-step {
    width: 100%;
    max-width: none !important;
}

.single-project-eyebrow,
.single-project-summary-label,
.single-project-media-caption {
    color: var(--clr-red) !important;
    font-size: 0.68rem !important;
    font-weight: 800;
    letter-spacing: 0.18em;
    line-height: 1.5 !important;
    text-transform: uppercase;
}

.single-project-intro {
    align-items: start;
    grid-template-columns: minmax(0, 1.25fr) minmax(20rem, 0.75fr) !important;
    gap: clamp(3rem, 8vw, 8rem);
    margin-top: clamp(2.5rem, 6vw, 5rem) !important;
    margin-bottom: clamp(3.5rem, 7vw, 6rem) !important;
}

.single-project-main .wp-block-post-title {
    max-width: 11ch;
    font-size: clamp(4.5rem, 7vw, 6.5rem) !important;
    font-weight: 900 !important;
    letter-spacing: -0.065em !important;
    line-height: 0.92 !important;
    color: var(--clr-white) !important;
    margin: 0 !important;
}

.single-project-summary {
    align-self: end;
    max-width: 34rem;
    margin: 0 !important;
    padding-top: 0.5rem;
}

.single-project-summary-label {
    margin: 0 0 1rem !important;
}

.single-project-summary .wp-block-post-excerpt {
    margin: 0;
    color: rgba(250, 250, 250, 0.66);
    font-size: clamp(1rem, 1.25vw, 1.16rem);
    line-height: 1.7;
}

.single-project-summary .wp-block-post-excerpt__excerpt {
    margin: 0;
}

.single-project-summary-lead,
.single-project-summary-fact {
    display: block;
}

.single-project-summary-lead {
    margin-bottom: 1.5rem;
    color: rgba(250, 250, 250, 0.76);
}

.single-project-summary-fact {
    margin-top: 0.55rem;
    padding-top: 0.55rem;
    border-top: 1px solid rgba(250, 250, 250, 0.1);
}

.single-project-summary-fact strong {
    display: inline-block;
    min-width: 6.5rem;
    margin-right: 0.65rem;
    color: var(--clr-white);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.single-project-hero-actions {
    gap: 0.75rem !important;
    margin-top: 2rem !important;
}

.single-project-media {
    position: relative;
    margin-top: 0 !important;
    padding: clamp(0.4rem, 1vw, 0.75rem);
    border: 1px solid rgba(250, 250, 250, 0.14);
    border-radius: clamp(1rem, 2vw, 1.75rem);
    background: linear-gradient(145deg, rgba(250, 250, 250, 0.07), rgba(250, 250, 250, 0.015));
    box-shadow: 0 2rem 6rem rgba(0, 0, 0, 0.36);
}

.single-project-media .wp-block-post-featured-image {
    overflow: hidden;
    margin: 0 !important;
    border-radius: clamp(0.7rem, 1.6vw, 1.25rem);
    background: var(--clr-surface);
}

.single-project-media .wp-block-post-featured-image img {
    width: 100%;
    height: auto;
    min-height: clamp(18rem, 50vw, 46rem);
    display: block;
    object-fit: cover;
    object-position: top center;
}

.single-project-media-caption {
    margin: 0 !important;
    padding: 0.85rem 0.35rem 0.2rem;
    color: rgba(250, 250, 250, 0.42) !important;
}

.single-project-story {
    grid-template-columns: minmax(16rem, 0.72fr) minmax(0, 1.28fr) !important;
    gap: clamp(4rem, 10vw, 10rem);
    margin-top: clamp(6rem, 11vw, 10rem) !important;
    scroll-margin-top: 8rem;
}

.single-project-story-aside {
    align-self: start;
    margin: 0 !important;
    padding-top: 0.2rem;
}

.single-project-story-aside h2 {
    max-width: 11ch;
    margin: 1.25rem 0 1.5rem !important;
    font-size: clamp(2.2rem, 4vw, 3.75rem) !important;
    line-height: 1 !important;
    letter-spacing: -0.055em !important;
}

.single-project-story-aside > p:last-child {
    max-width: 28rem;
}

.single-project-main .wp-block-post-content {
    max-width: 100%;
    margin: 0 !important;
    color: var(--clr-muted);
    font-size: 1.05rem;
    line-height: 1.8;
}

.single-project-main .wp-block-post-content h2 {
    max-width: 18ch;
    margin: 3.5rem 0 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(250, 250, 250, 0.13);
    font-size: clamp(1.75rem, 3vw, 2.8rem);
    line-height: 1.05;
    letter-spacing: -0.045em;
}

.single-project-main .wp-block-post-content h2:first-of-type {
    margin-top: 0;
}

.single-project-main .project-kicker {
    color: var(--clr-red);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.single-project-main .wp-block-button__link {
    border-color: rgba(250, 250, 250, 0.3) !important;
    border-radius: 999px !important;
    color: var(--clr-white) !important;
}

.single-project-main .wp-block-button__link:hover {
    border-color: rgba(250, 250, 250, 0.62) !important;
}

.single-project-next-step {
    align-items: end;
    grid-template-columns: minmax(0, 1.2fr) minmax(20rem, 0.8fr) !important;
    gap: clamp(3rem, 8vw, 8rem);
    margin-top: clamp(7rem, 12vw, 11rem) !important;
    padding: clamp(2rem, 5vw, 4.5rem);
    border: 1px solid rgba(250, 250, 250, 0.14);
    border-radius: clamp(1rem, 2vw, 1.75rem);
    background: linear-gradient(145deg, rgba(226, 30, 38, 0.12), rgba(250, 250, 250, 0.025) 52%);
}

.single-project-next-step h2 {
    max-width: 11ch;
    margin: 1.25rem 0 0 !important;
    font-size: clamp(3rem, 6vw, 5.5rem) !important;
    line-height: 0.95 !important;
    letter-spacing: -0.06em !important;
}

.single-project-next-step-action {
    margin: 0 !important;
}

.single-project-next-step-action > p {
    max-width: 34rem;
    margin-bottom: 1.75rem;
}

.single-project-navigation {
    gap: 1rem;
    margin-top: 1rem !important;
    padding: 1.25rem 0 0;
    border-top: 1px solid rgba(250, 250, 250, 0.13);
}

.single-project-navigation a {
    color: rgba(250, 250, 250, 0.64);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-decoration: none;
    text-transform: uppercase;
}

.single-project-navigation a:hover {
    color: var(--clr-white);
}


/* ============================================================
   14. TYPOGRAPHY SCALE
   ============================================================ */

/* Display headlines */
.wp-block-heading {
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--clr-white);
}

/* Paragraphs */
.wp-block-paragraph {
    line-height: 1.7;
    color: var(--clr-muted);
}

/* Links */
a {
    color: var(--clr-red);
    transition: color var(--dur-hover) var(--ease-out);
}

a:hover {
    color: var(--clr-white);
}

[id] {
    scroll-margin-top: 8rem;
}


/* ============================================================
   15. FOCUS STATES (Accessibility – Emil + Redesign skill)
   ============================================================ */

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


/* ============================================================
   16. REDUCED MOTION (Emil Kowalski accessibility rule)
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .reveal,
    .hero-reveal,
    .stagger-children > *,
    .portfolio-fly-in,
    .hero-scroll-portrait {
        animation: none !important;
        transition: opacity 0.2s ease !important;
        transform: none !important;
    }

    .reveal,
    .hero-reveal,
    .stagger-children > *,
    .portfolio-fly-in {
        opacity: 1 !important;
    }
}


/* ============================================================
   17. RESPONSIVE OVERRIDES (mobile-first collapses)
   ============================================================ */

@media (max-width: 767px) {
    :root {
        --space-section: 5rem;
        --space-hero: 6rem;
    }

    /* Snap container is the scrolling element (html) only – body/.wp-site-blocks
       don't scroll, so declaring it there had no effect. */
    html {
        scroll-snap-type: y proximity;
        scroll-padding-top: 0;
    }

    .wp-site-blocks > .wp-block-cover.alignfull,
    .wp-site-blocks > .wp-block-group.alignfull:not(.site-footer) {
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .site-header-wrapper {
        padding: 0.5rem 0.75rem !important;
    }

    .site-header {
        padding: 0.25rem 0.75rem !important;
    }

    .site-header .wp-block-group {
        border-radius: 16px;
        padding: 0;
    }

    .wp-block-navigation__responsive-container-open,
    .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
        display: grid !important;
        place-items: center;
        width: 2.75rem;
        height: 2.75rem;
        padding: 0 !important;
        border: 1px solid rgba(250, 250, 250, 0.14) !important;
        border-radius: 50% !important;
        background: rgba(10, 10, 10, 0.38) !important;
        color: var(--clr-white) !important;
    }

    .site-header .wp-block-navigation__responsive-container:not(.is-menu-open),
    .site-header .wp-block-navigation__responsive-container-close {
        display: none !important;
    }

    .site-header .wp-block-navigation:has(.wp-block-navigation__responsive-container.is-menu-open) > .wp-block-navigation__responsive-container-open {
        display: none !important;
    }

    .site-header-wrapper:has(.wp-block-navigation__responsive-container.is-menu-open) {
        padding: 0 !important;
    }

    .site-header:has(.wp-block-navigation__responsive-container.is-menu-open) {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
    }

    .wp-block-navigation__responsive-container-open svg,
    .wp-block-navigation__responsive-container-close svg {
        width: 1.25rem;
        height: 1.25rem;
        fill: currentColor;
    }

    .site-header .wp-block-navigation__responsive-container.is-menu-open {
        position: fixed;
        inset: 0;
        z-index: 99999;
        width: 100vw !important;
        height: 100dvh !important;
        max-width: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        background:
            radial-gradient(circle at 75% 15%, rgba(226, 30, 38, 0.14), transparent 34%),
            var(--clr-ink) !important;
        color: var(--clr-white) !important;
        animation: menu-enter 320ms var(--ease-drawer) both;
    }

    body:has(.site-header .wp-block-navigation__responsive-container.is-menu-open) .site-header {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        transform: none !important;
    }

    .site-header .wp-block-navigation__responsive-close {
        width: 100%;
        height: 100%;
        max-width: none !important;
        padding: 1rem 1.25rem 1.5rem !important;
    }

    .site-header .wp-block-navigation__responsive-dialog {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
    }

    .site-header .wp-block-navigation__responsive-dialog::before {
        content: '';
        position: absolute;
        top: 1.2rem;
        left: 0;
        width: 9.5rem;
        height: 2.5rem;
        background: url('../images/siegrist-logo.png') left center / contain no-repeat;
    }

    .site-header .wp-block-navigation__responsive-container-close {
        position: absolute;
        top: 1rem;
        right: 1.25rem;
        margin: 0 !important;
    }

    .site-header .wp-block-navigation__responsive-container-content {
        display: flex !important;
        flex: 1;
        flex-direction: column;
        justify-content: center;
        padding: 5.5rem 0 1rem !important;
    }

    .site-header .wp-block-navigation__responsive-container-content::before {
        content: 'Navigation';
        margin-bottom: 1.5rem;
        color: var(--clr-red);
        font-size: 0.7rem;
        font-weight: 800;
        letter-spacing: 0.16em;
        text-transform: uppercase;
    }

    .site-header .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
        display: grid !important;
        width: 100%;
        gap: 0 !important;
        align-items: stretch !important;
    }

    .site-header .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
        width: 100%;
        border-top: 1px solid var(--clr-hairline);
    }

    .site-header .wp-block-navigation__responsive-container-content .wp-block-navigation-item:last-child {
        margin-top: 1.5rem;
        border-top: 0;
    }

    .site-header .wp-block-navigation__responsive-container-content .wp-block-navigation-item a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-height: 4.7rem;
        padding: 1rem 0 !important;
        border-radius: 0;
        background: transparent;
        color: var(--clr-white) !important;
        font-size: clamp(1.8rem, 9vw, 2.5rem);
        font-weight: 800;
        letter-spacing: -0.045em;
        line-height: 1;
        text-shadow: none;
    }

    .site-header .wp-block-navigation__responsive-container-content .wp-block-navigation-item a::after {
        content: '↗';
        color: rgba(250, 250, 250, 0.3);
        font-size: 1rem;
        font-weight: 500;
    }

    .site-header .wp-block-navigation__responsive-container-content .wp-block-navigation-item:last-child a {
        min-height: 3.75rem;
        padding: 0.75rem 1.1rem !important;
        border-radius: var(--r-pill);
        background: var(--clr-red);
        color: var(--clr-ink) !important;
        font-size: 1rem;
        letter-spacing: -0.01em;
    }

    .site-header .wp-block-navigation__responsive-container-content .wp-block-navigation-item:last-child a::after {
        display: grid;
        place-items: center;
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
        background: rgba(10, 10, 10, 0.12);
        color: var(--clr-ink);
    }

    .site-footer {
        padding: 1.5rem 0.75rem 2rem;
    }

    .site-footer-pill {
        align-items: stretch !important;
        gap: 1rem !important;
        padding: 1rem !important;
        border-radius: 24px;
    }

    .footer-brand {
        justify-content: space-between;
        width: 100%;
    }

    .footer-links {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 0.35rem !important;
    }

    .footer-links p,
    .footer-links a {
        width: 100%;
    }

    .footer-links a {
        box-sizing: border-box;
        border: 1px solid var(--clr-hairline);
        background: rgba(250, 250, 250, 0.02);
        text-align: center;
    }

    .footer-email {
        grid-column: 1 / -1;
    }

    .footer-email a {
        margin-left: 0;
        color: var(--clr-red);
    }

    .single-project-main {
        padding: 8.5rem 1rem 3rem;
    }

    .single-project-hero {
        padding-top: 1.5rem;
    }

    .single-project-intro {
        grid-template-columns: 1fr !important;
        gap: 2rem;
        margin-top: 2.25rem !important;
        margin-bottom: 2.75rem !important;
    }

    .single-project-main .wp-block-post-title {
        max-width: 10ch;
        font-size: clamp(2.7rem, 12vw, 4.25rem) !important;
        overflow-wrap: normal;
        word-break: normal;
    }

    .single-project-summary {
        max-width: none;
        padding-top: 0;
    }

    .single-project-hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .single-project-hero-actions .wp-block-button,
    .single-project-hero-actions .wp-block-button__link {
        width: 100%;
    }

    .single-project-media {
        padding: 0.35rem;
        border-radius: 1rem;
    }

    .single-project-media .wp-block-post-featured-image {
        border-radius: 0.7rem;
    }

    .single-project-media .wp-block-post-featured-image img {
        min-height: 0;
        aspect-ratio: 16 / 10;
        object-fit: cover;
        object-position: top center;
    }

    .single-project-media-caption {
        padding: 0.7rem 0.25rem 0.15rem;
    }

    .single-project-story {
        grid-template-columns: 1fr !important;
        gap: 3.5rem;
        margin-top: 5rem !important;
    }

    .single-project-story-aside {
        padding-bottom: 2rem;
        border-bottom: 1px solid rgba(250, 250, 250, 0.13);
    }

    .single-project-story-aside h2 {
        font-size: clamp(2.35rem, 11vw, 3.2rem) !important;
    }

    .single-project-main .wp-block-post-content h2 {
        margin-top: 3rem;
        font-size: clamp(1.9rem, 9vw, 2.5rem);
    }

    .single-project-next-step {
        grid-template-columns: 1fr !important;
        gap: 2.5rem;
        margin-top: 5rem !important;
        padding: 1.5rem;
        border-radius: 1rem;
    }

    .single-project-next-step h2 {
        font-size: clamp(2.7rem, 12vw, 4rem) !important;
    }

    .single-project-next-step .wp-block-buttons {
        align-items: stretch;
        flex-direction: column;
    }

    .single-project-next-step .wp-block-button,
    .single-project-next-step .wp-block-button__link {
        width: 100%;
    }

    .single-project-navigation {
        align-items: flex-start;
        flex-direction: column;
        margin-top: 0.75rem !important;
    }

    body.admin-bar .single-project-main {
        padding-top: 12rem;
    }

    .logo-group a {
        width: clamp(11.5rem, 42vw, 12.5rem);
        height: 3.25rem;
    }

    .hero-scroll-stage {
        height: 100dvh;
        min-height: 100dvh !important;
    }

    .hero-scroll-runway {
        height: 100dvh;
        min-height: 100dvh;
    }

    .hero-scroll-stage .wp-block-cover__inner-container {
        align-items: flex-end;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .hero-scroll-stage .wp-block-cover__inner-container > .wp-block-group {
        box-sizing: border-box;
        max-width: 100%;
        padding: 0 1.25rem clamp(5.25rem, 9dvh, 7rem) !important;
        transform: none !important;
    }

    .hero-scroll-stage .micro-eyebrow {
        max-width: calc(100vw - 2.5rem);
        overflow: hidden;
        border-radius: 999px;
        font-size: 0.68rem !important;
        letter-spacing: 0.28em !important;
        white-space: nowrap;
        text-overflow: clip;
    }

    .hero-headline {
        max-width: calc(100vw - 2.5rem);
        font-size: clamp(2.25rem, 10vw, 3.25rem) !important;
        line-height: 0.95 !important;
        letter-spacing: -0.05em !important;
        overflow-wrap: normal;
        margin-bottom: 0.5rem !important;
    }

    .hero-subtext {
        max-width: min(36ch, calc(100vw - 2.5rem));
        font-size: 0.9rem !important;
    }

    .services-bento .service-card--1,
    .services-bento .service-card--2,
    .services-bento .service-card--3,
    .services-bento .service-card--4,
    .services-bento .service-card--5,
    .services-bento .service-card--6,
    .services-bento .service-card--7,
    .services-bento .service-card--8 {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
    }

    .portfolio-mosaic > li:nth-child(1),
    .portfolio-mosaic > li:nth-child(2) {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
    }

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

    .form-topline,
    .form-submit {
        align-items: flex-start;
        flex-direction: column;
    }

    .form-submit button {
        width: 100%;
    }

    .section-intro,
    .section-intro .has-text-align-center,
    .portfolio-section > .micro-eyebrow,
    .portfolio-section > h2,
    .portfolio-section > p {
        text-align: left !important;
    }

    .portfolio-section > .micro-eyebrow,
    .portfolio-section > h2,
    .portfolio-section > p {
        margin-left: 2rem !important;
        margin-right: 2rem !important;
    }

    .hero-scroll-stage::before {
        background:
            linear-gradient(
                180deg,
                rgba(10, 10, 10, 0.04) 0%,
                rgba(10, 10, 10, 0.02) 34%,
                rgba(10, 10, 10, 0.22) 58%,
                rgba(10, 10, 10, 0.66) 100%
            );
    }

    .hero-scroll-portraits {
        opacity: 1;
    }

    .hero-scroll-portrait {
        background-position: center;
        filter: saturate(1) contrast(1.02) brightness(0.98);
    }

    .hero-scroll-canvas {
        filter: saturate(1) contrast(1.02) brightness(0.98);
    }

    .hero-scroll-video {
        object-position: 56% center;
    }

    .hero-scroll-cue {
        display: block;
    }

    /* Remove rotations and overlaps on mobile (High-End Skill rule) */
    .bezel-shell {
        border-radius: 20px !important;
    }

    .bezel-core {
        border-radius: 16px !important;
        padding: 1.75rem 1.5rem !important;
    }
}

@media (max-width: 767px) and (max-height: 720px) {
    .hero-scroll-stage .wp-block-cover__inner-container > .wp-block-group {
        padding-bottom: 3.75rem !important;
    }

    .hero-scroll-stage .hero-subtext {
        display: none;
    }

    .hero-scroll-stage .hero-buttons {
        margin-top: 1.5rem !important;
        gap: 0.6rem;
    }
}

@keyframes menu-enter {
    from {
        opacity: 0;
        transform: translateY(-0.75rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================
   18. GUTENBERG EDITOR OVERRIDES
   ============================================================ */

/* Disable film grain overlay in block editor to prevent interaction interference */
.editor-styles-wrapper::after {
    display: none !important;
}

/* Force all scroll-reveal animated elements to be fully visible and in place in the editor */
.editor-styles-wrapper .reveal,
.editor-styles-wrapper .hero-reveal,
.editor-styles-wrapper .stagger-children > *,
.editor-styles-wrapper .portfolio-mosaic > li {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
}

/* Fix cover and viewport scaling inside editor canvas */
.editor-styles-wrapper .wp-block-cover {
    min-height: 500px !important; /* more manageable editing height */
}