/**
 * P4PN Perfection v1 — final polish: gaps, typography, effects, all page types.
 * Loads after p4pn-site-unified.css
 */

/* ── Vertical rhythm tokens ── */
body.p4pn-fluid {
    --p4pn-section-gap: clamp(2.5rem, 6cqi, 4.5rem);
    --p4pn-block-gap: clamp(1rem, 2.5cqi, 1.75rem);
    --p4pn-card-gap: clamp(0.65rem, 1.5cqi, 1rem);
    --p4pn-text-body: #cbd5e1;
    --p4pn-text-muted: rgba(203, 213, 225, 0.72);
    --p4pn-text-dim: rgba(148, 163, 184, 0.88);
    --p4pn-glow-accent: rgba(232, 168, 124, 0.18);
    --p4pn-glow-purple: rgba(167, 139, 250, 0.15);
}

/* ═══════════════════════════════════════
   GLOBAL TEXT & READABILITY
   ═══════════════════════════════════════ */
body.p4pn-fluid {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.p4pn-fluid p,
body.p4pn-fluid .p4p-lead,
body.p4pn-fluid .p4p-section-intro,
body.p4pn-fluid .entry-content p {
    color: var(--p4pn-text-body);
    line-height: 1.6;
}

body.p4pn-fluid .p4p-section-title,
body.p4pn-fluid h1,
body.p4pn-fluid h2,
body.p4pn-fluid h3 {
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

body.p4pn-fluid .p4p-kicker {
    color: rgba(232, 168, 124, 0.92);
}

/* ═══════════════════════════════════════
   SECTION SPACING — inner pages
   ═══════════════════════════════════════ */
body.p4pn-fluid .p4p-services-section,
body.p4pn-fluid .p4p-portfolio-section,
body.p4pn-fluid .p4p-careers-section,
body.p4pn-fluid .p4p-about-section,
body.p4pn-fluid .p4p-mkt-section,
body.p4pn-fluid .p4p-legal-section,
body.p4pn-fluid .p4p-academy-section {
    margin-bottom: var(--p4pn-section-gap);
}

body.p4pn-fluid .p4p-services-section:last-child,
body.p4pn-fluid .p4p-portfolio-section:last-child,
body.p4pn-fluid .p4p-careers-section:last-child {
    margin-bottom: var(--p4pn-space-xl);
}

body.p4pn-fluid .p4p-services-section__head,
body.p4pn-fluid .p4p-section__head,
body.p4pn-fluid .p4pn-svc-section-head {
    margin-bottom: var(--p4pn-block-gap);
}

body.p4pn-fluid .p4p-services-section__head .p4p-section-intro,
body.p4pn-fluid .p4p-section__head .p4p-section-intro {
    margin-top: var(--p4pn-space-sm);
    color: var(--p4pn-text-muted);
}

/* ═══════════════════════════════════════
   CARDS & BOXES — unified gap + hover
   ═══════════════════════════════════════ */
body.p4pn-fluid .p4p-3d-box,
body.p4pn-fluid .p4p-service-card,
body.p4pn-fluid .p4p-portfolio-card,
body.p4pn-fluid .p4p-blog-card,
body.p4pn-fluid .p4p-careers-role,
body.p4pn-fluid .p4p-mkt-card,
body.p4pn-fluid .p4p-dental-card,
body.p4pn-fluid .p4p-stack-card,
body.p4pn-fluid .p4p-why-card,
body.p4pn-fluid .bento-card,
body.p4pn-fluid .sw-card,
body.p4pn-fluid .why-card,
body.p4pn-fluid .p4p-ac-card,
body.p4pn-fluid .p4p-pb-panel,
body.p4pn-fluid .p4p-bu-panel {
    gap: var(--p4pn-card-gap);
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1),
                border-color 0.35s,
                box-shadow 0.4s;
}

@media (hover: hover) and (pointer: fine) {
    body.p4pn-fluid .p4p-3d-box:hover,
    body.p4pn-fluid .p4p-service-card:hover,
    body.p4pn-fluid .p4p-portfolio-card:hover,
    body.p4pn-fluid .p4p-blog-card:hover,
    body.p4pn-fluid .p4p-careers-role:hover,
    body.p4pn-fluid .p4p-mkt-card:hover,
    body.p4pn-fluid .p4p-dental-card:hover,
    body.p4pn-fluid .p4p-stack-card:hover,
    body.p4pn-fluid .bento-card:hover {
        transform: translateY(clamp(-3px, -0.5cqi, -6px));
        border-color: rgba(232, 168, 124, 0.22);
        box-shadow: 0 clamp(12px, 2cqi, 20px) clamp(32px, 4cqi, 48px) rgba(0, 0, 0, 0.4),
                    0 0 clamp(20px, 3cqi, 32px) var(--p4pn-glow-accent);
    }
}

body.p4pn-fluid .p4p-service-card__desc,
body.p4pn-fluid .p4p-portfolio-card__excerpt,
body.p4pn-fluid .p4p-blog-card__excerpt,
body.p4pn-fluid .p4p-careers-role__desc {
    color: var(--p4pn-text-dim);
    line-height: 1.55;
}

/* ═══════════════════════════════════════
   REVEAL ANIMATIONS
   ═══════════════════════════════════════ */
body.p4pn-fluid .p4p-reveal,
body.p4pn-fluid .p4p-text-reveal-stagger {
    opacity: 0;
    transform: translateY(clamp(12px, 2cqi, 20px));
    transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

body.p4pn-fluid .p4p-reveal.is-inview,
body.p4pn-fluid .p4p-text-reveal-stagger.is-inview {
    opacity: 1;
    transform: translateY(0);
}

body.p4pn-fluid .p4p-reveal:nth-child(2) { transition-delay: 0.06s; }
body.p4pn-fluid .p4p-reveal:nth-child(3) { transition-delay: 0.12s; }
body.p4pn-fluid .p4p-reveal:nth-child(4) { transition-delay: 0.18s; }

@media (prefers-reduced-motion: reduce) {
    body.p4pn-fluid .p4p-reveal,
    body.p4pn-fluid .p4p-text-reveal-stagger {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ═══════════════════════════════════════
   HERO V5 — fluid tokens
   ═══════════════════════════════════════ */
body.p4pn-fluid .p4p-hero-v5 {
    padding: calc(var(--p4p-header, 72px) + var(--p4pn-space-lg)) var(--p4pn-space-md) var(--p4pn-space-lg);
}

body.p4pn-fluid .p4p-hero-v5__frame {
    border-radius: var(--p4pn-radius-lg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(8, 8, 14, 0.88);
    max-width: min(100%, 56rem);
}

body.p4pn-fluid .p4p-hero-v5__kicker {
    font-size: var(--p4pn-font-xs);
}

body.p4pn-fluid .p4p-hero-v5__title {
    font-size: var(--p4pn-font-2xl);
}

body.p4pn-fluid .p4p-hero-v5__lead {
    font-size: var(--p4pn-font-sm);
    max-width: var(--p4pn-lead-max, 62ch);
    color: var(--p4pn-text-body);
}

body.p4pn-fluid .p4p-hero-v5__actions {
    gap: var(--p4pn-space-sm);
    margin-top: var(--p4pn-space-md);
}

/* ═══════════════════════════════════════
   INNER SCROLL PROGRESS
   ═══════════════════════════════════════ */
body.p4pn-fluid .p4p-inner-progress {
    position: fixed;
    top: var(--p4p-header, 72px);
    left: 0;
    right: 0;
    height: 2px;
    z-index: calc(var(--p4pn-z-header, 10000) + 1);
    background: rgba(255, 255, 255, 0.06);
    pointer-events: none;
}

body.p4pn-fluid .p4p-inner-progress__fill {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #e8a87c, #a78bfa);
    box-shadow: 0 0 10px rgba(232, 168, 124, 0.4);
    transition: width 0.12s linear;
}

body.p4pn-fluid .p4p-inner-progress__label {
    position: fixed;
    top: calc(var(--p4p-header, 72px) + 6px);
    right: max(0.75rem, env(safe-area-inset-right));
    z-index: calc(var(--p4pn-z-header, 10000) + 2);
    font-family: var(--p4p-font-tech, monospace);
    font-size: var(--p4pn-font-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(167, 139, 250, 0.85);
    pointer-events: none;
}

/* ═══════════════════════════════════════
   LOCKED PAGES — premium terminal
   ═══════════════════════════════════════ */
body.p4pn-fluid .p4p-page--locked {
    min-height: 100dvh;
}

body.p4pn-fluid .p4p-page__inner--locked-center {
    min-height: calc(100dvh - var(--p4p-header, 72px));
    padding: var(--p4pn-space-xl) var(--p4pn-space-md);
}

body.p4pn-fluid .p4p-locked-terminal {
    max-width: min(100%, 36rem);
    padding: var(--p4pn-space-lg);
    border-radius: var(--p4pn-radius-lg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    text-align: center;
}

body.p4pn-fluid .p4p-locked-terminal__kicker {
    margin-bottom: var(--p4pn-space-sm);
}

body.p4pn-fluid .p4p-locked-terminal__title {
    font-size: var(--p4pn-font-2xl);
    line-height: 1.05;
    margin-bottom: var(--p4pn-space-md);
}

body.p4pn-fluid .p4p-locked-terminal__text {
    font-size: var(--p4pn-font-sm);
    line-height: 1.6;
    color: var(--p4pn-text-muted);
    margin-bottom: var(--p4pn-block-gap);
}

body.p4pn-fluid .p4p-locked-terminal__header {
    font-size: var(--p4pn-font-xs);
    margin-bottom: var(--p4pn-space-md);
}

body.p4pn-fluid .p4p-locked-terminal__meta {
    font-size: var(--p4pn-font-xs);
    gap: var(--p4pn-space-sm);
}

body.p4pn-fluid .p4p-locked-terminal__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--p4pn-space-sm);
    margin-top: var(--p4pn-space-lg);
}

/* ═══════════════════════════════════════
   COVER PAGES — section polish
   ═══════════════════════════════════════ */
body.p4pn-cover-page .p4pn-cover-section {
    isolation: isolate;
}

body.p4pn-cover-page .p4pn-stage {
    gap: var(--p4pn-block-gap);
}

body.p4pn-cover-page .p4pn-svc-catalog {
    gap: var(--p4pn-space-sm);
}

body.p4pn-cover-page .p4pn-svc-catalog__link {
    transition: transform 0.35s, border-color 0.3s, box-shadow 0.35s;
}

@media (hover: hover) {
    body.p4pn-cover-page .p4pn-svc-catalog__link:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35), 0 0 24px var(--p4pn-glow-accent);
    }
}

body.p4pn-cover-page .p4p-svc-lanes__grid,
body.p4pn-cover-page .p4p-svc-nexus__grid {
    gap: var(--p4pn-space-sm);
}

/* ═══════════════════════════════════════
   ABOUT — bento & timeline
   ═══════════════════════════════════════ */
body.p4pn-fluid.p4p-page--about .bento-grid,
body.p4pn-fluid.p4p-page--about .why-grid {
    gap: var(--p4pn-space-sm);
}

body.p4pn-fluid.p4p-page--about .tl-node {
    border-radius: var(--p4pn-radius-md);
}

/* ═══════════════════════════════════════
   CONTACT — form polish
   ═══════════════════════════════════════ */
body.p4pn-fluid.p4p-page--contact .p4p-contact-form__field span {
    font-size: var(--p4pn-font-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--p4pn-text-dim);
    margin-bottom: 0.35rem;
}

body.p4pn-fluid.p4p-page--contact .p4p-command-center {
    gap: var(--p4pn-section-gap);
}

body.p4pn-fluid .p4p-services-faq__item {
    border-radius: var(--p4pn-radius-md);
    margin-bottom: var(--p4pn-space-sm);
}

body.p4pn-fluid .p4p-services-faq__q {
    font-size: var(--p4pn-font-sm);
}

body.p4pn-fluid .p4p-services-faq__a {
    font-size: var(--p4pn-font-sm);
    color: var(--p4pn-text-muted);
    line-height: 1.6;
}

/* ═══════════════════════════════════════
   BLOG — hub + single
   ═══════════════════════════════════════ */
body.p4pn-fluid.p4p-page--blog .p4p-blog-hub__toolbar {
    margin-bottom: var(--p4pn-block-gap);
    gap: var(--p4pn-space-sm);
}

body.p4pn-fluid.p4p-page--blog .p4p-blog-adv-card,
body.p4pn-fluid.p4p-page--blog .p4p-blog-card {
    margin-bottom: var(--p4pn-space-sm);
}

body.p4pn-fluid.p4p-page--blog-single .p4p-article__body h2,
body.p4pn-fluid.p4p-page--blog-single .p4p-article__body h3 {
    margin-top: var(--p4pn-block-gap);
    margin-bottom: var(--p4pn-space-sm);
    font-size: var(--p4pn-font-lg);
}

body.p4pn-fluid.p4p-page--blog-single .p4p-article__body p {
    margin-bottom: var(--p4pn-space-md);
}

/* ═══════════════════════════════════════
   PORTFOLIO & CAREERS
   ═══════════════════════════════════════ */
body.p4pn-fluid.p4p-page--portfolio .p4p-portfolio-filters {
    gap: var(--p4pn-space-sm);
    margin-bottom: var(--p4pn-block-gap);
}

body.p4pn-fluid.p4p-page--careers .p4p-careers-step,
body.p4pn-fluid.p4p-page--careers .p4p-careers-benefit,
body.p4pn-fluid.p4p-page--careers .p4p-careers-value {
    border-radius: var(--p4pn-radius-md);
}

/* ═══════════════════════════════════════
   MARKETPLACE
   ═══════════════════════════════════════ */
body.p4pn-fluid.p4p-page--marketplace .p4p-mkt-gate,
body.p4pn-fluid.p4p-page--marketplace .p4p-mkt-dev {
    gap: var(--p4pn-block-gap);
}

/* ═══════════════════════════════════════
   SERVICE SINGLES
   ═══════════════════════════════════════ */
body.p4pn-fluid.p4p-page--service-single .p4p-services-section {
    margin-bottom: var(--p4pn-section-gap);
}

body.p4pn-fluid.p4p-page--service-single .p4p-stack-card,
body.p4pn-fluid.p4p-page--service-single .p4p-why-card {
    margin-bottom: var(--p4pn-space-sm);
}

/* ═══════════════════════════════════════
   LEGAL
   ═══════════════════════════════════════ */
body.p4pn-fluid.p4p-page--legal .p4p-legal-nav {
    gap: var(--p4pn-space-sm);
    margin-bottom: var(--p4pn-block-gap);
}

body.p4pn-fluid.p4p-page--legal .p4p-legal-doc h2 {
    margin-top: var(--p4pn-block-gap);
    margin-bottom: var(--p4pn-space-sm);
    font-size: var(--p4pn-font-lg);
}

body.p4pn-fluid.p4p-page--legal .p4p-legal-doc p,
body.p4pn-fluid.p4p-page--legal .p4p-legal-doc li {
    margin-bottom: var(--p4pn-space-sm);
    line-height: 1.65;
}

/* ═══════════════════════════════════════
   TEASERS / ACADEMY / DENTAL
   ═══════════════════════════════════════ */
body.p4pn-fluid.p4p-page--teaser .p4p-teaser-panel,
body.p4pn-fluid.p4p-page--academy .p4p-academy-track,
body.p4pn-fluid.p4p-page--dental .p4p-dental-feature {
    margin-bottom: var(--p4pn-block-gap);
}

/* ═══════════════════════════════════════
   FOOTER — spacing & links
   ═══════════════════════════════════════ */
body.p4pn-fluid .p4p-footer {
    margin-top: var(--p4pn-space-xl);
    padding-top: var(--p4pn-section-gap);
}

body.p4pn-fluid .p4p-footer__grid {
    gap: var(--p4pn-block-gap);
}

body.p4pn-fluid .p4p-footer-nav {
    display: flex;
    flex-direction: column;
    gap: clamp(0.35rem, 0.8cqi, 0.55rem);
}

body.p4pn-fluid .p4p-footer-nav a {
    font-size: var(--p4pn-font-sm);
    color: var(--p4pn-text-muted);
    transition: color 0.25s;
}

body.p4pn-fluid .p4p-footer-nav a:hover {
    color: #e8a87c;
}

body.p4pn-fluid .p4pn-home-footer__links {
    gap: var(--p4pn-space-sm);
}

body.p4pn-fluid .p4pn-home-footer__links a {
    font-size: var(--p4pn-font-xs);
    transition: color 0.25s;
}

/* ═══════════════════════════════════════
   MESH READABILITY — subtle vignette
   ═══════════════════════════════════════ */
body.p4pn-fluid .p4p-mesh-readability--lite {
    background: radial-gradient(ellipse 120% 80% at 50% 0%, transparent 40%, rgba(6, 6, 12, 0.35) 100%);
}

body.p4pn-fluid.p4p-page--blog .p4p-mesh-readability--lite {
    background: radial-gradient(ellipse 110% 70% at 50% -10%, rgba(22, 16, 31, 0.4) 0%, rgba(6, 6, 12, 0.55) 100%);
}

/* ═══════════════════════════════════════
   404 LOST PAGE
   ═══════════════════════════════════════ */
body.p4pn-fluid.p4p-page--lost .p4p-lost-hero {
    padding: var(--p4pn-space-xl) var(--p4pn-space-md);
    text-align: center;
}

body.p4pn-fluid.p4p-page--lost .p4p-lost-hero__title {
    font-size: var(--p4pn-font-3xl);
    margin-bottom: var(--p4pn-space-md);
}

body.p4pn-fluid.p4p-page--lost .p4p-lost-hero__lead {
    font-size: var(--p4pn-font-sm);
    color: var(--p4pn-text-muted);
    max-width: 42ch;
    margin-inline: auto;
}

/* ═══════════════════════════════════════
   CONTACT FLOAT + POPUP
   ═══════════════════════════════════════ */
body.p4pn-fluid .p4p-contact-popup__panel {
    border-radius: var(--p4pn-radius-lg);
}

body.p4pn-fluid .p4p-contact-popup__head h3 {
    font-size: var(--p4pn-font-lg);
}

body.p4pn-fluid .p4p-contact-popup__head p {
    font-size: var(--p4pn-font-sm);
    color: var(--p4pn-text-muted);
}

/* ═══════════════════════════════════════
   SVG CRISP RENDER
   ═══════════════════════════════════════ */
body.p4pn-fluid svg.p4p-home-svg,
body.p4pn-fluid .p4pn-svc-catalog__svg svg,
body.p4pn-fluid .p4p-service-card__visual svg {
    shape-rendering: geometricPrecision;
}