/* AUTO-GENERATED by scripts/bundle-css.sh — do not edit directly.
   Source: static/css/0[1-8]*.css. Regenerated on every Trunk build. */
/* ──────────────────────────────────────────────────────────────
   01-tokens.css design tokens (colors, type, motion, layout)
   Extracted from prodmedia.css lines 1-67.
   Pure extraction: all values preserved verbatim; --fs-* added.
   ────────────────────────────────────────────────────────────── */

@font-face {
    font-family: "Proxima Nova";
    src: url("/static/fonts/ProximaNova-Regular.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "Proxima Nova";
    src: url("/static/fonts/ProximaNova-Bold.otf") format("opentype");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: "Proxima Nova";
    src: url("/static/fonts/ProximaNova-ExtraBold.otf") format("opentype");
    font-style: normal;
    font-weight: 800;
    font-display: swap;
}
@font-face {
    font-family: "Proxima Nova";
    src: url("/static/fonts/ProximaNova-Black.otf") format("opentype");
    font-style: normal;
    font-weight: 900;
    font-display: swap;
}

/* Manrope variable font (case-study typography specimen) */
@font-face {
    font-family: "Manrope";
    src: url("/static/fonts/Manrope-Variable-latin.woff2") format("woff2-variations");
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Manrope";
    src: url("/static/fonts/Manrope-Variable-latin-ext.woff2") format("woff2-variations");
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Manrope";
    src: url("/static/fonts/Manrope-Variable-latin-ext.woff2") format("woff2-variations");
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    unicode-range: U+0400-052F, U+1C80-1C8F, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

:root {
    /* Font */
    --ff: "Proxima Nova", "Segoe UI", Roboto, Arial, sans-serif;

    /* Background */
    --bg: #000415;
    --bg-dark: #090C1B;
    --bg-card: #131421;
    --bg-card2: #141624;
    --bg-contact: #1d1f31;
    --bg-surface: #202134;

    /* Accent (pink) */
    --pink: #CA0274;
    --pink-lite: #d4188a;
    --pink-tag-bg: rgba(202,2,116,0.12);
    --pink-border: rgba(202,2,116,0.3);
    --pink-glow: rgba(202,2,116,0.5);
    --pink-hover-border: rgba(202,2,116,0.4);
    --pink-hover-shadow: rgba(202,2,116,0.2);

    /* Text */
    --white: #ffffff;
    --text: #E8E8E8;
    --grey: #8f9bb3;
    --grey-dark: #7a8299;
    --teal: #4BE4DB;

    /* Border */
    --border: rgba(255,255,255,0.06);
    --border-subtle: rgba(255,255,255,0.02);
    --border-light: rgba(255,255,255,0.15);

    /* White alpha scale */
    --white-03: rgba(255,255,255,0.03);
    --white-10: rgba(255,255,255,0.1);
    --white-20: rgba(255,255,255,0.2);
    --white-60: rgba(255,255,255,0.6);
    --white-72: rgba(255,255,255,0.72);
    --white-75: rgba(255,255,255,0.75);
    --white-78: rgba(255,255,255,0.78);
    --white-85: rgba(255,255,255,0.85);
    --white-90: rgba(255,255,255,0.9);
    --white-92: rgba(255,255,255,0.92);

    /* Text alpha scale */
    --text-80: rgba(232,232,232,0.8);
    --text-85: rgba(232,232,232,0.85);
    --text-90: rgba(232,232,232,0.9);

    /* Radius */
    --r-sm: 4px;
    --r-md: 6px;
    --r-lg: 8px;
    --r-xl: 10px;
    --r-2xl: 15px;
    --r-3xl: 24px;

    /* Figma typography scale (1440 px source frames, Proxima Nova) */
    --fs-label: 12px;
    --fs-body: 16px;
    --fs-sub: 20px;
    --fs-heading: 36px;
    --fs-display: clamp(40px, 5vw, 64px);
    --type-display-size: clamp(42px, 4.445vw, 64px);
    --type-display-line: 1.21875;
    --type-section-size: 36px;
    --type-section-line: 1.218;
    --type-card-lg-size: 32px;
    --type-card-size: 24px;
    --type-overline-size: 20px;
    --type-overline-line: 1.218;
    --type-overline-tracking: 3px;

    /* Layout */
    --max-w: 1440px;
    --reading-w: 660px;
    --section-py: 96px;
    --grid-gap: 32px;
    --control-button-width: 248px;
    --control-button-height: 56px;
    --control-button-padding: 20px;
    /* Unified vertical rhythm single owner of the inter-section gap. */
    --section-gap: clamp(40px, 7vw, 96px);
    --section-gap-sm: clamp(24px, 3vw, 44px);
    /* Unified horizontal page padding shared by .pm-container AND full-bleed sections. */
    --page-pad: 16px;

    /* Motion */
    --motion-instant: 100ms;
    --motion-fast: 160ms;
    --motion-base: 240ms;
    --motion-slow: 480ms;
    --motion-hero: 720ms;
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-exit: cubic-bezier(0.4, 0, 1, 1);
    --motion-lift: translateY(-4px);
    --motion-press: translateY(0) scale(0.985);
}

/* Responsive override of --page-pad so .pm-container and full-bleed sections
   share identical horizontal insets at every breakpoint. */
@media (min-width: 768px) {
    :root { --page-pad: 48px; }
}
@media (min-width: 1024px) {
    :root { --page-pad: clamp(80px, 11.32vw, 163px); }
}



/* Breakpoints (documentation only CSS uses min-width media queries):
   Mobile: <=767px (default) · Tablet: 768–1023px · Desktop: >=1024px */
/* ──────────────────────────────────────────────────────────────
   02-base.css base system (reset, nav, footer, buttons, section
   headers, motion/reveal, progressive image, floating dock, cookie).
   Extracted from prodmedia.css (order-preserving, cascade-safe).
   ────────────────────────────────────────────────────────────── */



/* ── a11y: reset native button defaults for in-nav button-based controls + focus-visible ── */
.pm-nav-logo, .pm-nav-link, .pm-nav-phone,
.pm-mobile-menu-link, .pm-mobile-cta,
.pm-lang-btn, .pm-lang-option {
    background: none;
    border: none;
    font: inherit;
    color: inherit;
    -webkit-appearance: none;
    appearance: none;
}

.pm-nav-logo:focus-visible, .pm-nav-link:focus-visible, .pm-nav-phone:focus-visible, .pm-mobile-menu-link:focus-visible, .pm-mobile-cta:focus-visible, .pm-lang-btn:focus-visible, .pm-lang-option:focus-visible {
    outline: 2px solid var(--pink);
    outline-offset: 3px;
    border-radius: 2px;
}




/* Skip link hidden until focused */
.pm-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 9999;
    background: var(--pink);
    color: #fff;
    padding: 10px 18px;
    font: 600 14px var(--ff);
    text-decoration: none;
    border-radius: 0 0 6px 0;
}

.pm-skip-link:focus {
    left: 0;
    outline: 2px solid #fff;
    outline-offset: 2px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* Words never split across lines (no mid-word breaks, no hyphenation). */
    hyphens: none;
    -webkit-hyphens: none;
    word-break: normal;
    overflow-wrap: normal;
}

html {
    scroll-behavior: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    font-family: var(--ff);
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    max-width: 100%;
    overflow-x: hidden;
}

.pm-container {
    width: 100%;
    max-width: var(--max-w);
    margin: 0 auto;
    padding-inline: var(--page-pad);
}

/* .pm-container horizontal insets now come from --page-pad (01-tokens.css),
   which is also used by full-bleed sections so both align at every breakpoint. */

.pm-section-label {
    font: 400 20px/1.218 var(--ff);
    color: var(--white-72);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.pm-section-title {
    font: 700 36px/1.218 var(--ff);
    color: var(--white);
    margin: 0 0 8px;
    text-transform: uppercase;
}

.pm-section-line {
    width: 154px;
    height: 3px;
    background: var(--pink);
    margin: 0 0 22px;
}




@media (max-width: 767px) {.pm-section-line { width: 30%; min-width: 80px; height: 2px; }
}

.pm-section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 40px;
}




@media (max-width: 767px) {.pm-section-header {
        display: grid;
        gap: 12px;
        margin-bottom: 28px;
    }
}

.pm-nav {
    background: transparent;
}

.pm-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    width: 100%;
    padding: 24px 0;
    position: relative;
    z-index: 100;
}




@media (max-width: 767px) {.pm-nav { padding: 16px 0; }
}

.pm-nav-logo { cursor: pointer; display: flex; align-items: center; }

.pm-nav-logo img { height: 64px; }




@media (max-width: 767px) {.pm-nav-logo img { height: 52px; }
}




@media (min-width: 1600px) {.pm-nav-logo img { height: 72px; }
}

.pm-nav-links {
    display: none;
    align-items: center;
    gap: 36px;
    list-style: none;
    margin-left: auto;
}




@media (min-width: 768px) {.pm-nav-links { display: flex; }
}

.pm-nav-link {
    display: inline-flex;
    align-items: center;
    font: 400 14px var(--ff);
    color: var(--white);
    cursor: pointer;
    position: relative;
    padding: 8px 0;
    line-height: 1;
    z-index: 220;
    transition: color var(--motion-fast) var(--ease-standard);
    text-transform: uppercase;
}

.pm-nav-link:hover { color: var(--white); }

.pm-nav-link.active { color: var(--white); }

.pm-nav-link::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: var(--pink);
    opacity: 0;
    transition: opacity var(--motion-fast) var(--ease-standard);
}

.pm-nav-link:hover::after, .pm-nav-link.active::after {
    opacity: 1;
}

.pm-mobile-cta {
    font: 700 16px var(--ff);
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--pink);
    border: none;
    border-radius: 8px;
    padding: 14px;
    width: 100%;
    margin-top: 16px;
    cursor: pointer;
    transition: background var(--motion-fast) var(--ease-standard);
}

.pm-mobile-cta:hover { background: var(--pink-bright, #e60084); }

.pm-nav-phone {
    font: 400 14px var(--ff);
    color: var(--white);
    cursor: pointer;
    margin-left: 0;
    white-space: nowrap;
    transition: color var(--motion-fast) var(--ease-standard),
        text-shadow var(--motion-fast) var(--ease-standard);
}

.pm-nav-phone:hover { color: var(--pink); text-shadow: 0 0 18px var(--pink-glow); }

.pm-lang-switcher {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    cursor: pointer;
    z-index: 260;
}

.pm-lang-btn {
    font: 400 14px var(--ff);
    color: var(--white);
    text-transform: uppercase;
    padding: 8px 0;
    line-height: 1;
}

.pm-lang-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    display: flex;
    gap: 4px;
    padding: 6px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(16, 17, 32, 0.92);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
    transform: translateX(-50%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 8px;
}

.pm-lang-option {
    padding: 6px 12px;
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    font: 400 12px var(--ff);
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    border-radius: 4px;
    transition: color var(--motion-fast) var(--ease-standard),
        background var(--motion-fast) var(--ease-standard);
}

.pm-lang-option:hover, .pm-lang-option.active {
    background: rgba(202, 2, 116, 0.12);
    color: var(--white);
}

.pm-mobile-menu {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,4,21,0.96);
    z-index: 150;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    animation: pmMenuBackdrop var(--motion-slow) var(--ease-enter) both;
}

.pm-mobile-menu-close {
    position: absolute;
    top: 24px; right: 24px;
    font-size: 28px;
    color: var(--white);
    cursor: pointer;
    background: none;
    border: none;
    padding: 8px;
    width: 44px; height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pm-mobile-menu-close:hover { color: var(--pink); }

.pm-mobile-menu-link {
    font: 700 20px var(--ff);
    color: var(--white);
    cursor: pointer;
    padding: 14px;
    text-align: center;
    opacity: 0;
    transform: translateY(16px);
    animation: pmMenuItem var(--motion-slow) var(--ease-enter) forwards;
    transition: color var(--motion-fast) var(--ease-standard),
        transform var(--motion-fast) var(--ease-enter);
}

.pm-mobile-menu-link:nth-of-type(2) { animation-delay: 50ms; }

.pm-mobile-menu-link:nth-of-type(3) { animation-delay: 100ms; }

.pm-mobile-menu-link:nth-of-type(4) { animation-delay: 150ms; }

.pm-mobile-menu-link:nth-of-type(5) { animation-delay: 200ms; }

.pm-mobile-menu-link:nth-of-type(6) { animation-delay: 250ms; }

.pm-mobile-menu-link:hover, .pm-mobile-menu-link.active { color: var(--pink); }

.pm-mobile-lang {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    opacity: 0;
    transform: translateY(16px);
    animation: pmMenuItem var(--motion-slow) var(--ease-enter) 300ms forwards;
}

.pm-mobile-lang-btn {
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.04);
    color: var(--white-75);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pm-mobile-lang-btn.active, .pm-mobile-lang-btn:hover, .pm-mobile-lang-btn:focus-visible {
    border-color: rgba(202, 2, 116, 0.7);
    background: rgba(202, 2, 116, 0.16);
    color: var(--white);
    outline: none;
}

.pm-mobile-menu-phone {
    margin-top: 24px;
    font: 500 20px var(--ff);
    color: var(--white);
}

.pm-mobile-menu-phone a { color: inherit; }

.pm-mobile-menu-phone a:hover { color: var(--pink); }

.pm-btn, .pm-btn-link, .pm-btn-text {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: var(--control-button-width);
    min-width: var(--control-button-width);
    height: 56px;
    min-height: 56px;
    padding: 0 20px;
    border: 1px solid rgba(255,255,255,0.24);
    border-radius: 0;
    background: rgba(5,7,24,0.68);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.055),
        0 10px 28px rgba(0,0,0,0.12);
    color: var(--white);
    cursor: pointer;
    font: 700 12px/1 var(--ff);
    letter-spacing: 1.15px;
    text-transform: uppercase;
    white-space: nowrap;
    flex: 0 0 auto;
    transform: translateY(0) scale(1);
    transition:
        border-color var(--motion-fast) var(--ease-standard),
        box-shadow var(--motion-fast) var(--ease-standard),
        color var(--motion-fast) var(--ease-standard),
        transform var(--motion-fast) var(--ease-enter);
}

.pm-btn::before, .pm-btn-link::before, .pm-btn-text::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(255,255,255,0.08), transparent 40%),
        linear-gradient(90deg, #9f005b, var(--pink-lite));
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform var(--motion-slow) var(--ease-enter);
}

.pm-btn::after, .pm-btn-link::after, .pm-btn-text::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 46px;
    height: 2px;
    background: var(--pink);
    transition: width var(--motion-base) var(--ease-enter);
}

.pm-btn:hover, .pm-btn:focus-visible, .pm-btn-link:hover, .pm-btn-link:focus-visible, .pm-btn-text:hover, .pm-btn-text:focus-visible {
    border-color: rgba(255,255,255,0.46);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.12),
        0 14px 34px rgba(202,2,116,0.18);
    outline: none;
}

.pm-btn:hover::before, .pm-btn:focus-visible::before, .pm-btn-link:hover::before, .pm-btn-link:focus-visible::before, .pm-btn-text:hover::before, .pm-btn-text:focus-visible::before {
    transform: scaleX(1);
}

.pm-btn:hover::after, .pm-btn:focus-visible::after, .pm-btn-link:hover::after, .pm-btn-link:focus-visible::after, .pm-btn-text:hover::after, .pm-btn-text:focus-visible::after {
    width: 100%;
}

.pm-btn:active, .pm-btn-link:active, .pm-btn-text:active {
    box-shadow: none;
    transform: var(--motion-press);
}





@media (max-width: 767px) {.pm-btn, .pm-btn-link, .pm-btn-text {
        width: min(100%, var(--control-button-width));
        min-width: 0;
        max-width: var(--control-button-width);
    }
}

.pm-btn-reset {
    float: none !important;
    margin-top: 8px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    padding: 8px 16px;
}

.pm-btn-reset:hover {
    border-color: var(--pink);
    color: var(--pink);
}

.pm-footer {
    padding-top: 72px;
    background: var(--bg);
}




@media (max-width: 767px) {.pm-footer { padding-top: 48px; }
}

.pm-footer-grid {
    display: grid;
    gap: 32px;
    grid-template-columns: 5fr 3fr 3fr 5fr;
}




@media (max-width: 1023px) {.pm-footer-grid { grid-template-columns: repeat(2, 1fr); }
}




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

.pm-footer-brand-logo {
    height: 104px;
    margin-bottom: 16px;
}




@media (max-width: 767px) {.pm-footer-brand-logo { height: 64px; }
}




@media (min-width: 768px) and (max-width: 1023px) {.pm-footer-brand-logo { height: 80px; }
}

.pm-footer-brand-desc {
    font: 400 14px var(--ff);
    color: var(--text);
    line-height: 1.5;
    margin: 16px 0;
}

.pm-footer-social {
    display: flex;
    gap: 40px;
    margin-top: 16px;
}




@media (max-width: 767px) {.pm-footer-social { gap: 24px; }
}

.pm-footer-social a {
    width: 32px; height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(0) scale(1);
    transition: filter var(--motion-fast) var(--ease-standard),
        transform var(--motion-fast) var(--ease-enter);
}




@media (max-width: 767px) {.pm-footer-social a { width: 44px; height: 44px; }
}

.pm-footer-social a:hover { filter: drop-shadow(0 0 12px var(--pink-glow)); transform: translateY(-3px) scale(1.04); }

.pm-footer-social a:active { transform: scale(0.94); }

.pm-footer-social img { width: 24px; height: 24px; }

.pm-footer-col-title {
    font: 500 16px var(--ff);
    color: var(--white);
    margin-bottom: 16px;
}

.pm-footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.pm-footer-link {
    font: 400 14px var(--ff);
    color: var(--text);
    cursor: pointer;
    transition: color var(--motion-fast) var(--ease-standard),
        transform var(--motion-fast) var(--ease-enter);
    padding: 8px 0;
    min-height: 36px;
    display: flex;
    align-items: center;
}

.pm-footer-link:hover { color: var(--pink); transform: translateX(4px); }

.pm-footer-contact-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font: 400 14px var(--ff);
    color: var(--text);
    padding: 4px 0;
}

.pm-footer-contact-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--pink);
    flex-shrink: 0;
}

.pm-footer-bottom {
    border-top: 1px solid var(--white-10);
    margin-top: 40px;
    padding: 24px 0;
    text-align: center;
    font: 400 14px var(--ff);
    color: var(--white);
}






/* Footer polish: airy editorial ending. */
.pm-footer {
    position: relative;
    overflow: hidden;
    padding: clamp(68px, 7vw, 104px) 0 28px;
    background:
        linear-gradient(180deg, rgba(5, 8, 23, 0.68) 0%, rgba(5, 8, 23, 0.96) 34%, #040716 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.pm-footer::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(202, 2, 116, 0.72), rgba(75, 228, 219, 0.34), transparent);
    opacity: 0.72;
}

.pm-footer::after {
    content: "";
    position: absolute;
    inset: 0 auto auto 50%;
    width: min(1120px, 82vw);
    height: 100%;
    transform: translateX(-50%);
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.016) 1px, transparent 1px);
    background-size: 180px 180px;
    opacity: 0.32;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.68), transparent 72%);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.68), transparent 72%);
}

.pm-footer .pm-container {
    position: relative;
    z-index: 1;
}

.pm-footer-grid {
    grid-template-columns: minmax(0, 1fr) repeat(3, minmax(150px, 0.62fr));
    gap: clamp(24px, 3.2vw, 56px);
    align-items: start;
    padding-bottom: 50px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.pm-footer-brand {
    width: 100%;
    max-width: none;
}

/* Keep all six social links in one fixed row, independent of copy width. */
.pm-footer-brand .pm-footer-social {
    display: flex !important;
    flex-wrap: nowrap !important;
    white-space: nowrap;
    width: 316px !important;
    min-width: 316px !important;
    max-width: none !important;
    gap: 8px !important;
}

.pm-footer-brand .pm-footer-social > a {
    flex: 0 0 46px !important;
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    height: 46px !important;
}

.pm-footer-brand-logo {
    height: clamp(92px, 8.6vw, 132px);
    margin-bottom: 22px;
    filter: drop-shadow(0 18px 34px rgba(202, 2, 116, 0.14));
}

.pm-footer-brand-desc {
    max-width: 620px;
    margin: 0;
    color: rgba(255, 255, 255, 0.76);
    font-size: 16px;
    line-height: 1.72;
}

.pm-footer-social {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: clamp(8px, 0.8vw, 12px);
    margin-top: 28px;
    width: 100%;
    max-width: none;
}

.pm-footer-social a {
    width: 46px;
    height: 46px;
    justify-self: start;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.035);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.pm-footer-social a:hover {
    border-color: rgba(202, 2, 116, 0.58);
    background: rgba(202, 2, 116, 0.08);
}

.pm-footer-social img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.pm-footer-col-title {
    margin: 10px 0 24px;
    color: rgba(255, 255, 255, 0.96);
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.pm-footer-links {
    gap: 15px;
}

.pm-footer-link {
    min-height: auto;
    padding: 0;
    color: rgba(255, 255, 255, 0.66);
    font-size: 14px;
    line-height: 1.25;
}

.pm-footer-contact-item {
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 15px;
    padding: 0;
    color: rgba(255, 255, 255, 0.76);
    font-size: 16px;
    line-height: 1.4;
}

.pm-footer-contact-dot {
    width: 7px;
    height: 7px;
    margin-top: 0.45em;
    box-shadow: 0 0 14px var(--pink-glow);
}

.pm-footer-bottom {
    margin-top: 0;
    padding: 24px 0 0;
    border-top: 0;
    color: rgba(255, 255, 255, 0.58);
    font-size: 14px;
    text-align: left;
}





@media (max-width: 1023px) {.pm-footer-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 42px 34px;
    }
.pm-footer-brand {
        grid-column: 1 / -1;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .pm-footer-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .pm-footer-brand {
        grid-column: 1 / -1;
    }

    .pm-footer-social {
        gap: 7px;
        grid-template-columns: repeat(6, 44px);
    }

    .pm-footer-social a {
        width: 44px;
        height: 44px;
    }

    .pm-footer-brand .pm-footer-social {
        width: 316px !important;
        min-width: 316px !important;
    }

    .pm-footer-brand .pm-footer-social > a {
        flex-basis: 44px !important;
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        height: 44px !important;
    }
}





@media (max-width: 767px) {.pm-footer {
        padding: 56px 0 24px;
    }
.pm-footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        padding-bottom: 34px;
    }
.pm-footer-brand {
        max-width: none;
    }
.pm-footer-brand-logo {
        height: 84px;
    }
.pm-footer-brand-desc {
        font-size: 14px;
        line-height: 1.65;
    }
.pm-footer-social {
        gap: 10px;
    }
.pm-footer-social a {
        width: 42px;
        height: 42px;
    }
.pm-footer-col-title {
        margin-bottom: 16px;
    }
.pm-footer-links {
        gap: 11px;
    }
.pm-footer-bottom {
        padding-bottom: calc(2px + env(safe-area-inset-bottom, 0));
        text-align: center;
        font-size: 12px;
    }
body .pm-footer {
        padding: 56px 0 24px;
    }
body .pm-footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        padding-bottom: 34px;
    }
body .pm-footer-brand-logo {
        width: auto;
        height: 84px;
    }
body .pm-footer-social {
        gap: 10px;
    }
body .pm-footer-social a {
        width: 42px;
        height: 42px;
    }
body .pm-footer-link, body .pm-footer-contact-item, body .pm-footer-contact-item a {
        min-height: auto;
    }
body .pm-footer-bottom {
        padding-bottom: calc(2px + env(safe-area-inset-bottom, 0));
    }
}





/* Keep all six footer channels on one line. At desktop widths below 1440px the
   first footer column is 320px wide: 6 x 46px icons + 5 x 8px gaps = 316px. */
.pm-footer-social {
    flex-wrap: nowrap;
}





@media (min-width: 1024px) and (max-width: 1439px) {.pm-footer-social {
        gap: 8px;
    }
}





@media (max-width: 767px) {body .pm-footer-social {
        gap: clamp(8px, 2.5vw, 10px);
        width: 100%;
        max-width: none;
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

.pm-page {
    padding: 144px 0 0;
    min-height: 60vh;
}

@media (max-width: 767px) {.pm-page { padding: 100px 0 0; }
}

.pm-page-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 60px;
    align-items: end;
    min-height: 380px;
    margin-bottom: 60px;
    padding: 52px 0 48px;
    border-top: 1px solid var(--white-10);
    border-bottom: 1px solid var(--white-10);
    overflow: hidden;
}

.pm-page-hero::before {
    position: absolute;
    top: 0;
    right: 0;
    width: 38%;
    height: 100%;
    border-left: 1px solid var(--white-10);
    background:
        repeating-linear-gradient(
            135deg,
            transparent 0 21px,
            rgba(255,255,255,0.015) 21px 22px
        );
    content: "";
    pointer-events: none;
}

.pm-page-hero-main, .pm-page-hero-aside {
    position: relative;
    z-index: 1;
}

.pm-page-hero-main {
    align-self: center;
    max-width: 720px;
}

.pm-page-hero-title {
    max-width: 14ch;
    margin: 0 0 18px;
    color: var(--white);
    font: 900 clamp(40px, 5vw, 64px)/0.92 var(--ff);
    text-transform: uppercase;
}

.pm-page-hero .pm-section-label {
    margin-bottom: 18px;
    color: var(--pink);
}

.pm-page-hero .pm-section-line {
    width: 154px;
    margin-bottom: 22px;
}

.pm-page-hero .pm-page-intro {
    max-width: 520px;
    margin: 0;
    color: rgba(255,255,255,0.85);
    font-size: 16px;
    line-height: 1.6;
}

.pm-page-hero-aside {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    min-height: 200px;
    padding: 24px 0 4px 28px;
    text-align: right;
}

.pm-page-hero-aside span, .pm-page-hero-aside small {
    color: rgba(255,255,255,0.5);
    font: 700 12px/1.35 var(--ff);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pm-page-hero-aside strong {
    display: block;
    max-width: 10ch;
    margin: 18px 0 22px;
    color: var(--white);
    font: 900 36px/0.95 var(--ff);
    overflow-wrap: normal;
}

.pm-page-hero-aside::after {
    width: 54px;
    height: 3px;
    margin-top: 20px;
    background: var(--pink);
    content: "";
}

.pm-page-intro {
    max-width: 720px;
    font: 400 16px/1.55 var(--ff);
    color: var(--text-90);
    margin: 0 0 40px;
}

.pm-page-cta {
    margin-top: 64px;
    padding: 36px 0 0;
    border-top: 1px solid var(--white-10);
    max-width: 820px;
}

.pm-page-cta h2 {
    font: 700 36px/1.218 var(--ff);
    color: var(--white);
    margin-bottom: 12px;
}

.pm-page-cta p {
    max-width: 640px;
    font: 400 16px/1.6 var(--ff);
    color: var(--text-85);
}

.pm-page-404 { text-align: center; padding-top: 200px; }

.pm-page-404 h1 {
    font: bold 56px var(--ff);
    color: var(--pink);
    margin-bottom: 16px;
}





/* Unified motion system */
.pm-motion-enabled .pm-reveal,
.pm-motion-enabled .pm-reveal-left,
.pm-motion-enabled .pm-reveal-right,
.pm-motion-enabled .pm-reveal-media,
.pm-motion-enabled .pm-reveal-card,
.pm-motion-enabled .pm-reveal-line {
    opacity: 0;
    will-change: opacity, transform;
}

.pm-motion-enabled .pm-reveal {
    transform: translate3d(0, 22px, 0);
}

.pm-motion-enabled .pm-reveal-left {
    transform: translate3d(-28px, 0, 0);
}

.pm-motion-enabled .pm-reveal-right {
    transform: translate3d(28px, 0, 0);
}

.pm-motion-enabled .pm-reveal-media {
    transform: translate3d(0, 18px, 0) scale(0.985);
}

.pm-motion-enabled .pm-reveal-card {
    transform: translate3d(0, 26px, 0);
    transition-delay: var(--pm-stagger, 0ms);
}

.pm-motion-enabled .pm-reveal-line {
    opacity: 1;
    transform: scaleX(0);
    transform-origin: left center;
}

.pm-motion-enabled .pm-motion-bound {
    transition:
        opacity var(--motion-slow) var(--ease-standard),
        transform var(--motion-slow) var(--ease-enter);
}

.pm-motion-enabled .pm-motion-bound.pm-reveal-card {
    transition-delay: var(--pm-stagger, 0ms);
}

.pm-motion-enabled .pm-motion-bound.is-visible {
    opacity: 1;
    transform: none;
    will-change: auto;
}

body.pm-menu-open {
    overflow: hidden;
    overscroll-behavior: none;
}

.pm-mobile-menu-close {
    font-size: 0;
}

.pm-mobile-menu-close::before, .pm-mobile-menu-close::after {
    position: absolute;
    width: 24px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    content: "";
}

.pm-mobile-menu-close::before { transform: rotate(45deg); }

.pm-mobile-menu-close::after { transform: rotate(-45deg); }

.pm-page-hero-title {
    max-width: min(100%, 15ch);
}

.pm-page-hero-title {
    max-width: min(100%, 15ch);
}





/* Progressive image previews */
.pm-progressive-image {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #101122;
    isolation: isolate;
}

.pm-progressive-image.has-preview::before {
    position: absolute;
    inset: -14px;
    z-index: 0;
    background-image: var(--pm-preview-image);
    background-position: center;
    background-size: cover;
    content: "";
    filter: blur(14px) saturate(1.12);
    opacity: 0.82;
    transform: scale(1.06);
}

.pm-progressive-image > img {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pm-floating-actions {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 48px);
  padding: 10px;
  border: 1px solid rgba(140, 132, 190, 0.26);
  background: rgba(5, 8, 22, 0.86);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.46), 0 0 36px rgba(216, 0, 127, 0.12);
  backdrop-filter: blur(16px);
  box-sizing: border-box;
}

.pm-floating-actions button {
  box-sizing: border-box;
  border: 0;
  color: var(--white);
  font-family: var(--ff);
  cursor: pointer;
}





/* ── Cookie consent banner ── */
.pm-cookie-consent {
    position: fixed;
    left: clamp(16px, 2vw, 30px);
    bottom: clamp(16px, 2vw, 30px);
    z-index: 100;
    max-width: 420px;
    width: calc(100vw - 32px);
    padding: 22px 24px;
    border: 1px solid var(--border-light);
    background: rgba(5, 8, 22, 0.88);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 36px rgba(202, 2, 116, 0.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: var(--text);
    animation: pm-cookie-in var(--motion-slow) var(--ease-enter) both;
}

.pm-cookie-inner {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pm-cookie-kicker {
    margin: 0;
    font: 700 12px/1 var(--ff);
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--pink);
}

.pm-cookie-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pm-cookie-text {
    margin: 0;
    font: 400 14px/1.55 var(--ff);
    color: var(--text-85);
}

.pm-cookie-link {
    color: var(--white);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--pink);
    transition: color var(--motion-fast) var(--ease-standard);
}

.pm-cookie-link:hover { color: var(--pink-lite); }

.pm-cookie-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.pm-cookie-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 20px;
    border: 1px solid var(--border-light);
    background: transparent;
    color: var(--white);
    cursor: pointer;
    font: 700 12px/1 var(--ff);
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: border-color var(--motion-fast) var(--ease-standard),
                background var(--motion-fast) var(--ease-standard),
                transform var(--motion-fast) var(--ease-enter);
}

.pm-cookie-accept {
    background: var(--pink);
    border-color: var(--pink);
    box-shadow: 0 8px 22px rgba(202, 2, 116, 0.28);
}

.pm-cookie-accept:hover {
    background: var(--pink-lite);
    transform: translateY(-1px);
}

.pm-cookie-reject:hover {
    border-color: var(--white-60);
    color: var(--white);
    transform: translateY(-1px);
}

.pm-cookie-btn:focus-visible {
    outline: 2px solid var(--pink);
    outline-offset: 3px;
}





@media (max-width: 600px) {.pm-cookie-consent {
        left: 0;
        right: 0;
        bottom: 0;
        max-width: none;
        width: 100%;
        padding: 18px 20px calc(18px + env(safe-area-inset-bottom));
        border-left: none;
        border-right: none;
        border-bottom: none;
    }
.pm-cookie-actions .pm-cookie-btn { flex: 1 1 auto; }
}





@media (prefers-reduced-motion: reduce) {.pm-cookie-consent { animation: none; }
.pm-cookie-btn:hover { transform: none; }
}

html[lang="ru"] .pm-btn {
    font-family: var(--ff);
    font-weight: 700;
    letter-spacing: 0.06em;
}




/* ── Phase-2 base additions: shell, section, mega-menu, element resets ── */



a { color: inherit; text-decoration: none; }

img { max-width: 100%; height: auto; display: block; }

button { font-family: var(--ff); }

.pm-section {
    padding-block: 0;
    margin-top: var(--section-gap);
    position: relative;
    overflow: hidden;
}
.pm-section:first-child {
    margin-top: 0;
}

.pm-shell {
    min-height: 100vh;
    max-width: 100%;
    overflow-x: hidden;
    background:
        linear-gradient(180deg, rgba(0,4,21,0.98) 0%, rgba(0,5,20,1) 48%, rgba(19,20,33,1) 100%);
}

.pm-shell > main {
    position: relative;
    max-width: 100%;
    overflow-x: hidden;
}

.pm-section-copy {
    max-width: 346px;
    font: 400 16px/1.5 var(--ff);
    color: var(--white-85);
    margin-bottom: 30px;
}
/* ──────────────────────────────────────────────────────────────
   03-home.css homepage (hero, testimonials, partners, contact, solutions, social embed)
   Extracted from prodmedia.css (order-preserving, cascade-safe).
   ────────────────────────────────────────────────────────────── */




/* Solutions final visual override */
.pm-home-solutions-grid, .pm-solutions-grid {
    display: grid;
    gap: 24px;
}

.pm-solutions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 42px;
}

.pm-solution-card, .pm-solution-related article {
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.035);
    transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
    cursor: pointer;
}

.pm-solution-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pm-solution-card {
    min-height: 360px;
    padding: clamp(26px, 4vw, 42px);
    gap: 22px;
}

.pm-solution-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding-right: 96px;
}

.pm-solution-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
}

.pm-solution-card-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.76);
    font-style: normal;
    font-size: 0.78rem;
    line-height: 1.2;
    padding: 7px 10px;
}

.pm-solution-card-arrow {
    color: var(--pink);
    margin-top: auto;
}

.pm-solution-detail-hero {
    align-items: stretch;
}

.pm-solution-detail-panel {
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.04);
    min-width: min(360px, 100%);
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.pm-solution-detail-panel div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 16px;
}

.pm-solution-detail-panel span {
    color: rgba(255, 255, 255, 0.56);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.72rem;
}

.pm-solution-detail-panel strong {
    color: #fff;
    text-align: right;
}

.pm-solution-detail-section, .pm-solution-related {
    padding: clamp(44px, 7vw, 92px) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.pm-solution-detail-copy {
    max-width: 860px;
    color: rgba(255, 255, 255, 0.74);
    font-size: clamp(1rem, 1.6vw, 1.22rem);
    line-height: 1.8;
}

.pm-solution-detail-copy p {
    margin: 0 0 18px;
}







@media (max-width: 980px) {.pm-solutions-grid {
        grid-template-columns: 1fr;
    }
.pm-solution-card {
        min-height: 300px;
    }
.pm-solution-card-top {
        padding-right: 0;
    }
.pm-solution-detail-panel {
        min-width: 0;
        width: 100%;
    }
}







@media (max-width: 640px) {.pm-solution-card {
        padding: 22px;
    }
.pm-solution-detail-panel {
        padding: 22px;
    }
.pm-solution-detail-panel div {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
.pm-solution-detail-panel strong {
        text-align: left;
    }
}

.pm-hero::after {
    content: "";
    position: absolute;
    pointer-events: none;
    opacity: 0.3;
    background:
        repeating-radial-gradient(ellipse at center,
            rgba(255,255,255,0.26) 0 1px,
            transparent 1px 14px);
    mask-image: linear-gradient(90deg, transparent 0%, #000 20%, #000 82%, transparent 100%);
}

.pm-hero {
    min-height: 676px;
    display: flex;
    align-items: center;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--bg);
}






@media (max-width: 767px) {.pm-hero { min-height: 100vh; }
}

.pm-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url("/static/main_header.avif") top center / cover no-repeat;
    transform: translate3d(0, var(--pm-hero-shift, 0), 0) scale(1.025);
    transform-origin: center top;
    animation: pmHeroBackground 1.4s var(--ease-enter) both;
    will-change: transform;
}

.pm-hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,4,21,0.5);
}

.pm-hero-meliuk {
    position: absolute;
    right: -4%;
    top: -20vh;
    z-index: 10;
    width: auto;
    height: 180vh;
    opacity: 0.45;
    pointer-events: none;
    object-fit: contain;
    mix-blend-mode: screen;
}







@media (min-width: 1440px) {.pm-hero-meliuk {
        right: -14%;
    }
}






@media (max-width: 767px) {.pm-hero-meliuk { display: none; }
}

.pm-hero::after {
    display: none;
}

.pm-hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-top: 120px;
    padding-bottom: 0;
}

.pm-hero-kicker, .pm-hero-availability, .pm-hero-location {
    display: none;
}

.pm-hero-main, .pm-hero-action-row, .pm-hero-footer {
    display: contents;
}






@media (max-width: 767px) {.pm-hero-content { padding-top: 24px; padding-bottom: 24px; }
}

.pm-hero-title {
    width: 100%;
    max-width: 100%;
    font: 900 64px/1.5 var(--ff);
    color: var(--white);
    margin: 0;
    text-transform: uppercase;
    cursor: default;
    animation: pmHeroCopyEnter var(--motion-hero) var(--ease-enter) 80ms both;
}






@media (max-width: 767px) {.pm-hero-title { font-size: 2rem; max-width: 100%; line-height: 1.4; }
}






@media (min-width: 768px) and (max-width: 1023px) {.pm-hero-title { font-size: 2.8rem; max-width: 90%; }
}

.pm-hero-title-static, .pm-hero-title-typed {
    display: block;
}

.pm-hero-title-static {
    white-space: nowrap;
}

.pm-hero-title-typed {
    position: relative;
    display: block;
    min-height: 1.5em;
    color: var(--pink);
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    font-size: clamp(22px, 3.2vw, 44px);
    line-height: 1.5;
}

.pm-hero-title-typed-text {
    position: absolute;
    inset: 0 auto auto 0;
    display: block;
    width: 0;
    max-width: 100%;
    overflow: hidden;
    opacity: 0;
    vertical-align: bottom;
    white-space: nowrap;
    animation-duration: 12s;
    animation-timing-function: steps(32, end);
    animation-iteration-count: infinite;
}

.pm-hero-title-stunning {
    color: var(--white);
}

.pm-hero-title-line {
    display: inline;
    white-space: nowrap;
}

.pm-hero-title-line + .pm-hero-title-line::before {
    content: " ";
}

.pm-hero-title-keyword {
    color: var(--pink);
    cursor: pointer;
    transition: opacity var(--motion-fast) var(--ease-standard);
}

.pm-hero-title-keyword:hover {
    opacity: 0.8;
}

.pm-hero-title-agency, .pm-hero-title-typed-text::after {
    color: var(--white);
}

.pm-hero-title-typed-text::after {
    content: "_";
    display: inline-block;
    animation: pmHeroCursor 0.9s steps(1, end) infinite;
}

.pm-hero-title-typed-text.is-1 { animation-name: pmHeroTypeOne; }

.pm-hero-title-typed-text.is-2 { animation-name: pmHeroTypeTwo; }

.pm-hero-title-typed-text.is-3 { animation-name: pmHeroTypeThree; }

.pm-hero-title-typed-text.is-4 { animation-name: pmHeroTypeFour; }

.pm-hero-subtitles {
    position: relative;
    max-width: min(760px, calc(100vw - 64px));
    min-height: calc(18px * 1.4 * 2);
    margin-top: 2rem;
    margin-bottom: 2rem;
    animation: pmHeroCopyEnter var(--motion-hero) var(--ease-enter) 180ms both;
}

.pm-hero-subtitle {
    max-width: 100%;
    font: 400 20px/1.4 var(--ff);
    color: var(--white);
    margin: 0;
    position: absolute;
    inset: 0 auto auto 0;
    opacity: 0;
    width: 100%;
    overflow: visible;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    animation-duration: 12s;
    animation-timing-function: steps(32, end);
    animation-iteration-count: infinite;
}

.pm-hero-subtitle.is-1 { animation-name: pmHeroSubOne; }

.pm-hero-subtitle.is-2 { animation-name: pmHeroSubTwo; }

.pm-hero-subtitle.is-3 { animation-name: pmHeroSubThree; }

.pm-hero-subtitle.is-4 { animation-name: pmHeroSubFour; }






@media (max-width: 767px) {.pm-hero-subtitles { max-width: 100%; min-height: auto; position: static; margin-top: 1.2rem; margin-bottom: 1.2rem; }
.pm-hero-subtitle { max-width: 100%; font-size: 16px; }
}






@media (min-width: 768px) and (max-width: 1023px) {.pm-hero-subtitle { max-width: 75%; }
}

.pm-hero-social {
    display: flex;
    gap: 0;
    margin-top: 2rem;
    animation: pmHeroCopyEnter var(--motion-hero) var(--ease-enter) 380ms both;
}

.pm-hero-social a {
    display: inline-block;
    margin-right: 1.5rem;
    transform: translateY(0) scale(1);
    transition: filter var(--motion-fast) var(--ease-standard),
        transform var(--motion-fast) var(--ease-enter);
}

.pm-hero-social a:last-child { margin-right: 0; }

.pm-hero-social a:hover { filter: drop-shadow(0 0 12px var(--pink-glow)); transform: translateY(-3px) scale(1.04); }

.pm-hero-social a:active { transform: scale(0.94); }

.pm-hero-social img { width: auto; height: auto; }

.pm-cta-strip {
    padding: 0;
    background: var(--bg);
}

.pm-cta-strip-left { flex: 1; }

.pm-cta-strip-title {
    font: 900 28px/1.05 var(--ff);
    color: var(--white);
    margin-bottom: 14px;
    text-transform: uppercase;
}

.pm-cta-strip-text {
    font: 400 16px/1.55 var(--ff);
    color: var(--white-85);
}

.pm-projects-section {
    padding: 98px 0 116px;
    background: var(--bg);
}






@media (max-width: 767px) {.pm-projects-section { padding: var(--section-py) 0; }
}

.pm-home-portfolio-carousel {
    position: relative;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    contain: paint;
    cursor: default;
    overscroll-behavior-x: contain;
    scroll-behavior: auto;
    scroll-snap-type: none;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    --pm-portfolio-edge-fade: min(96px, 9vw);
    -webkit-mask-image: linear-gradient(
        90deg,
        transparent 0,
        #000 var(--pm-portfolio-edge-fade),
        #000 calc(100% - var(--pm-portfolio-edge-fade)),
        transparent 100%
    );
    mask-image: linear-gradient(
        90deg,
        transparent 0,
        #000 var(--pm-portfolio-edge-fade),
        #000 calc(100% - var(--pm-portfolio-edge-fade)),
        transparent 100%
    );
}

.pm-home-portfolio-carousel::-webkit-scrollbar {
    display: none;
}

.pm-home-portfolio-carousel::before, .pm-home-portfolio-carousel::after {
    position: absolute;
    z-index: 4;
    top: 0;
    bottom: 0;
    width: min(96px, 9vw);
    content: "";
    pointer-events: none;
}

.pm-home-portfolio-carousel::before {
    left: 0;
    background: linear-gradient(90deg, var(--bg), rgba(0,4,21,0));
}

.pm-home-portfolio-carousel::after {
    right: 0;
    background: linear-gradient(270deg, var(--bg), rgba(0,4,21,0));
}

.pm-home-portfolio-carousel.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
}

.pm-home-portfolio-carousel.is-dragging .pm-home-portfolio-card {
    cursor: grabbing;
    user-select: none;
}

.pm-home-portfolio-carousel img {
    -webkit-user-drag: none;
    user-select: none;
}

.pm-home-portfolio-track {
    display: flex;
    width: max-content;
    gap: 38px;
    transform: none;
}

.pm-home-portfolio-card {
    display: block;
    flex: 0 0 clamp(320px, 28vw, 405px);
    width: clamp(320px, 28vw, 405px);
    scroll-snap-align: start;
    cursor: pointer;
    color: inherit;
    text-decoration: none;
}






@media (max-width: 767px) {.pm-home-portfolio-carousel {
        scroll-snap-type: none;
        --pm-portfolio-edge-fade: 52px;
        -webkit-mask-image: linear-gradient(
            90deg,
            #000 0,
            #000 calc(100% - var(--pm-portfolio-edge-fade)),
            transparent 100%
        );
        mask-image: linear-gradient(
            90deg,
            #000 0,
            #000 calc(100% - var(--pm-portfolio-edge-fade)),
            transparent 100%
        );
    }
.pm-home-portfolio-carousel::before {
        display: none;
    }
.pm-home-portfolio-carousel::after {
        width: 52px;
    }
.pm-home-portfolio-track {
        gap: 18px;
    }
.pm-home-portfolio-card {
        flex-basis: min(318px, calc(100vw - 72px));
        width: min(318px, calc(100vw - 72px));
        scroll-snap-align: start;
    }
}

.pm-blog-feature {
    position: relative;
    min-height: 610px;
    overflow: hidden;
    padding: 104px 0;
    background:
        linear-gradient(90deg, rgba(0,4,21,0.98), rgba(0,4,21,0.82) 50%, rgba(0,4,21,0.45) 100%),
        url("/static/blog-hero-clean.avif") right center / cover no-repeat,
        var(--bg);
}






@media (max-width: 767px) {.pm-blog-feature {
        min-height: auto;
        padding: 48px 0 44px;
        background:
            linear-gradient(0deg, rgba(0,4,21,0.97), rgba(0,4,21,0.92) 50%, rgba(0,4,21,0.88)),
            url("/static/blog-hero-clean.avif") 64% center / cover no-repeat,
            var(--bg);
    }
}

.pm-blog-feature-inner {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 120px;
    align-items: center;
}






@media (max-width: 1023px) {.pm-blog-feature-inner { grid-template-columns: 1fr; gap: 42px; }
}






@media (max-width: 767px) {.pm-blog-feature-inner { gap: 28px; }
}

.pm-blog-feature-nav ul {
    list-style: none;
    margin-top: 32px;
    display: grid;
    gap: 16px;
}






@media (max-width: 767px) {.pm-blog-feature-nav ul {
        margin-top: 20px;
        gap: 10px;
    }
}

.pm-blog-feature-nav li {
    position: relative;
    transition: color var(--motion-fast) var(--ease-standard);
}

.pm-blog-feature-nav li button {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--white-72);
    font: 700 16px/1.25 var(--ff);
    letter-spacing: 0.04em;
    text-align: left;
    cursor: pointer;
}

.pm-blog-feature-nav li:hover button, .pm-blog-feature-nav li.active button {
    color: var(--pink);
}

.pm-blog-feature-nav li button:focus-visible {
    color: var(--pink);
    outline: 2px solid var(--pink);
    outline-offset: 5px;
}

.pm-blog-feature-copy {
    max-width: 520px;
    align-self: center;
}






@media (max-width: 767px) {.pm-blog-feature-copy { align-self: start; }
.pm-blog-feature-copy p { font-size: 14px; line-height: 1.5; margin-bottom: 14px; }
.pm-blog-feature-more { margin-top: 16px; }
}

.pm-blog-feature-copy p {
    font: 400 16px/1.45 var(--ff);
    color: rgba(255,255,255,0.85);
    margin-bottom: 20px;
}

.pm-blog-feature-copy p:last-of-type {
    margin-bottom: 0;
}






@media (max-width: 767px) {.pm-blog-feature-copy p + p {
        display: none;
    }
}

.pm-blog-feature-more {
    margin-top: 20px;
}

.pm-contact {
    padding: 112px 0 150px;
    background: var(--bg);
}






@media (max-width: 767px) {.pm-contact { padding: var(--section-py) 0; }
}

.pm-contact-card {
    max-width: 1120px;
    margin: 0 auto;
    border-radius: 0;
    background: var(--bg-surface);
    border-bottom: 4px solid var(--pink);
    overflow: hidden;
}






@media (min-width: 1024px) {.pm-contact-card {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

.pm-contact-visual {
    display: none;
    background: #171827;
    position: relative;
    min-height: 400px;
    overflow: hidden;
}






@media (min-width: 1024px) {.pm-contact-visual { display: block; }
}

.pm-contact-full {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.pm-contact-hand-overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 58%;
    height: 100%;
    object-fit: contain;
    object-position: left center;
    z-index: 2;
    transition: opacity 0.15s ease;
}

.pm-contact-visual-line {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: var(--pink);
}

.pm-contact-form-area {
    padding: 58px 70px;
}






@media (max-width: 1023px) {.pm-contact-form-area { padding: 44px 36px; }
}






@media (max-width: 767px) {.pm-contact-form-area { padding: 32px 22px 76px; }
}

.pm-contact-submit {
    margin-top: 8px;
}

.pm-contact-submit:disabled, .pm-contact-submit.is-loading {
    cursor: wait;
    opacity: 0.72;
}

.pm-contact-full.cursor-kick {
    animation: pm-cursor-kick 0.6s ease;
}

.pm-hero-social {
    margin-top: 28px;
}

.pm-blog-feature {
    overflow: hidden;
    overflow: clip;
}







@media (max-width: 480px) {.pm-hero-action-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
        margin-top: 28px;
    }
.pm-hero-availability {
        max-width: none;
    }
.pm-hero-location {
        display: none;
    }
}







@media (max-width: 767px) and (max-height: 700px) {.pm-hero-content {
        padding-top: calc(82px + env(safe-area-inset-top, 0));
        padding-bottom: calc(14px + env(safe-area-inset-bottom, 0));
    }
.pm-hero-kicker {
        padding-bottom: 10px;
    }
.pm-hero-main {
        padding: 18px 0;
    }
.pm-hero-title {
        margin-bottom: 14px;
        font-size: 29px;
    }
.pm-hero-subtitle {
        font-size: 14px;
        line-height: 1.45;
    }
.pm-hero-action-row {
        margin-top: 22px;
    }
.pm-hero-footer {
        padding-top: 10px;
    }
}






/* Solutions section */
.pm-home-solutions-section {
    background:
        radial-gradient(circle at 12% 12%, rgba(214, 0, 127, 0.16), transparent 30%),
        linear-gradient(135deg, rgba(8, 9, 24, 0.96), rgba(20, 20, 38, 0.98));
}

.pm-solution-card, .pm-solution-related article {
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.035);
    transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
    cursor: pointer;
}

.pm-solution-card:hover, .pm-solution-related article:hover {
    transform: translateY(-4px);
    border-color: rgba(214, 0, 127, 0.68);
    background: rgba(255, 255, 255, 0.055);
}

.pm-solution-number {
    color: var(--pink);
    font-family: var(--font-heading);
    letter-spacing: 0.12em;
    font-size: 0.85rem;
    text-transform: uppercase;
}

.pm-solution-category {
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin: 0;
}

.pm-solution-card h2 {
    color: #fff;
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0;
    line-height: 1.05;
    margin: 0;
}

.pm-solution-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
}

.pm-solution-card-meta span {
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.76);
    font-style: normal;
    font-size: 0.78rem;
    padding: 7px 10px;
}

.pm-solutions-hero::after {
    content: "";
    position: absolute;
    inset: auto 4% 8% auto;
    width: min(34vw, 420px);
    aspect-ratio: 1;
    border: 1px solid rgba(214, 0, 127, 0.24);
    transform: rotate(12deg);
    pointer-events: none;
}

.pm-solutions-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 42px;
}

.pm-solution-card {
    min-height: 360px;
    padding: clamp(26px, 4vw, 42px);
    display: flex;
    flex-direction: column;
    gap: 22px;
    overflow: hidden;
}

.pm-solution-card.is-featured::before {
    content: "FEATURED";
    position: absolute;
    right: 26px;
    top: 24px;
    color: var(--pink);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    font-weight: 800;
}

.pm-solution-card-top {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding-right: 96px;
}

.pm-solution-card h2 {
    max-width: 720px;
    font-size: clamp(2rem, 4vw, 4.2rem);
}

.pm-solution-card p {
    max-width: 680px;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.7;
    margin: 0;
}

.pm-solution-card-arrow {
    color: var(--pink);
    margin-top: auto;
}

.pm-solution-detail-hero {
    align-items: stretch;
}

.pm-solution-detail-panel {
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.04);
    min-width: min(360px, 100%);
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.pm-solution-detail-panel div {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 16px;
}

.pm-solution-detail-panel span {
    color: rgba(255, 255, 255, 0.56);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.72rem;
}

.pm-solution-detail-panel strong {
    color: #fff;
    text-align: right;
}

.pm-solution-detail-section, .pm-solution-related {
    padding: clamp(44px, 7vw, 92px) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.pm-solution-detail-section h2, .pm-solution-related h2 {
    color: #fff;
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0;
    font-size: clamp(2rem, 4vw, 4rem);
    line-height: 1.05;
    margin: 0 0 20px;
}

.pm-solution-detail-copy {
    max-width: 860px;
    color: rgba(255, 255, 255, 0.74);
    font-size: clamp(1rem, 1.6vw, 1.22rem);
    line-height: 1.8;
}

.pm-solution-detail-copy p {
    margin: 0 0 18px;
}

.pm-solution-detail-columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.pm-solution-detail-columns article {
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.035);
    padding: 28px;
}

.pm-solution-detail-columns h2 {
    font-size: clamp(1.35rem, 2vw, 2rem);
}

.pm-solution-check-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 22px 0 0;
    padding: 0;
}

.pm-solution-check-list li {
    position: relative;
    color: rgba(255, 255, 255, 0.74);
    line-height: 1.55;
    padding-left: 24px;
}

.pm-solution-check-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.65em;
    width: 8px;
    height: 8px;
    background: var(--pink);
}

.pm-solution-feature-grid, .pm-solution-related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.pm-solution-feature-grid article, .pm-solution-related article {
    padding: 24px;
}

.pm-solution-feature-grid h3, .pm-solution-related h3 {
    color: #fff;
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0;
    margin: 10px 0;
}

.pm-solution-feature-grid p, .pm-solution-related p {
    color: rgba(255, 255, 255, 0.68);
    line-height: 1.65;
    margin: 0;
}

.pm-solution-related-work img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    margin-bottom: 18px;
    border: 1px solid rgba(255, 255, 255, 0.12);
}







@media (max-width: 980px) {.pm-solutions-grid, .pm-solution-detail-columns, .pm-solution-feature-grid, .pm-solution-related-grid {
        grid-template-columns: 1fr;
    }
.pm-solution-card {
        min-height: 300px;
    }
.pm-solution-card-top {
        padding-right: 0;
    }
.pm-solution-card.is-featured::before {
        position: static;
        order: -1;
        align-self: flex-start;
    }
.pm-solution-detail-panel {
        min-width: 0;
        width: 100%;
    }
}







@media (max-width: 640px) {.pm-solution-card, .pm-solution-detail-columns article {
        padding: 22px;
    }
.pm-solution-detail-panel {
        padding: 22px;
    }
.pm-solution-detail-panel div {
        flex-direction: column;
        gap: 6px;
    }
.pm-solution-detail-panel strong {
        text-align: left;
    }
}

.pm-contact-visual > .pm-contact-progressive {
    width: 100%;
    height: 100%;
}

.pm-contact-progressive.has-preview::before {
    display: none;
}

.pm-contact-progressive > .pm-contact-full {
    object-fit: contain;
    object-position: center;
    filter: none;
}







/* ── Social App Embed (Phone Frame + Instagram/TikTok UI) ── */

.pm-social-section { padding: 48px 0; }

.pm-ig-topbar { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px; flex-shrink: 0; }

.pm-ig-handle { font-size: 16px; font-weight: 700; }

.pm-ig-topbar-icons { font-size: 20px; }

.pm-ig-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }

.pm-ig-scroll::-webkit-scrollbar { display: none; }

.pm-ig-header { display: flex; align-items: center; gap: 20px; padding: 8px 14px; }

.pm-ig-avatar-wrap { flex-shrink: 0; }

.pm-ig-avatar-ring { width: 82px; height: 82px; border-radius: 50%; padding: 3px; background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }

.pm-ig-avatar-ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid #000; }

.pm-ig-avatar-placeholder { width: 100%; height: 100%; border-radius: 50%; background: #333; border: 3px solid #000; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 700; text-transform: uppercase; }

.pm-ig-stats { display: flex; gap: 18px; }

.pm-ig-stat { display: flex; flex-direction: column; align-items: center; }

.pm-ig-stat strong { font-size: 16px; }

.pm-ig-stat span { font-size: 12px; color: #aaa; }

.pm-ig-bio { padding: 4px 14px; }

.pm-ig-bio strong { font-size: 14px; }

.pm-ig-bio p { font-size: 12px; line-height: 1.4; color: #ccc; margin-top: 2px; }

.pm-ig-highlights { display: flex; gap: 14px; padding: 12px 14px; overflow-x: auto; scrollbar-width: none; }

.pm-ig-highlights::-webkit-scrollbar { display: none; }

.pm-ig-highlight { display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0; }

.pm-ig-highlight-circle { width: 58px; height: 58px; border-radius: 50%; border: 2px solid #333; overflow: hidden; display: flex; align-items: center; justify-content: center; }

.pm-ig-highlight-circle img { width: 100%; height: 100%; object-fit: cover; }

.pm-ig-highlight span { font-size: 12px; color: #ccc; max-width: 60px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pm-ig-tabs { display: flex; border-top: 1px solid #333; flex-shrink: 0; }

.pm-ig-tab { flex: 1; text-align: center; padding: 10px; font-size: 16px; color: #666; cursor: pointer; }

.pm-ig-tab.active { color: #fff; border-top: 1px solid #fff; margin-top: -1px; }

.pm-ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }

.pm-ig-grid-item { aspect-ratio: 1; position: relative; overflow: hidden; background: #111; }

.pm-ig-grid-item img { width: 100%; height: 100%; object-fit: cover; }

.pm-ig-bottomnav { display: flex; justify-content: space-around; padding: 10px 0; border-top: 1px solid #333; flex-shrink: 0; }

.pm-ig-nav-item { font-size: 20px; color: #666; cursor: pointer; }

.pm-ig-nav-item.active { color: #fff; }

.pm-tt-topbar { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px; flex-shrink: 0; }

.pm-tt-topbar span { font-size: 20px; }

.pm-tt-handle { font-size: 16px; font-weight: 700; }

.pm-tt-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }

.pm-tt-scroll::-webkit-scrollbar { display: none; }

.pm-tt-header { display: flex; flex-direction: column; align-items: center; padding: 20px 16px; }

.pm-tt-avatar { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; margin-bottom: 12px; }

.pm-tt-avatar img { width: 100%; height: 100%; object-fit: cover; }

.pm-tt-avatar-placeholder { width: 100%; height: 100%; background: #333; display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: 700; text-transform: uppercase; }

.pm-tt-name { font-size: 20px; font-weight: 700; }

.pm-tt-handle-line { font-size: 14px; color: #aaa; margin-top: 2px; }

.pm-tt-stats { display: flex; align-items: center; gap: 20px; margin: 16px 0; }

.pm-tt-stat { display: flex; flex-direction: column; align-items: center; }

.pm-tt-stat strong { font-size: 16px; }

.pm-tt-stat span { font-size: 12px; color: #aaa; }

.pm-tt-stat-divider { width: 1px; height: 28px; background: #333; }

.pm-tt-bio { font-size: 12px; color: #ccc; text-align: center; max-width: 240px; line-height: 1.4; }

.pm-tt-tabs { display: flex; border-top: 1px solid #333; flex-shrink: 0; }

.pm-tt-tab { flex: 1; text-align: center; padding: 10px; font-size: 14px; font-weight: 600; color: #666; cursor: pointer; }

.pm-tt-tab.active { color: #fff; border-bottom: 2px solid #fff; }

.pm-tt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }

.pm-tt-grid-item { aspect-ratio: 9 / 16; position: relative; overflow: hidden; background: #111; }

.pm-tt-grid-item img { width: 100%; height: 100%; object-fit: cover; }

.pm-tt-grid-overlay { position: absolute; top: 6px; left: 6px; font-size: 12px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.8); }

.pm-tt-grid-caption { position: absolute; bottom: 4px; left: 4px; right: 4px; font-size: 12px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.8); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pm-tt-bottomnav { display: flex; justify-content: space-around; padding: 8px 0; border-top: 1px solid #333; flex-shrink: 0; }

.pm-tt-nav-item { font-size: 20px; color: #666; cursor: pointer; }

.pm-tt-nav-item.active { color: #fff; }

.pm-tt-add { width: 36px; height: 22px; background: linear-gradient(90deg, #25f4ee, #fe2c55); border-radius: 6px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; font-weight: 700; margin-top: 2px; }

.pm-ig-handle, .pm-tt-name { display: inline-flex; align-items: center; gap: 6px; }

.pm-ig-highlight small { color: #777; font-size: 12px; line-height: 1; max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pm-tt-stats { justify-content: center; gap: 12px; flex-wrap: wrap; }

.pm-tt-grid-overlay { left: 6px; right: 6px; display: flex; flex-wrap: wrap; gap: 4px; }






/* CMS homepage sections keep the production layouts while allowing block order. */
.pm-home-sections {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
}

.pm-home-slot {
    width: 100%;
    min-width: 0;
}

html[lang="ru"] .pm-hero-title {
    font-family: var(--ff);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 0.9;
    font-size: clamp(54px, 4.7vw, 94px);
}

html[lang="ru"] .pm-hero-title-keyword {
    font-weight: 800;
}

html[lang="ru"] .pm-hero-subtitle {
    font-family: var(--ff);
    font-weight: 400;
}






@media (max-width: 767px) {html[lang="ru"] .pm-hero-title {
        font-size: clamp(34px, 9vw, 52px);
        line-height: 1.0;
        letter-spacing: -0.02em;
    }
}

/* Home services section: wide card grid (~35/65), landscape cards (~1.4:1).
   Scoped to home_services only /services keeps the current base. Desktop ≥1024px. */
@media (min-width: 1024px) {
    [data-home-block="home_services"] .pm-services-layout {
        grid-template-columns: minmax(280px, 0.7fr) minmax(0, 1.35fr);
        gap: 40px;
        align-items: start;
    }
    [data-home-block="home_services"] .pm-services-grid {
        gap: 20px;
    }
    [data-home-block="home_services"] .pm-service-card {
        min-height: 0;
        height: auto;
        aspect-ratio: 1.4 / 1;
        padding: 28px 28px 52px;
    }
}

/* CTA strip: title + button in one row → divider → description. */
.pm-cta-strip__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
}
.pm-cta-strip__divider {
    width: 100%;
    height: 2px;
    margin-top: 20px;
    background: var(--pink);
}
.pm-cta-strip-text {
    max-width: 900px;
    margin: 18px 0 0;
}
@media (max-width: 760px) {
    .pm-cta-strip__top {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }
    .pm-cta-strip__divider { margin-top: 24px; }
}

/* CTA strip: force block layout (was flex → 4 columns). One line under top row. */
.pm-cta-strip .pm-container {
    display: block !important;
    min-height: 0 !important;
    border-bottom: 0 !important;
}
.pm-cta-strip .pm-container::after { display: none !important; }
.pm-cta-strip__top {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    padding-bottom: 18px;
    border-bottom: 2px solid var(--pink);
}
.pm-cta-strip-title {
    margin: 0 !important;
    white-space: nowrap;
}
.pm-cta-strip-text {
    max-width: 900px;
    margin: 16px 0 0 !important;
}
/* ──────────────────────────────────────────────────────────────
   03b-testimonials.css testimonials slider + partners marquee
   section (home). Extracted from 03-home.css + 08-overrides.css
   (order-preserving, cascade-safe). 2026-07-22.
   ────────────────────────────────────────────────────────────── */

.pm-partners-carousel::before, .pm-partners-carousel::after {
    position: absolute;
    z-index: 4;
    top: 0;
    bottom: 0;
    width: min(96px, 9vw);
    content: "";
    pointer-events: none;
}

.pm-partners-carousel::before {
    left: 0;
    background: linear-gradient(90deg, var(--bg), rgba(0,4,21,0));
}

.pm-partners-carousel::after {
    right: 0;
    background: linear-gradient(270deg, var(--bg), rgba(0,4,21,0));
}

.pm-partners-carousel::before {
    background: linear-gradient(90deg, #171827, rgba(23,24,39,0));
}

.pm-partners-carousel::after {
    background: linear-gradient(270deg, #171827, rgba(23,24,39,0));
}






@media (max-width: 767px) {.pm-partners-carousel::before {
        display: none;
    }
.pm-partners-carousel::after {
        width: 52px;
    }
}

.pm-partners-carousel {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
    contain: paint;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.pm-partners-carousel::-webkit-scrollbar {
    display: none;
}

.pm-partners-track {
    display: flex;
    gap: 24px;
    width: max-content;
}

.pm-partner-card {
    scroll-snap-align: start;
}

.pm-partner-card {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 180px;
    height: 80px;
    padding: 12px 16px;
    background: transparent;
    border: none;
    border-radius: 0;
    text-decoration: none;
}

.pm-partner-card:hover {
    background: transparent;
}

.pm-partner-logo {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 52px;
    object-fit: contain;
    filter: grayscale(1) sepia(0.15) hue-rotate(215deg) saturate(0.7) brightness(1.12);
    opacity: 0.72;
    transition: opacity 0.3s ease, filter 0.3s ease;
}

.pm-partner-logo:hover {
    opacity: 0.85;
    filter: grayscale(1) brightness(1);
}

.pm-partner-logo.airborn, .pm-partner-logo.hardman, .pm-partner-logo.b-tools, .pm-partner-logo.legalinpol, .pm-partner-logo.alg-legal {
    filter: brightness(0) invert(1);
    opacity: 0.72;
    transition: opacity var(--motion-base) var(--ease-standard);
}

.pm-partner-logo.airborn:hover, .pm-partner-logo.hardman:hover, .pm-partner-logo.b-tools:hover, .pm-partner-logo.legalinpol:hover, .pm-partner-logo.alg-legal:hover {
    opacity: 0.95;
}

.pm-partner-logo.mayaktv, .pm-partner-logo.telewizja-mlodych {
    mix-blend-mode: screen;
    opacity: 0.72;
}

.pm-partner-logo.mayaktv:hover, .pm-partner-logo.telewizja-mlodych:hover {
    opacity: 0.95;
}

.pm-partners-scroll {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
}

.pm-partners-scroll .pm-partners-carousel {
    margin-top: 0;
    flex: 1 1 auto;
    min-width: 0;
}

.pm-testimonials-section {
    padding: 72px 0;
    background: var(--bg-dark);
}






@media (max-width: 767px) {.pm-testimonials-section { padding: var(--section-py) 0; }
}

.pm-testimonials-layout {
    display: grid;
    grid-template-columns: minmax(0, 30%) minmax(0, 64%);
    gap: 6%;
    align-items: start;
    min-width: 0;
}






@media (max-width: 1023px) {.pm-testimonials-layout { grid-template-columns: minmax(0, 1fr); gap: 42px; }
}

.pm-partners-block {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
}







/* ── Partners marquee wider, two-row bidirectional (figure-8) ── */
.pm-partners-marquee {
    width: 100%;
    max-width: 1400px;
    margin: 24px auto 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.pm-marquee-scroll-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.pm-marquee-scroll-wrap::-webkit-scrollbar { display: none; }

.pm-marquee-row {
    display: flex;
    gap: 28px;
    width: max-content;
    padding: 4px 0;
}

.pm-marquee-card {
    flex-shrink: 0;
    width: 170px;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px 22px;
    background: transparent;
    border: none;
    border-radius: 0;
}

.pm-marquee-card:hover {
    background: transparent;
}

.pm-marquee-card .pm-partner-logo {
    max-height: 44px;
    max-width: 78%;
    width: auto;
    height: auto;
    object-fit: contain;
}







@media (max-width: 767px) {.pm-partners-marquee { gap: 12px; }
.pm-marquee-card { width: 130px; height: 76px; padding: 12px 14px; }
.pm-marquee-card .pm-partner-logo { max-height: 34px; }
.pm-marquee-row { gap: 18px; animation-duration: 35s; }
}

.pm-testimonial-stage {
    position: relative;
    width: 100%;
    min-width: 0;
    perspective: 1300px;
    perspective-origin: 50% 44%;
}

.pm-testimonial-scene {
    position: relative;
    height: 460px;
    transform-style: preserve-3d;
}

.pm-testimonial-scene::before {
    position: absolute;
    z-index: 0;
    right: 4px;
    bottom: 0;
    left: 4px;
    height: 1px;
    content: "";
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(202,2,116,.42), transparent);
    box-shadow: 0 22px 42px rgba(202,2,116,.1);
    transform: rotateX(74deg) translateZ(-92px);
}

.pm-testimonial {
    position: absolute;
    top: 0;
    left: 20px;
    z-index: 1;
    display: grid;
    width: calc(100% - 40px);
    height: 418px;
    grid-template-columns: 83px minmax(0, 1fr);
    grid-template-rows: 83px minmax(0, 1fr);
    column-gap: 25px;
    row-gap: 27px;
    text-align: left;
    margin: 0;
    padding: 25px 25px 66px;
    overflow: hidden;
    cursor: pointer;
    border: 0;
    background: #1e1f31;
    box-shadow:
        0 38px 72px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.018);
    transform-origin: 50% 50%;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transition:
        transform 920ms cubic-bezier(.16,1,.3,1),
        opacity 520ms var(--ease-standard),
        filter 720ms var(--ease-standard),
        box-shadow 720ms var(--ease-enter);
    will-change: transform, opacity;
}

.pm-testimonial::before {
    position: absolute;
    z-index: -1;
    top: -58%;
    left: -86%;
    width: 54%;
    height: 220%;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.055), transparent);
    transform: rotate(17deg) translateX(-180%);
    transition: transform 1180ms cubic-bezier(.16,1,.3,1);
}

.pm-testimonial.is-active {
    z-index: 4;
    opacity: 1;
    filter: none;
    cursor: default;
    transform: translate3d(0, 0, 68px) rotateX(0) rotateY(0) scale(1);
    box-shadow:
        0 40px 82px rgba(0,0,0,.34),
        inset 0 1px 0 rgba(255,255,255,.026);
}

.pm-testimonial.is-active::before {
    transform: rotate(17deg) translateX(530%);
}

.pm-testimonial.is-next {
    z-index: 3;
    opacity: .58;
    filter: saturate(.5) brightness(.72);
    transform: translate3d(28px, 18px, -88px) rotateY(-5deg) scale(.985);
}

.pm-testimonial.is-prev {
    z-index: 2;
    opacity: .32;
    filter: saturate(.36) brightness(.62);
    transform: translate3d(-28px, 24px, -152px) rotateY(5deg) scale(.96);
}

.pm-testimonial.is-away {
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(0, 34px, -230px) rotateX(-4deg) scale(.88);
}






@media (max-width: 767px) {.pm-testimonial-stage {
        margin-inline: auto;
        min-height: 448px;
        perspective: 1100px;
    }
.pm-testimonial-scene { height: 438px; }
.pm-testimonial.is-next {
        transform: translate3d(18px, 15px, -76px) rotateY(-4deg) scale(.98);
    }
.pm-testimonial.is-prev {
        transform: translate3d(-18px, 20px, -132px) rotateY(4deg) scale(.96);
    }
}






@media (max-width: 389px) {.pm-testimonial {
        left: 12px;
        width: calc(100% - 24px);
        grid-template-columns: 76px minmax(0, 1fr);
        column-gap: 18px;
        padding-right: 20px;
        padding-left: 20px;
    }
.pm-testimonial-avatar {
        width: 76px;
        height: 76px;
    }
}

.pm-testimonial-avatar {
    position: relative;
    display: grid;
    width: 83px;
    height: 83px;
    place-items: center;
    color: rgba(255,255,255,.84);
    font: 700 20px/1 var(--ff);
    background: linear-gradient(135deg, #ca0274 0 52%, #7425aa 52% 100%);
    border-bottom: 3px solid var(--pink);
    box-shadow: 0 14px 28px rgba(0,0,0,.18);
    transform: translateZ(28px);
}

.pm-testimonial.is-tone-1 .pm-testimonial-avatar {
    color: transparent;
    background: url("/static/testimonial-yulia.png") center / cover no-repeat;
}

.pm-testimonial.is-tone-2 .pm-testimonial-avatar {
    background: linear-gradient(135deg, #8128bb 0 48%, #ca0274 48% 100%);
}

.pm-testimonial.is-tone-3 .pm-testimonial-avatar {
    background: linear-gradient(135deg, #ca0274 0 38%, #4728a4 38% 100%);
}

.pm-testimonial-person {
    align-self: center;
    min-width: 0;
    transform: translateZ(22px);
}

.pm-testimonial-author {
    max-width: 9ch;
    font: 400 16px/1.22 var(--ff);
    color: var(--white);
    margin: 0;
}

.pm-testimonial-role {
    margin: 3px 0 0;
    font: 400 14px/1.4 var(--ff);
    color: rgba(255,255,255,0.65);
}

.pm-testimonial-company {
    margin: 8px 0 0;
    color: var(--pink);
    font: 400 14px/1.22 var(--ff);
    letter-spacing: 2.1px;
    text-transform: lowercase;
}

.pm-testimonial-quote {
    grid-column: 1 / -1;
    align-self: start;
    max-width: 270px;
    margin: 0;
    color: #e8e8e8;
    font: 400 20px/1.218 var(--ff);
    transform: translateZ(18px);
}

.pm-testimonial-controls {
    position: absolute;
    z-index: 8;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    pointer-events: none;
}

.pm-testimonial-control, .pm-testimonial-dot {
    border: 0;
    color: inherit;
    background: transparent;
    cursor: pointer;
}

.pm-testimonial-control {
    width: 28px;
    height: 28px;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.55);
    font: 400 20px/1 var(--ff);
    outline: none;
    pointer-events: auto;
    transition:
        color var(--motion-fast) var(--ease-standard),
        transform var(--motion-fast) var(--ease-enter);
}

.pm-testimonial-control:focus-visible {
    color: var(--pink);
    outline: 1px solid var(--pink);
    outline-offset: 2px;
}

.pm-testimonial-control:hover {
    color: var(--pink);
    transform: translateX(-2px);
}

.pm-testimonial-control:last-child:hover {
    transform: translateX(2px);
}

.pm-testimonial-progress {
    display: none;
}

.pm-testimonial-counter {
    min-width: 44px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.55);
    font: 400 20px/1 var(--ff);
    white-space: nowrap;
}

.pm-testimonial-counter strong {
    color: inherit;
    font: inherit;
}







/* ── NEW Testimonial slider + Partners grid ── */
.pm-testimonial-stage { width: 100%; min-width: 0; }

.pm-testimonial-avatar {
    aspect-ratio: 1;
    border-radius: 0;
    background: linear-gradient(135deg, var(--pink), var(--pink-lite));
    display: flex; align-items: center; justify-content: center;
    color: var(--white); font: 800 14px/1 var(--ff);
}

.pm-testimonial-author { margin: 0; color: var(--white); font: 700 16px/1.15 var(--ff); }

.pm-testimonial-role { margin: 2px 0 0; color: var(--white-72); font: 400 14px/1.3 var(--ff); }

.pm-testimonial-company { margin: 4px 0 0; color: var(--pink); font: 400 14px/1 var(--ff); letter-spacing: 0.04em; }

.pm-testimonial-quote {
    margin: 9% 0 0;
    color: rgba(255,255,255,0.82);
    font: 400 16px/1.32 var(--ff);
    flex: 1;
}







/* ── Partners static grid ── */
.pm-partners-grid {
    width: 94%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 7%;
    row-gap: 52px;
    margin-top: 40px;
}






@media (max-width: 1023px) {.pm-partners-grid { grid-template-columns: repeat(2, 1fr); }
}







/* ── Partners marquee v2 two-row bidirectional ── */
.pm-partners-marquee-v2 {
    margin-top: 40px;
    overflow: hidden;
    width: 100%;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

@media (max-width: 767px) {.pm-partner-card {
        width: 160px;
        height: 90px;
        padding: 16px 20px;
    }
.pm-partners-track {
        gap: 16px;
    }
}



    /* Floating project actions: hidden on mobile (mobile nav has its own CTA) no overlap */
    @media (max-width: 767px) {

    /* Partners: stable 2×3 grid (all six visible), controls attached, names under logos */
    .pm-partners-block .pm-partners-scroll { margin-top: 24px; gap: 8px; }
.pm-partners-block .pm-partners-carousel { overflow: visible; -webkit-overflow-scrolling: auto; contain: none; }
.pm-partners-block .pm-partners-track { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; width: 100%; }
.pm-partners-block .pm-partner-card { width: auto; height: auto; min-height: 96px; padding: 14px 10px; flex-direction: column; }
.pm-partners-block .pm-partner-card:last-child { grid-column: 1 / -1; justify-self: center; max-width: calc(50% - 6px); }
.pm-partners-block .pm-partner-logo { max-height: 46px; max-width: 80%; }
.pm-partner-name { display: block; margin-top: 8px; font-size: 12px; letter-spacing: .02em; color: rgba(255,255,255,.72); text-align: center; }
}

@media (min-width: 768px) {.pm-partner-name { display: none; }
}





/* Mobile layout hardening */
.pm-testimonials-layout {
    min-width: 0;
}

@media (max-width: 767px) {.pm-testimonials-layout {
        gap: 52px;
        align-items: start;
    }
.pm-testimonial-stage {
        width: 100%;
        min-height: 0;
        margin-inline: 0;
        perspective: 1100px;
    }
.pm-testimonial-heading {
        max-width: 100%;
        margin-bottom: 24px;
    }
.pm-testimonial-heading .pm-section-title {
        max-width: 100%;
        font-size: clamp(26px, 7.4vw, 32px);
        line-height: 1.08;
        overflow-wrap: normal;
        word-break: normal;
    }
.pm-testimonial-scene {
        width: 100%;
        height: 350px;
    }
.pm-testimonial {
        left: 0;
        width: 100%;
        height: 330px;
        grid-template-columns: 64px minmax(0, 1fr);
        grid-template-rows: 64px minmax(0, 1fr);
        column-gap: 18px;
        row-gap: 24px;
        padding: 22px 20px 58px;
    }
.pm-testimonial.is-next {
        transform: translate3d(12px, 12px, -76px) rotateY(-3deg) scale(.985);
    }
.pm-testimonial.is-prev {
        transform: translate3d(-12px, 16px, -132px) rotateY(3deg) scale(.97);
    }
.pm-testimonial-avatar {
        width: 64px;
        height: 64px;
        font-size: 20px;
    }
.pm-testimonial-author {
        max-width: 14ch;
        font-size: 16px;
    }
.pm-testimonial-company {
        margin-top: 6px;
        font-size: 12px;
        letter-spacing: 1.7px;
    }
.pm-testimonial-quote {
        max-width: none;
        font-size: 15px;
        line-height: 1.28;
    }
.pm-testimonial-controls {
        bottom: 19px;
    }
html[lang="ru"] .pm-testimonial-scene {
        height: 362px;
    }
html[lang="ru"] .pm-testimonial {
        height: 342px;
    }
}

.pm-testimonials-section {
    content-visibility: auto;
    contain-intrinsic-size: auto 760px;
}





@media (prefers-reduced-motion: reduce) {.pm-partners-carousel {
        overflow-x: auto;
        mask-image: none;
        -webkit-mask-image: none;
    }
}





@media (max-width: 767px) {.pm-testimonials-section {
        padding-top: var(--section-py);
        padding-bottom: var(--section-py);
    }
.pm-testimonials-layout {
        gap: 34px;
    }
}





@media (max-width: 339px) {.pm-testimonial-scene {
        height: 362px;
    }
.pm-testimonial {
        left: 0;
        width: 100%;
        height: 342px;
        grid-template-columns: 58px minmax(0, 1fr);
        grid-template-rows: 58px minmax(0, 1fr);
        column-gap: 15px;
        padding-inline: 17px;
    }
.pm-testimonial-avatar {
        width: 58px;
        height: 58px;
    }
.pm-testimonial-quote {
        font-size: 16px;
    }
}

/* Desktop testimonial composition: match the approved editorial layout.
   State classes, transforms, transitions and carousel behaviour stay untouched. */
@media (min-width: 1024px) {
    .pm-testimonials-section {
        padding: 44px 0 24px;
        background: #171827;
    }

    .pm-testimonials-layout {
        width: calc(100% - 104px);
        max-width: 1180px;
        margin-inline: auto;
        padding-inline: 0;
        grid-template-columns: 340px minmax(0, 1fr);
        gap: 34px;
        align-items: start;
    }

    .pm-testimonial-stage,
    .pm-testimonial-scene {
        width: 340px;
        height: 386px;
        min-height: 386px;
    }

    .pm-testimonial {
        left: 20px;
        width: 300px;
        height: 386px;
        grid-template-columns: 80px minmax(0, 1fr);
        grid-template-rows: 80px minmax(0, 1fr);
        column-gap: 23px;
        row-gap: 25px;
        padding: 23px 23px 58px;
        background: #1e1f31;
        color: #ededf2;
        box-shadow:
            0 24px 48px rgba(0, 0, 0, .22),
            inset 0 1px 0 rgba(255, 255, 255, .025);
    }

    .pm-testimonial.is-active {
        box-shadow:
            0 28px 56px rgba(0, 0, 0, .26),
            inset 0 1px 0 rgba(255, 255, 255, .03);
    }

    .pm-testimonial-avatar {
        width: 80px;
        height: 80px;
        border-bottom-width: 2px;
        box-shadow: none;
    }

    .pm-testimonial-author {
        max-width: 12ch;
        color: #f4f4f7;
        font: 400 15px/1.2 var(--ff);
    }

    .pm-testimonial-role {
        margin-top: 2px;
        color: rgba(239, 239, 244, .72);
        font: 400 13px/1.25 var(--ff);
    }

    .pm-testimonial-company {
        margin-top: 5px;
        color: #d9007d;
        font: 400 13px/1.15 var(--ff);
        letter-spacing: .12em;
    }

    .pm-testimonial-quote {
        max-width: 254px;
        margin-top: 0;
        color: rgba(244, 244, 247, .9);
        font: 400 16px/1.28 var(--ff);
    }

    html[lang="ru"] .pm-testimonial-quote {
        font-size: 15px;
        line-height: 1.25;
    }

    .pm-testimonial-controls {
        bottom: 18px;
        gap: 12px;
    }

    .pm-testimonial-control {
        color: rgba(229, 229, 236, .58);
    }

    .pm-testimonial-counter {
        color: rgba(229, 229, 236, .58);
        font-size: 16px;
    }

    .pm-partners-block {
        padding-top: 17px;
    }

    .pm-partners-block .pm-section-label {
        color: rgba(244, 244, 247, .92);
        font-size: 16px;
        letter-spacing: .16em;
    }

    .pm-partners-block .pm-section-title {
        color: #f4f4f7;
        font-size: 30px;
        line-height: 1.05;
    }
}
/* ──────────────────────────────────────────────────────────────
   04-portfolio.css — portfolio list + case detail pages
   Extracted from prodmedia.css (order-preserving, cascade-safe).
   ────────────────────────────────────────────────────────────── */



/* ── Portfolio Case System — chapter skeleton (shared by every /portfolio/* page) ── */
.pm-portfolio-case .pm-case-chapter {
    margin: clamp(56px, 7vw, 96px) 0 clamp(18px, 2.2vw, 30px);
}

.pm-case-chapter-rule {
    height: 1px;
    width: 100%;
    background: rgba(255, 255, 255, 0.10);
    margin-bottom: clamp(16px, 2vw, 26px);
}

.pm-case-chapter-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pm-case-chapter-num {
    font: 800 14px/1 var(--ff);
    letter-spacing: 0.18em;
    color: var(--pink);
}

.pm-case-chapter-slash {
    color: rgba(255, 255, 255, 0.28);
    font: 800 14px/1 var(--ff);
}

.pm-case-chapter-label {
    font: 800 14px/1 var(--ff);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
}

.pm-case-chapter-label::after {
    content: "";
    display: inline-block;
    width: 38px;
    height: 2px;
    margin-left: 14px;
    vertical-align: middle;
    background: var(--pink);
}




@media (max-width: 767px) {.pm-portfolio-case .pm-case-chapter { margin: 48px 0 18px; }
.pm-case-chapter-label::after { width: 26px; margin-left: 10px; }
}

.pm-portfolio-grid {
    display: grid;
    gap: var(--grid-gap);
    grid-template-columns: repeat(3, 1fr);
}




@media (min-width: 768px) and (max-width: 1023px) {.pm-portfolio-grid { grid-template-columns: repeat(2, 1fr); }
}




@media (max-width: 767px) {.pm-portfolio-grid { grid-template-columns: 1fr; gap: 24px; }
}

.pm-portfolio-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
    cursor: pointer;
}

.pm-portfolio-card-img {
    position: relative;
    isolation: isolate;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #101122;
}

.pm-portfolio-card-img::before {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(0,4,21,0.24) 0%, rgba(0,4,21,0.02) 42%, rgba(0,4,21,0.18) 100%);
    content: "";
    pointer-events: none;
}




@media (max-width: 767px) {.pm-portfolio-card-img {
        aspect-ratio: 16 / 9;
        max-height: 160px;
    }
.pm-portfolio-card-img > img {
        object-position: center center;
    }
}

.pm-portfolio-card-img > img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    filter: brightness(1.1) contrast(1.04) saturate(1.08);
    transition: transform var(--motion-slow) var(--ease-enter),
        filter var(--motion-slow) var(--ease-standard);
}

.pm-portfolio-card:hover .pm-portfolio-card-img > img {
    transform: scale(1.045);
    filter: brightness(1.16) contrast(1.05) saturate(1.16);
}

.pm-portfolio-card-body { padding: 18px 0 0; }

.pm-portfolio-card-title {
    font: 900 20px/1.2 var(--ff);
    color: var(--white);
    margin-bottom: 8px;
}




@media (max-width: 767px) {.pm-portfolio-card-body { padding: 10px 0 0; }
.pm-portfolio-card-title { font-size: 16px; line-height: 1.2; margin-bottom: 4px; }
}

.pm-portfolio-card-desc {
    max-width: 360px;
    font: 500 14px/1.55 var(--ff);
    color: rgba(255,255,255,0.85);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}




@media (max-width: 767px) {.pm-portfolio-card-desc {
        font-size: 12px;
        line-height: 1.45;
        -webkit-line-clamp: 2;
    }
}

.pm-portfolio-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    z-index: 3;
    pointer-events: none;
}

.pm-portfolio-card-img > .pm-portfolio-card-tags:not(.pm-portfolio-card-tags-overlay) {
    position: absolute;
    top: 12px;
    right: 12px;
    left: 12px;
    align-content: flex-start;
}

.pm-portfolio-card-tags-overlay {
    position: absolute;
    bottom: 12px;
    left: 12px;
    right: 12px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.pm-portfolio-card:hover .pm-portfolio-card-tags-overlay {
    opacity: 1;
    transform: translateY(0);
}

.pm-portfolio-card-tags-inline {
    display: none;
}

.pm-portfolio-filter {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 48px;
}

.pm-filter-chip {
    min-height: 40px;
    padding: 0 18px;
    border-radius: 0;
    border: 1px solid rgba(255,255,255,0.15);
    background: transparent;
    color: rgba(255,255,255,0.65);
    font: 700 12px/1 var(--ff);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.pm-filter-chip:hover {
    border-color: rgba(255,255,255,0.35);
    color: #fff;
}

.pm-filter-chip.active {
    border-color: var(--pink);
    background: rgba(202,2,116,0.12);
    color: #fff;
}





@media (min-width: 768px) and (max-width: 1100px) {.pm-page-hero {
        grid-template-columns: minmax(0, 1fr) 200px;
        gap: 36px;
        min-height: 340px;
    }
.pm-page-hero-title {
        font-size: clamp(36px, 6vw, 54px);
    }
.pm-detail-hero {
        padding-right: 170px;
    }
.pm-detail-hero::after, .pm-detail-hero-mark {
        width: 132px;
    }
}

.pm-detail-header { margin-bottom: 40px; }

.pm-detail-hero {
    position: relative;
    min-height: 390px;
    margin-bottom: 54px;
    padding: 42px 210px 46px 0;
    border-top: 1px solid var(--white-10);
    border-bottom: 1px solid var(--white-10);
    overflow: hidden;
}

.pm-detail-hero::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 160px;
    border-left: 1px solid var(--white-10);
    background:
        repeating-linear-gradient(
            135deg,
            transparent 0 18px,
            rgba(255,255,255,0.025) 18px 19px
        );
    content: "";
    pointer-events: none;
}

.pm-detail-hero .pm-detail-title {
    max-width: 900px;
    font-size: clamp(48px, 6.4vw, 86px);
    line-height: 0.98;
    text-transform: uppercase;
}

.pm-detail-hero .pm-detail-content {
    max-width: 680px;
    margin-top: 24px;
    color: var(--white-72);
}

.pm-detail-hero .pm-detail-meta {
    margin-top: 34px;
    margin-bottom: 0;
    padding-top: 20px;
    border-top: 1px solid var(--white-10);
}

.pm-detail-hero-mark {
    position: absolute;
    top: 42px;
    right: 0;
    z-index: 1;
    display: flex;
    width: 160px;
    height: calc(100% - 84px);
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    padding: 0 0 0 24px;
    color: var(--white);
    text-align: right;
}

.pm-detail-hero-mark span {
    color: var(--white-60);
    font: 700 12px/1.35 var(--ff);
}

.pm-detail-hero-mark strong {
    color: var(--pink);
    font: 900 28px/1 var(--ff);
}

.pm-detail-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(255,255,255,0.5);
    font: 500 14px/1 var(--ff);
    cursor: pointer;
    transition: color 0.2s ease;
}

.pm-detail-back:hover { color: var(--pink); }

.pm-detail-title {
    font: 900 42px/1.05 var(--ff);
    color: var(--white);
    margin-bottom: 12px;
}




@media (max-width: 767px) {.pm-detail-title { font-size: 32px; }
}

.pm-detail-meta {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.pm-detail-meta-item {
    font: 400 14px var(--ff);
    color: var(--white-60);
}

.pm-detail-meta-item strong { color: var(--white); }

.pm-detail-content {
    font: 400 16px var(--ff);
    line-height: 28px;
    color: var(--text);
    max-width: var(--reading-w);
}

.pm-detail-content p { margin-bottom: 20px; }

.pm-detail-lead {
    font-size: 20px;
    line-height: 31px;
    max-width: 820px;
}

.pm-detail-hero-img {
    width: 100%;
    max-width: 860px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    margin: 0 0 36px;
    background: var(--bg-card);
}

.pm-detail-hero-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pm-detail-section-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    margin-top: 40px;
}

.pm-detail-section-grid .pm-detail-section {
    margin-top: 0;
}




@media (max-width: 1023px) {.pm-detail-section-grid { grid-template-columns: 1fr; }
}

.pm-detail-section {
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid var(--white-10);
}

.pm-detail-section h3 {
    font: bold 20px var(--ff);
    margin-bottom: 16px;
    color: var(--white);
}

.pm-case-page .pm-detail-back {
    margin-bottom: 34px;
}

.pm-case-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 0 0 28px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--white-10);
}

.pm-case-tags span {
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
}

.pm-case-page .pm-case-hero {
    position: relative;
    margin-bottom: 24px;
    padding-top: 54px;
    border-top: 1px solid var(--white-10);
    border-bottom: 1px solid var(--white-10);
}

.pm-case-page .pm-case-hero::before {
    position: absolute;
    top: 0;
    right: 0;
    width: 42%;
    height: 100%;
    border-left: 1px solid var(--white-10);
    background:
        repeating-linear-gradient(
            135deg,
            transparent 0 20px,
            rgba(255,255,255,0.022) 20px 21px
        );
    content: "";
    pointer-events: none;
}

.pm-case-page .pm-case-hero-copy, .pm-case-page .pm-case-hero-media {
    position: relative;
    z-index: 1;
}

.pm-case-page .pm-case-hero .pm-detail-title {
    max-width: 14ch;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    font-size: clamp(38px, 3.4vw, 56px);
    line-height: 0.98;
    letter-spacing: -0.025em;
    text-transform: uppercase;
}

.pm-case-hero {
    display: grid;
    grid-template-columns: minmax(0, 62%) minmax(0, 38%);
    grid-template-areas:
        "copy media"
        "stats media";
    grid-template-rows: auto auto;
    gap: 0;
    align-items: start;
    min-height: 0;
    padding: 0;
}




@media (max-width: 1023px) {.pm-case-hero {
        grid-template-columns: 1fr;
        grid-template-areas:
            "copy"
            "media"
            "stats";
        grid-template-rows: auto;
        min-height: auto;
        padding-bottom: 0;
    }
.pm-case-page .pm-case-hero::before {
        top: auto;
        bottom: 0;
        width: 100%;
        height: 34%;
        border-top: 1px solid var(--white-10);
        border-left: 0;
    }
}

.pm-case-hero-copy {
    grid-area: copy;
    max-width: none;
    padding: 40px 40px 24px 0;
}

.pm-case-subtitle {
    margin: 0 0 20px;
    font: 400 clamp(17px, 1.3vw, 21px)/1.45 var(--ff);
    color: var(--white-85);
}

.pm-case-hero-media {
    grid-area: media;
    position: relative;
    overflow: hidden;
    aspect-ratio: auto;
    background: var(--bg-card);
    border-left: 1px solid var(--white-10);
    align-self: start;
}

.pm-case-hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 0;
    pointer-events: none;
}

.pm-case-hero-media img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    object-position: center;
    padding: 2%;
}

.pm-case-stats {
    grid-area: stats;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    align-self: end;
}




@media (max-width: 767px) {.pm-case-stats { grid-template-columns: 1fr; }
}

.pm-case-stat {
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 0;
    padding: 18px;
    background: rgba(19,20,33,0.32);
    transition: border-color var(--motion-base) var(--ease-standard), transform var(--motion-base) var(--ease-standard);
}

.pm-case-stat:hover {
    border-color: var(--pink);
    transform: var(--motion-lift);
}

.pm-case-stat strong {
    display: block;
    color: var(--white);
    font: 900 20px/1 var(--ff);
    margin-bottom: 7px;
}

.pm-case-stat span {
    color: var(--white-72);
    font: 700 12px/1.3 var(--ff);
    text-transform: uppercase;
}

.pm-case-section {
    padding: 70px 0;
    border-top: 1px solid rgba(255,255,255,0.06);
}




@media (max-width: 767px) {.pm-case-section { padding: 42px 0; }
}

.pm-case-hero-screenshot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    gap: 48px;
    align-items: center;
    max-width: 1080px;
}

.pm-case-hero-screenshot-text {
    max-width: 380px;
}

.pm-case-hero-screenshot-img {
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.08);
}

.pm-case-hero-screenshot-img img {
    display: block;
    width: 100%;
    height: auto;
}




@media (max-width: 1023px) {.pm-case-hero-screenshot {
        grid-template-columns: 1fr;
        gap: 32px;
    }
.pm-case-hero-screenshot-text {
        max-width: 100%;
    }
}

.pm-case-title {
    max-width: 820px;
    margin: 0 0 20px;
    color: var(--white);
    font: 900 32px/1.08 var(--ff);
    text-transform: uppercase;
}




@media (max-width: 767px) {.pm-case-title { font-size: 24px; }
}

.pm-case-copy, .pm-case-intro { max-width: 820px; }

.pm-case-intro {
    margin: 0 0 28px;
    color: var(--white-72);
    font: 500 16px/1.65 var(--ff);
}

.pm-case-quote {
    max-width: 760px;
    margin: 30px 0 0;
    padding: 22px 0 22px 26px;
    border-left: 3px solid var(--pink);
    color: var(--white);
    font: 700 20px/1.4 var(--ff);
}

.pm-case-stream {
    display: grid;
    gap: 28px;
}

.pm-case-stream-head {
    max-width: 820px;
}

.pm-case-stream-frame {
    position: relative;
    width: 100%;
    max-width: 1080px;
    overflow: hidden;
    background: #050816;
    box-shadow: 0 28px 80px rgba(0,0,0,0.28);
}

.pm-case-stream-frame::after {
    content: none;
}

.pm-case-stream-video {
    display: block;
    width: 100%;
    height: 100%;
    background: #050816;
    pointer-events: none;
    user-select: none;
}

.pm-case-embed {
    display: grid;
    gap: 20px;
}

.pm-case-embed-frame {
    position: relative;
    width: 100%;
    max-width: 1080px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #050816;
    box-shadow: 0 28px 80px rgba(0,0,0,0.28);
}

.pm-case-embed-frame iframe {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.pm-case-map {
    display: grid;
    gap: 20px;
}

.pm-case-map .pm-case-intro {
    max-width: 720px;
}

.pm-case-map-frame {
    position: relative;
    width: 100%;
    max-width: 1080px;
    aspect-ratio: 16 / 9;
    min-height: 360px;
    overflow: hidden;
    border: 1px solid rgba(216,0,127,0.42);
    background:
        radial-gradient(circle at 18% 20%, rgba(56,215,208,0.12), transparent 34%),
        radial-gradient(circle at 82% 82%, rgba(216,0,127,0.16), transparent 38%),
        #090b1a;
    box-shadow:
        0 28px 80px rgba(0,0,0,0.42),
        0 0 0 1px rgba(255,255,255,0.04) inset,
        0 0 42px rgba(216,0,127,0.12);
}

.pm-case-map-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(5,8,22,0.20), rgba(5,8,22,0.00) 42%, rgba(5,8,22,0.28)),
        linear-gradient(90deg, rgba(5,8,22,0.20), transparent 22%, transparent 78%, rgba(5,8,22,0.20));
    mix-blend-mode: multiply;
}

.pm-case-map-frame::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    height: 3px;
    pointer-events: none;
    background: linear-gradient(90deg, #d8007f, #38d7d0, transparent 76%);
}

.pm-case-map-tiles {
    position: absolute;
    inset: -7% -6%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(3, 1fr);
    filter: saturate(0.72) contrast(1.10) brightness(0.70) hue-rotate(178deg);
    transform: scale(1.04);
    transition: filter 180ms ease, transform 180ms ease;
}

.pm-case-map-frame:hover .pm-case-map-tiles {
    filter: saturate(0.90) contrast(1.08) brightness(0.82) hue-rotate(178deg);
    transform: scale(1.055);
}

.pm-case-map-tiles img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pm-case-map-pin {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 3;
    width: 22px;
    height: 22px;
    transform: translate(-50%, -70%) rotate(45deg);
    border-radius: 50% 50% 50% 4px;
    background: linear-gradient(135deg, #d8007f, #38d7d0);
    box-shadow: 0 0 0 8px rgba(216,0,127,0.18), 0 12px 28px rgba(0,0,0,0.38);
}

.pm-case-map-pin::after {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: #fff;
}

.pm-case-map-link {
    position: absolute;
    right: 18px;
    bottom: 16px;
    z-index: 3;
    color: rgba(255,255,255,0.82);
    font: 800 12px/1 var(--ff);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,0.20);
    background: rgba(5,8,22,0.72);
    padding: 10px 12px;
}

.pm-case-map-link:hover {
    color: #fff;
    border-color: rgba(216,0,127,0.68);
}

.pm-case-caption {
    max-width: 760px;
    color: var(--white-60);
    font: 500 14px/1.55 var(--ff);
}

.pm-case-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    max-width: 1080px;
}




@media (max-width: 1023px) {.pm-case-card-grid { grid-template-columns: 1fr; }
}

.pm-case-card {
    min-height: 210px;
    padding: 28px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.035);
}

.pm-case-card span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 24px;
    border: 1px solid var(--pink-border);
    color: var(--pink);
    font: 900 14px var(--ff);
}

.pm-case-card h3 {
    margin: 0 0 12px;
    color: var(--white);
    font: 900 20px/1.2 var(--ff);
    text-transform: uppercase;
}

.pm-case-card p {
    color: var(--white-72);
    font: 500 14px/1.58 var(--ff);
}

.pm-case-swatches {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 28px;
}




@media (max-width: 767px) {.pm-case-swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.pm-case-swatch {
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
}

.pm-case-swatch span {
    display: block;
    height: 112px;
}

.pm-case-swatch strong, .pm-case-swatch small {
    display: block;
    padding: 0 16px;
}

.pm-case-swatch strong {
    padding-top: 14px;
    color: var(--white);
    font: 700 14px var(--ff);
}

.pm-case-swatch small {
    padding-bottom: 16px;
    color: var(--white-60);
    font: 700 12px var(--ff);
}

.pm-case-type-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 18px;
}




@media (max-width: 767px) {.pm-case-type-grid { grid-template-columns: 1fr; }
}

.pm-case-type {
    padding: 24px;
    border: 1px solid rgba(255,255,255,0.08);
}

.pm-case-type span {
    display: block;
    margin-bottom: 10px;
    color: var(--pink);
    font: 700 12px var(--ff);
    text-transform: uppercase;
}

.pm-case-type strong {
    color: var(--white);
    font: 900 28px/1.1 var(--ff);
}

.pm-case-screen-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}




@media (max-width: 1023px) {.pm-case-screen-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}




@media (max-width: 767px) {.pm-case-screen-grid { grid-template-columns: 1fr; }
}

.pm-case-screen {
    overflow: hidden;
    background: #101122;
}

.pm-case-screen img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

.pm-case-screen figcaption {
    display: grid;
    gap: 4px;
    padding: 16px 0 0;
    background: var(--bg);
}

.pm-case-screen figcaption strong {
    color: var(--white);
    font: 900 16px/1.2 var(--ff);
}

.pm-case-screen figcaption span {
    color: var(--white-72);
    font: 500 14px/1.45 var(--ff);
}

.pm-case-timeline {
    list-style: none;
    display: grid;
    gap: 18px;
    max-width: 860px;
}

.pm-case-timeline li {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

.pm-case-timeline li > span {
    color: var(--pink);
    font: 900 20px/1 var(--ff);
}

.pm-case-timeline h3 {
    color: var(--white);
    font: 900 20px/1.2 var(--ff);
    margin-bottom: 8px;
}

.pm-case-timeline p {
    color: var(--white-72);
    font: 500 14px/1.55 var(--ff);
}

.pm-case-highlight { margin-top: 38px; }

.pm-case-highlight-number {
    display: block;
    margin-bottom: 10px;
    color: var(--pink);
    font: 900 42px/1 var(--ff);
}

.pm-case-page .pm-case-hero .pm-detail-title {
    max-width: none;
    font-size: clamp(40px, 3.85vw, 60px);
    line-height: 0.98;
}

.pm-case-section {
    padding: clamp(56px, 6vw, 78px) 0;
}

.pm-case-card {
    min-height: 184px;
}

.pm-case-card span {
    margin-bottom: 42px;
}

.pm-case-screen, .pm-case-hero-media, .pm-case-hero-screenshot-img {
    border-radius: 8px;
}

.pm-portfolio-page .pm-portfolio-grid {
    align-items: start;
}





@media (min-width: 1024px) {.pm-portfolio-page .pm-portfolio-grid > .pm-portfolio-card:last-child:nth-child(3n + 1) {
        display: grid;
        grid-column: span 2;
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
        gap: 30px;
        align-items: center;
        padding: 22px;
        border: 1px solid rgba(255,255,255,0.08);
        border-radius: 8px;
        background: linear-gradient(135deg, rgba(255,255,255,0.035), rgba(202,2,116,0.045));
    }
.pm-portfolio-page .pm-portfolio-grid > .pm-portfolio-card:last-child:nth-child(3n + 1) .pm-portfolio-card-body {
        padding-top: 0;
    }
}

.pm-case-page .pm-case-hero .pm-detail-title {
    max-width: none;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    font-size: clamp(40px, 3.85vw, 60px);
    line-height: 0.98;
}

.pm-case-section {
    padding: clamp(56px, 6vw, 78px) 0;
}

.pm-case-card {
    min-height: 184px;
}

.pm-case-card span {
    margin-bottom: 42px;
}





@media (max-width: 767px) {.pm-case-page .pm-case-hero .pm-detail-title {
        max-width: none;
        font-size: clamp(29px, 7.6vw, 38px);
        line-height: 1.02;
    }
.pm-case-section {
        padding: 40px 0;
    }
.pm-case-card {
        min-height: 0;
    }
.pm-case-card span {
        margin-bottom: 28px;
    }
}

.pm-case-page form {max-width:520px;display:flex;flex-direction:column;gap:10px}

.pm-case-page input, .pm-case-page textarea {padding:10px 12px;border:1px solid #d1d5db;border-radius:8px;font:inherit}

.pm-case-page ol.pm-case-timeline {list-style:none;counter-reset:tl;padding:0}

.pm-case-page ol.pm-case-timeline li {counter-increment:tl;display:flex;gap:14px;padding:10px 0;border-bottom:1px solid #eef0f3}

.pm-case-page ol.pm-case-timeline li>span {font-weight:700;color:#CA0274;min-width:2ch}

.pm-case-page details.pm-case-card summary {cursor:pointer}

.pm-case-branding {padding:24px 0}

.pm-case-branding .pm-case-swatches {display:flex;flex-wrap:wrap;gap:14px;margin-top:14px}

.pm-case-branding .pm-case-swatch {display:flex;flex-direction:column;align-items:center;gap:6px;min-width:84px}

.pm-case-branding .pm-case-swatch span:first-child {width:48px;height:48px;border-radius:10px;border:1px solid rgba(255,255,255,.12)}

.pm-case-branding .pm-case-type-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:18px}

.pm-case-branding .pm-case-type {border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:16px}





/* Generic hero (no media): single column, sane height */
.pm-case-hero-simple{grid-template-columns:1fr!important;grid-template-areas:copy!important;min-height:auto!important;padding:56px 0!important;gap:0!important}

.pm-case-hero-simple .pm-case-hero-copy {max-width:760px;margin:0 auto;text-align:left}

.pm-case-hero-simple .pm-detail-title {font-size:clamp(28px,4vw,44px)!important}

.pm-case-hero::before {display:none}





/* ── Polished portfolio case hero (overrides) ────────────────────────────── */
.pm-case-page .pm-case-hero{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,62%) minmax(0,38%);
  grid-template-areas:"copy media" "stats media";
  gap:0;
  align-items:start;
  min-height:auto!important;
  padding:0;
  margin-bottom:24px;
  border-top:1px solid var(--white-10);
  border-bottom:1px solid var(--white-10);
  background:var(--bg-dark);
}

.pm-case-page .pm-case-hero::before {display:none!important}

.pm-case-page .pm-case-hero::after {display:none!important}

.pm-case-page .pm-case-hero > * {position:relative;z-index:1}

.pm-case-page .pm-case-hero-copy {grid-area:copy;max-width:none;padding:40px 40px 20px 0}

.pm-case-page .pm-case-hero-media {
  grid-area:media;position:relative;overflow:hidden;aspect-ratio:auto;background:var(--bg-card);
  border-radius:0;border-left:1px solid var(--white-10);
  box-shadow:none;align-self:start;
}

.pm-case-page .pm-case-hero-media::after {border:none}

.pm-case-page .pm-case-hero-media img {width:100%;height:auto;object-fit:contain;object-position:center;display:block;padding:2%}

.pm-case-hero-eyebrow {
  text-transform:uppercase;letter-spacing:.16em;font-size:12px;font-weight:700;
  color:var(--pink-lite);margin:0 0 14px;
}

.pm-case-page .pm-case-hero .pm-detail-title {
  font-size:clamp(34px,3vw,50px);line-height:0.98;letter-spacing:-0.025em;
  margin:0 0 14px;font-weight:800;
  overflow-wrap:normal;word-break:normal;hyphens:none;max-width:none;
}

.pm-case-page .pm-case-hero .pm-case-subtitle {
  margin:0 0 18px;font:400 clamp(16px,1.3vw,20px)/1.5 var(--ff);color:var(--white-85);max-width:none;
}

.pm-case-page .pm-case-hero .pm-case-cta {margin-top:4px}

.pm-case-hero-meta {display:flex;flex-wrap:wrap;gap:14px 32px;margin:22px 0 0;padding:0}

.pm-case-hero-meta div {display:flex;flex-direction:column;gap:2px}

.pm-case-hero-meta dt {font-size: 12px;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,0.5);margin:0}

.pm-case-hero-meta dd {margin:0;font-weight:700;font-size:14px}





/* No-image variant: single centered column */
.pm-case-page .pm-case-hero.pm-case-hero-simple{
  grid-template-columns:1fr;grid-template-areas:"copy";padding:84px 0;
}

.pm-case-page .pm-case-hero.pm-case-hero-simple .pm-case-hero-copy {margin:0 auto}





@media (max-width: 1023px){.pm-case-page .pm-case-hero {
    grid-template-columns:1fr;grid-template-areas:"media" "copy";gap:26px;padding:44px 0;
  }
.pm-case-page .pm-case-hero-media {aspect-ratio:16/10;max-width:520px}
}




@media (max-width: 600px){.pm-case-page .pm-case-hero .pm-detail-title {font-size:clamp(28px,8vw,40px)}
.pm-case-hero-meta {gap:10px 22px}
}





/* ── Hero style refinement — dark ProdMedia look ─────────────────────────── */
.pm-case-page .pm-case-hero{
  background:
    radial-gradient(circle at 18% 18%, rgba(202,2,116,0.22), transparent 32%),
    radial-gradient(circle at 88% 88%, rgba(78,228,219,0.08), transparent 30%),
    linear-gradient(135deg,#050814 0%, #08111f 45%, #111c2e 100%)!important;
  border-top:1px solid rgba(202,2,116,0.35);
  border-bottom:1px solid var(--white-10);
}

.pm-case-page .pm-case-hero-media {
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.14)!important;
  border-radius:20px!important;
  box-shadow:0 30px 90px rgba(0,0,0,0.5), 0 0 60px rgba(202,2,116,0.14)!important;
}

.pm-case-page .pm-case-hero-media img {border-radius:20px}

.pm-case-page .pm-case-hero .pm-case-cta {
  background:var(--pink);color:#fff;border-radius:999px;padding:12px 24px;font-weight:700;
  letter-spacing:.02em;display:inline-block;
}

.pm-case-page .pm-case-hero .pm-case-cta:hover {background:var(--pink-lite)}





/* ── Hero spacing refinement (breathing room) ────────────────────────────── */
.pm-case-page .pm-case-hero{
  margin-top:32px;
  padding:96px clamp(28px,4vw,64px)!important;
  column-gap:64px;
  row-gap:32px;
}

.pm-case-page .pm-case-hero .pm-case-hero-eyebrow {margin:0 0 24px}

.pm-case-page .pm-case-hero .pm-detail-title {margin:0 0 24px!important}

.pm-case-page .pm-case-hero .pm-case-subtitle {margin:0 0 8px}

.pm-case-page .pm-case-hero-copy > p:has(a.pm-case-cta) {margin:28px 0 0}

.pm-case-page .pm-case-hero .pm-case-hero-meta {margin:44px 0 0!important}

.pm-case-page .pm-case-hero-media {aspect-ratio:16/12}

.pm-case-page .pm-case-hero.pm-case-hero-simple {padding:96px clamp(28px,4vw,72px)!important}





@media (max-width: 1023px){.pm-case-page .pm-case-hero {padding:64px clamp(20px,5vw,40px)!important;margin-top:20px}
.pm-case-page .pm-case-hero .pm-case-hero-meta {margin-top:32px!important}
}




@media (max-width: 600px){.pm-case-page .pm-case-hero {padding:48px 18px!important}
.pm-case-page .pm-case-hero .pm-case-hero-eyebrow {margin-bottom:18px}
.pm-case-page .pm-case-hero .pm-detail-title {margin-bottom:18px!important}
.pm-case-page .pm-case-hero .pm-case-hero-meta {margin-top:26px!important}
}





/* ── content_section layouts + pull quote ────────────────────────────────── */
.pm-case-page .pm-case-section{margin:96px 0}

.pm-case-page .pm-case-section-head {display:flex;flex-direction:column;gap:8px}

.pm-case-page .pm-case-section-body {max-width:760px}

.pm-case-page .pm-case-section-body .pm-detail-content {font-size:clamp(16px,1.15vw,19px);line-height:1.7;color:var(--white-85)}

.pm-case-page .pm-case-section-body .pm-detail-content p {margin:0 0 16px}

.pm-case-page .pm-case-section-body .pm-detail-content p:last-child {margin-bottom:0}





/* Split: title left, content right */
.pm-case-page .pm-case-section--split{
  display:grid;grid-template-columns:minmax(0,0.8fr) minmax(0,1.2fr);
  column-gap:clamp(40px,5vw,72px);row-gap:16px;align-items:start;
}

.pm-case-page .pm-case-section--split .pm-case-section-head {position:sticky;top:24px}

.pm-case-page .pm-case-section--split .pm-case-title {font-size:clamp(26px,3vw,40px);line-height:1.05;margin:0}





/* Centered */
.pm-case-page .pm-case-section--centered{max-width:880px;margin-left:auto;margin-right:auto;text-align:center}

.pm-case-page .pm-case-section--centered .pm-case-section-head {align-items:center}

.pm-case-page .pm-case-section--centered .pm-case-section-body {margin:0 auto;text-align:left}





/* Pull quote as a case-study highlight */
.pm-case-page .pm-case-quote{
  margin:44px 0 0;padding:8px 0 8px 28px;border-left:4px solid var(--pink);
  font:700 clamp(20px,1.8vw,30px)/1.35 var(--ff);color:#fff;max-width:760px;
}

.pm-case-page .pm-case-section--centered .pm-case-quote {margin-left:auto;margin-right:auto}





@media (max-width: 900px){.pm-case-page .pm-case-section {margin:64px 0}
.pm-case-page .pm-case-section--split {grid-template-columns:1fr;column-gap:0}
.pm-case-page .pm-case-section--split .pm-case-section-head {position:static}
}





/* ── Services / Scope cards ──────────────────────────────────────────────── */
.pm-case-page .pm-case-scope{margin:96px 0}

.pm-case-page .pm-case-scope-head {margin-bottom:48px;max-width:760px}

.pm-case-page .pm-case-scope-head .pm-case-title {margin:0 0 14px}

.pm-case-page .pm-case-scope-head .pm-case-intro {margin:0;color:var(--white-85);font-size:clamp(15px,1.1vw,18px)}

.pm-case-page .pm-case-scope-grid {gap:24px}

.pm-case-page .pm-scope-card {
  position:relative;display:flex;flex-direction:column;gap:12px;
  min-height:260px;padding:38px 32px;border-radius:16px;
  background:rgba(255,255,255,0.025);border:1px solid rgba(255,255,255,0.10);
  transition:border-color 180ms ease,box-shadow 180ms ease,transform 180ms ease;
  overflow:hidden;
}

.pm-case-page .pm-scope-card::before {
  content:"";position:absolute;left:0;top:0;height:100%;width:2px;
  background:linear-gradient(180deg,transparent,var(--pink),transparent);opacity:0;transition:opacity 180ms ease;
}

.pm-case-page .pm-scope-card:hover {
  border-color:rgba(202,2,116,0.55);
  box-shadow:0 24px 70px rgba(202,2,116,0.12);
  transform:translateY(-3px);
}

.pm-case-page .pm-scope-card:hover::before {opacity:1}

.pm-case-page .pm-scope-num {
  font-size: 14px;font-weight:700;letter-spacing:.14em;color:var(--pink-lite);
  font-variant-numeric:tabular-nums;
}

.pm-case-page .pm-scope-title {
  margin:0;font-size:clamp(18px,1.5vw,22px);font-weight:700;letter-spacing:.02em;
  text-transform:uppercase;
}

.pm-case-page .pm-scope-desc {margin:0;color:var(--white-85);font-size: 16px;line-height:1.6}





@media (max-width: 900px){.pm-case-page .pm-case-scope {margin:64px 0}
.pm-case-page .pm-case-scope-grid {grid-template-columns:1fr!important;gap:16px}
.pm-case-page .pm-scope-card {min-height:auto;padding:28px 24px}
}





/* ── Image gallery / interface showcase polish ───────────────────────────── */
.pm-case-page .pm-case-scope + .pm-case-section,
.pm-case-page .pm-case-section:has(.pm-case-screen-grid){margin:96px 0}

.pm-case-page .pm-case-screen-grid {gap:20px}

.pm-case-page .pm-case-screen {
  position:relative;margin:0;border-radius:14px;overflow:hidden;
  border:1px solid rgba(255,255,255,0.10);background:#0b1220;
}

.pm-case-page .pm-case-screen img {display:block;width:100%;height:100%;aspect-ratio:16/11;object-fit:cover;transition:transform 320ms ease}

.pm-case-page .pm-case-screen:hover img {transform:scale(1.04)}

.pm-case-page .pm-case-screen figcaption {
  position:absolute;left:0;right:0;bottom:0;padding:16px 18px;
  background:linear-gradient(0deg,rgba(5,8,20,0.85),transparent);
  color:#fff;font-size:14px;font-weight:600;opacity:0;transition:opacity 200ms ease;
}

.pm-case-page .pm-case-screen:hover figcaption {opacity:1}

.pm-case-page .pm-case-screen figcaption span {display:block}

.pm-case-page .pm-case-section > .pm-case-screen {
  width: min(100%, 760px);
  max-width: 760px;
}

.pm-case-page .pm-case-section > .pm-case-screen img {
  aspect-ratio: 16 / 10;
}




@media (max-width: 900px){.pm-case-page .pm-case-screen-grid {grid-template-columns:1fr 1fr!important;gap:12px}
}




@media (max-width: 600px){.pm-case-page .pm-case-screen-grid {grid-template-columns:1fr!important}
.pm-case-page .pm-case-screen img {aspect-ratio:4/3}
}





/* ── Branding showcase polish ────────────────────────────────────────────── */
.pm-case-page .pm-case-branding{margin:96px 0}

.pm-case-page .pm-case-branding .pm-case-swatches {display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px}

.pm-case-page .pm-case-swatch {
  display:flex;flex-direction:column;gap:6px;padding:18px;border-radius:14px;
  background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.10);
}

.pm-case-page .pm-case-swatch strong {font-size:14px}

.pm-case-page .pm-case-type-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}

.pm-case-page .pm-case-type {
  display:flex;flex-direction:column;gap:8px;padding:22px;border-radius:14px;
  background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.10);
}





@media (max-width:600px){.pm-case-page .pm-case-branding {margin:64px 0}
.pm-case-page .pm-case-branding .pm-case-swatches {grid-template-columns:1fr 1fr;gap:12px}
}





/* ── Timeline (public) ───────────────────────────────────────────────────── */
.pm-case-page .pm-case-section:has(.pm-case-timeline){margin:96px 0}

.pm-case-page .pm-case-timeline {list-style:none;counter-reset:tl;padding:0;margin:8px 0 0}

.pm-case-page .pm-case-timeline li {
  counter-increment:tl;display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;
  padding:20px 0;border-top:1px solid rgba(255,255,255,0.14);
  transition:background 180ms ease;
}

.pm-case-page .pm-case-timeline li:first-child {border-top:none}

.pm-case-page .pm-case-timeline li:hover {background:rgba(255,255,255,0.02)}

.pm-case-page .pm-case-timeline li > span:first-child {
  font-weight:800;font-variant-numeric:tabular-nums;color:var(--pink-lite);
  font-size:clamp(16px,1.6vw,22px);min-width:2.2ch;letter-spacing:.02em;
}

.pm-case-page .pm-case-timeline li h3 {margin:0 0 4px;font-size:clamp(16px,1.3vw,20px)}

.pm-case-page .pm-case-timeline li p {margin:0;color:var(--white-85);font-size: 16px;line-height:1.6}




@media (max-width:600px){.pm-case-page .pm-case-section:has(.pm-case-timeline) {margin:64px 0}
.pm-case-page .pm-case-timeline li {gap:12px;padding:16px 0}
}






/* ── FIX: restore hero_case_study grid (stats area) ──────────────────────── */
/* Earlier overrides dropped the `stats` grid-area, collapsing the layout on
   every portfolio case page. Restore the known-good 2-row grid. */
.pm-case-page .pm-case-hero{
  grid-template-columns:minmax(0,1fr) minmax(360px,0.95fr)!important;
  grid-template-areas:"copy media" "stats stats"!important;
  grid-template-rows:auto auto!important;
  gap:clamp(32px,4vw,56px)!important;
  align-items:center!important;
  min-height:auto!important;
}

.pm-case-page .pm-case-stats {
  grid-area:stats!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  align-items:start!important;
  align-self:end!important;
  margin-top:8px;
}

.pm-case-page .pm-case-stat {
  width:100%;
  height:auto;
  min-height:126px;
}

.pm-case-page .pm-case-stat strong {
  line-height:1.15;
  overflow-wrap:anywhere;
}

.pm-case-page .pm-case-hero-copy {max-width:690px!important}

.pm-case-page .pm-case-hero-media {aspect-ratio:16/10!important}





/* Generic hero (no image): single column, valid areas syntax */
.pm-case-page .pm-case-hero.pm-case-hero-simple{
  grid-template-columns:1fr!important;
  grid-template-areas:"copy"!important;
  grid-template-rows:auto!important;
  padding:84px 0!important;
}




@media (max-width:1023px){.pm-case-page .pm-case-hero {
    grid-template-columns:1fr!important;
    grid-template-areas:"copy" "media" "stats"!important;
    grid-template-rows:auto!important;
  }
}




@media (max-width:767px){.pm-case-page .pm-case-stats {grid-template-columns:1fr!important}
.pm-case-page .pm-case-stat {min-height:0}
}





/* Portfolio detail: single image blocks should read as landscape case media, not tall portrait cards. */
.pm-case-page .pm-case-section > figure.pm-case-screen,
.pm-case-page .pm-case-section > .pm-case-screen {
  width: min(100%, 760px) !important;
  max-width: 760px !important;
  height: auto !important;
}


/* Portfolio case visual proof: pair a single image with the reason it matters. */
.pm-case-page .pm-case-visual-proof {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(28px, 4vw, 58px);
  align-items: center;
  margin: 72px 0;
}

.pm-case-page .pm-case-visual-proof .pm-case-visual-copy {
  max-width: 520px;
}

.pm-case-page .pm-case-visual-proof .pm-case-title {
  margin-bottom: 16px;
}

.pm-case-page .pm-case-visual-proof > figure.pm-case-screen {
  width: 100% !important;
  max-width: none !important;
  box-shadow: 0 24px 80px rgba(0,0,0,0.34);
}




@media (max-width: 900px) {.pm-case-page .pm-case-visual-proof {
    grid-template-columns: 1fr;
    margin: 56px 0;
  }
.pm-case-page .pm-case-visual-proof .pm-case-visual-copy {
    max-width: 760px;
  }
}
/* ──────────────────────────────────────────────────────────────
   05-services.css services page + service detail (sd3)
   Extracted from prodmedia.css (order-preserving, cascade-safe).
   ────────────────────────────────────────────────────────────── */



.pm-services-section {
    position: relative;
    padding: 120px 0 90px;
    background: var(--bg);
}




@media (max-width: 767px) {.pm-services-section { padding: var(--section-py) 0; }
}

.pm-services-layout {
    display: grid;
    grid-template-columns: 346px minmax(0, 1fr);
    gap: 46px;
    align-items: start;
}




@media (max-width: 1023px) {.pm-services-layout { grid-template-columns: 1fr; gap: 42px; }
}

.pm-services-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}




@media (max-width: 767px) {.pm-services-grid { grid-template-columns: 1fr; gap: 20px; }
}

.pm-services-page {
    --services-ink: #050817;
    --services-panel: #121426;
    --services-panel-soft: #191b2e;
    padding-top: 128px;
    overflow: clip;
}

.pm-services-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(320px, 1fr);
    min-height: min(720px, calc(100vh - 106px));
}

.pm-services-hero::before {
    position: absolute;
    inset: -180px auto auto -260px;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(210, 0, 126, 0.2), transparent 68%);
    filter: blur(18px);
    content: "";
    pointer-events: none;
}

.pm-services-hero-copy {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 740px;
    padding: 70px 64px 92px 0;
}

.pm-services-hero-copy h1 {
    max-width: 12ch;
    margin: 0 0 28px;
    color: var(--white);
    font: 900 clamp(48px, 5.65vw, 84px)/0.88 var(--ff);
    text-transform: uppercase;
    letter-spacing: -0.045em;
}

.pm-services-hero-actions {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-top: 38px;
}

.pm-services-primary {
    min-width: 190px;
}

.pm-services-hero-art {
    position: relative;
    min-height: 590px;
    overflow: hidden;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pm-services-hero-art::after {
    display: none;
}

.pm-services-orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 48% 52% 55% 45%;
    transform: translate(-50%, -50%) rotate(0deg);
}

.pm-services-orbit-a {
    width: 70%;
    aspect-ratio: 1;
    box-shadow: 0 0 80px rgba(204, 0, 121, 0.08);
    animation: pm-services-orbit-a 18s linear infinite;
}

.pm-services-orbit-b {
    width: 48%;
    aspect-ratio: 1;
    border-color: rgba(213, 0, 126, 0.48);
    animation: pm-services-orbit-b 12s linear infinite;
}

.pm-services-orbit-core {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: flex;
    width: 170px;
    aspect-ratio: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--white);
    background: radial-gradient(circle at 38% 32%, #ef168f 0, #b80070 34%, #45115d 66%, #101225 100%);
    box-shadow: 0 28px 80px rgba(214, 0, 126, 0.35);
    transform: translate(-50%, -50%);
}

.pm-services-orbit-core span, .pm-services-orbit-core strong {
    font-family: var(--ff);
    text-transform: uppercase;
}

.pm-services-orbit-core span {
    margin-bottom: 5px;
    font-size: 12px;
    letter-spacing: 0.18em;
}

.pm-services-orbit-core strong {
    max-width: 6ch;
    font-size: 20px;
    line-height: 0.9;
    text-align: center;
}

.pm-services-art-word {
    position: absolute;
    z-index: 3;
    padding: 8px 12px;
    color: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.11);
    background: rgba(5, 8, 23, 0.84);
    font: 800 12px/1 var(--ff);
    letter-spacing: 0.14em;
}

.pm-services-art-word-a { top: 18%; left: 14%; }

.pm-services-art-word-b { top: 24%; right: 10%; }

.pm-services-art-word-c { bottom: 19%; left: 11%; }

.pm-services-art-word-d { right: 15%; bottom: 13%; }

.pm-services-hero-proof {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 4;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--white-10);
    background: rgba(5, 8, 23, 0.86);
    backdrop-filter: blur(14px);
}

.pm-services-hero-proof > span {
    display: flex;
    gap: 13px;
    align-items: center;
    min-height: 58px;
    padding: 0 18px;
    color: var(--pink);
    border-right: 1px solid var(--white-10);
    font: 900 12px/1 var(--ff);
}

.pm-services-hero-proof > span:last-child { border-right: 0; }

.pm-services-hero-proof strong { color: rgba(255,255,255,0.66); font-size: 12px; letter-spacing: 0.08em; }

.pm-services-manifesto {
    display: grid;
    grid-template-columns: 170px minmax(0, 1.45fr) minmax(260px, 0.75fr);
    gap: 38px;
    align-items: start;
    padding: 128px 0 116px;
}

.pm-services-manifesto h2, .pm-services-work h2, .pm-services-engagement h2, .pm-services-process-intro h2, .pm-services-closing h2 {
    margin: 0;
    color: var(--white);
    font: 900 clamp(34px, 4.3vw, 62px)/0.96 var(--ff);
    text-transform: uppercase;
    letter-spacing: -0.035em;
    overflow-wrap: normal;
}

.pm-services-manifesto > p:last-child {
    margin: 10px 0 0;
    color: rgba(255, 255, 255, 0.7);
    font: 400 16px/1.65 var(--ff);
}

.pm-services-offers {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.pm-services-work {
    margin-top: 132px;
    padding: 86px 0 92px;
    border-top: 1px solid var(--white-10);
    border-bottom: 1px solid var(--white-10);
}

.pm-services-work-head {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.65fr);
    gap: 80px;
    align-items: end;
    margin-bottom: 46px;
}

.pm-services-work-head > p {
    margin: 0 0 5px;
    color: rgba(255,255,255,0.68);
    font: 400 16px/1.62 var(--ff);
}

.pm-services-work-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.pm-services-work-card { cursor: pointer; }

.pm-services-work-image {
    position: relative;
    aspect-ratio: 1.18;
    overflow: hidden;
    margin-bottom: 20px;
    background: #15172a;
}

.pm-services-work-image::after {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255,255,255,0.08);
    content: "";
    pointer-events: none;
}

.pm-services-work-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 700ms cubic-bezier(.2,.7,.1,1);
}

.pm-services-work-card:hover img { transform: scale(1.045); }

.pm-services-work-image span {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 2;
    padding: 8px 10px;
    color: var(--white);
    background: rgba(5,8,23,0.84);
    font: 800 12px/1 var(--ff);
    letter-spacing: 0.12em;
}

.pm-services-work-card h3 {
    margin: 0 0 8px;
    color: var(--white);
    font: 900 20px/1.05 var(--ff);
    text-transform: uppercase;
}

.pm-services-work-card > p {
    margin: 0;
    color: rgba(255,255,255,0.55);
    font: 400 12px/1.45 var(--ff);
}

.pm-services-work-all {
    margin-top: 34px;
    padding: 12px 0;
    color: var(--white);
    border: 0;
    background: transparent;
    font: 800 12px/1 var(--ff);
    text-transform: uppercase;
    letter-spacing: 0.09em;
    cursor: pointer;
}

.pm-services-engagement {
    display: grid;
    grid-template-columns: minmax(280px, 0.75fr) minmax(0, 1.25fr);
    gap: 80px;
    padding: 128px 0;
}

.pm-services-engagement-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    align-self: stretch;
    background: rgba(255, 255, 255, 0.08);
}

.pm-services-engagement-grid article {
    position: relative;
    min-height: 280px;
    padding: 30px 24px;
    background: var(--services-panel);
}

.pm-services-engagement-grid article::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--pink);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 350ms ease;
    content: "";
}

.pm-services-engagement-grid article:hover::after { transform: scaleX(1); }

.pm-services-engagement-grid span { color: var(--pink); font: 900 12px/1 var(--ff); }

.pm-services-engagement-grid h3 { margin: 70px 0 14px; color: var(--white); font: 900 20px/1 var(--ff); }

.pm-services-engagement-grid p { margin: 0; color: rgba(255,255,255,0.62); font: 400 14px/1.55 var(--ff); }

.pm-services-process {
    padding: 84px 0 96px;
    border-top: 1px solid var(--white-10);
}

.pm-services-process-intro {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 38px;
    align-items: start;
}

.pm-services-process-intro h2 { max-width: 12ch; }

.pm-services-process .pm-process-strip {
    gap: 0;
    margin-top: 52px;
    padding-top: 0;
    border: 1px solid rgba(255,255,255,0.09);
}

.pm-services-process .pm-process-strip > div {
    min-height: 210px;
    padding: 28px;
    border-right: 1px solid rgba(255,255,255,0.09);
    background: linear-gradient(150deg, rgba(255,255,255,0.035), transparent 65%);
}

.pm-services-process .pm-process-strip > div:last-child { border-right: 0; }

.pm-services-process .pm-process-strip h2 { margin-top: 52px; text-transform: uppercase; }

.pm-services-closing {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 60px;
    align-items: end;
    margin-bottom: 42px;
    padding: 92px 72px 78px;
    overflow: hidden;
    background:
        radial-gradient(circle at 95% 0, rgba(221,0,130,0.38), transparent 34%),
        linear-gradient(120deg, #19142d, #101326 65%);
    border: 1px solid rgba(255,255,255,0.1);
}

.pm-services-closing::after {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(135deg, transparent 0 32px, rgba(255,255,255,0.018) 32px 33px);
    content: "";
    pointer-events: none;
}

.pm-services-closing > * { position: relative; z-index: 2; }

.pm-services-closing h2 { max-width: 12ch; }

.pm-services-closing > div > p:last-child { max-width: 670px; margin: 22px 0 0; color: rgba(255,255,255,0.7); font: 400 16px/1.65 var(--ff); }

.pm-services-closing-index { position: absolute; top: -56px; right: 18%; z-index: 1; color: rgba(255,255,255,0.04); font: 900 260px/1 var(--ff); }





@media (prefers-reduced-motion: reduce) {.pm-services-orbit-a, .pm-services-orbit-b { animation: none; }
}

.pm-service-card {
    position: relative;
    min-height: 260px;
    padding: 32px 32px 80px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--r-3xl);
    background:
        linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.018)),
        var(--bg-card);
    cursor: pointer;
    transform: translateY(0);
    transition: border-color var(--motion-base) var(--ease-standard),
        box-shadow var(--motion-base) var(--ease-standard),
        transform var(--motion-base) var(--ease-enter);
}

.pm-service-card:hover {
    border-color: var(--pink-hover-border);
    box-shadow: 0 18px 42px rgba(202,2,116,0.16);
}

.pm-service-figure {
    position: absolute;
    right: -38px;
    bottom: -42px;
    z-index: 1;
    width: 154px;
    height: 154px;
    opacity: 0.2;
    pointer-events: none;
    transform-origin: 50% 50%;
    transition: opacity 420ms var(--ease-standard),
        filter 420ms var(--ease-standard);
}

.pm-service-figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.pm-service-card:hover .pm-service-figure {
    opacity: 0.34;
}

.pm-service-figure-1 { animation: pm-figure-fold 7.4s ease-in-out infinite; }

.pm-service-figure-2 { animation: pm-figure-breathe 5.8s ease-in-out infinite; }

.pm-service-figure-3 { animation: pm-figure-flip 6.6s ease-in-out infinite; }

.pm-service-figure-4 { animation: pm-figure-orbit 8.2s ease-in-out infinite; }

.pm-service-card:hover .pm-service-figure-1 { animation-duration: 4.1s; }

.pm-service-card:hover .pm-service-figure-2 { animation-duration: 3.4s; }

.pm-service-card:hover .pm-service-figure-3 { animation-duration: 3.8s; }

.pm-service-card:hover .pm-service-figure-4 { animation-duration: 4.6s; }

.pm-service-card-title {
    position: relative;
    z-index: 3;
    font: 700 20px/1.15 var(--ff);
    color: var(--white);
    text-transform: uppercase;
    margin-bottom: 12px;
    letter-spacing: 0.5px;
}

.pm-service-card-desc {
    position: relative;
    z-index: 3;
    font: 400 16px/1.5 var(--ff);
    color: var(--white-85);
}

.pm-process-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin-top: 64px;
    padding-top: 32px;
    border-top: 1px solid var(--white-10);
}

.pm-process-strip span {
    display: block;
    color: var(--pink);
    font: 900 12px var(--ff);
    margin-bottom: 10px;
}

.pm-process-strip h2 {
    font: 700 20px/1.2 var(--ff);
    color: var(--white);
    margin-bottom: 8px;
}

.pm-process-strip p {
    font: 400 14px/1.55 var(--ff);
    color: var(--text-85);
}




@media (max-width: 1023px) {.pm-process-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}




@media (max-width: 767px) {.pm-process-strip { grid-template-columns: 1fr; }
}





/* Service detail system */
.pm-service-detail-page {
    padding-bottom: 100px;
}

.pm-service-detail-blocks {
    padding-top: 4px;
}

.pm-service-detail-section {
    padding: 92px 0;
    border-bottom: 1px solid var(--white-10);
}

.pm-service-detail-copy, .pm-service-detail-intro {
    max-width: 760px;
    color: var(--text);
    font: 400 20px/1.72 var(--ff);
}

.pm-service-detail-copy p {
    margin-bottom: 24px;
}

.pm-service-detail-section blockquote {
    max-width: 850px;
    margin: 44px 0 0;
    padding: 28px 0 0 34px;
    border-top: 1px solid var(--pink);
    color: var(--white);
    font: 700 20px/1.48 var(--ff);
}

.pm-service-detail-cta {
    margin: 92px 0;
    padding: 68px;
    background: var(--pink);
}





/* ── Services page: compact card grid (replaces large offer blocks) ── */
.pm-services-cards-section { padding: 64px 0 48px; }

.pm-services-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}




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




@media (max-width: 600px) {.pm-services-cards-grid { grid-template-columns: 1fr; }
}





/* ── Services page: compact manifesto + tighter sections ── */
.pm-services-manifesto-compact { padding: 24px 0 16px !important; }

.pm-services-manifesto-compact h2 { font-size: 28px; }

.pm-services-manifesto-compact p { display: none; }





/* /services services section matches the homepage block 1:1 (same container, padding, wave). */

/* Tighter work section */
.pm-services-page .pm-services-work { padding: 32px 0; }

.pm-services-page .pm-services-work-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }

.pm-services-page .pm-services-work-card { min-height: 220px; }





/* Tighter process section */
.pm-services-page .pm-services-process { padding: 32px 0; }

.pm-services-page .pm-process-strip { gap: 24px; }

.pm-services-page .pm-process-strip h2 { font-size: 20px; }

.pm-services-page .pm-process-strip p { font-size: 14px; -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }





/* Tighter contact section */
.pm-services-page .pm-services-contact { padding: 32px 0; }





/* Tighter hero */
.pm-services-page .pm-services-hero { padding-top: 60px; padding-bottom: 40px; min-height: auto; }





/* Back links compact */
.pm-services-back { padding: 20px 0 48px; gap: 24px; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; }





/* ── Further compact: process + contact + hero ── */
.pm-services-page .pm-services-process .pm-process-strip { gap: 16px !important; }

.pm-services-page .pm-services-process .pm-process-strip > div { padding: 12px !important; }

.pm-services-page .pm-services-process .pm-process-strip > div > span { font-size: 14px !important; }

.pm-services-page .pm-services-process .pm-process-strip > div > h2 { font-size: 16px !important; margin: 6px 0 4px !important; }

.pm-services-page .pm-services-process .pm-process-strip > div > p { font-size: 12px !important; line-height: 1.4 !important; -webkit-line-clamp: 2 !important; }





/* Contact form: compact */
.pm-services-page .pm-services-contact { padding: 24px 0 !important; }





/* Hero: tighter */
.pm-services-page .pm-services-hero { padding-top: 48px !important; padding-bottom: 32px !important; min-height: auto !important; }

.pm-services-page .pm-services-hero h1 { font-size: 36px !important; }

.pm-services-page .pm-services-hero p { font-size: 16px !important; max-width: 460px !important; }

.pm-services-page .pm-services-hero-proof { display: none !important; }





/* Work section: tighter */
.pm-services-page .pm-services-work { padding: 24px 0 !important; }

.pm-services-page .pm-services-work-card { min-height: 180px !important; }

.pm-services-page .pm-services-work-card h3 { font-size: 14px !important; }

.pm-services-page .pm-services-work-card p { font-size: 12px !important; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }





/* /services services cards/grid use the base (homepage) values 1:1 no overrides. */

/* ── Services page: compact process strip ── */
.pm-process-strip-inline {
    display: flex !important;
    flex-direction: row !important;
    gap: 20px !important;
    flex-wrap: wrap !important;
}

.pm-services-process-compact { padding: 24px 0 !important; }

.pm-services-process-compact .pm-services-process-intro h2 { display: none; }





/* Hide the default pm-process-strip styling on services page */
.pm-services-process-compact .pm-process-strip:not(.pm-process-strip-inline) { display: none !important; }





/* Contact form on services page: minimal */
.pm-services-contact { padding: 24px 0 0 !important; }

.pm-services-contact h2 { font-size: 24px !important; margin-bottom: 16px !important; }





/* ── Services page: final compaction ── */
.pm-services-page .pm-services-work { padding: 24px 0 !important; }

.pm-services-page .pm-services-work-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 16px !important; }

.pm-services-page .pm-services-work-card { min-height: 160px !important; }

.pm-services-page .pm-services-work-image { aspect-ratio: 16/9 !important; }

.pm-services-page .pm-services-work-card h3 { font-size: 14px !important; margin: 8px 12px 2px !important; }

.pm-services-page .pm-services-work-card p { font-size: 12px !important; margin: 0 12px 8px !important; -webkit-line-clamp: 1; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }

.pm-services-page .pm-services-work-head h2 { font-size: 20px !important; }

.pm-services-page .pm-services-work-head p { font-size: 14px !important; }





/* Static portfolio grid on /services page (not a carousel) */
.pm-services-portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    min-width: 0;
    overflow: visible;
}

/* Services hero proof moved out of the hero into its own full-width block
   (was absolute inside the hero and overflowed once the hero went full-bleed). */
.pm-services-proof-strip {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 0 max(var(--page-pad), calc((100vw - var(--max-w)) / 2 + var(--page-pad)));
    border-top: 1px solid rgba(120, 110, 170, 0.18);
    background: #060914;
    box-sizing: border-box;
}
.pm-services-proof-strip > span {
    display: flex;
    gap: 14px;
    align-items: center;
    min-height: 60px;
    padding: 0 16px;
    color: var(--pink);
    border-right: 1px solid rgba(120, 110, 170, 0.18);
    font: 900 13px/1 var(--ff);
}
.pm-services-proof-strip > span:last-child { border-right: 0; }
.pm-services-proof-strip strong { color: rgba(255, 255, 255, 0.66); font-size: 12px; letter-spacing: 0.08em; font-weight: 500; }
@media (max-width: 767px) {
    .pm-services-proof-strip { grid-template-columns: 1fr; }
    .pm-services-proof-strip > span { border-right: 0; border-bottom: 1px solid var(--white-10); }
    .pm-services-proof-strip > span:last-child { border-bottom: 0; }
}

/* Lighter background on the whole services hero block (full-bleed). */
.pm-services-page .pm-services-hero { background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg) 100%) !important; }

/* Services page background = the hero gradient, so it shows through the transparent
   header (0–128px page padding) and continues seamlessly into the hero. No separate
   header background the hero's gradient simply extends up behind the header. */
.pm-services-page { background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg) 100%); }

/* proof strip now lives inside the hero (absolute bottom bar, full hero width). */
.pm-services-hero .pm-services-proof-strip {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    margin-left: 0;
    margin-right: 0;
    z-index: 5;
}


/* /services OUR SERVICES section: same compact/landscape treatment as home. Desktop ≥1024px. */
@media (min-width: 1024px) {
    .pm-services-page .pm-services-layout {
        grid-template-columns: minmax(280px, 0.7fr) minmax(0, 1.35fr);
        gap: 40px;
        align-items: start;
    }
    .pm-services-page .pm-services-grid {
        gap: 20px;
    }
    .pm-services-page .pm-service-card {
        min-height: 0;
        height: auto;
        aspect-ratio: 1.4 / 1;
        padding: 28px 28px 52px;
    }
}

/* /services: Engagement + Process sections same gradient bg + full-bleed as other sections. */
.pm-services-page .pm-services-engagement,
.pm-services-page .pm-services-process {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: max(var(--page-pad), calc((100vw - var(--max-w)) / 2 + var(--page-pad)));
    padding-right: max(var(--page-pad), calc((100vw - var(--max-w)) / 2 + var(--page-pad)));
    background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg) 100%);
    box-sizing: border-box;
}

/* Engagement + Process: section padding 0 (pm-container inside handles centering). */
.pm-services-page .pm-services-engagement,
.pm-services-page .pm-services-process {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Engagement (FORMAT): two-column layout inside pm-container heading left, cards right. */
@media (min-width: 901px) {
    .pm-services-page .pm-services-engagement .pm-container {
        display: grid;
        grid-template-columns: minmax(280px, 0.7fr) minmax(0, 2.3fr);
        column-gap: clamp(40px, 5vw, 88px);
        align-items: start;
    }
    .pm-services-page .pm-services-engagement h2 {
        word-break: normal;
        overflow-wrap: normal;
        hyphens: none;
    }
    .pm-services-page .pm-services-engagement-grid {
        width: 100%;
        max-width: none;
        min-width: 0;
    }
}

/* Override base .pm-services-engagement display:grid → block (the pm-container inside handles the grid). */
.pm-services-page .pm-services-engagement {
    display: block !important;
    grid-template-columns: none !important;
}

/* Engagement + Process headings: match standard section heading style (weight 700, uppercase, section-line). */
.pm-services-page .pm-services-engagement-head h2,
.pm-services-page .pm-services-process-intro h2 {
    font: 700 clamp(32px, 3vw, 44px)/1.06 var(--ff) !important;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    margin: 0 0 16px;
}

/* Service detail: gradient bg + heading system. */
.pm-service-detail-page {
    background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg) 100%) !important;
}
/* ──────────────────────────────────────────────────────────────
   06-blog.css blog article + journal editorial
   Extracted from prodmedia.css (order-preserving, cascade-safe).
   ────────────────────────────────────────────────────────────── */


.pm-blog-arrow {
    display: inline-flex;
    align-items: center;
    width: 40px;
    flex: 0 0 40px;
    color: var(--white-72);
    transition: color var(--motion-fast) var(--ease-standard);
}

.pm-blog-arrow svg {
    display: block;
    width: 20px;
    height: 12px;
    overflow: visible;
    transition: width var(--motion-base) var(--ease-enter);
}

.pm-blog-arrow path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pm-blog-feature-nav li:hover .pm-blog-arrow, .pm-blog-feature-nav li.active .pm-blog-arrow {
    color: var(--pink);
}

.pm-blog-feature-nav li:hover .pm-blog-arrow svg, .pm-blog-feature-nav li.active .pm-blog-arrow svg {
    width: 40px;
}

.pm-blog-grid {
    display: grid;
    gap: 38px;
    grid-template-columns: repeat(3, 1fr);
}




@media (min-width: 768px) and (max-width: 1023px) {.pm-blog-grid { grid-template-columns: repeat(2, 1fr); }
}

.pm-blog-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
    cursor: pointer;
}

.pm-blog-card-img {
    position: relative;
    width: 100%;
    aspect-ratio: 1.55 / 1;
    overflow: hidden;
    background: #101122;
}

.pm-blog-card-img > img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--motion-slow) var(--ease-enter),
        filter var(--motion-slow) var(--ease-standard);
}

.pm-blog-card:hover .pm-blog-card-img > img {
    transform: scale(1.045);
    filter: saturate(1.15);
}

.pm-blog-card-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 16px;
    gap: 8px;
    opacity: 0;
    background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.1) 60%, transparent 100%);
    transition: opacity 0.3s ease;
    z-index: 2;
}

.pm-blog-card:hover .pm-blog-card-overlay {
    opacity: 1;
}

.pm-blog-card-meta {
    display: none;
}

.pm-blog-card-date {
    font: 500 12px/1 var(--ff);
    color: rgba(255,255,255,0.85);
}

.pm-blog-card-body { padding: 18px 0 0; }

.pm-blog-card-title {
    font: 900 20px/1.24 var(--ff);
    color: var(--white);
    margin-bottom: 8px;
}

.pm-blog-card-excerpt {
    font: 500 14px/1.55 var(--ff);
    color: rgba(255,255,255,0.85);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}




@media (max-width: 767px) {.pm-blog-card-img {
        aspect-ratio: 16 / 9;
        max-height: 160px;
    }
.pm-blog-card-body { padding: 10px 0 0; }
.pm-blog-card-title {
        font-size: 16px;
        line-height: 1.2;
        margin-bottom: 4px;
    }
.pm-blog-card-excerpt {
        font-size: 12px;
        line-height: 1.45;
    }
}





/* Editorial blog detail */
.pm-journal-page {
    --journal-reading: 720px;
    padding-bottom: 84px;
}

.pm-journal-hero {
    position: relative;
    padding: 26px 0 58px;
    border-bottom: 1px solid var(--white-10);
}

.pm-journal-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 170px;
    gap: 56px;
    align-items: end;
}

.pm-journal-kicker, .pm-journal-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    text-transform: uppercase;
}

.pm-journal-kicker {
    margin: 42px 0 22px;
    color: var(--pink);
    font: 700 12px/1.3 var(--ff);
}

.pm-journal-kicker span + span {
    color: var(--white-60);
}

.pm-journal-hero h1 {
    max-width: 1040px;
    color: var(--white);
    font: 900 clamp(50px, 7vw, 104px)/0.94 var(--ff);
    overflow-wrap: normal;
    text-transform: uppercase;
}

.pm-journal-deck {
    max-width: 760px;
    margin-top: 28px;
    color: var(--white-78);
    font: 500 20px/1.55 var(--ff);
}

.pm-journal-meta {
    margin-top: 34px;
    color: var(--white-60);
    font: 700 12px/1.35 var(--ff);
}

.pm-journal-meta span:not(:first-child)::before {
    margin-right: 24px;
    color: var(--pink);
    content: "/";
}

.pm-journal-index {
    display: flex;
    min-height: 230px;
    flex-direction: column;
    justify-content: space-between;
    padding-left: 24px;
    border-left: 1px solid var(--white-10);
    color: var(--white-60);
    text-align: right;
}

.pm-journal-index strong {
    color: var(--pink);
    font: 900 64px/0.85 var(--ff);
}

.pm-journal-index span {
    font: 700 12px/1.4 var(--ff);
    text-transform: uppercase;
}

.pm-journal-cover {
    margin: 54px 0 0;
}

.pm-journal-cover img {
    display: block;
    width: 100%;
    aspect-ratio: 2.15 / 1;
    object-fit: cover;
    background: var(--bg-card);
}

.pm-journal-cover figcaption {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    padding-top: 12px;
    color: var(--white-45);
    font: 700 12px/1.3 var(--ff);
}

.pm-journal-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, var(--journal-reading));
    gap: clamp(54px, 8vw, 130px);
    align-items: start;
    margin: 86px auto 0;
}

.pm-journal-aside {
    position: sticky;
    top: 110px;
}

.pm-journal-aside nav > p {
    margin-bottom: 18px;
    color: var(--pink);
    font: 700 12px/1.3 var(--ff);
}

.pm-journal-aside ol {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pm-journal-aside a {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 10px;
    padding: 10px 0;
    border-top: 1px solid var(--white-10);
    color: var(--white-60);
    font: 500 12px/1.35 var(--ff);
    transition: color var(--motion-fast) var(--ease-standard),
        transform var(--motion-fast) var(--ease-enter);
}

.pm-journal-aside a:hover {
    color: var(--white);
    transform: translateX(4px);
}

.pm-journal-aside a span {
    color: var(--pink);
    font-size: 12px;
}

.pm-journal-article {
    min-width: 0;
}

.pm-journal-fallback {
    width: min(100%, var(--journal-reading));
    margin: 84px auto 0;
}

.pm-journal-section {
    scroll-margin-top: 110px;
    padding: 0 0 84px;
}

.pm-journal-section + .pm-journal-section {
    padding-top: 76px;
    border-top: 1px solid var(--white-10);
}

.pm-journal-eyebrow {
    margin-bottom: 18px;
    color: var(--pink);
    font: 700 12px/1.3 var(--ff);
}

.pm-journal-section > h2, .pm-journal-cta h2 {
    max-width: 760px;
    margin-bottom: 28px;
    color: var(--white);
    font: 900 clamp(30px, 4vw, 52px)/1.02 var(--ff);
    overflow-wrap: normal;
}

.pm-journal-prose, .pm-journal-intro {
    color: var(--text);
    font: 400 20px/1.78 var(--ff);
}

.pm-journal-prose p {
    margin-bottom: 28px;
}

.pm-journal-prose p:first-child {
    color: var(--white);
    font-size: 20px;
    line-height: 1.65;
}

.pm-journal-section blockquote {
    position: relative;
    margin: 46px 0 0;
    padding: 30px 0 4px 36px;
    border-top: 1px solid var(--pink);
    color: var(--white);
}

.pm-journal-section blockquote > span {
    position: absolute;
    top: 24px;
    left: 0;
    color: var(--pink);
    font: 900 42px/1 var(--ff);
}

.pm-journal-section blockquote p {
    font: 700 20px/1.5 var(--ff);
}

.pm-journal-media-section {
    width: min(1120px, calc(100vw - 48px));
}

.pm-journal-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 34px;
}

.pm-journal-gallery.is-single {
    grid-template-columns: 1fr;
}

.pm-journal-gallery figure {
    min-width: 0;
    margin: 0;
}

.pm-journal-gallery img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--bg-card);
}

.pm-journal-gallery.is-single img {
    aspect-ratio: 16 / 9;
}

.pm-journal-gallery figcaption {
    display: grid;
    gap: 4px;
    padding-top: 12px;
    color: var(--white-60);
    font: 500 12px/1.45 var(--ff);
}

.pm-journal-gallery figcaption strong {
    color: var(--white);
}

.pm-journal-takeaway-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin-top: 36px;
    background: var(--white-10);
    border: 1px solid var(--white-10);
}

.pm-journal-takeaway-grid article {
    min-height: 230px;
    padding: 26px 22px;
    background: var(--bg);
}

.pm-journal-takeaway-grid article > span {
    display: block;
    margin-bottom: 54px;
    color: var(--pink);
    font: 900 12px/1 var(--ff);
}

.pm-journal-takeaway-grid h3 {
    margin-bottom: 12px;
    color: var(--white);
    font: 700 16px/1.2 var(--ff);
}

.pm-journal-takeaway-grid p {
    color: var(--white-60);
    font: 500 14px/1.55 var(--ff);
}

.pm-journal-cta {
    position: relative;
    margin-top: 10px;
    padding: 64px;
    overflow: hidden;
    background: var(--pink);
}

.pm-journal-cta::after {
    position: absolute;
    top: -40%;
    right: -6%;
    width: 260px;
    aspect-ratio: 1;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    content: "";
}

.pm-journal-cta .pm-journal-eyebrow, .pm-journal-cta h2, .pm-journal-cta > p {
    position: relative;
    z-index: 1;
    color: var(--white);
}

.pm-journal-cta > p {
    max-width: 590px;
    margin-bottom: 28px;
    font: 500 16px/1.6 var(--ff);
}

.pm-journal-footer {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    margin-top: 74px;
    padding-top: 22px;
    border-top: 1px solid var(--white-10);
    color: var(--white-45);
    font: 700 12px/1.3 var(--ff);
}

.pm-journal-footer button {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--white);
    cursor: pointer;
    font: inherit;
    transition: color var(--motion-fast) var(--ease-standard);
}

.pm-journal-footer button:hover {
    color: var(--pink);
}





@media (max-width: 1023px) {.pm-journal-layout {
        grid-template-columns: 170px minmax(0, 1fr);
        gap: 48px;
    }
.pm-journal-takeaway-grid {
        grid-template-columns: 1fr;
    }
.pm-journal-takeaway-grid article {
        min-height: 0;
    }
.pm-journal-takeaway-grid article > span {
        margin-bottom: 28px;
    }
}





@media (max-width: 767px) {.pm-journal-page {
        padding-bottom: 54px;
    }
.pm-journal-hero {
        padding-top: 12px;
        padding-bottom: 34px;
    }
.pm-journal-hero-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
.pm-journal-kicker {
        margin-top: 18px;
    }
.pm-journal-hero h1 {
        font-size: clamp(38px, 12vw, 58px);
        line-height: 0.98;
    }
.pm-journal-deck {
        margin-top: 22px;
        font-size: 16px;
    }
.pm-journal-meta {
        display: grid;
        gap: 7px;
        margin-top: 25px;
    }
.pm-journal-meta span:not(:first-child)::before {
        margin-right: 8px;
    }
.pm-journal-index {
        min-height: 0;
        flex-direction: row;
        align-items: end;
        padding: 18px 0 0;
        border-top: 1px solid var(--white-10);
        border-left: 0;
        text-align: left;
    }
.pm-journal-index strong {
        font-size: 36px;
    }
.pm-journal-index span {
        max-width: 120px;
        text-align: right;
    }
.pm-journal-cover {
        width: calc(100% + 40px);
        margin: 30px -20px 0;
    }
.pm-journal-cover img {
        aspect-ratio: 4 / 3;
    }
.pm-journal-cover figcaption {
        padding: 10px 20px 0;
    }
.pm-journal-layout {
        display: block;
        margin-top: 54px;
    }
.pm-journal-aside {
        position: static;
        margin-bottom: 52px;
    }
.pm-journal-aside ol {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 18px;
    }
.pm-journal-fallback {
        margin-top: 54px;
    }
.pm-journal-section {
        padding-bottom: 56px;
    }
.pm-journal-section + .pm-journal-section {
        padding-top: 52px;
    }
.pm-journal-section > h2, .pm-journal-cta h2 {
        margin-bottom: 22px;
        font-size: 29px;
    }
.pm-journal-prose, .pm-journal-intro {
        font-size: 16px;
        line-height: 1.72;
    }
.pm-journal-prose p:first-child {
        font-size: 20px;
    }
.pm-journal-section blockquote {
        margin-top: 34px;
        padding-left: 28px;
    }
.pm-journal-section blockquote p {
        font-size: 20px;
    }
.pm-journal-media-section {
        width: 100%;
    }
.pm-journal-gallery {
        grid-template-columns: 1fr;
    }
.pm-journal-gallery img, .pm-journal-gallery.is-single img {
        aspect-ratio: 4 / 3;
    }
.pm-journal-cta {
        margin-right: -20px;
        margin-left: -20px;
        padding: 42px 20px;
    }
.pm-journal-footer {
        align-items: flex-end;
    }
}





/* Blog editorial page: Figma-aligned featured story and vertical journal list */
.pm-blog-page {
    padding-top: 146px;
    padding-bottom: 124px;
    overflow-x: hidden;
    overflow-x: clip;
    background: var(--bg);
}

.pm-blog-editorial {
    position: relative;
}

.pm-blog-lead {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(460px, 1.18fr);
    gap: 72px;
    align-items: center;
    min-height: 500px;
    margin-bottom: 112px;
    isolation: isolate;
}

.pm-blog-lead::after {
    position: absolute;
    z-index: -1;
    top: -76px;
    right: -150px;
    width: 720px;
    height: 650px;
    content: "";
    opacity: 0.13;
    pointer-events: none;
    background:
        repeating-radial-gradient(
            ellipse at 42% 42%,
            rgba(255,255,255,0.42) 0 1px,
            transparent 1px 13px
        );
    mask-image: linear-gradient(115deg, transparent 2%, #000 24%, #000 74%, transparent 98%);
}

.pm-blog-lead-copy {
    position: relative;
    z-index: 2;
    max-width: 560px;
}

.pm-blog-kicker {
    margin-bottom: 12px;
    color: var(--white-60);
    font: 700 12px/1.2 var(--ff);
    letter-spacing: 2px;
}

.pm-blog-lead-copy h1 {
    max-width: 15ch;
    margin: 0;
    color: var(--white);
    font: 700 42px/1.08 var(--ff);
}

.pm-blog-title-line {
    width: 154px;
    height: 3px;
    margin: 24px 0 30px;
    background: var(--pink);
}

.pm-blog-lead-copy > p:not(.pm-blog-kicker) {
    max-width: 55ch;
    margin: 0 0 30px;
    color: var(--white-72);
    font: 400 16px/1.58 var(--ff);
}

.pm-blog-lead-visual {
    position: relative;
    z-index: 1;
    width: calc(100% + 72px);
    min-width: 0;
    margin-right: -72px;
    overflow: hidden;
    aspect-ratio: 1.48 / 1;
    background: var(--bg-card);
}

.pm-blog-lead-visual::after, .pm-blog-list-image::after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: inset 0 -80px 100px rgba(0,4,21,0.12);
}

.pm-blog-lead-visual img, .pm-blog-list-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pm-blog-lead-visual img {
    transition: transform var(--motion-slow) var(--ease-enter),
        filter var(--motion-slow) var(--ease-standard);
}

.pm-blog-lead:hover .pm-blog-lead-visual img {
    transform: scale(1.025);
    filter: saturate(1.08);
}

.pm-blog-read {
    width: 184px;
    min-width: 184px;
    height: 50px;
    min-height: 50px;
    padding: 0 22px;
}

.pm-blog-news {
    max-width: 1180px;
}

.pm-blog-news-header {
    margin-bottom: 42px;
}

.pm-blog-news-header h2 {
    margin: 0;
    color: var(--white);
    font: 700 36px/1.15 var(--ff);
    text-transform: none;
}

.pm-blog-title-line-wide {
    width: 100%;
    height: 2px;
    margin: 18px 0 0;
}

.pm-blog-list {
    display: grid;
    gap: 30px;
}

.pm-blog-list-item {
    display: grid;
    grid-template-columns: minmax(310px, 0.82fr) minmax(0, 1.72fr);
    gap: 38px;
    align-items: start;
    width: 100%;
    max-width: 100%;
    min-height: 226px;
}

.pm-blog-list-image {
    position: relative;
    align-self: start;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    background: var(--bg-card);
    aspect-ratio: 1.52 / 1;
}

.pm-blog-list-image > .pm-progressive-image,
.pm-blog-list-image > .pm-progressive-image > img {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.pm-blog-list-image img {
    transition: transform var(--motion-slow) var(--ease-enter),
        filter var(--motion-slow) var(--ease-standard);
}

.pm-blog-list-item:hover .pm-blog-list-image img {
    transform: scale(1.035);
    filter: saturate(1.1);
}

.pm-blog-list-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 6px 0;
}

.pm-blog-list-copy h3 {
    max-width: 30ch;
    margin: 0 0 12px;
    color: var(--white);
    font: 700 28px/1.16 var(--ff);
}

.pm-blog-list-meta {
    order: -1;
    margin-bottom: 12px;
}

.pm-blog-list-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    color: var(--pink-lite);
    font: 800 12px/1.2 var(--ff);
    letter-spacing: 0.5px;
}

.pm-blog-list-copy > p {
    max-width: 66ch;
    margin: 0 0 20px;
    color: var(--white-72);
    font: 400 16px/1.52 var(--ff);
}

.pm-blog-list-copy .pm-blog-read {
    margin-top: auto;
}





@media (max-width: 1199px) {.pm-blog-lead {
        grid-template-columns: minmax(0, 0.92fr) minmax(400px, 1.08fr);
        gap: 48px;
    }
.pm-blog-lead-copy h1 {
        font-size: 42px;
    }
.pm-blog-lead-visual {
        width: 100%;
        margin-right: 0;
    }
.pm-blog-list-item {
        grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.5fr);
        gap: 32px;
    }
}





@media (max-width: 899px) {.pm-blog-page {
        padding-top: 128px;
        padding-bottom: 96px;
    }
.pm-blog-lead {
        grid-template-columns: minmax(0, 1fr);
        gap: 42px;
        min-height: 0;
        margin-bottom: 88px;
    }
.pm-blog-lead-copy {
        max-width: 680px;
    }
.pm-blog-lead::after {
        top: 210px;
        right: -210px;
    }
.pm-blog-lead-visual {
        width: 100%;
        max-width: 760px;
        aspect-ratio: 1.6 / 1;
    }
.pm-blog-list-item {
        grid-template-columns: minmax(250px, 0.88fr) minmax(0, 1.12fr);
        gap: 26px;
    }
.pm-blog-list-copy h3 {
        font-size: 20px;
    }
}





@media (max-width: 767px) {.pm-blog-page {
        padding-top: 104px;
        padding-bottom: 72px;
    }
.pm-blog-lead {
        gap: 30px;
        margin-bottom: 72px;
    }
.pm-blog-lead::after {
        top: 260px;
        right: -300px;
        width: 620px;
        height: 520px;
        opacity: 0.1;
    }
.pm-blog-kicker {
        font-size: 12px;
    }
.pm-blog-lead-copy h1 {
        max-width: none;
        font-size: 36px;
        line-height: 1.1;
    }
.pm-blog-title-line {
        width: 112px;
        height: 2px;
        margin: 20px 0 24px;
    }
.pm-blog-lead-copy > p:not(.pm-blog-kicker) {
        margin-bottom: 26px;
        font-size: 16px;
        line-height: 1.55;
    }
.pm-blog-lead-visual {
        aspect-ratio: 4 / 3;
    }
.pm-blog-read {
        width: 176px;
        min-width: 176px;
        max-width: 176px;
        height: 48px;
        min-height: 48px;
        flex-basis: 48px;
        padding: 0 20px;
    }
.pm-blog-news-header {
        margin-bottom: 32px;
    }
.pm-blog-news-header h2 {
        font-size: 28px;
    }
.pm-blog-title-line-wide {
        width: 100%;
        margin-top: 16px;
    }
.pm-blog-list {
        gap: 44px;
    }
.pm-blog-list-item {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
        min-height: 0;
    }
.pm-blog-list-image {
        aspect-ratio: 4 / 3;
    }
.pm-blog-list-copy {
        padding: 0;
    }
.pm-blog-list-copy h3 {
        max-width: 24ch;
        margin-bottom: 10px;
        font-size: 20px;
        line-height: 1.2;
    }
.pm-blog-list-meta {
        margin-bottom: 9px;
    }
.pm-blog-list-copy > p {
        margin-bottom: 20px;
        font-size: 16px;
        line-height: 1.55;
    }
.pm-blog-list-copy .pm-blog-read {
        margin-top: 0;
    }
}

/* Blog detail: gradient bg. */
.pm-blog-article-page {
    background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg) 100%) !important;
}
/* ──────────────────────────────────────────────────────────────
   07-case-study.css — editorial case-study blocks (impact)
   Extracted from prodmedia.css (order-preserving, cascade-safe).
   ────────────────────────────────────────────────────────────── */



/* ── Case editorial hero (impact-hypnotherapy) — light editorial, % layout ── */
.pm-ceh {
    position: relative;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    height: clamp(620px, 64vw, 700px);
    overflow: hidden;
    border-radius: 0;
    background: linear-gradient(to right, #f4f6fa 0%, #f4f6fa 66.5%, #ffffff 66.5%, #ffffff 100%);
}

.pm-ceh__head {
    position: absolute;
    top: 9%;
    left: 9%;
    width: 36%;
    z-index: 3;
}

.pm-ceh__title {
    margin: 0;
    color: #25233f;
    font: 700 clamp(30px, 2.7vw, 42px)/1.08 var(--ff);
    letter-spacing: -0.5px;
    text-transform: none;
}

.pm-ceh__subtitle {
    margin: 0.6em 0 0;
    color: #25233f;
    font: 500 clamp(17px, 1.45vw, 21px)/1.32 var(--ff);
}

.pm-ceh__body {
    position: absolute;
    top: 34%;
    left: 9%;
    width: 26%;
    z-index: 3;
    color: #4a4769;
    font: 400 clamp(14px, 1.1vw, 16.5px)/1.5 var(--ff);
    text-align: left;
    word-spacing: normal;
    letter-spacing: normal;
    hyphens: none;
}

.pm-ceh__body p { margin: 0; }

.pm-ceh__body p + p { margin-top: 1.5em; }

.pm-ceh__logo {
    position: absolute;
    top: 9%;
    right: 8%;
    width: 21%;
    height: auto;
    z-index: 3;
    pointer-events: none;
}

.pm-ceh__mockup {
    position: absolute;
    left: 42%;
    right: 4%;
    bottom: 13%;
    height: 56%;
    z-index: 2;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(37, 35, 63, 0.10);
    box-shadow: 0 30px 70px rgba(37, 35, 63, 0.22), 0 10px 26px rgba(37, 35, 63, 0.10);
}





/* ── Case task & approach (impact-hypnotherapy block 2) — light editorial, % layout ── */
/* ── Case task / approach (Overview) — ProdMedia dark editorial two-column ── */
.pm-etask {
    position: relative;
    width: 100%;
    background: var(--bg);
    padding: clamp(72px, 9vw, 120px) 0;
    overflow: hidden;
}

.pm-etask__inner {
    display: grid;
    grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
    gap: clamp(64px, 7vw, 96px);
    align-items: stretch;
}

.pm-etask__textcol {
    display: flex;
    flex-direction: column;
    gap: clamp(80px, 9vw, 110px);
    min-width: 0;
}

.pm-etask__block { min-width: 0; }

.pm-etask__title {
    margin: 0 0 22px 0;
    color: var(--white);
    font: 800 clamp(32px, 3.4vw, 42px)/1.1 var(--ff);
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

.pm-etask__rule {
    display: block;
    width: clamp(120px, 11vw, 150px);
    height: 3px;
    margin: 0 0 28px 0;
    background: var(--pink);
}

.pm-etask__text {
    max-width: 660px;
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
    font: 400 clamp(16px, 1.4vw, 18px)/1.7 var(--ff);
}

.pm-etask__panels {
    display: flex;
    flex-direction: column;
    gap: clamp(32px, 3.5vw, 40px);
    min-width: 0;
}

.pm-etask__panel {
    position: relative;
    flex: 1 1 0;
    min-height: 190px;
    background: rgba(19, 20, 33, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 0;
    overflow: hidden;
}

.pm-etask__panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(135deg, transparent 0, transparent 28px, rgba(255, 255, 255, 0.03) 28px, rgba(255, 255, 255, 0.03) 29px);
    pointer-events: none;
}

.pm-etask__panel::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 48px;
    height: 2px;
    background: var(--pink);
}




@media (max-width: 900px) {.pm-etask { padding: 56px 0; }
.pm-etask__inner { grid-template-columns: 1fr; gap: 48px; }
.pm-etask__textcol { gap: 56px; }
.pm-etask__panels { display: none; }
}





/* ── Case workflow (impact-hypnotherapy block 3) — light editorial, % layout ── */
.pm-wf {
    position: relative;
    width: 100%;
    aspect-ratio: 2.68 / 1;
    min-height: clamp(360px, 34vw, 480px);
    overflow: hidden;
    background: linear-gradient(to right, #ffffff 0%, #ffffff 50%, #f7f9fc 50%, #f7f9fc 100%);
    container-type: inline-size;
}

.pm-wf__title {
    position: absolute;
    left: 29%;
    top: 26%;
    margin: 0;
    width: 24%;
    z-index: 3;
    color: #25233f;
    font: 700 clamp(1.5rem, 3.4cqw, 2.5rem)/1.1 var(--ff);
    letter-spacing: -0.01em;
    text-transform: none;
}

.pm-wf__connector {
    position: absolute;
    left: 14%;
    top: 57%;
    width: 72%;
    height: 1px;
    background: #dfe4eb;
    z-index: 1;
}

.pm-wf__list {
    position: absolute;
    left: 8%;
    top: 43%;
    width: 84%;
    height: 29%;
    display: flex;
    gap: 4.4%;
    align-items: stretch;
    z-index: 2;
}

.pm-wf__card {
    position: relative;
    flex: 1 1 0;
    height: 100%;
    background: #ffffff;
    border: 1px solid #eef0f4;
    border-radius: 8%;
    box-shadow: 0 6px 18px rgba(37, 35, 63, 0.06), 0 2px 6px rgba(37, 35, 63, 0.04);
}

.pm-wf__icon {
    position: absolute;
    left: 50%;
    top: 34%;
    transform: translate(-50%, -50%);
    width: clamp(26px, 3.3cqw, 44px);
    color: #5b6cdb;
}

.pm-wf__icon svg { width: 100%; height: auto; display: block; }

.pm-wf__label {
    position: absolute;
    left: 50%;
    top: 76%;
    transform: translate(-50%, -50%);
    width: 96%;
    text-align: center;
    white-space: nowrap;
    font: 600 clamp(0.78rem, 1.12cqw, 1rem)/1 var(--ff);
}

.pm-wf__num { color: #8b94b8; margin-right: 0.32em; }

.pm-wf__name { color: #25233f; }





@media (max-width: 900px) {.pm-wf {
        aspect-ratio: auto;
        min-height: 0;
        padding: 44px 0 40px;
        background: linear-gradient(to bottom, #ffffff 0%, #ffffff 50%, #f7f9fc 50%, #f7f9fc 100%);
    }
.pm-wf__title {
        position: static;
        left: auto;
        top: auto;
        width: auto;
        padding: 0 24px;
        margin: 0 0 28px;
    }
.pm-wf__connector { display: none; }
.pm-wf__list {
        position: static;
        left: auto;
        top: auto;
        width: auto;
        height: auto;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 16px;
        padding: 0 24px 8px;
        scrollbar-width: none;
        -ms-overflow-style: none;
        scroll-snap-type: x mandatory;
    }
.pm-wf__list::-webkit-scrollbar { display: none; }
.pm-wf__card {
        flex: 0 0 140px;
        height: 168px;
        scroll-snap-align: start;
        border-radius: 16px;
    }
.pm-wf__icon { width: 38px; }
.pm-wf__label { font-size: 0.92rem; }
}





/* ── Case research – market (impact-hypnotherapy block 4) — light editorial, % layout ── */
.pm-rm {
    position: relative;
    width: 100%;
    aspect-ratio: 1.98 / 1;
    min-height: clamp(380px, 50vw, 640px);
    background: #ffffff;
    overflow: hidden;
    container-type: inline-size;
}

.pm-rm__heading {
    position: absolute;
    left: 37.5%;
    top: 6.5%;
    width: 40%;
    z-index: 3;
}

.pm-rm__number {
    display: block;
    color: #6268f2;
    font: 800 clamp(1rem, 2.3cqw, 1.75rem)/1 var(--ff);
    margin-bottom: 1.2%;
}

.pm-rm__title {
    margin: 0;
    color: #25233f;
    font: 400 clamp(1.5rem, 4.4cqw, 3.2rem)/1.05 var(--ff);
    white-space: nowrap;
}

.pm-rm__title strong { font-weight: 800; }

.pm-rm__sep { margin: 0 0.32em; color: #8b94b8; font-weight: 400; }

.pm-rm__band {
    position: absolute;
    left: 0;
    top: 39%;
    width: 100%;
    height: 51%;
    background: #dfe8f5;
    z-index: 0;
}

.pm-rm__cards {
    position: absolute;
    left: 5.5%;
    top: 34%;
    width: 89.5%;
    height: 59.5%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.4%;
    z-index: 2;
}

.pm-rm__card {
    position: relative;
    box-sizing: border-box;
    padding: clamp(14px, 2cqw, 28px);
    background: #f7f9fc;
    border: 1px solid rgba(153, 171, 195, 0.35);
    border-radius: 9% / 7%;
    box-shadow: 0 1% 3% rgba(35, 47, 72, 0.05);
    overflow: hidden;
}

.pm-rm__card.is-highlighted {
    background: #fde4e3;
    border-color: rgba(235, 183, 183, 0.4);
}

.pm-rm__card-title {
    margin: 0 0 5% 0;
    color: #25233f;
    font: 700 clamp(0.85rem, 1.7cqw, 1.25rem)/1.2 var(--ff);
    text-transform: none;
}

.pm-rm__card-body {
    width: 100%;
    color: #4a4769;
    font: 400 clamp(0.72rem, 1.22cqw, 0.95rem)/1.38 var(--ff);
    text-align: left;
    word-spacing: normal;
    letter-spacing: normal;
}

.pm-rm__intro, .pm-rm__outro { margin: 0; }

.pm-rm__intro + ul { margin: 2% 0 0; }

.pm-rm__card-body ul { margin: 0; padding-left: 8%; }

.pm-rm__card-body li + li { margin-top: 2.4%; }

.pm-rm__card-body ul + .pm-rm__outro { margin-top: 3%; }





@media (max-width: 900px) {.pm-rm {
        aspect-ratio: auto;
        min-height: 0;
        padding: 36px 0 40px;
    }
.pm-rm__heading {
        position: static;
        left: auto;
        top: auto;
        width: auto;
        padding: 0 7%;
        margin-bottom: 26px;
    }
.pm-rm__band { display: none; }
.pm-rm__cards {
        position: static;
        left: auto;
        top: auto;
        width: auto;
        height: auto;
        display: block;
        padding: 0 7%;
    }
.pm-rm__card {
        border-radius: 18px;
        padding: 22px;
        margin-bottom: 3.5%;
    }
.pm-rm__card:last-child { margin-bottom: 0; }
}





/* ── Case personas (impact-hypnotherapy block 5) — overlapping diagonal cards ── */
.pm-ps {
    position: relative;
    width: 100%;
    aspect-ratio: 1.45 / 1;
    min-height: clamp(560px, 72vw, 920px);
    background: #ffffff;
    overflow: hidden;
    container-type: inline-size;
}

.pm-ps__form-bg {
    position: absolute;
    left: 4%;
    top: 64%;
    width: 54%;
    height: 27%;
    z-index: 0;
    opacity: 0.07;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to top right, #000 35%, transparent 92%);
    mask-image: linear-gradient(to top right, #000 35%, transparent 92%);
}

.pm-ps__form-q { margin: 0 0 6cqw; }

.pm-ps__form-q span {
    display: block;
    color: #25233f;
    font: 600 clamp(0.8rem, 1.5cqw, 1.05rem)/1.3 var(--ff);
}

.pm-ps__form-q i {
    display: block;
    height: 1px;
    margin-top: 2.2cqw;
    background: #aab4cc;
}

.pm-ps__heading {
    position: absolute;
    left: 52%;
    top: 4.5%;
    width: 41%;
    z-index: 10;
}

.pm-ps__title {
    margin: 0;
    color: #25233f;
    font: 700 clamp(1.5rem, 3.6cqw, 2.6rem)/1.1 var(--ff);
    text-transform: none;
}

.pm-ps__intro {
    margin: 2.4% 0 0;
    color: #2c3050;
    font: 400 clamp(0.82rem, 1.35cqw, 1.02rem)/1.5 var(--ff);
    text-align: left;
    word-spacing: normal;
}

.pm-ps__arrows {
    position: absolute;
    right: 4.5%;
    top: 6.5%;
    z-index: 11;
    display: flex;
    gap: 8px;
}

.pm-ps__arrow {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(153, 171, 195, 0.5);
    border-radius: 50%;
    background: #ffffff;
    color: #2c3050;
    font: 600 16px/1 var(--ff);
    cursor: pointer;
    transition: border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.pm-ps__arrow:hover:not(:disabled) {
    border-color: #6268f2;
    color: #6268f2;
    transform: translateY(-1px);
}

.pm-ps__arrow:disabled {
    opacity: 0.45;
    cursor: default;
}

.pm-ps__card {
    position: absolute;
    left: 7.5%;
    top: 11.5%;
    width: 32.8%;
    height: 48.5%;
    display: flex;
    overflow: hidden;
    border: 1px solid rgba(153, 171, 195, 0.30);
    border-radius: 2.4%;
    box-shadow: 0 1.5% 4% rgba(35, 47, 72, 0.10), 0 0.5% 1.5% rgba(35, 47, 72, 0.06);
    transition:
        left 580ms cubic-bezier(0.22, 1, 0.36, 1),
        top 580ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 580ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 480ms ease;
    will-change: left, top, transform;
}

.pm-ps__card.is-left { left: 7.5%; top: 11.5%; z-index: 2; transform: scale(0.99); }

.pm-ps__card.is-center { left: 33.3%; top: 47%; z-index: 5; transform: scale(1.01); box-shadow: 0 2.4% 6% rgba(35, 47, 72, 0.16), 0 0.6% 2% rgba(35, 47, 72, 0.08); }

.pm-ps__card.is-right { left: 59.3%; top: 35.5%; z-index: 3; transform: scale(0.99); }

.pm-ps__details {
    flex: 0 0 53%;
    box-sizing: border-box;
    padding: 5% 6% 4%;
    background: #f7f9fc;
    overflow: hidden;
}

.pm-ps__meta { width: 84%; display: flex; flex-direction: column; gap: 0.8cqw; margin-bottom: 4cqw; }

.pm-ps__meta-row { display: grid; grid-template-columns: 50% 1fr; align-items: baseline; column-gap: 3cqw; }

.pm-ps__meta-label {
    grid-column: 1;
    color: #8b94b8;
    font: 700 clamp(0.55rem, 0.95cqw, 0.72rem)/1 var(--ff);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pm-ps__meta-value {
    grid-column: 2;
    justify-self: start;
    text-align: left;
    color: #2c3050;
    font: 600 clamp(0.62rem, 1.08cqw, 0.82rem)/1.2 var(--ff);
}

.pm-ps__sec { margin-bottom: 3.2cqw; }

.pm-ps__sec:last-of-type { margin-bottom: 0; }

.pm-ps__sec-label {
    display: block;
    margin-bottom: 1.4cqw;
    color: #6268f2;
    font: 700 clamp(0.6rem, 1.02cqw, 0.78rem)/1 var(--ff);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pm-ps__sec p, .pm-ps__sec li {
    color: #4a4769;
    font: 400 clamp(0.6rem, 1.04cqw, 0.8rem)/1.4 var(--ff);
}

.pm-ps__sec p { margin: 0; }

.pm-ps__sec ul { margin: 0; padding-left: 7cqw; }

.pm-ps__sec li + li { margin-top: 1cqw; }

.pm-ps__info { margin-top: 3.4cqw; display: flex; flex-direction: column; gap: 1.8cqw; }

.pm-ps__bar { display: flex; flex-direction: column; gap: 0.8cqw; }

.pm-ps__bar-label {
    color: #5a607a;
    font: 500 clamp(0.55rem, 0.95cqw, 0.72rem)/1 var(--ff);
}

.pm-ps__bar-track {
    display: block;
    height: 3px;
    background: #e3e8f0;
    border-radius: 2px;
    overflow: hidden;
}

.pm-ps__bar-fill {
    display: block;
    height: 100%;
    background: #6268f2;
    border-radius: 2px;
}

.pm-ps__photo {
    position: relative;
    flex: 0 0 47%;
    overflow: hidden;
    background: #e9edf3;
}

.pm-ps__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.pm-ps__photo.is-placeholder { display: flex; align-items: center; justify-content: center; }

.pm-ps__photo-ph {
    color: #aab4cc;
    font: 600 clamp(0.7rem, 1.2cqw, 0.95rem)/1 var(--ff);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.pm-ps__caption {
    position: absolute;
    left: 9%;
    right: 6%;
    bottom: 6%;
    z-index: 2;
    padding-top: 14%;
    background: linear-gradient(to bottom, transparent, rgba(13, 17, 32, 0.80));
}

.pm-ps__caption strong {
    display: block;
    color: #fff;
    font: 700 clamp(0.78rem, 1.5cqw, 1.15rem)/1.15 var(--ff);
    white-space: nowrap;
}

.pm-ps__caption span {
    display: block;
    margin-top: 0.4cqw;
    color: rgba(255, 255, 255, 0.86);
    font: 400 clamp(0.6rem, 1cqw, 0.78rem)/1.2 var(--ff);
}





@media (max-width: 900px) {.pm-ps {
        aspect-ratio: auto;
        min-height: 0;
        padding: 40px 0 44px;
    }
.pm-ps__form-bg { display: none; }
.pm-ps__heading {
        position: static;
        left: auto;
        top: auto;
        width: auto;
        padding: 0 7%;
        margin-bottom: 28px;
    }
.pm-ps__card {
        position: static;
        left: auto;
        top: auto;
        width: 86%;
        height: auto;
        margin: 0 7% 26px;
        flex-direction: column;
        z-index: auto;
        transform: none;
    }
.pm-ps__details, .pm-ps__photo { flex: none; }
.pm-ps__photo { height: 260px; order: -1; }
.pm-ps__details { padding: 22px; }
}





/* ── Case key insights (impact-hypnotherapy block 6) — quote + list ── */
.pm-ki {
    position: relative;
    width: 100%;
    aspect-ratio: 2.44 / 1;
    min-height: clamp(340px, 38vw, 540px);
    background: #ffffff;
    overflow: hidden;
    container-type: inline-size;
}

.pm-ki__quote {
    position: absolute;
    left: 7.8%;
    top: 27.5%;
    width: 37%;
    height: 31.5%;
    z-index: 2;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    background: #7d7f94;
    border-radius: 4.5% / 13%;
}

.pm-ki__quote-text {
    margin: 0;
    padding: 0 9%;
    width: 100%;
    box-sizing: border-box;
    color: #ffffff;
    font: 600 clamp(0.95rem, 1.85cqw, 1.6rem)/1.4 var(--ff);
    text-align: left;
}

.pm-ki__content {
    position: absolute;
    left: 52.8%;
    top: 10.5%;
    width: 40%;
    z-index: 2;
}

.pm-ki__title {
    margin: 0 0 4cqw;
    color: #25233f;
    font: 700 clamp(1rem, 2.15cqw, 1.65rem)/1.2 var(--ff);
    text-transform: none;
}

.pm-ki__list {
    margin: 0;
    padding-left: 4.5%;
    list-style: disc;
    display: flex;
    flex-direction: column;
    gap: clamp(11px, 2.5cqw, 22px);
}

.pm-ki__item {
    color: #3a4258;
    font: 400 clamp(0.8rem, 1.32cqw, 1.05rem)/1.5 var(--ff);
    text-align: left;
    word-spacing: normal;
}

.pm-ki__item::marker { color: #25233f; }

.pm-ki__item strong { font-weight: 700; color: #25233f; }





@media (max-width: 900px) {.pm-ki {
        aspect-ratio: auto;
        min-height: 0;
        padding: 36px 0 40px;
    }
.pm-ki__quote {
        position: static;
        left: auto; top: auto;
        width: 88%;
        height: auto;
        margin: 0 6% 28px;
        padding: 26px 24px;
        border-radius: 18px;
    }
.pm-ki__content {
        position: static;
        left: auto; top: auto;
        width: auto;
        padding: 0 6%;
    }
.pm-ki__title { margin-bottom: 18px; }
.pm-ki__list { gap: 16px; }
}





/* ── Case branding (impact-hypnotherapy block 7) — colors / type / logo ── */
.pm-br {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1.56;
    min-height: clamp(700px, 120vw, 1100px);
    background: #ffffff;
    overflow: hidden;
    container-type: inline-size;
}

.pm-br__heading {
    position: absolute;
    left: 23%;
    top: 1.8%;
    width: 54%;
    z-index: 5;
}

.pm-br__number {
    display: block;
    color: #6268f2;
    font: 800 clamp(1rem, 2.2cqw, 1.7rem)/1 var(--ff);
    margin-bottom: 1%;
}

.pm-br__title {
    margin: 0;
    color: #604080;
    font: 800 clamp(1.8rem, 5cqw, 3.6rem)/1.05 var(--ff);
    text-transform: none;
}

.pm-br__intro {
    margin: 3% 0 0;
    width: 92%;
    color: #2c3050;
    font: 400 clamp(0.82rem, 1.4cqw, 1.05rem)/1.55 var(--ff);
    text-align: left;
}





/* Part 1 — palette */
.pm-br__palette {
    position: absolute;
    left: 5%;
    top: 16%;
    width: 46%;
    height: 25%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 1fr;
    gap: 0.8%;
}

.pm-br__swatch {
    border-radius: 7%;
    box-sizing: border-box;
    display: flex;
    align-items: flex-end;
    padding: 4%;
    color: #4a4769;
    border: 1px solid rgba(80, 60, 110, 0.10);
    font: 500 clamp(0.5rem, 0.92cqw, 0.74rem)/1.2 var(--ff);
}

.pm-br__swatch.is-dark { color: #ffffff; border: none; }

.pm-br__swatch.is-primary { grid-column: span 2; grid-row: span 2; font-size: clamp(0.7rem, 1.3cqw, 1.05rem); }

.pm-br__swatch.is-wide { grid-column: span 2; }

.pm-br__palette-desc {
    position: absolute;
    left: 57%;
    top: 18.5%;
    width: 35%;
    z-index: 2;
}

.pm-br__pblock { margin-bottom: 4cqw; }

.pm-br__plabel {
    margin: 0 0 1.4cqw;
    color: #25233f;
    font: 700 clamp(0.78rem, 1.4cqw, 1.05rem)/1.2 var(--ff);
}

.pm-br__pblock p, .pm-br__pconclusion {
    margin: 0;
    color: #44507a;
    font: 400 clamp(0.74rem, 1.2cqw, 0.95rem)/1.5 var(--ff);
    text-align: left;
}

.pm-br__pconclusion { margin-top: 1cqw; }





/* Part 2 — typography band */
.pm-br__type {
    position: absolute;
    left: 0;
    top: 44%;
    width: 100%;
    height: 18%;
    background: #f4f1f8;
    display: flex;
    align-items: center;
    z-index: 2;
}

.pm-br__specimen {
    position: absolute;
    left: 7%;
    width: 46%;
}

.pm-br__font-name {
    font-family: "Manrope", "Avenir Next", Arial, sans-serif;
    color: #29164f;
    font-weight: 700;
    font-size: clamp(2rem, 6.5cqw, 4.6rem);
    line-height: 1;
}

.pm-br__weights {
    margin-top: 3cqw;
    display: flex;
    flex-wrap: wrap;
    gap: 4cqw;
    font-family: "Manrope", "Avenir Next", Arial, sans-serif;
    color: #44507a;
    font-size: clamp(0.8rem, 1.5cqw, 1.2rem);
}

.pm-br__type-desc {
    position: absolute;
    left: 57%;
    width: 36%;
    color: #44507a;
    font: 400 clamp(0.74rem, 1.18cqw, 0.95rem)/1.5 var(--ff);
}

.pm-br__type-desc p { margin: 0 0 2cqw; }





/* Part 3 — logo */
.pm-br__logo-zone {
    position: absolute;
    left: 0;
    top: 62%;
    width: 100%;
    height: 38%;
    z-index: 2;
}

.pm-br__logo-bg {
    position: absolute;
    left: 34%;
    top: 8%;
    width: 55%;
    height: 70%;
    background: rgba(238, 246, 248, 0.55);
}

.pm-br__logo-watermark {
    position: absolute;
    left: 36%;
    top: 9%;
    color: #d7e3e8;
    font: 800 clamp(1.6rem, 4cqw, 2.8rem)/1 var(--ff);
    letter-spacing: 0.08em;
}

.pm-br__construction {
    position: absolute;
    left: 8%;
    top: 30%;
    width: 50%;
    display: flex;
    align-items: center;
    gap: 2.5cqw;
    color: #8050a0;
}

.pm-br__csymbol svg, .pm-br__cdrawing svg { width: 100%; height: auto; display: block; }

.pm-br__csymbol { width: 14%; flex: none; }

.pm-br__cdrawing { width: 22%; flex: none; color: #b9c4d6; }

.pm-br__cplus { font: 700 clamp(1rem, 2cqw, 1.6rem)/1 var(--ff); color: #9090c0; }

.pm-br__final-logo {
    position: absolute;
    left: 56%;
    top: 13%;
    width: 30%;
    z-index: 3;
}

.pm-br__final-logo img { width: 100%; height: auto; display: block; object-fit: contain; }

.pm-br__logo-desc {
    position: absolute;
    left: 20%;
    top: 72%;
    width: 60%;
}

.pm-br__logo-desc p {
    margin: 0 0 2.5cqw;
    color: #44507a;
    font: 400 clamp(0.74rem, 1.2cqw, 0.95rem)/1.5 var(--ff);
    text-align: left;
}





@media (max-width: 900px) {.pm-br {
        aspect-ratio: auto;
        min-height: 0;
        padding: 40px 0 48px;
    }
.pm-br__heading, .pm-br__palette, .pm-br__palette-desc, .pm-br__type, .pm-br__logo-zone {
        position: static;
        left: auto; top: auto; width: auto; height: auto;
    }
.pm-br__heading { padding: 0 6%; margin-bottom: 24px; width: auto; }
.pm-br__palette { display: grid; padding: 0 6%; margin-bottom: 24px; height: 240px; }
.pm-br__palette-desc { padding: 0 6%; margin-bottom: 28px; }
.pm-br__type { display: block; padding: 28px 6%; margin-bottom: 28px; }
.pm-br__specimen, .pm-br__type-desc { position: static; width: auto; }
.pm-br__type-desc { margin-top: 18px; }
.pm-br__logo-zone { display: block; }
.pm-br__logo-bg, .pm-br__logo-watermark { display: none; }
.pm-br__construction { position: static; padding: 0 6%; margin-bottom: 24px; width: auto; }
.pm-br__final-logo { position: static; width: 60%; padding: 0 6%; margin-bottom: 24px; }
.pm-br__logo-desc { position: static; padding: 0 6%; width: auto; }
}





/* ── Case user flow & IA (impact-hypnotherapy block 8) ── */
.pm-uf {
    position: relative;
    width: 100%;
    aspect-ratio: 1.02 / 1;
    min-height: clamp(620px, 78vw, 980px);
    background: #ffffff;
    overflow: hidden;
    container-type: inline-size;
}

.pm-uf__band {
    position: absolute;
    left: 0;
    top: 67%;
    width: 100%;
    height: 33%;
    background: #f4f8fc;
    z-index: 0;
}

.pm-uf__heading {
    position: absolute;
    left: 40%;
    top: 2%;
    width: 35%;
    z-index: 5;
}

.pm-uf__number {
    display: block;
    color: #6268f2;
    font: 800 clamp(1rem, 2.1cqw, 1.6rem)/1 var(--ff);
    margin-bottom: 1%;
}

.pm-uf__title {
    margin: 0;
    color: #604080;
    font: 800 clamp(1.7rem, 4.4cqw, 3.1rem)/1.04 var(--ff);
    text-transform: none;
}

.pm-uf__subtitle {
    margin: 1% 0 0;
    color: #44507a;
    font: 600 clamp(0.9rem, 1.7cqw, 1.3rem)/1.2 var(--ff);
}

.pm-uf__challenges {
    position: absolute;
    left: 9.5%;
    top: 18.5%;
    width: 55%;
    z-index: 4;
}

.pm-uf__ch-title {
    margin: 0 0 3cqw;
    color: #25233f;
    font: 700 clamp(1.1rem, 2.3cqw, 1.7rem)/1.2 var(--ff);
    text-transform: none;
}

.pm-uf__ch-item {
    display: grid;
    grid-template-columns: 5% 1fr;
    gap: 2.5%;
    margin-bottom: 2.4cqw;
}

.pm-uf__ch-num {
    color: rgba(41, 22, 79, 0.14);
    font: 600 clamp(1.4rem, 2.8cqw, 2.1rem)/1 var(--ff);
}

.pm-uf__ch-content strong {
    display: block;
    margin-bottom: 0.6cqw;
    color: #2c3050;
    font: 600 clamp(0.82rem, 1.45cqw, 1.08rem)/1.4 var(--ff);
}

.pm-uf__ch-content p {
    margin: 0;
    color: #5a607a;
    font: 400 clamp(0.74rem, 1.2cqw, 0.95rem)/1.45 var(--ff);
}

.pm-uf__diagram {
    position: absolute;
    left: 45%;
    top: 51%;
    width: 64%;
    height: 49%;
    z-index: 2;
}

.pm-uf__links {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: visible;
}

.pm-uf__link {
    fill: none;
    stroke: rgba(75, 88, 112, 0.45);
    stroke-width: 1.1;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pm-uf__node {
    position: absolute;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2%;
    background: #eaf3fc;
    border-radius: 14%;
    color: #2c3050;
    text-align: center;
    font: 500 clamp(0.6rem, 1.05cqw, 0.85rem)/1.2 var(--ff);
    z-index: 2;
}

.pm-uf__node.is-primary {
    background: #f8dddd;
    color: #29164f;
    font-weight: 700;
}





@media (max-width: 900px) {.pm-uf {
        aspect-ratio: auto;
        min-height: 0;
        padding: 40px 0 48px;
    }
.pm-uf__band { display: none; }
.pm-uf__heading, .pm-uf__challenges, .pm-uf__diagram {
        position: static;
        left: auto; top: auto; width: auto; height: auto;
    }
.pm-uf__heading { padding: 0 6%; margin-bottom: 24px; }
.pm-uf__challenges { padding: 0 6%; margin-bottom: 30px; }
.pm-uf__ch-item { grid-template-columns: 32px 1fr; }
.pm-uf__diagram {
        width: 88%;
        margin: 0 6%;
        aspect-ratio: 1 / 1.4;
        height: auto;
    }
.pm-uf__node { font-size: 0.72rem; }
}





/* ── ProdMedia dark restyle for case-study blocks (data-theme="prodmedia") ──
   Reuses site tokens: --bg #000415, --bg-dark, --bg-card, --pink #CA0274, --white, --text, --border-light. */

/* diagonal hatch utility */
.pm-dhatch {
    background-image: repeating-linear-gradient(135deg, transparent 0, transparent 28px, rgba(255,255,255,0.035) 28px, rgba(255,255,255,0.035) 29px);
}





/* ── Editorial hero ── */
.pm-ceh.theme-prodmedia {
    background: linear-gradient(to right, var(--bg) 0%, var(--bg) 66.5%, var(--bg-dark) 66.5%, var(--bg-dark) 100%);
}

.pm-ceh.theme-prodmedia::before {
    content: ""; position: absolute; inset: 0 0 0 66.5%; z-index: 0;
    background-image: repeating-linear-gradient(135deg, transparent 0, transparent 30px, rgba(255,255,255,0.03) 30px, rgba(255,255,255,0.03) 31px);
    pointer-events: none;
}

.pm-ceh.theme-prodmedia .pm-ceh__title { color: var(--white); text-transform: uppercase; letter-spacing: -0.01em; }

.pm-ceh.theme-prodmedia .pm-ceh__title::after { content:""; display:block; width:13%; min-width:46px; height:3px; background: var(--pink); margin: 16px 0 0; }

.pm-ceh.theme-prodmedia .pm-ceh__subtitle { color: var(--white-78); }

.pm-ceh.theme-prodmedia .pm-ceh__body { color: var(--white-78); }

.pm-ceh[data-theme="prodmedia"] .pm-ceh__mockup, .pm-ceh.theme-prodmedia .pm-ceh__mockup {
    border: 1px solid var(--border-light); border-top: 3px solid var(--pink); border-radius: 4px;
    box-shadow: 0 18px 60px rgba(0,0,0,.55), 0 0 60px rgba(202,2,116,.14);
    height: 48%;
    bottom: 16%;
}





/* ── Task & approach: both themes use the shared ProdMedia dark editorial base above ── */

/* ── Workflow ── */
.pm-wf.theme-prodmedia {
    background: linear-gradient(to right, var(--bg) 0%, var(--bg) 50%, var(--bg-dark) 50%, var(--bg-dark) 100%);
}

.pm-wf.theme-prodmedia .pm-wf__title { color: var(--white); text-transform: uppercase; }

.pm-wf.theme-prodmedia .pm-wf__title::after { content:""; display:block; width:14%; min-width:50px; height:3px; background: var(--pink); margin: 14px 0 0; }

.pm-wf.theme-prodmedia .pm-wf__connector { background: var(--white-10); }

.pm-wf.theme-prodmedia .pm-wf__card {
    background: var(--bg-card); border: 1px solid var(--border-light); border-radius: 2px;
    box-shadow: none;
}

.pm-wf.theme-prodmedia .pm-wf__icon { color: var(--pink); }

.pm-wf.theme-prodmedia .pm-wf__num { color: var(--pink); }

.pm-wf.theme-prodmedia .pm-wf__name { color: var(--white); }





/* ── Research – market ── */
.pm-rm.theme-prodmedia { background: var(--bg); }

.pm-rm.theme-prodmedia .pm-rm__band { background: var(--bg-dark); border-top: 1px solid var(--border-light); }

.pm-rm.theme-prodmedia .pm-rm__band { background-image: repeating-linear-gradient(135deg, var(--bg-dark) 0, var(--bg-dark) 28px, #0c0e22 28px, #0c0e22 29px); }

.pm-rm.theme-prodmedia .pm-rm__number { color: var(--pink); }

.pm-rm.theme-prodmedia .pm-rm__title { color: var(--white); }

.pm-rm.theme-prodmedia .pm-rm__title strong { color: var(--white); }

.pm-rm.theme-prodmedia .pm-rm__sep { color: var(--white-60); }

.pm-rm.theme-prodmedia .pm-rm__card {
    background: var(--bg-card); border: 1px solid var(--border-light); border-radius: 2px;
    box-shadow: none;
}

.pm-rm.theme-prodmedia .pm-rm__card.is-highlighted {
    background: linear-gradient(135deg, rgba(202,2,116,0.28), rgba(88,0,99,0.35));
    border-color: var(--pink);
}

.pm-rm.theme-prodmedia .pm-rm__card-title { color: var(--white); }

.pm-rm.theme-prodmedia .pm-rm__card-body, .pm-rm.theme-prodmedia .pm-rm__intro, .pm-rm.theme-prodmedia .pm-rm__outro { color: var(--white-78); }

.pm-rm.theme-prodmedia .pm-rm__card-body li::marker { color: var(--pink); }





/* ── Personas ── */
.pm-ps.theme-prodmedia { background: var(--bg); }

.pm-ps.theme-prodmedia .pm-ps__title { color: var(--white); text-transform: uppercase; }

.pm-ps.theme-prodmedia .pm-ps__title::after { content:""; display:block; width:14%; min-width:50px; height:3px; background: var(--pink); margin: 14px 0 0; }

.pm-ps.theme-prodmedia .pm-ps__intro { color: var(--white-78); }

.pm-ps.theme-prodmedia .pm-ps__form-q span { color: var(--white); }

.pm-ps.theme-prodmedia .pm-ps__card {
    background: var(--bg-card); border: 1px solid var(--border-light); border-radius: 2px;
    box-shadow: 0 10px 30px rgba(0,0,0,.5);
}

.pm-ps.theme-prodmedia .pm-ps__card.is-center { border-color: var(--pink-border); }

.pm-ps.theme-prodmedia .pm-ps__details { background: var(--bg-dark); }

.pm-ps.theme-prodmedia .pm-ps__meta-label { color: var(--pink); }

.pm-ps.theme-prodmedia .pm-ps__meta-value { color: var(--white); }

.pm-ps.theme-prodmedia .pm-ps__sec-label { color: var(--pink); }

.pm-ps.theme-prodmedia .pm-ps__sec p, .pm-ps.theme-prodmedia .pm-ps__sec li { color: var(--white-78); }

.pm-ps.theme-prodmedia .pm-ps__sec li::marker { color: var(--pink); }

.pm-ps.theme-prodmedia .pm-ps__bar-label { color: var(--white-78); }

.pm-ps.theme-prodmedia .pm-ps__bar-track { background: var(--white-10); }

.pm-ps.theme-prodmedia .pm-ps__bar-fill { background: var(--pink); }

.pm-ps.theme-prodmedia .pm-ps__photo { background: var(--bg-dark); }

.pm-ps.theme-prodmedia .pm-ps__caption { background: linear-gradient(to bottom, transparent, rgba(7,0,18,0.96)); }

.pm-ps.theme-prodmedia .pm-ps__arrow {
    background: var(--bg-card); border: 1px solid var(--border-light); border-radius: 2px; color: var(--white);
}

.pm-ps.theme-prodmedia .pm-ps__arrow:hover:not(:disabled) { border-color: var(--pink); color: var(--pink); }





/* ── Key insights ── */
.pm-ki.theme-prodmedia { background: var(--bg); }

.pm-ki.theme-prodmedia .pm-ki__quote { background: linear-gradient(135deg, var(--pink), #6f007d); border-radius: 2px; }

.pm-ki.theme-prodmedia .pm-ki__title { color: var(--white); }

.pm-ki.theme-prodmedia .pm-ki__item { color: var(--white-78); }

.pm-ki.theme-prodmedia .pm-ki__item::marker { color: var(--pink); }

.pm-ki.theme-prodmedia .pm-ki__item strong { color: var(--white); }





/* ── Branding ── */
.pm-br.theme-prodmedia { background: var(--bg); }

.pm-br.theme-prodmedia .pm-br__number { color: var(--pink); }

.pm-br.theme-prodmedia .pm-br__title { color: var(--white); text-transform: uppercase; }

.pm-br.theme-prodmedia .pm-br__intro { color: var(--white-78); }

.pm-br.theme-prodmedia .pm-br__plabel { color: var(--white); }

.pm-br.theme-prodmedia .pm-br__pblock p, .pm-br.theme-prodmedia .pm-br__pconclusion { color: var(--white-78); }

.pm-br.theme-prodmedia .pm-br__type { background: var(--bg-dark); border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); }

.pm-br.theme-prodmedia .pm-br__font-name { color: var(--white); }

.pm-br.theme-prodmedia .pm-br__weights, .pm-br.theme-prodmedia .pm-br__type-desc { color: var(--white-78); }

.pm-br.theme-prodmedia .pm-br__swatch:not(.is-dark) { border: 1px solid var(--border-light); }

.pm-br.theme-prodmedia .pm-br__logo-bg { background: rgba(255,255,255,0.03); border: 1px solid var(--border-light); }

.pm-br.theme-prodmedia .pm-br__logo-watermark { color: var(--white-10); }

.pm-br.theme-prodmedia .pm-br__construction { color: var(--pink); }

.pm-br.theme-prodmedia .pm-br__cdrawing { color: var(--pink-border); }

.pm-br.theme-prodmedia .pm-br__logo-desc p { color: var(--white-78); }





/* ── User flow ── */
.pm-uf.theme-prodmedia { background: var(--bg); }

.pm-uf.theme-prodmedia .pm-uf__band { background: var(--bg-dark); border-top: 1px solid var(--border-light); }

.pm-uf.theme-prodmedia .pm-uf__band { background-image: repeating-linear-gradient(135deg, var(--bg-dark) 0, var(--bg-dark) 28px, #0c0e22 28px, #0c0e22 29px); }

.pm-uf.theme-prodmedia .pm-uf__number { color: var(--pink); }

.pm-uf.theme-prodmedia .pm-uf__title { color: var(--white); text-transform: uppercase; }

.pm-uf.theme-prodmedia .pm-uf__subtitle { color: var(--white-78); }

.pm-uf.theme-prodmedia .pm-uf__ch-title { color: var(--white); text-transform: uppercase; }

.pm-uf.theme-prodmedia .pm-uf__ch-num { color: var(--pink); }

.pm-uf.theme-prodmedia .pm-uf__ch-item { border-bottom: 1px solid var(--white-10); padding-bottom: 2.4cqw; }

.pm-uf.theme-prodmedia .pm-uf__ch-content strong { color: var(--white); }

.pm-uf.theme-prodmedia .pm-uf__ch-content p { color: var(--white-78); }

.pm-uf.theme-prodmedia .pm-uf__node {
    background: var(--bg-card); border: 1px solid var(--border-light); border-radius: 2px; color: var(--white-78);
}

.pm-uf.theme-prodmedia .pm-uf__node.is-primary {
    background: var(--pink); border-color: var(--pink); color: #fff;
}

.pm-uf.theme-prodmedia .pm-uf__link { stroke: rgba(164,137,177,0.35); }


    /* Floating project actions: hidden on tablet (mobile/tablet nav has its own CTA) */
    @media (min-width: 768px) and (max-width: 1023px) {.pm-shell > header.pm-container {
        padding-right: 32px;
        padding-left: 32px;
    }
.pm-nav {
        min-height: 88px;
        gap: 16px;
        padding: 12px 0;
    }
.pm-nav-logo img {
        height: 52px;
    }
.pm-nav-links, .pm-nav-phone {
        display: none;
    }
.pm-hamburger {
        display: flex;
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
        margin-left: auto;
        padding: 11px;
        align-items: flex-end;
        justify-content: center;
        gap: 5px;
        border: 1px solid rgba(255,255,255,0.18);
    }
.pm-hamburger span:nth-child(2) {
        width: 15px;
    }
.pm-mobile-menu {
        min-height: 100dvh;
        padding: 88px 32px 30px;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
.pm-mobile-menu-link {
        width: min(100%, 360px);
        min-height: 50px;
        padding: 12px 16px;
        font-size: 20px;
    }


    /* Floating project actions: hidden on tablet (mobile/tablet nav has its own CTA) */
    .pm-floating-actions {
        display: none !important;
    }
}


    /* Floating project actions: hidden on mobile (mobile nav has its own CTA) no overlap */
    @media (max-width: 767px) {
    /* Carousel: JS-driven scrollLeft marquee NO scroll-snap (causes vibration) */
    .pm-home-portfolio-carousel { overflow-x: hidden; overflow-y: hidden; scroll-snap-type: none; -webkit-overflow-scrolling: touch; }
.pm-home-portfolio-track { display: flex; width: max-content; min-width: 100%; gap: 18px; align-items: stretch; }
.pm-home-portfolio-carousel .pm-portfolio-card, .pm-home-portfolio-carousel .pm-home-portfolio-card { flex: 0 0 min(82vw, 360px); width: min(82vw, 360px); max-width: none; min-width: 0; scroll-snap-align: none; }
.pm-home-portfolio-card { min-height: 0; height: auto; }

    /* Card image: drop fixed aspect-ratio + absolute; let the progressive-image wrapper + img flow at natural ratio (no crop/stretch, no huge height) */
    .pm-portfolio-card-img { aspect-ratio: auto; max-height: none; }
.pm-portfolio-card-img > .pm-progressive-image { position: relative; display: block; width: 100%; height: auto; overflow: hidden; }
.pm-portfolio-card-img > .pm-progressive-image > img { position: static; inset: auto; width: 100%; height: auto; max-width: 100%; object-fit: contain; filter: none; transform: none; }
.pm-portfolio-card-body { padding: 14px 4px 4px; min-width: 0; }
.pm-portfolio-card-tags-overlay { display: none !important; }
.pm-portfolio-card-tags-inline { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-bottom: 8px; }
.pm-tag { white-space: nowrap; }
.pm-portfolio-card-title { word-break: normal; overflow-wrap: normal; white-space: normal; line-height: 1.12; }
.pm-portfolio-card-desc { max-width: 100%; }


    /* Floating project actions: hidden on mobile (mobile nav has its own CTA) no overlap */
    .pm-floating-actions { display: none !important; }
}


/* Social link polish: keep hero and footer links visually aligned. */
.pm-hero-social, .pm-footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}


/* Mobile layout hardening */
main, section, .pm-container, .pm-services-layout, .pm-about-layout, .pm-case-hero, .pm-case-stream, .pm-case-embed, .pm-detail-section-grid {
    min-width: 0;
}


/* Design polish pass: page rhythm, controlled type, and stronger internal pages. */


/* Final cascade guard for Figma-like controlled typography. */


/* Phone Frame */


/* ── Instagram UI ── */
.pm-app-instagram { display: flex; flex-direction: column; height: 100%; background: #000; color: #fff; font-family: -apple-system, system-ui, 'Segoe UI', sans-serif; }


/* ── TikTok UI ── */
.pm-app-tiktok { display: flex; flex-direction: column; height: 100%; background: #000; color: #fff; font-family: -apple-system, system-ui, 'Segoe UI', sans-serif; }


/* Social App Embed: complete CC-driven profile/media overrides */
.pm-social-phone-layout { align-items: center; gap: clamp(24px, 5vw, 64px); }


/* ── Color picker in admin form ──────────────────────────────────────────── */
.mk-brand-color-row {display:flex;gap:12px;align-items:flex-start}


/* Floating project actions (FloatingProjectActions): persistent sales dock.
   Single shared component rendered once in SiteShell, identical on every page.
   Desktop-first: fixed to the viewport, never clipped, never shifted on hover. */
#contact { scroll-margin-top: 0 !important; }


/* Pink "START A PROJECT" button: ~230×55, text left + arrow right, even padding. */
.pm-floating-cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 55px;
  min-width: 230px;
  padding: 0 24px;
  background: var(--pink);
  font: 900 12px/1 var(--ff);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: box-shadow 180ms ease;
}


/* Square up / home buttons: 55×55, same height as the CTA, icons centered. */
.pm-floating-icon {
  display: grid;
  place-items: center;
  width: 55px;
  height: 55px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(140, 132, 190, 0.26) !important;
  font: 900 20px/1 var(--ff);
  transition: background 180ms ease, box-shadow 180ms ease;
}


/* Hover: glow/brightness only never translate or resize (no shift). */
.pm-floating-cta:hover { box-shadow: 0 14px 34px rgba(216, 0, 127, 0.32); }

@media (max-width: 720px) {#contact { scroll-margin-top: 0 !important; }
.pm-floating-actions {
    right: 16px;
    bottom: 16px;
    max-width: calc(100vw - 32px);
    gap: 8px;
    padding: 8px;
  }
.pm-floating-cta {
    height: 48px;
    min-width: 0;
    padding: 0 14px;
    font-size: 12px;
  }
.pm-floating-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
  }
.pm-footer { padding-bottom: 92px; }
}


/* Simple portfolio blocks */
.pm-simple-block {margin:100px 0}


/* Long native-language words must wrap inside cards and hero columns instead
   of being clipped by the late design-polish rules. */


/* The hero mockup is a visual summary, not a second body-copy column. */
.pm-service-visual-body h2 {
    max-width: 100%;
    font-size: clamp(24px, 2.45vw, 34px);
    line-height: 1.02;
    overflow-wrap: normal;
}


/* Contact form: force compact */
section.pm-services-contact > section.pm-contact, .pm-services-contact .pm-contact {
    padding: 0 !important;
    max-width: 540px !important;
    margin: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    border: none !important;
}


/* Proxima Nova is Latin-only. Manrope carries the matching Cyrillic UI text. */
html[lang="ru"] {
    --ff: "Manrope", "Proxima Nova", "Segoe UI", Roboto, Arial, sans-serif;
}


@media (min-width: 900px) {body .pm-primary-hero:not(.pm-portfolio-page .pm-page-hero) {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 62%) minmax(320px, 38%) !important;
        gap: 0 !important;
        align-items: stretch;
        box-sizing: border-box;
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        height: 500px !important;
        min-height: 500px !important;
        margin-bottom: 60px;
        padding: 0 max(var(--page-pad), calc((100vw - var(--max-w)) / 2 + var(--page-pad))) !important;
        overflow: hidden;
        border-top: 1px solid var(--white-10);
        border-bottom: 1px solid var(--white-10);
        background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg) 100%);
        isolation: isolate;
    }
body .pm-primary-hero.pm-page-hero::before, body .pm-services-page-restored .pm-primary-hero.pm-services-hero::before, body .pm-primary-hero.pm-blog-lead::after {
        position: absolute;
        z-index: -1;
        inset: 0 0 0 auto;
        width: 38%;
        height: 100%;
        border: 0;
        border-left: 1px solid var(--white-10);
        border-radius: 0;
        content: "";
        opacity: 1;
        filter: none;
        pointer-events: none;
        background:
            repeating-linear-gradient(
                135deg,
                transparent 0 21px,
                rgba(255,255,255,0.018) 21px 22px
            );
        mask-image: none;
    }
body .pm-primary-hero .pm-page-hero-main, body .pm-services-page-restored .pm-primary-hero .pm-services-hero-copy, body .pm-primary-hero .pm-blog-lead-copy {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-self: stretch;
        box-sizing: border-box;
        width: 100%;
        max-width: none;
        height: 100%;
        min-height: 0;
        padding: 26px 52px 26px 0 !important;
    }
body .pm-primary-hero .pm-page-hero-title, body .pm-services-page-restored .pm-primary-hero .pm-services-hero-copy h1, body .pm-primary-hero .pm-blog-lead-copy h1 {
        max-width: 14ch;
        margin: 0 !important;
        color: var(--white);
        font: 900 clamp(36px, 3.2vw, 50px)/.96 var(--ff) !important;
        letter-spacing: -.025em;
        text-transform: uppercase;
        text-wrap: balance;
    }
body .pm-primary-hero .pm-section-label, body .pm-services-page-restored .pm-primary-hero .pm-section-label, body .pm-primary-hero .pm-blog-kicker {
        margin: 0 0 12px !important;
        color: var(--pink);
        font: 700 12px/1.2 var(--ff);
        letter-spacing: .16em;
        text-transform: uppercase;
    }
body .pm-primary-hero .pm-section-line, body .pm-primary-hero .pm-blog-title-line, body .pm-services-page-restored .pm-primary-hero .pm-services-hero-copy h1::after {
        display: block;
        width: 154px;
        height: 3px;
        margin: 16px 0 18px;
        background: var(--pink);
        content: "";
    }
body .pm-primary-hero .pm-page-intro, body .pm-services-page-restored .pm-primary-hero .pm-services-hero-copy > p:not(.pm-section-label), body .pm-primary-hero .pm-blog-lead-copy > p:not(.pm-blog-kicker) {
        max-width: 58ch !important;
        margin: 0 !important;
        color: rgba(255,255,255,.82);
        font: 400 16px/1.48 var(--ff) !important;
    }
body .pm-primary-hero .pm-page-hero-aside, body .pm-services-page-restored .pm-primary-hero .pm-services-hero-art, body .pm-primary-hero .pm-blog-lead-visual {
        position: relative;
        z-index: 1;
        grid-column: 2;
        grid-row: 1;
        box-sizing: border-box;
        width: 100% !important;
        min-width: 0;
        height: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        overflow: hidden;
        border-left: 1px solid var(--white-10);
    }
body .pm-primary-hero .pm-page-hero-aside {
        align-items: flex-end;
        justify-content: center;
        padding: 36px 0 36px 42px;
    }
body .pm-primary-hero .pm-blog-lead-visual, body .pm-primary-hero .pm-blog-lead-visual > .pm-progressive-image, body .pm-primary-hero .pm-blog-lead-visual img {
        aspect-ratio: auto;
    }
body .pm-primary-hero .pm-blog-lead-visual img {
        object-fit: cover;
    }
body .pm-primary-hero .pm-blog-read, body .pm-services-page-restored .pm-primary-hero .pm-services-hero-actions {
        margin-top: 18px;
    }
body .pm-services-page-restored .pm-primary-hero .pm-services-hero-proof {
        right: 0;
        bottom: 0;
        left: 62%;
    }
body .pm-services-page-restored .pm-primary-hero .pm-services-orbit-core {
        width: 150px;
    }
}


    /* Legacy portfolio fallback follows the same opening scale. */

/* Service detail sections share the site's primary content rail. */
body .pm-service-detail-v3 .pm-sd3-wide-container {
    width: 100%;
    max-width: var(--max-w);
    padding-inline: var(--page-pad);
    margin-inline: auto;
}

body .pm-service-detail-v3 .pm-sd3-outcome-band,
body .pm-service-detail-v3 .pm-sd3-work {
    width: 100%;
}

/* ═══════════════════════════════════════════════════════
   SERVICE DETAIL — INFO / CAPABILITIES SECTION REDESIGN
   Two-column grid, editorial headings, compact cards
   ═══════════════════════════════════════════════════════ */

/* 1. Section rhythm */
body .pm-service-detail-v3 .pm-sd3-info {
    border-top: 0 !important;
    padding-top: 96px !important;
    padding-bottom: 120px !important;
}

/* 2. Shared two-column grid — tighter gap, closer to centre */
body .pm-service-detail-v3 .pm-sd3-info-lead,
body .pm-service-detail-v3 .pm-sd3-capability-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1.1fr) minmax(400px, 0.9fr) !important;
    column-gap: clamp(64px, 6vw, 104px) !important;
    row-gap: 0 !important;
    align-items: start !important;
    padding-bottom: 0 !important;
}

/* Left <div> becomes display:contents so label and h2/h3 are
   direct grid items — right description can then be placed on
   the same explicit row as the heading, not the whole group. */
body .pm-service-detail-v3 .pm-sd3-info-lead > div,
body .pm-service-detail-v3 .pm-sd3-capability-head > div {
    display: contents !important;
}

/* Label: row 1, col 1 — above the heading */
body .pm-service-detail-v3 .pm-sd3-info-lead > div > .pm-section-label,
body .pm-service-detail-v3 .pm-sd3-capability-head > div > .pm-section-label {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: start !important;
    margin-bottom: 0 !important;
}

/* h2/h3: row 2, col 1 */
body .pm-service-detail-v3 .pm-sd3-info-lead h2 {
    grid-column: 1 !important;
    grid-row: 2 !important;
}
body .pm-service-detail-v3 .pm-sd3-capability-head h3 {
    grid-column: 1 !important;
    grid-row: 2 !important;
}

/* Right description: row 2, col 2 — TOP-aligns with the heading */
body .pm-service-detail-v3 .pm-sd3-info-lead > p,
body .pm-service-detail-v3 .pm-sd3-capability-head > p {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: start !important;
}

/* 3. Intro-lead spacing */
body .pm-service-detail-v3 .pm-sd3-info-lead {
    margin-top: 0 !important;
    margin-bottom: 88px !important;
}

/* 4. Capability-head spacing */
body .pm-service-detail-v3 .pm-sd3-capability-head {
    margin-top: 0 !important;
    margin-bottom: 40px !important;
}

/* 5. Pink accent lines via ::after pseudo on headings — no conflicts, no !important needed */
body .pm-service-detail-v3 .pm-sd3-info-lead h2::after {
    content: "";
    display: block;
    width: 150px;
    height: 3px;
    background: var(--pink);
    margin-top: 28px;
}

body .pm-service-detail-v3 .pm-sd3-capability-head h3::after {
    content: "";
    display: block;
    width: 120px;
    height: 3px;
    background: var(--pink);
    margin-top: 24px;
}

/* 6. Main heading h2 — (0,2,2) specificity beats inline (0,2,1) + !important on conflicting props */
body .pm-service-detail-v3 .pm-sd3-info-lead h2 {
    max-width: 600px;
    font-size: clamp(38px, 3.6vw, 56px) !important;
    line-height: 1.06 !important;
    letter-spacing: -0.03em !important;
    font-weight: 700 !important;
    margin-top: 22px !important;
    margin-bottom: 0 !important;
}

/* 7. Capabilities sub-heading h3 — same specificity boost */
body .pm-service-detail-v3 .pm-sd3-capability-head h3 {
    font-size: clamp(34px, 2.8vw, 46px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.025em !important;
    font-weight: 700 !important;
    margin-top: 18px !important;
    margin-bottom: 0 !important;
}

/* 8. Right-column descriptions — same axis, same width, start-aligned */
body .pm-service-detail-v3 .pm-sd3-info-lead > p,
body .pm-service-detail-v3 .pm-sd3-capability-head > p {
    width: 100% !important;
    max-width: 460px !important;
    margin: 0 !important;
    justify-self: start !important;
    font-size: 18px !important;
    line-height: 1.55 !important;
    font-weight: 400 !important;
    color: rgba(255, 255, 255, 0.70) !important;
}

/* 9. Capabilities grid */
body .pm-service-detail-v3 .pm-sd3-capabilities {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    background: transparent !important;
    gap: 0 !important;
    overflow: visible !important;
}

/* 10. Cards — reset inherited borders, apply right-divider only */
body .pm-service-detail-v3 .pm-sd3-capabilities article {
    min-height: 230px !important;
    padding: 32px 34px 36px !important;
    background: rgba(255,255,255,0.016) !important;
    overflow: visible !important;
    border: 0 !important;
    border-right: 1px solid rgba(255,255,255,0.10) !important;
    transition: background 240ms ease;
}

body .pm-service-detail-v3 .pm-sd3-capabilities article:last-child {
    border-right: 0 !important;
}

/* Kill the pink semicircle decoration */
body .pm-service-detail-v3 .pm-sd3-capabilities article::after {
    content: none !important;
    display: none !important;
}

/* 11. Hover — colour shift only, no transform or shadow */
body .pm-service-detail-v3 .pm-sd3-capabilities article:hover {
    background: rgba(202,2,116,0.04) !important;
}

/* 12. Index row */
body .pm-service-detail-v3 .pm-sd3-capability-index {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    margin-bottom: 36px !important;
}

body .pm-service-detail-v3 .pm-sd3-capability-index span {
    color: var(--pink) !important;
    font: 700 13px/1 var(--ff) !important;
}

body .pm-service-detail-v3 .pm-sd3-capability-index i {
    display: block !important;
    width: 48px !important;
    height: 1px !important;
    background: var(--pink) !important;
    transition: width 240ms ease;
}

body .pm-service-detail-v3 .pm-sd3-capabilities article:hover .pm-sd3-capability-index i {
    width: 68px !important;
}

/* 13. Card title */
body .pm-service-detail-v3 .pm-sd3-capabilities h4 {
    font-size: clamp(20px, 1.6vw, 26px) !important;
    font-weight: 700 !important;
    line-height: 1.12 !important;
    letter-spacing: -0.018em !important;
    margin: 0 0 14px !important;
    color: var(--white) !important;
    text-transform: none !important;
}

/* 14. Card description */
body .pm-service-detail-v3 .pm-sd3-capabilities article > p {
    font-size: 15px !important;
    line-height: 1.58 !important;
    color: rgba(255,255,255,0.62) !important;
    max-width: 32ch !important;
    margin: 0 !important;
}

/* 15. Responsive ≤ 1100px — single column */
@media (max-width: 1100px) {
    body .pm-service-detail-v3 .pm-sd3-info-lead,
    body .pm-service-detail-v3 .pm-sd3-capability-head {
        grid-template-columns: 1fr !important;
        gap: 26px !important;
    }
    body .pm-service-detail-v3 .pm-sd3-capabilities {
        grid-template-columns: 1fr !important;
    }
    body .pm-service-detail-v3 .pm-sd3-capabilities article {
        border-right: 0 !important;
        border-bottom: 1px solid rgba(255,255,255,0.10) !important;
    }
    body .pm-service-detail-v3 .pm-sd3-capabilities article:last-child {
        border-bottom: 0 !important;
    }
}

/* 16. Responsive ≤ 600px — compact padding */
@media (max-width: 600px) {
    body .pm-service-detail-v3 .pm-sd3-info {
        padding-top: 64px !important;
        padding-bottom: 96px !important;
    }
    body .pm-service-detail-v3 .pm-sd3-capabilities article {
        min-height: 0 !important;
        padding: 26px 22px 30px !important;
    }
}

body .pm-service-detail-v3 .pm-sd3-outcome,
body .pm-service-detail-v3 .pm-sd3-section-head,
body .pm-service-detail-v3 .pm-sd3-work-grid {
    width: 100%;
    margin-inline: auto;
}

/* ═══════════════════════════════════════════════════════
   SERVICE DETAIL — RELATED WORK SECTION REDESIGN
   3-col grid, editorial header, brand accent line, no scroll
   ═══════════════════════════════════════════════════════ */

/* Section rhythm */
body .pm-service-detail-v3 .pm-sd3-work {
    padding-top: 88px !important;
    padding-bottom: max(120px, calc(72px + 44px)) !important;
}

/* ── Section header: display:contents lifts label & h2 into the grid,
   controls pin to row 2 (same row as h2) ── */
body .pm-service-detail-v3 .pm-sd3-section-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    column-gap: clamp(48px, 7vw, 112px) !important;
    align-items: start !important;
    margin-bottom: 44px !important;
}

body .pm-service-detail-v3 .pm-sd3-section-head > div:first-child {
    display: contents !important;
}

/* Label → row 1, col 1 */
body .pm-service-detail-v3 .pm-sd3-section-head > div:first-child > .pm-section-label {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: start !important;
    margin-bottom: 0 !important;
    font-size: 14px !important;
    letter-spacing: 2px !important;
}

/* h2 → row 2, col 1 */
body .pm-service-detail-v3 .pm-sd3-section-head h2 {
    grid-column: 1 !important;
    grid-row: 2 !important;
    max-width: 560px !important;
    margin-top: 20px !important;
    margin-bottom: 0 !important;
    font-size: clamp(42px, 3.2vw, 56px) !important;
    line-height: 1.04 !important;
    letter-spacing: -0.028em !important;
    font-weight: 700 !important;
    overflow-wrap: normal !important;
}

/* Pink accent line under h2 */
body .pm-service-detail-v3 .pm-sd3-section-head h2::after {
    content: "";
    display: block;
    width: 128px;
    height: 3px;
    margin-top: 24px;
    background: var(--pink);
}

/* Controls → row 2, col 2 — align-self:end + padding-bottom lifts
   above the accent line so they sit at the h2 text bottom, not the line */
body .pm-service-detail-v3 .pm-sd3-work-tools {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: end !important;
    padding-bottom: 28px !important;
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

/* Filter and view-all buttons: slightly compact */
/* Filter chip: compact indicator, not a CTA */
body .pm-service-detail-v3 .pm-sd3-work-filter {
    height: 56px !important;
    min-height: 56px !important;
    padding-inline: 16px !important;
}

body .pm-service-detail-v3 .pm-sd3-work-filter strong {
    margin-left: 6px !important;
    color: var(--pink) !important;
    opacity: 0.9 !important;
}

/* VIEW ALL: full pm-btn appearance — isolate, sweep + pink line */
body .pm-service-detail-v3 .pm-sd3-work-all {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    min-width: 200px !important;
    height: 56px !important;
    min-height: 56px !important;
    padding: 0 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.24) !important;
    border-radius: 0 !important;
    background: rgba(5, 7, 24, 0.68) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.055), 0 10px 28px rgba(0,0,0,0.12) !important;
    color: var(--white) !important;
    font: 700 12px/1 var(--ff) !important;
    letter-spacing: 1.15px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
    transition: border-color 200ms ease, box-shadow 200ms ease, color 200ms ease !important;
}

body .pm-service-detail-v3 .pm-sd3-work-all::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: -1 !important;
    background:
        linear-gradient(90deg, rgba(255,255,255,0.08), transparent 40%),
        linear-gradient(90deg, #9f005b, var(--pink-lite)) !important;
    transform: scaleX(0) !important;
    transform-origin: right center !important;
    transition: transform 400ms !important;
}

body .pm-service-detail-v3 .pm-sd3-work-all::after {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 46px !important;
    height: 2px !important;
    background: var(--pink) !important;
    transition: width 300ms !important;
}

body .pm-service-detail-v3 .pm-sd3-work-all:hover {
    border-color: rgba(255, 255, 255, 0.46) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 14px 34px rgba(202,2,116,0.18) !important;
}

body .pm-service-detail-v3 .pm-sd3-work-all:hover::before {
    transform: scaleX(1) !important;
}

body .pm-service-detail-v3 .pm-sd3-work-all:hover::after {
    width: 100% !important;
}

body .pm-service-detail-v3 .pm-sd3-work-all strong {
    color: var(--pink) !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    transition: transform 220ms ease !important;
}

body .pm-service-detail-v3 .pm-sd3-work-all:hover strong {
    transform: translateX(4px) !important;
}

/* ── Work grid: proper 3-col layout, not horizontal scroll ── */
body .pm-service-detail-v3 .pm-sd3-work-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 20px !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
    scroll-snap-type: none !important;
}

/* ── Cards: reset the v3 flex-item shape, use full-height grid ── */
body .pm-service-detail-v3 .pm-sd3-case,
body .pm-service-detail-v3 .pm-sd3-case:first-child {
    flex: none !important;
    width: auto !important;
    min-width: 0 !important;
    grid-column: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1fr !important;
    height: 100% !important;
    border: 1px solid rgba(255, 255, 255, 0.085) !important;
    background: rgba(255, 255, 255, 0.012) !important;
    overflow: hidden !important;
    scroll-snap-align: none !important;
    transition: border-color 240ms ease, background-color 240ms ease !important;
}

body .pm-service-detail-v3 .pm-sd3-case:hover,
body .pm-service-detail-v3 .pm-sd3-case:first-child:hover {
    border-color: rgba(224, 0, 112, 0.30) !important;
    background: rgba(224, 0, 112, 0.025) !important;
}

/* Card media: fixed 16/9 aspect ratio */
body .pm-service-detail-v3 .pm-sd3-case-media,
body .pm-service-detail-v3 .pm-sd3-case:first-child .pm-sd3-case-media {
    position: relative !important;
    aspect-ratio: 16 / 9 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    background: #10091d !important;
}

/* Progressive-image wrapper: fill the entire media area absolutely */
body .pm-service-detail-v3 .pm-sd3-case-media > .pm-progressive-image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

/* img: override global reset (img{height:auto}) — must be absolute + cover */
body .pm-service-detail-v3 .pm-sd3-case-media > .pm-progressive-image > img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
}

/* Card copy area */
body .pm-service-detail-v3 .pm-sd3-case-copy,
body .pm-service-detail-v3 .pm-sd3-case:first-child .pm-sd3-case-copy {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 190px !important;
    padding: 22px 22px 24px !important;
}

/* Category label */
body .pm-service-detail-v3 .pm-sd3-case-copy > p {
    margin: 0 0 0 !important;
    font-size: 12px !important;
    letter-spacing: 0.08em !important;
    font-weight: 700 !important;
    color: var(--pink) !important;
    text-transform: uppercase !important;
}

/* Card title + arrow row */
body .pm-service-detail-v3 .pm-sd3-case-copy h3,
body .pm-service-detail-v3 .pm-sd3-case:first-child .pm-sd3-case-copy h3 {
    max-width: calc(100% - 36px) !important;
    margin: 14px 0 0 !important;
    font-size: clamp(21px, 1.6vw, 26px) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.018em !important;
    font-weight: 700 !important;
    color: var(--white) !important;
    overflow-wrap: break-word !important;
}

/* Description: remove truncation, clean typography */
body .pm-service-detail-v3 .pm-sd3-case-copy small {
    display: block !important;
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: horizontal !important;
    max-width: 36ch !important;
    margin-top: 12px !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    color: rgba(255, 255, 255, 0.62) !important;
}

/* Arrow: top-right, compact hover shift */
body .pm-service-detail-v3 .pm-sd3-case-copy > strong {
    position: absolute !important;
    top: 18px !important;
    right: 18px !important;
    color: rgba(255, 255, 255, 0.55) !important;
    font: 400 20px/1 var(--ff) !important;
    transition: transform 200ms ease, color 200ms ease !important;
}

body .pm-service-detail-v3 .pm-sd3-case:hover .pm-sd3-case-copy > strong,
body .pm-service-detail-v3 .pm-sd3-case:first-child:hover .pm-sd3-case-copy > strong {
    color: var(--pink) !important;
    transform: translate(2px, -2px) !important;
}

/* Responsive: tablet */
@media (max-width: 900px) {
    body .pm-service-detail-v3 .pm-sd3-work-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    body .pm-service-detail-v3 .pm-sd3-work-tools {
        flex-wrap: wrap !important;
    }
}

@media (max-width: 600px) {
    body .pm-service-detail-v3 .pm-sd3-work-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    body .pm-service-detail-v3 .pm-sd3-section-head {
        grid-template-columns: 1fr !important;
    }
    body .pm-service-detail-v3 .pm-sd3-work-tools {
        grid-column: 1 !important;
        grid-row: 3 !important;
        padding-bottom: 0 !important;
        margin-top: 18px !important;
    }
}

/* Services page overview needs the same breathing room as the surrounding
   page sections; keep the homepage overview untouched. */
.pm-services-page .pm-services-layout {
    margin-top: 100px;
    margin-bottom: 100px;
}


/* Portfolio section on /services: break out to full viewport width */
.pm-services-page .pm-projects-section {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: 0;
    padding-right: 0;
}

/* Selected case is an editorial full-width section, not a bordered card. */
.pm-services-page .pm-projects-section {
    position: relative;
    overflow: visible;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: linear-gradient(120deg, rgba(18, 20, 42, .96), rgba(7, 9, 24, .96));
}

.pm-services-page .pm-projects-section .pm-home-portfolio-card {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

.pm-services-page .pm-projects-section .pm-portfolio-card-img {
    border-radius: 12px;
    border: 0;
    background: transparent;
}

.pm-services-page .pm-projects-section .pm-portfolio-card-img::after {
    display: none;
}

.pm-services-page .pm-projects-section .pm-portfolio-card-body {
    border: 0;
    background: transparent;
}


@media (max-width: 767px) {:root {
        --section-py: 64px;
        --grid-gap: 20px;
    }
}

.pm-cta-strip, .pm-about-strip, .pm-blog-feature, .pm-latest-section, .pm-contact, .pm-footer {
    content-visibility: auto;
    contain-intrinsic-size: auto 760px;
}

.pm-shell > header.pm-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 50;
}

.pm-shell > header.pm-container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
}

.pm-shell > header.pm-header-home::after {
    background: rgba(0,0,0,0.2);
}

.pm-shell > header.pm-header-inner::after {
    background: var(--pink);
}


@keyframes pm-mega-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.pm-hamburger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 8px;
    background: none;
    border: none;
    z-index: 200;
}


@media (min-width: 768px) {.pm-hamburger { display: none; }
}

.pm-hamburger span {
    display: block;
    width: 22px; height: 2px;
    background: var(--white-75);
    transform-origin: center;
    transition: background-color var(--motion-fast) var(--ease-standard),
        opacity var(--motion-fast) var(--ease-standard),
        transform var(--motion-base) var(--ease-enter);
}

.pm-hamburger.open span { background: var(--pink); }

.pm-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }

.pm-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }

.pm-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


@keyframes pmHeroTypeOne {
    0% {
        width: 0;
        opacity: 1;
    }
    7%,
    16% {
        width: 100%;
        opacity: 1;
    }
    24% {
        width: 0;
        opacity: 1;
    }
    25%,
    100% {
        width: 0;
        opacity: 0;
    }
}


@keyframes pmHeroTypeTwo {
    0%,
    24% {
        width: 0;
        opacity: 0;
    }
    25% {
        width: 0;
        opacity: 1;
    }
    32%,
    41% {
        width: 100%;
        opacity: 1;
    }
    49% {
        width: 0;
        opacity: 1;
    }
    50%,
    100% {
        width: 0;
        opacity: 0;
    }
}


@keyframes pmHeroTypeThree {
    0%,
    49% {
        width: 0;
        opacity: 0;
    }
    50% {
        width: 0;
        opacity: 1;
    }
    57%,
    66% {
        width: 100%;
        opacity: 1;
    }
    74% {
        width: 0;
        opacity: 1;
    }
    75%,
    100% {
        width: 0;
        opacity: 0;
    }
}


@keyframes pmHeroTypeFour {
    0%,
    74% {
        width: 0;
        opacity: 0;
    }
    75% {
        width: 0;
        opacity: 1;
    }
    82%,
    91% {
        width: 100%;
        opacity: 1;
    }
    99% {
        width: 0;
        opacity: 1;
    }
    100% {
        width: 0;
        opacity: 0;
    }
}


@keyframes pmHeroCursor {
    0%,
    52% {
        opacity: 1;
    }
    53%,
    100% {
        opacity: 0;
    }
}


@keyframes pmHeroSubOne {
    0% { opacity: 0; width: 100%; }
    7%, 20% { opacity: 1; width: 100%; }
    24% { opacity: 0; width: 100%; }
    25%, 100% { opacity: 0; width: 0; }
}


@keyframes pmHeroSubTwo {
    0%, 24% { opacity: 0; width: 0; }
    25% { opacity: 0; width: 100%; }
    32%, 45% { opacity: 1; width: 100%; }
    49% { opacity: 0; width: 100%; }
    50%, 100% { opacity: 0; width: 0; }
}


@keyframes pmHeroSubThree {
    0%, 49% { opacity: 0; width: 0; }
    50% { opacity: 0; width: 100%; }
    57%, 70% { opacity: 1; width: 100%; }
    74% { opacity: 0; width: 100%; }
    75%, 100% { opacity: 0; width: 0; }
}


@keyframes pmHeroSubFour {
    0%, 74% { opacity: 0; width: 0; }
    75% { opacity: 0; width: 100%; }
    82%, 95% { opacity: 1; width: 100%; }
    99% { opacity: 0; width: 100%; }
    100% { opacity: 0; width: 0; }
}


@keyframes pmHeroMobilePhraseOne {
    0%,
    24.99% { opacity: 1; }
    25%,
    100% { opacity: 0; }
}


@keyframes pmHeroMobilePhraseTwo {
    0%,
    24.99% { opacity: 0; }
    25%,
    49.99% { opacity: 1; }
    50%,
    100% { opacity: 0; }
}


@keyframes pmHeroMobilePhraseThree {
    0%,
    49.99% { opacity: 0; }
    50%,
    74.99% { opacity: 1; }
    75%,
    100% { opacity: 0; }
}


@keyframes pmHeroMobilePhraseFour {
    0%,
    74.99% { opacity: 0; }
    75%,
    100% { opacity: 1; }
}


@keyframes pmHeroMobileLineOneA {
    0% { width: 0; }
    8%,
    24.99% { width: 100%; }
    25%,
    100% { width: 0; }
}


@keyframes pmHeroMobileLineOneB {
    0%,
    7.99% { width: 0; }
    16%,
    24.99% { width: 100%; }
    25%,
    100% { width: 0; }
}


@keyframes pmHeroMobileLineTwoA {
    0%,
    24.99% { width: 0; }
    25% { width: 0; }
    33%,
    49.99% { width: 100%; }
    50%,
    100% { width: 0; }
}


@keyframes pmHeroMobileLineTwoB {
    0%,
    32.99% { width: 0; }
    41%,
    49.99% { width: 100%; }
    50%,
    100% { width: 0; }
}


@keyframes pmHeroMobileLineThreeA {
    0%,
    49.99% { width: 0; }
    50% { width: 0; }
    58%,
    74.99% { width: 100%; }
    75%,
    100% { width: 0; }
}


@keyframes pmHeroMobileLineThreeB {
    0%,
    57.99% { width: 0; }
    66%,
    74.99% { width: 100%; }
    75%,
    100% { width: 0; }
}


@keyframes pmHeroMobileLineFourA {
    0%,
    74.99% { width: 0; }
    75% { width: 0; }
    83%,
    100% { width: 100%; }
}


@keyframes pmHeroMobileLineFourB {
    0%,
    82.99% { width: 0; }
    91%,
    100% { width: 100%; }
}

.pm-hero .pm-btn {
    animation: pmHeroCopyEnter var(--motion-hero) var(--ease-enter) 280ms both;
}

.pm-arrow {
    display: inline-flex;
    align-items: center;
    color: var(--pink);
    flex: none;
    transition: transform var(--motion-base) var(--ease-enter);
}

.pm-arrow svg {
    display: block;
    width: 16px;
    height: 10px;
    flex-shrink: 0;
}

.pm-btn:hover .pm-arrow, .pm-btn:focus-visible .pm-arrow, .pm-btn-link:hover .pm-arrow, .pm-btn-link:focus-visible .pm-arrow, .pm-btn-text:hover .pm-arrow, .pm-btn-text:focus-visible .pm-arrow {
    transform: translateX(3px);
}

.pm-services-hero-copy .pm-section-label {
    margin-bottom: 24px;
    color: var(--pink);
}

.pm-services-hero-copy > p:not(.pm-section-label) {
    max-width: 660px;
    margin: 0;
    color: rgba(255, 255, 255, 0.76);
    font: 400 clamp(16px, 1.35vw, 19px)/1.58 var(--ff);
}

.pm-services-hero-actions .pm-btn-text {
    padding: 12px 0;
    color: var(--white);
    border: 0;
    background: transparent;
    font: 800 12px/1 var(--ff);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
}


@keyframes pm-services-orbit-a {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}


@keyframes pm-services-orbit-b {
    to { transform: translate(-50%, -50%) rotate(-360deg); }
}

.pm-services-manifesto .pm-section-label { margin-top: 12px; color: var(--pink); }

.pm-service-offer {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(410px, 0.92fr);
    min-height: 600px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: var(--services-panel);
}

.pm-service-offer-reverse { grid-template-columns: minmax(410px, 0.92fr) minmax(0, 1.08fr); }

.pm-service-offer-reverse .pm-service-offer-visual { order: 2; }

.pm-service-offer-visual {
    position: relative;
    min-height: 600px;
    overflow: hidden;
    background: #0d1020;
}

.pm-service-offer-visual::after {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(5, 8, 23, 0.03) 40%, rgba(5, 8, 23, 0.92) 100%),
        linear-gradient(135deg, rgba(218, 0, 129, 0.12), transparent 52%);
    content: "";
    pointer-events: none;
}

.pm-service-offer-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.8) contrast(1.03);
    transition: transform 900ms cubic-bezier(.2,.7,.1,1), filter 500ms ease;
}

.pm-service-offer:hover .pm-service-offer-visual img {
    filter: saturate(1) contrast(1.05);
    transform: scale(1.035);
}

.pm-service-offer-number {
    position: absolute;
    top: -10px;
    left: 20px;
    z-index: 2;
    color: rgba(255, 255, 255, 0.09);
    font: 900 clamp(120px, 15vw, 220px)/1 var(--ff);
    letter-spacing: -0.08em;
}

.pm-service-offer-kicker {
    position: absolute;
    right: 28px;
    bottom: 28px;
    left: 28px;
    z-index: 2;
    color: var(--white);
    font: 900 clamp(24px, 3vw, 42px)/0.92 var(--ff);
    text-transform: uppercase;
    letter-spacing: -0.025em;
}

.pm-service-offer-body {
    display: flex;
    flex-direction: column;
    padding: clamp(34px, 4.4vw, 68px);
}

.pm-service-offer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.pm-service-offer-head span, .pm-service-offer-head small {
    color: var(--pink);
    font: 900 12px/1 var(--ff);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.pm-service-offer-head small { color: rgba(255, 255, 255, 0.56); }

.pm-service-offer-body > h2 {
    margin: 34px 0 18px;
    color: var(--white);
    font: 900 clamp(34px, 3.6vw, 52px)/0.93 var(--ff);
    text-transform: uppercase;
    letter-spacing: -0.04em;
    overflow-wrap: normal;
}

.pm-service-offer-desc {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font: 400 16px/1.62 var(--ff);
}

.pm-service-offer-outcome {
    margin-top: 30px;
    padding: 22px 0 22px 22px;
    border-left: 3px solid var(--pink);
    background: linear-gradient(90deg, rgba(216, 0, 127, 0.1), transparent);
}

.pm-service-offer-outcome span, .pm-service-offer-deliverables > span {
    display: block;
    margin-bottom: 10px;
    color: rgba(255, 255, 255, 0.43);
    font: 900 12px/1 var(--ff);
    letter-spacing: 0.14em;
}

.pm-service-offer-outcome p {
    margin: 0;
    color: var(--white);
    font: 700 16px/1.38 var(--ff);
}

.pm-service-offer-deliverables { margin-top: 30px; }

.pm-service-offer-deliverables ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pm-service-offer-deliverables li {
    position: relative;
    padding: 10px 10px 10px 24px;
    color: rgba(255, 255, 255, 0.76);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font: 600 12px/1.3 var(--ff);
}

.pm-service-offer-deliverables li::before {
    position: absolute;
    top: 50%;
    left: 10px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--pink);
    transform: translateY(-50%);
    content: "";
}

.pm-service-offer-cta {
    align-self: flex-start;
    margin-top: auto;
    padding-inline: 24px;
}

.pm-services-work-head .pm-section-label { margin-bottom: 18px; color: var(--pink); }

.pm-services-engagement-head .pm-section-label, .pm-services-process-intro .pm-section-label { margin-bottom: 18px; color: var(--pink); }

.pm-services-closing .pm-section-label { margin-bottom: 18px; color: var(--pink); }

.pm-services-closing .pm-btn { min-width: 190px; }


@media (max-width: 1120px) {.pm-services-hero { grid-template-columns: minmax(0, 1fr) 38%; }
.pm-services-hero-copy { padding-right: 38px; }
.pm-services-manifesto { grid-template-columns: 130px minmax(0, 1.2fr) minmax(240px, 0.8fr); gap: 28px; }
.pm-service-offer, .pm-service-offer-reverse { grid-template-columns: 1fr 1fr; }
.pm-service-offer-visual { min-height: 570px; }
.pm-service-offer-body { padding: 38px; }
.pm-services-engagement { grid-template-columns: 1fr; gap: 46px; }
}


@media (max-width: 900px) {.pm-services-page { padding-top: 92px; }
.pm-services-hero { grid-template-columns: 1fr; min-height: auto; }
.pm-services-hero-copy { min-height: 0; padding: 72px 0; }
.pm-services-hero-proof { position: static; grid-row: 2; }
.pm-services-hero-art { grid-row: 3; min-height: 520px; border-top: 1px solid var(--white-10); border-left: 0; }
.pm-services-manifesto { grid-template-columns: 1fr; gap: 24px; padding: 96px 0 78px; }
.pm-services-manifesto .pm-section-label { margin: 0; }
.pm-services-manifesto > p:last-child { max-width: 680px; margin: 0; }
.pm-service-offer, .pm-service-offer-reverse { grid-template-columns: 1fr; }
.pm-service-offer-reverse .pm-service-offer-visual { order: 0; }
.pm-service-offer-visual { min-height: 480px; }
.pm-service-offer-body { min-height: 580px; }
.pm-services-work-head { grid-template-columns: 1fr; gap: 24px; }
.pm-services-work-grid { grid-template-columns: 1fr 1fr; }
.pm-services-work-card:last-child { grid-column: 1 / -1; }
.pm-services-work-card:last-child .pm-services-work-image { aspect-ratio: 2.3; }
.pm-services-engagement-grid { grid-template-columns: 1fr; }
.pm-services-engagement-grid article { min-height: 220px; }
.pm-services-engagement-grid h3 { margin-top: 46px; }
.pm-services-process-intro { grid-template-columns: 1fr; gap: 16px; }
.pm-services-process .pm-process-strip { grid-template-columns: 1fr 1fr; }
.pm-services-process .pm-process-strip > div:nth-child(2) { border-right: 0; }
.pm-services-process .pm-process-strip > div:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,0.09); }
.pm-services-closing { grid-template-columns: 1fr; align-items: start; }
.pm-services-closing .pm-btn { justify-self: start; }
}


@media (max-width: 600px) {.pm-services-page { padding-top: 76px; }
.pm-services-hero-copy { min-height: 0; padding: 58px 0 52px; }
.pm-services-hero-copy h1 { font-size: clamp(40px, 12vw, 56px); }
.pm-services-hero-actions { align-items: flex-start; flex-direction: column; gap: 10px; }
.pm-services-hero-actions .pm-btn { width: 100%; }
.pm-services-hero-art { min-height: 430px; }
.pm-services-orbit-a { width: 86%; }
.pm-services-orbit-b { width: 58%; }
.pm-services-orbit-core { width: 132px; }
.pm-services-orbit-core strong { font-size: 20px; }
.pm-services-art-word { padding: 7px 8px; font-size: 7px; }
.pm-services-hero-proof { grid-template-columns: 1fr; }
.pm-services-hero-proof > span { min-height: 38px; border-right: 0; border-bottom: 1px solid var(--white-10); }
.pm-services-hero-proof > span:last-child { border-bottom: 0; }
.pm-services-manifesto { padding-top: 82px; }
.pm-services-manifesto h2, .pm-services-work h2, .pm-services-engagement h2, .pm-services-process-intro h2, .pm-services-closing h2 { font-size: 36px; }
.pm-services-offers { gap: 18px; }
.pm-service-offer-visual { min-height: 340px; }
.pm-service-offer-number { top: 4px; left: 10px; font-size: 112px; }
.pm-service-offer-kicker { right: 20px; bottom: 20px; left: 20px; font-size: 28px; }
.pm-service-offer-body { min-height: auto; padding: 30px 20px 28px; }
.pm-service-offer-body > h2 { margin-top: 28px; font-size: 35px; }
.pm-service-offer-deliverables ul { grid-template-columns: 1fr; }
.pm-service-offer-cta { width: 100%; margin-top: 32px; }
.pm-services-work { margin-top: 86px; padding: 72px 0; }
.pm-services-work-grid { grid-template-columns: 1fr; }
.pm-services-work-card:last-child { grid-column: auto; }
.pm-services-work-card:last-child .pm-services-work-image { aspect-ratio: 1.18; }
.pm-services-engagement { gap: 32px; padding: 88px 0; }
.pm-services-engagement-grid article { min-height: 205px; }
.pm-services-process { padding: 72px 0; }
.pm-services-process .pm-process-strip { grid-template-columns: 1fr; }
.pm-services-process .pm-process-strip > div { min-height: 190px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.09); }
.pm-services-process .pm-process-strip > div:last-child { border-bottom: 0; }
.pm-services-process .pm-process-strip h2 { margin-top: 40px; }
.pm-services-closing { gap: 42px; padding: 64px 22px 28px; }
.pm-services-closing .pm-btn { width: 100%; }
.pm-services-closing-index { top: -8px; right: -15px; font-size: 130px; }
}

.pm-services-section:not(.pm-motion-active) .pm-service-figure {
    animation-play-state: paused;
}


@keyframes pm-figure-fold {
    0%, 100% { transform: rotate(-8deg) scaleX(0.82) scaleY(0.96); }
    28% { transform: rotate(5deg) scaleX(1.02) scaleY(0.84); }
    58% { transform: rotate(15deg) scaleX(0.72) scaleY(1.05); }
    82% { transform: rotate(2deg) scaleX(0.94) scaleY(0.9); }
}


@keyframes pm-figure-breathe {
    0%, 100% { transform: rotate(-4deg) scale(0.9); }
    45% { transform: rotate(7deg) scale(1.08); }
    68% { transform: rotate(2deg) scale(1.01); }
}


@keyframes pm-figure-flip {
    0%, 100% { transform: translateY(2px) rotate(-3deg) scaleX(0.9); }
    28% { transform: translateY(-8px) rotate(4deg) scaleX(0.36); }
    52% { transform: translateY(-3px) rotate(8deg) scaleX(1); }
    76% { transform: translateY(6px) rotate(1deg) scaleX(0.58); }
}


@keyframes pm-figure-orbit {
    0%, 100% { transform: translate(-7px, 3px) rotate(-5deg) scale(0.94); }
    25% { transform: translate(5px, -8px) rotate(3deg) scale(1.06); }
    52% { transform: translate(11px, 4px) rotate(7deg) scale(0.98); }
    76% { transform: translate(-2px, 10px) rotate(1deg) scale(1.04); }
}

.pm-card-link {
    position: absolute;
    left: 32px;
    bottom: 28px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    z-index: 3;
    color: var(--white-85);
    font: 500 14px/1 var(--ff);
    letter-spacing: 0.3px;
}

.pm-card-arrow {
    display: block;
    width: 54px;
    height: 40px;
    margin-block: -6px;
    overflow: visible;
    flex: 0 0 54px;
}

.pm-card-arrow-path, .pm-card-arrow-head {
    fill: none;
    stroke: var(--pink);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.pm-card-arrow-path {
    stroke-dasharray: 1;
    stroke-dashoffset: var(--pm-arrow-dash, 0);
}

.pm-card-arrow-head {
    opacity: 1;
}

.pm-card-arrow {
    transform: translateX(0);
    will-change: transform;
}


@keyframes pm-arrow-grow {
    from { transform: translateX(0); }
    to { transform: translateX(8px); }
}


@keyframes pm-arrow-fall {
    from { transform: translateX(8px); }
    to { transform: translateX(0); }
}


@keyframes pm-arrow-normal-grow {
    0%, 20% { opacity: 1; transform: translate(0, 0) scale(1); }
    56% { opacity: 0.46; transform: translate(3px, 0) scaleX(1.08); }
    100% { opacity: 0; transform: translate(8px, 0) scaleX(1.18); }
}


@keyframes pm-arrow-normal-fall {
    0%, 48% { opacity: 0; transform: translate(8px, 0) scaleX(1.18); }
    100% { opacity: 1; transform: translate(0, 0) scale(1); }
}


@keyframes pm-arrow-stand-grow {
    0% { opacity: 0; transform: translate(7px, 22px) scale(0.58, 0.22) rotate(28deg); }
    18% { opacity: 0.18; }
    58% { opacity: 0.82; transform: translate(1px, 9px) scale(0.82, 0.72) rotate(8deg); }
    100% { opacity: 1; transform: translate(0, 0) scale(1) rotate(0deg); }
}


@keyframes pm-arrow-stand-fall {
    0% { opacity: 1; transform: translate(0, 0) scale(1) rotate(0deg); }
    34% { opacity: 1; transform: translate(5px, 7px) scale(0.92, 0.7) rotate(13deg); }
    68% { opacity: 0.72; transform: translate(9px, 18px) scale(0.7, 0.36) rotate(28deg); }
    100% { opacity: 0; transform: translate(7px, 22px) scale(0.58, 0.22) rotate(34deg); }
}

.pm-card-arrow.is-arrow-grow {
    animation: pm-arrow-grow 5s var(--ease-enter) forwards;
}

.pm-card-arrow.is-arrow-fall {
    animation: pm-arrow-fall 0.9s var(--ease-enter) forwards;
}


@media (hover: hover) and (pointer: fine) {.pm-card-arrow {
        transition: transform 0.42s var(--ease-enter);
    }
.pm-service-card:hover .pm-card-arrow {
        transform: translateX(8px);
    }
}

.pm-card-arrow[data-arrow-motion="js"] {
    animation: none !important;
    transform: translateX(0);
}


@media (hover: hover) and (pointer: fine) {.pm-service-card:hover .pm-card-arrow[data-arrow-motion="js"] {
        transform: translateX(0);
    }
}

.pm-card-link {
    transform: translateX(0);
}


@media (max-width: 767px) {.pm-service-figure {
        right: -16px;
        bottom: -16px;
        width: 100px;
        height: 100px;
        opacity: 0.12;
    }
.pm-service-card {
        min-height: auto;
        padding: 24px 24px 56px;
        border-radius: 8px;
    }
.pm-service-card::before {
        display: none;
    }
.pm-service-card-title {
        font-size: 20px;
        margin-bottom: 10px;
    }
.pm-service-card-desc {
        font-size: 14px;
        line-height: 1.5;
    }
.pm-card-link {
        left: 24px;
        bottom: 18px;
        font-size: 14px;
    }
}

.pm-cta-strip .pm-container {
    min-height: 148px;
    border-bottom: 3px solid var(--pink);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}


@media (max-width: 767px) {.pm-cta-strip .pm-container {
        flex-direction: column;
        align-items: flex-start;
        min-height: auto;
        padding-top: 42px;
        padding-bottom: 42px;
        text-align: left;
    }
}

.pm-cta-strip .pm-btn {
    flex-shrink: 0;
}

.pm-about-strip {
    position: relative;
    padding: 100px 0 86px;
    background: #131421;
}


@media (max-width: 767px) {.pm-about-strip { padding: 40px 0 36px; }
}

.pm-about-layout {
    display: flex;
    align-items: flex-start;
    gap: 38px;
}


@media (max-width: 1023px) and (min-width: 768px) {.pm-about-layout {
        flex-direction: column;
        align-items: center;
        gap: 32px;
    }
}


@media (max-width: 767px) {.pm-about-layout {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
}

.pm-about-wordmark {
    flex-shrink: 0;
}

.pm-about-wordmark img {
    width: 346px;
    height: auto;
    display: block;
}


@media (max-width: 1023px) and (min-width: 768px) {.pm-about-wordmark img { width: 280px; }
}


@media (max-width: 767px) {.pm-about-wordmark img { width: 160px; }
}

.pm-about-text {
    flex: 0 0 627px;
    max-width: 627px;
}


@media (max-width: 1023px) and (min-width: 768px) {.pm-about-text {
        flex: none;
        max-width: 560px;
        text-align: center;
    }
}


@media (max-width: 767px) {.pm-about-text {
        flex: none;
        max-width: 100%;
        text-align: left;
    }
}

.pm-about-label {
    font: 400 20px/1.218 var(--ff);
    letter-spacing: 3px;
    color: #fff;
    margin: 0 0 10px;
}


@media (max-width: 767px) {.pm-about-label { font-size: 14px; letter-spacing: 2px; margin-bottom: 8px; }
}

.pm-about-title {
    font: 700 36px/1.218 var(--ff);
    color: #fff;
    margin: 0 0 15px;
}


@media (max-width: 767px) {.pm-about-title { font-size: 20px; margin-bottom: 12px; }
}

.pm-about-line {
    width: 154px;
    height: 3px;
    background: rgb(202, 2, 116);
    margin-bottom: 33px;
}


@media (max-width: 1023px) and (min-width: 768px) {.pm-about-line { margin-left: auto; margin-right: auto; }
}


@media (max-width: 767px) {.pm-about-line { width: 120px; margin-bottom: 20px; margin-left: 0; margin-right: 0; }
}

.pm-about-desc {
    font: 400 20px/1.218 var(--ff);
    color: rgb(231, 231, 231);
    margin: 0;
}


@media (max-width: 767px) {.pm-about-desc { font-size: 14px; line-height: 1.6; }
}


@media (max-width: 767px) {.pm-portfolio-card-tags-overlay {
        display: none;
    }
.pm-portfolio-card-tags-inline {
        display: flex;
        margin-bottom: 8px;
        gap: 4px;
    }
.pm-portfolio-card-tags-inline .pm-tag {
        padding: 2px 7px;
        font-size: 12px;
        letter-spacing: 0.3px;
    }
}

.pm-tag {
    display: inline-block;
    padding: 4px 10px;
    font: 500 12px/1 var(--ff);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #fff;
    background: rgba(202, 2, 116, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.pm-empty-state {
    padding: 80px 0;
    text-align: center;
}

.pm-empty-state p {
    font: 500 16px/1.5 var(--ff);
    color: rgba(255,255,255,0.5);
}

.pm-latest-section {
    padding: 100px 0 116px;
    background: var(--bg);
}


@media (max-width: 767px) {.pm-blog-grid { grid-template-columns: 1fr; gap: 18px; }
.pm-latest-section { padding: 48px 0 44px; }
}


@media (max-width: 767px) {.pm-blog-card-overlay {
        display: none;
    }
.pm-blog-card-meta {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;
    }
.pm-blog-card-meta .pm-tag {
        padding: 2px 7px;
        font-size: 12px;
        letter-spacing: 0.3px;
    }
.pm-blog-card-meta .pm-blog-card-date {
        font: 500 12px/1 var(--ff);
        color: rgba(255,255,255,0.5);
    }
}


@keyframes pmMarquee {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

.pm-form-group {
    margin-bottom: 12px;
    position: relative;
}


@media (min-width: 768px) {.pm-form-group { margin-bottom: 16px; }
}

.pm-form-input, .pm-form-textarea {
    width: 100%;
    font: 400 16px var(--ff);
    padding: 15px 16px;
    background: rgba(255,255,255,0.035);
    border: none;
    border-bottom: 2px solid var(--pink);
    color: var(--white);
    outline: none;
    border-radius: 0;
    caret-color: var(--pink-lite);
    transition: background-color var(--motion-fast) var(--ease-standard),
        border-color var(--motion-fast) var(--ease-standard),
        box-shadow var(--motion-fast) var(--ease-standard);
}

.pm-form-input::placeholder, .pm-form-textarea::placeholder { color: rgba(255,255,255,0.48); }

.pm-form-input:focus, .pm-form-textarea:focus {
    background: rgba(255,255,255,0.055);
    border-bottom: 2.5px solid var(--pink-lite);
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}

.pm-form-input:disabled, .pm-form-textarea:disabled {
    cursor: wait;
    opacity: 0.68;
}

.pm-form-input.error, .pm-form-textarea.error {
    background: rgba(255, 102, 102, 0.055);
    border-bottom-color: #ff6666;
}

.pm-form-textarea {
    resize: vertical;
    min-height: 80px;
    max-height: 280px;
    line-height: 1.55;
}


@media (min-width: 1024px) {.pm-form-textarea { min-height: 100px; }
}

.pm-form-field-error {
    min-height: 16px;
    margin: 5px 0 0;
    color: #ff8a8a;
    font: 500 12px/1.35 var(--ff);
    letter-spacing: 0.01em;
}

.pm-form-meta {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    justify-content: space-between;
}

.pm-form-meta .pm-form-field-error {
    flex: 1 1 auto;
}

.pm-form-counter {
    flex: 0 0 auto;
    margin-top: 5px;
    color: rgba(255,255,255,0.42);
    font: 500 12px/1.35 var(--ff);
}

.pm-form-status {
    font: 400 14px var(--ff);
    margin-top: 12px;
}

.pm-form-status.success { color: #44dd88; }

.pm-form-status.error { color: #ff4444; }

.pm-clicker-btn {
    cursor: pointer;
    user-select: none;
}

.pm-clicker-btn:active {
    transform: scale(0.96);
}


@keyframes pm-cursor-kick {
    0% { transform: translate(0, 0); }
    22% { transform: translate(-190px, -36px); }
    48% { transform: translate(-118px, -22px); }
    72% { transform: translate(-28px, -6px); }
    100% { transform: translate(0, 0); }
}

.pm-contact .pm-btn {
    float: right;
}


@media (max-width: 767px) {.pm-contact .pm-btn {
        float: none;
        width: 100%;
        justify-content: center;
    }
.pm-form-group {
        margin-bottom: 10px;
    }
.pm-form-field-error {
        font-size: 12px;
    }
.pm-form-meta {
        gap: 8px;
    }
}

.pm-hero-social a, .pm-footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.035);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transform: translateY(0) scale(1);
    transition:
        border-color var(--motion-fast) var(--ease-standard),
        background var(--motion-fast) var(--ease-standard),
        filter var(--motion-fast) var(--ease-standard),
        transform var(--motion-fast) var(--ease-enter);
}

.pm-hero-social a:hover, .pm-footer-social a:hover {
    border-color: rgba(202, 2, 116, 0.58);
    background: rgba(202, 2, 116, 0.08);
    filter: drop-shadow(0 0 12px var(--pink-glow));
    transform: translateY(-3px) scale(1.04);
}

.pm-hero-social a:active, .pm-footer-social a:active {
    transform: scale(0.94);
}

.pm-hero-social img, .pm-footer-social img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}


@media (max-width: 767px) {body .pm-hero-social, body .pm-footer-social {
        gap: 10px;
    }
body .pm-hero-social a, body .pm-footer-social a {
        width: 42px;
        height: 42px;
        margin: 0;
    }
body .pm-hero-social img, body .pm-footer-social img {
        width: 20px;
        height: 20px;
        max-width: 20px;
        max-height: 20px;
    }
}

.pm-404-body { color: var(--grey); margin: 0 auto 32px; max-width: 480px; }


.pm-journal-cta .pm-btn {
    position: relative;
    z-index: 1;
    border-color: var(--white);
    background: rgba(255,255,255,0.95);
    color: var(--bg);
}

.pm-journal-cta .pm-btn::after {
    background: var(--bg);
}

.pm-service-detail-section > h2, .pm-service-related-head h2, .pm-service-detail-cta h2 {
    max-width: 880px;
    margin: 20px 0 28px;
    color: var(--white);
    font: 900 clamp(34px, 5vw, 64px)/0.98 var(--ff);
    overflow-wrap: normal;
}

.pm-service-power-section {
    display: grid;
    grid-template-columns: minmax(0, 0.74fr) minmax(0, 1fr);
    gap: 52px;
    align-items: stretch;
    padding: 92px 0;
    border-bottom: 1px solid var(--white-10);
}

.pm-service-power-copy {
    position: relative;
    min-height: 420px;
    padding: 38px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    background:
        linear-gradient(160deg, rgba(202,2,116,0.2), rgba(0,4,21,0.42) 48%),
        #090c1b;
}

.pm-service-power-copy::after {
    position: absolute;
    right: 34px;
    bottom: 28px;
    color: rgba(255,255,255,0.06);
    font: 900 120px/0.8 var(--ff);
    content: "PM";
    pointer-events: none;
}

.pm-service-power-copy h2 {
    position: relative;
    z-index: 1;
    max-width: 600px;
    margin: 18px 0 24px;
    color: var(--white);
    font: 900 clamp(34px, 4.6vw, 64px)/0.98 var(--ff);
    text-transform: uppercase;
}

.pm-service-power-copy > p:not(.pm-section-label) {
    position: relative;
    z-index: 1;
    max-width: 560px;
    color: var(--white-78);
    font: 500 16px/1.65 var(--ff);
}

.pm-service-power-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.pm-service-power-grid article {
    position: relative;
    min-height: 198px;
    padding: 26px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    background: #101122;
}

.pm-service-power-grid article::before {
    position: absolute;
    inset: 0;
    border-top: 3px solid var(--pink);
    background: linear-gradient(180deg, rgba(202,2,116,0.1), transparent 46%);
    content: "";
    pointer-events: none;
}

.pm-service-power-grid span {
    position: relative;
    z-index: 1;
    display: block;
    margin-bottom: 62px;
    color: var(--pink);
    font: 900 14px/1 var(--ff);
}

.pm-service-power-grid h3 {
    position: relative;
    z-index: 1;
    color: var(--white);
    font: 900 20px/1.08 var(--ff);
    text-transform: uppercase;
}

.pm-service-detail-cta .pm-section-label, .pm-service-detail-cta h2 {
    color: var(--white);
}

.pm-service-detail-cta > p:not(.pm-section-label) {
    max-width: 620px;
    margin-bottom: 30px;
    color: var(--white);
    font: 500 16px/1.6 var(--ff);
}

.pm-service-detail-cta .pm-btn {
    border-color: var(--white);
    background: rgba(255,255,255,0.95);
    color: var(--bg);
}

.pm-service-detail-cta .pm-btn::after {
    background: var(--bg);
}

.pm-service-related {
    padding: 92px 0;
    border-top: 1px solid var(--white-10);
}

.pm-service-related-head {
    display: flex;
    justify-content: space-between;
    gap: 36px;
    align-items: end;
    margin-bottom: 46px;
}

.pm-service-related-head > span {
    color: var(--pink);
    font: 900 64px/0.9 var(--ff);
}

.pm-service-related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.pm-service-related-grid > article {
    min-height: 0;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    background: #090c1b;
    cursor: pointer;
    transition: border-color var(--motion-base) var(--ease-standard),
        transform var(--motion-base) var(--ease-enter),
        background var(--motion-base) var(--ease-standard);
}

.pm-service-related-grid > article:hover {
    border-color: rgba(202,2,116,0.44);
    background: #101122;
    transform: translateY(-4px);
}

.pm-service-related-image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: #101122;
}

.pm-service-related-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.82;
    transition: transform var(--motion-slow) var(--ease-enter),
        opacity var(--motion-base) var(--ease-standard);
}

.pm-service-related-grid > article:hover .pm-service-related-image img {
    opacity: 1;
    transform: scale(1.045);
}

.pm-service-related-image span {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 7px 9px;
    color: var(--white);
    background: rgba(202,2,116,0.82);
    font: 900 12px/1 var(--ff);
}

.pm-service-related-body {
    padding: 22px;
}

.pm-service-related-body > p {
    display: block;
    color: var(--pink);
    font: 700 12px/1.3 var(--ff);
    text-transform: uppercase;
}

.pm-service-related-grid h3 {
    margin: 12px 0 12px;
    color: var(--white);
    font: 900 24px/1.05 var(--ff);
}

.pm-service-related-body > small {
    display: -webkit-box;
    min-height: 58px;
    color: var(--white-72);
    font: 500 14px/1.48 var(--ff);
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


@media (max-width: 900px) {.pm-service-power-section {
        grid-template-columns: 1fr;
        gap: 22px;
    }
.pm-service-power-copy {
        min-height: 0;
    }
.pm-service-related-grid {
        grid-template-columns: 1fr;
    }
.pm-service-related-grid > article {
        min-height: 0;
    }
.pm-service-power-grid span {
        margin-bottom: 34px;
    }
}


@media (max-width: 767px) {.pm-service-detail-page {
        padding-bottom: 60px;
    }
.pm-service-detail-section, .pm-service-related, .pm-service-power-section {
        padding: 56px 0;
    }
.pm-service-detail-section > h2, .pm-service-related-head h2, .pm-service-detail-cta h2 {
        font-size: 32px;
    }
.pm-service-detail-copy, .pm-service-detail-intro {
        font-size: 16px;
    }
.pm-service-power-copy {
        padding: 26px 22px;
    }
.pm-service-power-copy h2 {
        font-size: 32px;
    }
.pm-service-power-grid {
        grid-template-columns: 1fr;
    }
.pm-service-detail-cta {
        margin: 56px -20px;
        padding: 44px 20px;
    }
.pm-service-related-head {
        align-items: start;
    }
.pm-service-related-head > span {
        font-size: 36px;
    }
.pm-service-related-grid > article {
        border-radius: 8px;
    }
}

.pm-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    color: var(--white-60);
    font: 400 14px var(--ff);
}

.pm-loading::after {
    content: '';
    width: 24px; height: 24px;
    border: 2px solid var(--white-10);
    border-top-color: var(--pink);
    border-radius: 50%;
    animation: pm-spin 0.6s linear infinite;
    margin-left: 12px;
}


@keyframes pm-spin { to { transform: rotate(360deg); } }


@supports (-webkit-touch-callout: none) {.pm-hero-bg, .pm-motion-bound, .pm-service-card, .pm-portfolio-card, .pm-blog-card {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
.pm-hero-bg {
        will-change: auto;
    }
}

.pm-route-enter {
    max-width: 100%;
    overflow-x: hidden;
    animation: pmRouteEnter var(--motion-slow) var(--ease-enter);
}

.pm-shell > header.pm-container {
    animation: pmHeaderEnter var(--motion-hero) var(--ease-enter) both;
}

.pm-service-card::before, .pm-portfolio-card-img::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(
        280px circle at var(--pm-pointer-x, 50%) var(--pm-pointer-y, 50%),
        rgba(202, 2, 116, 0.13),
        transparent 58%
    );
    transition: opacity var(--motion-base) var(--ease-standard);
}

.pm-service-card:hover::before, .pm-portfolio-card:hover .pm-portfolio-card-img::after {
    opacity: 1;
}


@keyframes pmHeaderEnter {
    from { opacity: 0; transform: translateY(-18px); }
    to { opacity: 1; transform: none; }
}


@keyframes pmHeroBackground {
    from { opacity: 0; transform: translate3d(0, -10px, 0) scale(1.06); }
    to { opacity: 1; transform: translate3d(0, var(--pm-hero-shift, 0), 0) scale(1.025); }
}


@keyframes pmHeroCopyEnter {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: none; }
}


@keyframes pmMenuBackdrop {
    from { opacity: 0; }
    to { opacity: 1; }
}


@keyframes pmMenuItem {
    to { opacity: 1; transform: none; }
}


@keyframes pmRouteEnter {
    from { opacity: 0; }
    to { opacity: 1; }
}


@media (prefers-reduced-motion: reduce) {html { scroll-behavior: auto; }
*, *::before, *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 1ms !important;
        transition-delay: 0ms !important;
    }
.pm-motion-enabled .pm-motion-bound {
        opacity: 1 !important;
        transform: none !important;
    }
.pm-hero-bg {
        transform: none !important;
        will-change: auto;
    }
.pm-home-portfolio-carousel {
        overflow-x: auto;
        mask-image: none;
        -webkit-mask-image: none;
    }
}


button, [role="button"], .pm-nav-link, .pm-footer-link, .pm-mobile-menu-link, .pm-service-card, .pm-portfolio-card, .pm-blog-card {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}


@media (max-width: 767px) {:root {
        --section-py: 60px;
        --grid-gap: 22px;
    }
html {
        scroll-padding-top: 0;
        text-size-adjust: 100%;
    }
body {
        width: 100%;
        min-width: 320px;
        overflow-x: hidden;
    }
 .pm-container {
        width: 100%;
        padding-inline: var(--page-pad);
    }
.pm-shell > header.pm-container {
        padding-top: env(safe-area-inset-top, 0);
    }
.pm-nav {
        min-height: 78px;
        gap: 12px;
        padding: 12px 0;
        border-bottom: 1px solid rgba(255,255,255,0.14);
    }
.pm-nav-logo {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 42px;
        min-height: 42px;
    }
.pm-nav-logo img {
        width: auto;
        height: 42px;
    }
.pm-nav-phone {
        display: none;
    }
.pm-hamburger, .pm-mobile-menu-close {
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
        padding: 11px;
    }
.pm-hamburger {
        margin-left: auto;
        align-items: flex-end;
        justify-content: center;
        gap: 5px;
        border: 1px solid rgba(255,255,255,0.18);
        transition: border-color var(--motion-fast) var(--ease-standard),
            background-color var(--motion-fast) var(--ease-standard);
    }
.pm-hamburger:hover, .pm-hamburger:focus-visible {
        border-color: var(--pink);
        background: rgba(202,2,116,0.08);
        outline: none;
    }
.pm-hamburger span {
        width: 22px;
    }
.pm-hamburger span:nth-child(2) {
        width: 15px;
    }
.pm-mobile-menu {
        min-height: 100dvh;
        padding:
            calc(76px + env(safe-area-inset-top, 0))
            20px
            calc(28px + env(safe-area-inset-bottom, 0));
        overflow-y: auto;
        overscroll-behavior: contain;
    }
.pm-mobile-menu-close {
        top: calc(14px + env(safe-area-inset-top, 0));
        right: 14px;
    }
.pm-mobile-menu-link {
        width: min(100%, 320px);
        min-height: 52px;
        padding: 13px 16px;
        font-size: 20px;
    }
.pm-mobile-menu-phone {
        margin-top: 18px;
    }
.pm-mobile-menu-phone a {
        display: inline-flex;
        align-items: center;
        min-height: 48px;
        padding: 8px 12px;
    }
.pm-hero {
        min-height: 100svh;
    }
.pm-hero-content {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr) auto;
        min-height: 100svh;
        padding-top: calc(102px + env(safe-area-inset-top, 0));
        padding-bottom: calc(22px + env(safe-area-inset-bottom, 0));
    }
.pm-hero-kicker {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        padding-bottom: 13px;
        border-bottom: 1px solid rgba(255,255,255,0.14);
        color: var(--white-60);
        font: 500 12px/1.2 var(--ff);
        letter-spacing: 1.4px;
        animation: pmHeroCopyEnter var(--motion-hero) var(--ease-enter) 120ms both;
    }
.pm-hero-kicker span:first-child {
        color: var(--pink-lite);
    }
.pm-hero-kicker span:last-child {
        max-width: 180px;
        text-align: right;
    }
.pm-hero-main {
        display: flex;
        flex-direction: column;
        align-self: center;
        width: 100%;
        padding: 20px 0;
    }
.pm-hero-title {
        max-width: 100%;
        margin-bottom: 16px;
        font-size: clamp(24px, 8vw, 34px);
        line-height: 1.15;
        overflow-wrap: normal;
        word-break: normal;
        hyphens: none;
    }
.pm-hero-title-static {
        white-space: normal;
        display: block;
    }
.pm-hero-title-typed {
        position: relative;
        min-height: 2.3em;
        margin-top: 4px;
        line-height: 1.12;
        white-space: normal;
        font-size: clamp(22px, 6.8vw, 31px);
        overflow: hidden;
        overflow-wrap: normal;
        word-break: normal;
        hyphens: none;
    }
.pm-hero-title-typed-text {
        max-width: 100%;
        min-height: 2.3em;
        white-space: normal;
        overflow-wrap: normal;
        word-break: normal;
        hyphens: none;
        position: absolute;
        inset: 0 auto auto 0;
        display: block;
        width: 100%;
        opacity: 0;
        overflow: visible;
        animation-duration: 12s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
    }
.pm-hero-title-typed-text.is-1 { animation-name: pmHeroMobilePhraseOne; }
.pm-hero-title-typed-text.is-2 { animation-name: pmHeroMobilePhraseTwo; }
.pm-hero-title-typed-text.is-3 { animation-name: pmHeroMobilePhraseThree; }
.pm-hero-title-typed-text.is-4 { animation-name: pmHeroMobilePhraseFour; }
.pm-hero-title-typed-text::after {
        display: none;
    }
.pm-hero-title-typed-text span {
        white-space: nowrap;
        overflow-wrap: normal;
        word-break: normal;
        hyphens: none;
    }
.pm-hero-title-line {
        display: block;
        max-width: 100%;
        width: 0;
        overflow: hidden;
        white-space: nowrap;
        animation-duration: 12s;
        animation-timing-function: steps(18, end);
        animation-iteration-count: infinite;
    }
.pm-hero-title-line + .pm-hero-title-line::before {
        content: none;
    }
.pm-hero-title-typed-text.is-1 .is-line-1 { animation-name: pmHeroMobileLineOneA; }
.pm-hero-title-typed-text.is-1 .is-line-2 { animation-name: pmHeroMobileLineOneB; }
.pm-hero-title-typed-text.is-2 .is-line-1 { animation-name: pmHeroMobileLineTwoA; }
.pm-hero-title-typed-text.is-2 .is-line-2 { animation-name: pmHeroMobileLineTwoB; }
.pm-hero-title-typed-text.is-3 .is-line-1 { animation-name: pmHeroMobileLineThreeA; }
.pm-hero-title-typed-text.is-3 .is-line-2 { animation-name: pmHeroMobileLineThreeB; }
.pm-hero-title-typed-text.is-4 .is-line-1 { animation-name: pmHeroMobileLineFourA; }
.pm-hero-title-typed-text.is-4 .is-line-2 { animation-name: pmHeroMobileLineFourB; }
.pm-hero-title-typed-text .pm-hero-title-agency {
        display: inline;
    }
.pm-hero-subtitles {
        position: relative;
        max-width: 100%;
        min-height: 4.6em;
        margin-top: 1.1rem;
        margin-bottom: 1.35rem;
    }
.pm-hero-subtitle {
        max-width: 100%;
        font-size: 16px;
        line-height: 1.5;
        white-space: normal;
        overflow-wrap: normal;
        word-break: normal;
        hyphens: none;
        position: absolute;
        inset: 0 auto auto 0;
        width: 100%;
        opacity: 0;
        overflow: visible;
        animation-duration: 12s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
    }
.pm-hero-subtitle.is-1 { animation-name: pmHeroMobilePhraseOne; }
.pm-hero-subtitle.is-2 { animation-name: pmHeroMobilePhraseTwo; }
.pm-hero-subtitle.is-3 { animation-name: pmHeroMobilePhraseThree; }
.pm-hero-subtitle.is-4 { animation-name: pmHeroMobilePhraseFour; }
.pm-hero-action-row {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        margin-top: 24px;
    }
.pm-hero-action-row .pm-btn {
        width: 100%;
        max-width: 280px;
    }
.pm-hero-availability {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--white-60);
        font: 500 12px/1.35 var(--ff);
        text-transform: uppercase;
    }
.pm-hero-availability > span {
        width: 6px;
        height: 6px;
        flex: 0 0 6px;
        border-radius: 50%;
        background: var(--teal);
        box-shadow: 0 0 10px rgba(75,228,219,0.72);
        animation: pmAvailabilityPulse 2.4s var(--ease-standard) infinite;
    }
.pm-hero-footer {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 16px;
        padding-top: 14px;
        border-top: 1px solid rgba(255,255,255,0.1);
        animation: pmHeroCopyEnter var(--motion-hero) var(--ease-enter) 420ms both;
    }
.pm-hero-social, .pm-footer-social {
        flex-wrap: wrap;
        gap: 8px;
    }
.pm-hero-social a, .pm-footer-social a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        margin: 0;
    }
.pm-hero-social img, .pm-footer-social img {
        max-width: 20px;
        max-height: 20px;
    }
.pm-hero-location {
        display: block;
        padding-bottom: 6px;
        color: var(--white-60);
        font: 500 12px/1.2 var(--ff);
        text-align: right;
    }
.pm-section-title {
        max-width: 18ch;
        font-size: 28px;
        line-height: 1.08;
    }
.pm-section-line {
        width: 112px;
        min-width: 0;
        margin-bottom: 24px;
    }
.pm-section-label {
        font-size: 14px;
        letter-spacing: 2px;
    }
.pm-section-header {
        align-items: stretch;
    }
.pm-services-section, .pm-projects-section, .pm-latest-section, .pm-contact {
        padding-top: var(--section-py);
        padding-bottom: var(--section-py);
    }
.pm-services-layout, .pm-blog-feature-inner {
        gap: 34px;
    }
.pm-section-copy, .pm-blog-feature-copy {
        max-width: none;
    }
.pm-service-card {
        min-height: 240px;
        padding: 28px 24px 72px;
        border-radius: 16px;
    }
.pm-card-link {
        left: 24px;
        bottom: 24px;
        left: 26px;
        min-height: 36px;
    }
.pm-cta-strip .pm-container {
        gap: 24px;
        padding-top: 40px;
        padding-bottom: 40px;
    }
.pm-cta-strip-title {
        font-size: 24px;
    }
.pm-portfolio-filter {
        flex-wrap: wrap;
        gap: 8px;
        margin-right: 0;
        margin-bottom: 28px;
        padding-right: 0;
        padding-bottom: 0;
        overflow: visible;
        scrollbar-width: auto;
        scroll-snap-type: none;
    }
.pm-portfolio-filter::-webkit-scrollbar {
        display: none;
    }
.pm-filter-chip {
        flex: 0 1 auto;
        min-height: 40px;
        padding: 0 14px;
        scroll-snap-align: unset;
    }
.pm-portfolio-card, .pm-blog-card {
        width: 100%;
    }
.pm-portfolio-card-img {
        aspect-ratio: 16 / 10;
        max-height: none;
    }
.pm-blog-card-img {
        aspect-ratio: 4 / 3;
    }
.pm-portfolio-card-body, .pm-blog-card-body {
        padding-top: 18px;
    }
.pm-portfolio-card-title, .pm-blog-card-title {
        font-size: 20px;
        line-height: 1.28;
    }
.pm-blog-feature {
        padding: 68px 0;
        background:
            linear-gradient(180deg, rgba(0,4,21,0.96), rgba(0,4,21,0.78)),
            url("/static/blog-hero-clean.avif") 66% center / cover no-repeat,
            var(--bg);
    }
.pm-blog-feature-nav ul {
        gap: 8px;
        margin-top: 28px;
    }
.pm-blog-feature-nav li {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 38px;
        padding: 4px 0;
    }
.pm-blog-feature-nav li button {
        width: 100%;
        min-width: 0;
        font-size: 14px;
        line-height: 1.25;
    }
.pm-blog-arrow {
        font-size: 16px;
    }
.pm-contact-card {
        width: 100%;
    }
.pm-contact-form-area {
        padding: 30px 20px 72px;
    }
.pm-form-input, .pm-form-textarea {
        min-height: 50px;
        font-size: 16px;
    }
.pm-form-textarea {
        min-height: 112px;
    }
.pm-footer {
        padding-top: 54px;
    }
.pm-footer-grid {
        gap: 38px;
    }
.pm-footer-brand-logo {
        width: auto;
        height: 58px;
    }
.pm-footer-link, .pm-footer-contact-item {
        min-height: 44px;
    }
.pm-footer-contact-item {
        padding: 0;
    }
.pm-footer-contact-item a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
.pm-footer-bottom {
        padding-bottom: calc(24px + env(safe-area-inset-bottom, 0));
    }
.pm-page {
        padding-top: calc(108px + env(safe-area-inset-top, 0));
        padding-bottom: 64px;
    }
.pm-page-hero {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
        min-height: auto;
        margin-bottom: 42px;
        padding: 34px 0 28px;
    }
.pm-page-hero::before {
        top: auto;
        bottom: 0;
        width: 100%;
        height: 104px;
        border-top: 1px solid var(--white-10);
        border-left: 0;
    }
.pm-page-hero-main {
        align-self: center;
    }
.pm-page-hero-title {
        max-width: 100%;
        margin-bottom: 16px;
        font-size: clamp(36px, 12vw, 56px);
        line-height: 0.92;
    }
.pm-page-hero .pm-section-label {
        margin-bottom: 16px;
    }
.pm-page-hero .pm-section-line {
        width: 112px;
        margin-bottom: 22px;
    }
.pm-page-hero .pm-page-intro {
        max-width: 32rem;
        font-size: 16px;
        line-height: 1.6;
    }
.pm-page-hero-aside {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        align-items: end;
        min-height: 80px;
        padding: 18px 0 0;
        text-align: left;
    }
.pm-page-hero-aside span {
        grid-column: 1;
        grid-row: 1;
    }
.pm-page-hero-aside strong {
        grid-column: 1;
        grid-row: 2;
        max-width: 12ch;
        margin: 7px 0 0;
        font-size: 20px;
        line-height: 1;
    }
.pm-page-hero-aside small {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: end;
        max-width: 140px;
        padding-bottom: 2px;
        text-align: right;
    }
.pm-page-hero-aside::after {
        display: none;
    }
.pm-page-cta {
        margin-top: 48px;
        padding-top: 28px;
    }
.pm-page-cta h2 {
        font-size: 24px;
    }
.pm-detail-section {
        margin-top: 32px;
        padding-top: 26px;
    }
.pm-case-hero {
        grid-template-columns: minmax(0, 1fr);
        gap: 30px;
        padding: 12px 0 48px;
    }
.pm-case-subtitle {
        font-size: 20px;
    }
.pm-case-hero-media {
        aspect-ratio: 16 / 10;
    }
.pm-case-quote {
        padding: 18px 0 18px 18px;
        font-size: 16px;
    }
.pm-case-stream-frame, .pm-case-embed-frame, .pm-case-map-frame {
        width: 100%;
        max-width: 100%;
        aspect-ratio: 16 / 9;
    }
.pm-case-map-frame {
        min-height: 240px;
    }
.pm-case-stream-video, .pm-case-embed-frame iframe {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
.pm-case-swatches {
        gap: 12px;
    }
.pm-case-swatch span {
        height: 88px;
    }
.pm-case-type {
        padding: 20px;
    }
.pm-case-type strong {
        overflow-wrap: normal;
        font-size: 20px;
    }
.pm-case-timeline li {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 14px;
    }
}


@media (max-width: 374px) {.pm-container {
        padding-inline: var(--page-pad);
    }
.pm-nav {
        gap: 7px;
    }
.pm-nav-phone {
        font-size: 12px;
    }
.pm-hero-title {
        font-size: clamp(22px, 7vw, 28px);
    }
.pm-hero-title-typed {
        font-size: clamp(18px, 5.5vw, 24px);
    }
.pm-hero-kicker span:last-child {
        max-width: 120px;
    }
.pm-hero-action-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
        margin-top: 20px;
    }
.pm-hero-action-row .pm-btn {
        max-width: 260px;
    }
.pm-hero-availability {
        max-width: none;
    }
.pm-hero-location {
        display: none;
    }
.pm-section-title {
        font-size: 24px;
    }
.pm-portfolio-filter {
        margin-right: 0;
        padding-right: 0;
    }
.pm-case-swatches {
        grid-template-columns: minmax(0, 1fr);
    }
}


@media (max-width: 767px) {.pm-hero-action-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
    }
.pm-section-header {
        grid-template-columns: minmax(0, 1fr);
    }
.pm-hero-availability {
        max-width: none;
    }
}


@keyframes pmAvailabilityPulse {
    0%, 100% { opacity: 0.72; transform: scale(0.9); }
    50% { opacity: 1; transform: scale(1.12); }
}

.pm-about-story {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 0.9fr);
    gap: clamp(64px, 8vw, 120px);
    align-items: start;
    padding: 62px 0 86px;
    border-top: 1px solid var(--white-10);
    border-bottom: 1px solid var(--white-10);
}

.pm-about-story-copy {
    max-width: 720px;
}

.pm-about-items {
    position: relative;
    width: 100%;
}

.pm-about-watermark {
    position: absolute;
    top: -18px;
    right: -8px;
    z-index: 0;
    color: rgba(255, 255, 255, 0.025);
    font: 900 200px/0.8 var(--ff);
    letter-spacing: -0.04em;
    pointer-events: none;
    user-select: none;
}

.pm-about-item {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 24px;
    padding: 32px 0 36px;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.pm-about-item + .pm-about-item {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.pm-about-item-number {
    color: var(--pink);
    font: 800 14px/1 var(--ff);
    letter-spacing: 0.05em;
}

.pm-about-item-content h3 {
    margin: 0 0 12px;
    color: var(--white);
    font: 800 20px/1.15 var(--ff);
    text-transform: uppercase;
}

.pm-about-item-content p {
    max-width: 560px;
    margin: 0;
    color: var(--white-72);
    font: 400 16px/1.55 var(--ff);
}

.pm-faq-stack {
    display: grid;
    gap: 18px;
    padding: 18px 0 76px;
}

.pm-faq-group {
    display: grid;
    grid-template-columns: minmax(220px, 0.45fr) minmax(0, 1fr);
    gap: 48px;
    padding: 34px 0;
    border-top: 1px solid var(--white-10);
}

.pm-faq-group:last-child {
    border-bottom: 1px solid var(--white-10);
}

.pm-faq-group-head {
    align-self: start;
}

.pm-faq-group-head h2 {
    max-width: none;
    margin: 0 0 10px;
    color: var(--white);
    font: 900 clamp(26px, 3vw, 38px)/1.02 var(--ff);
    text-transform: uppercase;
    text-wrap: balance;
}

.pm-faq-list {
    display: grid;
    gap: 14px;
}

.pm-faq-item {
    position: relative;
    min-height: 154px;
    padding: 24px 26px 26px 78px;
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 8px;
    background: rgba(255,255,255,0.028);
}

.pm-faq-item::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, var(--pink), rgba(202,2,116,0));
    content: "";
}

.pm-faq-item > span {
    position: absolute;
    top: 24px;
    left: 24px;
    color: var(--pink);
    font: 900 16px/1 var(--ff);
}

.pm-faq-item h3 {
    margin: 0 0 10px;
    color: var(--white);
    font: 900 20px/1.22 var(--ff);
}

.pm-faq-item p {
    max-width: 760px;
    color: var(--white-72);
    font: 500 14px/1.62 var(--ff);
}

.pm-process-board {
    display: grid;
    grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1.12fr) minmax(190px, 0.48fr);
    gap: 34px;
    align-items: start;
    padding: 34px 0 74px;
    border-top: 1px solid var(--white-10);
    border-bottom: 1px solid var(--white-10);
}

.pm-process-board-head h2 {
    max-width: 10ch;
    margin: 0 0 12px;
    color: var(--white);
    font: 900 clamp(34px, 4.8vw, 58px)/0.98 var(--ff);
    text-transform: uppercase;
    text-wrap: balance;
}

.pm-process-board-head > p:not(.pm-section-label) {
    max-width: 360px;
    color: var(--white-72);
    font: 500 16px/1.62 var(--ff);
}

.pm-process-step-list {
    display: grid;
    border-top: 1px solid var(--white-10);
}

.pm-process-step {
    position: relative;
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 22px;
    padding: 26px 0;
    border-bottom: 1px solid var(--white-10);
}

.pm-process-step > span {
    color: var(--pink);
    font: 900 28px/0.95 var(--ff);
}

.pm-process-step div > p:first-child {
    margin-bottom: 8px;
    color: var(--white-60);
    font: 800 12px/1 var(--ff);
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.pm-process-step h3 {
    margin: 0 0 10px;
    color: var(--white);
    font: 900 24px/1.05 var(--ff);
    text-transform: uppercase;
}

.pm-process-step div > p:last-child {
    max-width: 560px;
    color: var(--white-72);
    font: 500 16px/1.6 var(--ff);
}

.pm-process-proof {
    position: sticky;
    top: 120px;
    overflow: hidden;
    min-height: 280px;
    padding: 28px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    background:
        linear-gradient(160deg, rgba(202,2,116,0.17), rgba(255,255,255,0.025) 54%),
        #090c1b;
}

.pm-process-proof::after {
    position: absolute;
    right: 18px;
    bottom: 12px;
    color: rgba(255,255,255,0.035);
    font: 900 64px/0.8 var(--ff);
    content: "04";
}

.pm-process-proof span {
    display: block;
    margin-bottom: 54px;
    color: var(--pink);
    font: 900 14px/1 var(--ff);
}

.pm-process-proof strong {
    display: block;
    max-width: 11ch;
    margin-bottom: 14px;
    color: var(--white);
    font: 900 28px/1.05 var(--ff);
}

.pm-process-proof p {
    position: relative;
    z-index: 1;
    color: var(--white-72);
    font: 500 14px/1.58 var(--ff);
}

.pm-process-cta {
    max-width: none;
}


@media (max-width: 1100px) {.pm-faq-group, .pm-process-board {
        grid-template-columns: 1fr;
    }
.pm-process-proof {
        position: relative;
        top: auto;
        min-height: 0;
    }
}


@media (max-width: 900px) {.pm-about-story {
        grid-template-columns: 1fr;
        gap: 48px;
    }
.pm-about-item {
        grid-template-columns: 40px 1fr;
        gap: 16px;
        padding: 28px 0;
    }
.pm-about-watermark {
        font-size: 130px;
        top: -10px;
    }
}


@keyframes pmHeroTypeOne {
    0% { width: 0; opacity: 1; }
    3%, 22% { width: 100%; opacity: 1; }
    24.6% { width: 0; opacity: 1; }
    25%, 100% { width: 0; opacity: 0; }
}


@keyframes pmHeroTypeTwo {
    0%, 24.6% { width: 0; opacity: 0; }
    25% { width: 0; opacity: 1; }
    28%, 47% { width: 100%; opacity: 1; }
    49.6% { width: 0; opacity: 1; }
    50%, 100% { width: 0; opacity: 0; }
}


@keyframes pmHeroTypeThree {
    0%, 49.6% { width: 0; opacity: 0; }
    50% { width: 0; opacity: 1; }
    53%, 72% { width: 100%; opacity: 1; }
    74.6% { width: 0; opacity: 1; }
    75%, 100% { width: 0; opacity: 0; }
}


@keyframes pmHeroTypeFour {
    0%, 74.6% { width: 0; opacity: 0; }
    75% { width: 0; opacity: 1; }
    78%, 97% { width: 100%; opacity: 1; }
    99.6% { width: 0; opacity: 1; }
    100% { width: 0; opacity: 0; }
}


@keyframes pmHeroMobileLineOneA {
    0% { width: 0; }
    5%, 24.99% { width: 100%; }
    25%, 100% { width: 0; }
}


@keyframes pmHeroMobileLineOneB {
    0%, 5.99% { width: 0; }
    11%, 24.99% { width: 100%; }
    25%, 100% { width: 0; }
}


@keyframes pmHeroMobileLineTwoA {
    0%, 24.99% { width: 0; }
    25% { width: 0; }
    30%, 49.99% { width: 100%; }
    50%, 100% { width: 0; }
}


@keyframes pmHeroMobileLineTwoB {
    0%, 30.99% { width: 0; }
    36%, 49.99% { width: 100%; }
    50%, 100% { width: 0; }
}


@keyframes pmHeroMobileLineThreeA {
    0%, 49.99% { width: 0; }
    50% { width: 0; }
    55%, 74.99% { width: 100%; }
    75%, 100% { width: 0; }
}


@keyframes pmHeroMobileLineThreeB {
    0%, 55.99% { width: 0; }
    61%, 74.99% { width: 100%; }
    75%, 100% { width: 0; }
}


@keyframes pmHeroMobileLineFourA {
    0%, 74.99% { width: 0; }
    75% { width: 0; }
    80%, 100% { width: 100%; }
}


@keyframes pmHeroMobileLineFourB {
    0%, 80.99% { width: 0; }
    81%, 100% { width: 100%; }
}


@keyframes pmHeroTypeOne {
    0% { width: 0; opacity: 1; }
    3%, 22% { width: 100%; opacity: 1; }
    24.6% { width: 0; opacity: 1; }
    25%, 100% { width: 0; opacity: 0; }
}


@keyframes pmHeroTypeTwo {
    0%, 24.6% { width: 0; opacity: 0; }
    25% { width: 0; opacity: 1; }
    28%, 47% { width: 100%; opacity: 1; }
    49.6% { width: 0; opacity: 1; }
    50%, 100% { width: 0; opacity: 0; }
}


@keyframes pmHeroTypeThree {
    0%, 49.6% { width: 0; opacity: 0; }
    50% { width: 0; opacity: 1; }
    53%, 72% { width: 100%; opacity: 1; }
    74.6% { width: 0; opacity: 1; }
    75%, 100% { width: 0; opacity: 0; }
}


@keyframes pmHeroTypeFour {
    0%, 74.6% { width: 0; opacity: 0; }
    75% { width: 0; opacity: 1; }
    78%, 97% { width: 100%; opacity: 1; }
    99.6% { width: 0; opacity: 1; }
    100% { width: 0; opacity: 0; }
}


@keyframes pmHeroMobileLineOneA {
    0% { width: 0; }
    5%, 24.99% { width: 100%; }
    25%, 100% { width: 0; }
}


@keyframes pmHeroMobileLineOneB {
    0%, 5.99% { width: 0; }
    11%, 24.99% { width: 100%; }
    25%, 100% { width: 0; }
}


@keyframes pmHeroMobileLineTwoA {
    0%, 24.99% { width: 0; }
    25% { width: 0; }
    30%, 49.99% { width: 100%; }
    50%, 100% { width: 0; }
}


@keyframes pmHeroMobileLineTwoB {
    0%, 30.99% { width: 0; }
    36%, 49.99% { width: 100%; }
    50%, 100% { width: 0; }
}


@keyframes pmHeroMobileLineThreeA {
    0%, 49.99% { width: 0; }
    50% { width: 0; }
    55%, 74.99% { width: 100%; }
    75%, 100% { width: 0; }
}


@keyframes pmHeroMobileLineThreeB {
    0%, 55.99% { width: 0; }
    61%, 74.99% { width: 100%; }
    75%, 100% { width: 0; }
}


@keyframes pmHeroMobileLineFourA {
    0%, 74.99% { width: 0; }
    75% { width: 0; }
    80%, 100% { width: 100%; }
}


@keyframes pmHeroMobileLineFourB {
    0%, 80.99% { width: 0; }
    86%, 100% { width: 100%; }
}


.pm-portfolio-card-img > .pm-progressive-image > img {
    filter: brightness(1.1) contrast(1.04) saturate(1.08);
    transition:
        transform var(--motion-slow) var(--ease-enter),
        filter var(--motion-slow) var(--ease-standard);
}

.pm-portfolio-card:hover .pm-portfolio-card-img > .pm-progressive-image > img {
    transform: scale(1.045);
    filter: brightness(1.16) contrast(1.05) saturate(1.16);
}

.pm-blog-card-img > .pm-progressive-image > img, .pm-blog-lead-visual .pm-progressive-image > img, .pm-blog-list-image .pm-progressive-image > img {
    transition:
        transform var(--motion-slow) var(--ease-enter),
        filter var(--motion-slow) var(--ease-standard);
}

.pm-blog-card:hover .pm-blog-card-img > .pm-progressive-image > img {
    transform: scale(1.045);
    filter: saturate(1.15);
}

.pm-blog-lead:hover .pm-blog-lead-visual .pm-progressive-image > img {
    transform: scale(1.025);
    filter: saturate(1.08);
}

.pm-blog-list-item:hover .pm-blog-list-image .pm-progressive-image > img {
    transform: scale(1.035);
    filter: saturate(1.1);
}

.pm-service-related-image .pm-progressive-image > img {
    opacity: 0.82;
    transition:
        transform var(--motion-slow) var(--ease-enter),
        opacity var(--motion-base) var(--ease-standard);
}

.pm-service-related-grid > article:hover .pm-service-related-image .pm-progressive-image > img {
    opacity: 1;
    transform: scale(1.045);
}

.pm-journal-cover > .pm-progressive-image {
    aspect-ratio: 2.15 / 1;
}

.pm-journal-gallery figure > .pm-progressive-image {
    aspect-ratio: 4 / 3;
}

.pm-journal-gallery.is-single figure > .pm-progressive-image {
    aspect-ratio: 16 / 9;
}

.pm-case-screen > .pm-progressive-image {
    aspect-ratio: 3 / 4;
}

.pm-solution-related-work .pm-progressive-image {
    aspect-ratio: 16 / 10;
}

.pm-case-hero-screenshot-img > .pm-progressive-image {
    height: auto;
}

.pm-case-hero-screenshot-img > .pm-progressive-image > img {
    position: relative;
    height: auto;
}

.pm-solution-related-work .pm-progressive-image {
    margin-bottom: 18px;
    border: 1px solid rgba(255, 255, 255, 0.12);
}


@media (max-width: 767px) {.pm-portfolio-card-img > .pm-progressive-image > img {
        object-position: center center;
    }
.pm-journal-cover > .pm-progressive-image, .pm-journal-gallery.is-single figure > .pm-progressive-image {
        aspect-ratio: 4 / 3;
    }
}

.pm-social-head { text-align: center; margin-bottom: 32px; }

.pm-social-head .pm-section-label { font: 700 12px var(--ff); color: var(--pink); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 8px; }


.pm-social-head .pm-case-intro { font: 400 14px var(--ff); color: var(--muted, #8b8c9f); max-width: 540px; margin: 8px auto 0; }

.pm-social-phone-layout { display: flex; justify-content: center; }

.pm-phone-notch {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 28px;
    background: #000;
    border-radius: 16px;
    z-index: 10;
}

.pm-phone-statusbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 28px 4px;
    font: 600 14px -apple-system, system-ui, sans-serif;
    color: #fff;
    flex-shrink: 0;
    padding-top: 14px;
}

.pm-phone-time { letter-spacing: 0.5px; }

.pm-phone-status-icons { display: flex; gap: 5px; align-items: center; }

.pm-phone-signal { width: 18px; height: 10px; background: #fff; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath fill='%23000' d='M1 8h2v2H1zm4-2h2v4H5zm4-2h2v6H9zm4-2h2v8h-2z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath fill='%23000' d='M1 8h2v2H1zm4-2h2v4H5zm4-2h2v6H9zm4-2h2v8h-2z'/%3E%3C/svg%3E") center/contain no-repeat; }

.pm-phone-wifi { width: 15px; height: 11px; background: #fff; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 11'%3E%3Cpath fill='%23000' d='M7.5 0C4.5 0 1.8 1.2 0 3l1.5 1.5C3 3 5.1 2 7.5 2S12 3 13.5 4.5L15 3C13.2 1.2 10.5 0 7.5 0zm0 4C5.5 4 3.8 4.8 2.5 6l1.5 1.5C5 6.5 6.2 6 7.5 6S10 6.5 11 7.5L12.5 6C11.2 4.8 9.5 4 7.5 4zm0 4c-1 0-1.8.4-2.5 1L7.5 11l2.5-2c-.7-.6-1.5-1-2.5-1z'/%3E%3C/svg%3E") center/contain no-repeat; }

.pm-phone-battery { width: 25px; height: 12px; border: 1px solid #fff; border-radius: 3px; position: relative; }

.pm-phone-battery::after { content: ''; position: absolute; right: -3px; top: 3px; width: 2px; height: 6px; background: #fff; border-radius: 0 1px 1px 0; }

.pm-phone-battery::before { content: ''; position: absolute; inset: 1px; right: 2px; background: #fff; border-radius: 1px; }

.pm-phone-screen {
    flex: 1;
    overflow: hidden;
    position: relative;
}

.pm-phone-homebar {
    flex-shrink: 0;
    height: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pm-phone-homebar::after {
    content: '';
    width: 130px;
    height: 5px;
    background: #fff;
    border-radius: 3px;
    opacity: 0.9;
}


.pm-social-phone-layout.has-context { justify-content: center; }

.pm-social-context {
    width: min(360px, 100%);
    color: var(--white);
    border: 1px solid var(--white-10);
    border-radius: 18px;
    padding: 24px;
    background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.035));
}

.pm-social-context-kicker { display: inline-flex; margin-bottom: 10px; color: var(--cyan, #4ee4db); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }

.pm-social-context h3 { margin: 0 0 10px; font: 700 clamp(20px, 2.6vw, 28px) var(--ff); }

.pm-social-context p { color: var(--muted, #b8bdd2); line-height: 1.6; margin: 0 0 18px; }

.pm-social-context dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 18px; }

.pm-social-context dt { color: var(--muted, #9ca3af); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }

.pm-social-context dd { margin: 2px 0 0; color: var(--white); font-weight: 700; }


.pm-social-muted-line { display: block; margin-top: 2px; font-size: 12px; color: #aaa; line-height: 1.35; }

.pm-social-link-line { display: inline-flex; margin-top: 4px; color: #8ab4f8; font-size: 12px; font-weight: 650; text-decoration: none; }

.pm-social-link-line:hover { text-decoration: underline; }

.pm-social-verified { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; background: #3897f0; color: #fff; font-size: 12px; line-height: 1; }

.pm-social-actions { display: flex; gap: 8px; padding: 10px 14px; }

.pm-social-action { flex: 1; display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 7px 10px; border-radius: 8px; border: 0; font-size: 12px; font-weight: 700; text-decoration: none; cursor: pointer; }

.pm-social-action.is-primary { background: #3897f0; color: #fff; }

.pm-social-action.is-secondary { background: #262626; color: #fff; }

.pm-social-action.is-ghost { background: transparent; color: #fff; border: 1px solid #333; }


.pm-tt-header .pm-social-actions { width: 100%; padding: 14px 0 0; }

.pm-tt-header .pm-social-action.is-primary { background: #fe2c55; }

.pm-social-empty-tile { background: linear-gradient(135deg, #161a22, #242938); }

.pm-social-tile-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 8px; color: #8b92a7; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; text-align: center; }

.pm-social-tile-top { position: absolute; top: 5px; left: 5px; right: 5px; display: flex; flex-wrap: wrap; gap: 4px; z-index: 2; }

.pm-social-tile-top span, .pm-tt-grid-overlay span { display: inline-flex; width: max-content; max-width: 100%; padding: 2px 5px; border-radius: 999px; background: rgba(0,0,0,.62); color: #fff; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }

.pm-social-tile-metrics { position: absolute; left: 5px; right: 5px; bottom: 5px; display: flex; flex-direction: column; gap: 2px; z-index: 2; }

.pm-social-tile-metrics span { color: #fff; font-size: 12px; font-weight: 750; line-height: 1; text-shadow: 0 1px 4px rgba(0,0,0,.8); }

.pm-social-post-details { display: grid; gap: 8px; padding: 12px 10px 16px; }

.pm-social-post-detail { border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 10px; background: rgba(255,255,255,.04); }

.pm-social-post-detail-head { display: flex; justify-content: space-between; gap: 8px; align-items: center; margin-bottom: 4px; }

.pm-social-post-detail-head strong { font-size: 12px; text-transform: capitalize; }

.pm-social-post-detail-head span { color: #fff; background: rgba(56,151,240,.24); border-radius: 999px; padding: 2px 6px; font-size: 12px; font-weight: 800; text-transform: uppercase; }

.pm-social-post-detail p { margin: 0 0 8px; font-size: 12px; line-height: 1.35; color: #d7dbe7; }

.pm-social-chip-row { display: flex; flex-wrap: wrap; gap: 4px; }

.pm-social-chip-row span { border: 1px solid rgba(255,255,255,.12); border-radius: 999px; padding: 2px 6px; color: #c4cad8; font-size: 12px; }


@media (max-width: 768px) {.pm-social-phone-layout { flex-direction: column; }
.pm-social-context { width: min(320px, 90vw); }
}


.mk-color-picker {width:48px;height:48px;padding:0;border:1px solid var(--mk-border);border-radius:var(--mk-radius-sm);background:var(--mk-bg);cursor:pointer;flex:none;margin-top:22px}

.mk-brand-color-fields {flex:1;display:flex;flex-direction:column;gap:8px}


.pm-floating-cta span:first-child { white-space: nowrap; }

.pm-floating-cta span:last-child { font-size: 20px; line-height: 1; }

.pm-floating-icon:hover {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.34);
}


.pm-simple-head {margin:0 0 34px;max-width:780px}

.pm-simple-head .pm-section-label,
.pm-simple-copy .pm-section-label {
  margin: 0 0 14px;
  color: var(--pink);
  font: 700 13px/1.2 var(--ff);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.pm-simple-head .pm-case-title,
.pm-simple-copy .pm-case-title {
  margin: 0;
  max-width: 760px;
  color: var(--white);
  font: 700 clamp(34px, 3vw, 48px)/1.04 var(--ff);
  letter-spacing: -.025em;
}

.pm-simple-split {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(28px,6vw,88px)}

.pm-simple-split.is-media-left .pm-simple-copy {order:2}

.pm-simple-split.is-media-left .pm-simple-media {order:1}

.pm-simple-split.is-media-right .pm-simple-copy {order:1}

.pm-simple-split.is-media-right .pm-simple-media {order:2}

.pm-simple-copy {max-width:620px}


.pm-simple-media {margin:0;min-width:0}

.pm-simple-media img, .pm-simple-media video, .pm-simple-media iframe {display:block;width:100%;height:100%;border:0;object-fit:cover}

.pm-simple-landscape {
  aspect-ratio:16/9;
  overflow:hidden;
  border:1px solid rgba(224,0,120,.24);
  border-radius:2px;
  background:#070b18;
  box-shadow:0 24px 70px rgba(0,0,0,.22);
}

.pm-simple-wide {width:100%;max-height:min(78vh,920px);overflow:hidden}

.pm-simple-wide img {width:100%;height:auto;max-height:min(78vh,920px);object-fit:contain}

.pm-simple-wide>.pm-progressive-image {height:auto;background:transparent}

.pm-simple-wide>.pm-progressive-image>img {position:static;width:100%;height:auto;max-height:min(78vh,920px);object-fit:contain}

.pm-simple-caption {
  display:block;
  margin-top:10px;
  color:rgba(255,255,255,.58);
  font:400 13px/1.45 var(--ff);
}

.pm-simple-video-title {
  display:block;
  margin-top:14px;
  color:#fff;
  font:700 14px/1.3 var(--ff);
  letter-spacing:.04em;
  text-transform:uppercase;
}

.pm-simple-vertical-wrap {display:flex;justify-content:center}

.pm-simple-vertical {
  width:min(100%,360px);
  aspect-ratio:9/16;
  overflow:hidden;
  border:1px solid rgba(224,0,120,.24);
  border-radius:2px;
  background:#070b18;
  box-shadow:0 22px 60px rgba(0,0,0,.22);
}

.pm-simple-video-grid {
  display:grid;
  grid-template-columns:repeat(var(--pm-simple-columns,3),minmax(0,340px));
  justify-content:space-between;
  gap:clamp(18px,2.4vw,30px);
  width:100%;
  min-width:0;
}

.pm-simple-video-card {
  width:100%;
  max-width:420px;
  min-width:0;
  min-height:0;
  margin:0;
  justify-self:center;
}

.pm-simple-video-card .pm-simple-media,
.pm-simple-video-card .pm-simple-vertical {
  min-width:0;
  min-height:0;
}

.pm-simple-video-card .pm-simple-vertical {width:100%}

.pm-simple-carousel-shell {
  position:relative;
  width:100%;
}

.pm-simple-carousel {
  --pm-simple-gap:clamp(16px,2vw,26px);
  width:100%;
  overflow:hidden;
  margin-inline:0;
  padding-inline:0;
  overscroll-behavior-x:contain;
  touch-action:pan-y pinch-zoom;
  cursor:grab;
  mask-image:linear-gradient(90deg,#000 0,#000 97%,transparent);
}

.pm-simple-carousel::-webkit-scrollbar {display:none}

.pm-simple-carousel.is-dragging {cursor:grabbing;user-select:none}

.pm-simple-carousel-track {
  display:flex;
  align-items:stretch;
  gap:var(--pm-simple-gap);
  width:max-content;
  animation:none!important;
  transform:translate3d(0,0,0);
  transition:transform 600ms cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}

.pm-simple-carousel-arrow {
  position:absolute;
  z-index:4;
  top:50%;
  display:grid;
  width:54px;
  height:54px;
  padding:0;
  place-items:center;
  border:1px solid rgba(224,0,120,.52);
  border-radius:50%;
  background:rgba(5,8,22,.9);
  color:#fff;
  font:400 25px/1 var(--ff);
  cursor:pointer;
  transform:translateY(-50%);
  transition:border-color .2s ease,background .2s ease,transform .2s ease;
  backdrop-filter:blur(10px);
}

.pm-simple-carousel-arrow:hover {
  border-color:var(--pink);
  background:rgba(202,2,116,.9);
  transform:translateY(-50%) scale(1.04);
}

.pm-simple-carousel-arrow.is-previous {left:-27px}

.pm-simple-carousel-arrow.is-next {right:-27px}

.pm-simple-slide {flex:0 0 clamp(320px,55vw,660px);margin:0}

.pm-simple-slide.is-vertical {flex-basis:clamp(220px,27vw,340px)}

.pm-simple-slide .pm-simple-landscape, .pm-simple-slide .pm-simple-vertical {width:100%}

@media(max-width:760px){.pm-simple-block {margin:64px 0}
.pm-simple-head {margin-bottom:26px}
.pm-simple-head .pm-case-title, .pm-simple-copy .pm-case-title {font-size:clamp(28px,8vw,36px)}
.pm-simple-split {grid-template-columns:1fr;gap:24px}
.pm-simple-split .pm-simple-copy, .pm-simple-split .pm-simple-media {order:initial!important}
.pm-simple-video-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
.pm-simple-carousel {padding-inline:0;mask-image:none}
.pm-simple-carousel-arrow {width:44px;height:44px;font-size:21px}
.pm-simple-carousel-arrow.is-previous {left:8px}
.pm-simple-carousel-arrow.is-next {right:8px}
.pm-simple-slide {flex-basis:84vw}
.pm-simple-slide.is-vertical {flex-basis:68vw}
}


@media(max-width:480px){.pm-simple-video-grid {grid-template-columns:1fr}
.pm-simple-vertical {max-width:360px}
}


@media(prefers-reduced-motion:reduce){.pm-simple-carousel-track {transition:none}
}

.pm-solution-card h2, .pm-process-board-head h2, .pm-faq-group-head h2 {
    max-width: 100%;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    white-space: normal;
}


.pm-services-page .pm-contact { padding: 0 !important; max-width: 560px !important; margin: 0 !important; }

.pm-services-contact .pm-contact {
    padding: 0 !important;
    max-width: 560px !important;
    margin: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

.pm-services-contact .pm-contact-submit { padding-top: 8px !important; }


@keyframes pm-cookie-in {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

html[lang="ru"] body, html[lang="ru"] button {
    font-family: var(--ff);
}


@media (prefers-reduced-motion: reduce) {.theme-prodmedia * { animation: none !important; transition: none !important; }
}

/* Portfolio closing CTA: full-width composition with a clear contact action. */
.pm-portfolio-page .pm-page-cta.pm-portfolio-cta {
    width: 100%;
    max-width: none;
    margin-top: clamp(68px, 7vw, 104px);
    padding: clamp(34px, 3.5vw, 52px) 0 0;
    border-top: 1px solid var(--white-10);
}

.pm-portfolio-cta-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(210px, 260px);
    align-items: center;
    gap: clamp(28px, 4vw, 64px);
    padding-bottom: clamp(18px, 2vw, 26px);
    border-bottom: 3px solid var(--pink);
}

.pm-portfolio-page .pm-portfolio-cta h2 {
    margin: 0;
    max-width: 20ch;
    font: 800 clamp(28px, 2.7vw, 42px)/1.05 var(--ff);
    letter-spacing: -0.025em;
    text-transform: uppercase;
}

.pm-portfolio-page .pm-portfolio-cta p {
    max-width: 760px;
    margin: clamp(18px, 2vw, 26px) 0 0;
    font-size: clamp(15px, 1.05vw, 17px);
    line-height: 1.6;
}

.pm-portfolio-cta-button.pm-btn {
    width: var(--control-button-width);
    min-width: var(--control-button-width);
    height: 56px;
    min-height: 56px;
    padding: 0 20px;
    justify-content: flex-start;
    border-color: rgba(255,255,255,0.24);
    background: rgba(5,7,24,0.68);
    color: var(--white);
    font-size: 12px;
    letter-spacing: 1.15px;
    text-decoration: none;
    text-transform: uppercase;
}

.pm-portfolio-cta-button.pm-btn:hover,
.pm-portfolio-cta-button.pm-btn:focus-visible {
    background: rgba(5,7,24,0.68);
    border-color: rgba(255,255,255,0.24);
    color: var(--white);
}

@media (max-width: 767px) {
    .pm-portfolio-page .pm-page-cta.pm-portfolio-cta {
        margin-top: 56px;
        padding-top: 30px;
    }

    .pm-portfolio-cta-head {
        grid-template-columns: 1fr;
        gap: 22px;
        padding-bottom: 22px;
    }

    .pm-portfolio-page .pm-portfolio-cta h2 {
        max-width: none;
        font-size: clamp(26px, 8.5vw, 36px);
    }

    .pm-portfolio-cta-button.pm-btn {
        width: 100%;
        min-height: 54px;
    }
}

/* ── Impact Hypnotherapy: compact Figma-aligned editorial rhythm ───────── */

    .pm-case-hero-screenshot-text p,
) {
    color: var(--impact-copy);
    font-size: 16px;
    line-height: 1.6;
    letter-spacing: 0;
}

    .pm-case-hero-screenshot-text h2,
) {
    color: var(--impact-copy-strong);
    font-family: var(--ff);
    font-size: clamp(30px, 2.5vw, 36px) !important;
    font-weight: 700 !important;
    line-height: 1.14 !important;
    letter-spacing: 0 !important;
}

    .pm-case-hero-screenshot-text > p:first-child,
) {
    color: rgba(255, 255, 255, 0.72);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

) {
    width: 96px;
    min-width: 0;
    height: 3px;
    background: var(--impact-rule);
}

@media (min-width: 901px) {


    }


    /* Heading: full width, aligned to the left guide (no horizontal padding). */

    /* Palette: systematic 4-col mosaic, left column. */

    /* Descriptions: right column, top-aligned. */

    /* Type + Logo zones: full width below the palette row. */


    /* Logo presentation stage (left column). */

    /* Content (right column). */


}

@media (max-width: 900px) {


}

/* Portfolio detail hero: keep long CMS copy inside the fixed opening panel.
   The copy area is a two-column editorial grid on desktop; its heading must
   scale to the half-column, not to the full page display size. */
@media (min-width: 1024px) {


}

/* The legacy desktop breakpoint begins at 1024px. Give that narrow desktop
   band more room for copy so a long word never crosses into the description. */
@media (min-width: 1024px) and (max-width: 1180px) {


}

/* About page: alternate the contained hero with a wide, shallow story band.
   Keep the existing content and semantics; only restore the intended spatial
   rhythm and shared typography. */
.pm-page > .pm-container > .pm-about-story {
    box-sizing: border-box;
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    padding:
        54px
        max(24px, calc((100vw - var(--max-w)) / 2))
        62px;
    grid-template-columns: minmax(0, 1fr);
    gap: 42px;
    border-top: 1px solid var(--white-10);
    border-bottom: 1px solid var(--white-10);
    background:
        radial-gradient(circle at 84% 18%, rgba(202, 2, 116, 0.08), transparent 28%),
        linear-gradient(90deg, rgba(255, 255, 255, 0.018), transparent 38%),
        #0b0f1b;
}

.pm-page > .pm-container > .pm-about-story .pm-about-story-copy {
    display: grid;
    grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1.18fr);
    grid-template-rows: auto auto 1fr;
    column-gap: clamp(56px, 7vw, 108px);
    align-items: start;
    width: 100%;
    max-width: none;
}

.pm-page > .pm-container > .pm-about-story .pm-about-story-copy .pm-section-label,
.pm-page > .pm-container > .pm-about-story .pm-about-story-copy .pm-section-title,
.pm-page > .pm-container > .pm-about-story .pm-about-story-copy .pm-section-line {
    grid-column: 1;
}

.pm-page > .pm-container > .pm-about-story .pm-about-story-copy .pm-section-title {
    max-width: 24ch;
    margin: 0;
    font-size: clamp(32px, 3vw, 44px) !important;
    line-height: 1.06 !important;
}

.pm-page > .pm-container > .pm-about-story .pm-about-story-copy .pm-section-line {
    width: 154px;
    height: 3px;
    margin: 17px 0 0;
}


.pm-page > .pm-container > .pm-about-story .pm-about-items {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    border: 1px solid var(--white-10);
    background: rgba(4, 7, 18, 0.46);
}

.pm-page > .pm-container > .pm-about-story .pm-about-watermark {
    top: auto;
    right: 28px;
    bottom: -16px;
    font-size: 148px;
    line-height: 0.8;
}

.pm-page > .pm-container > .pm-about-story .pm-about-item {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 16px;
    align-content: start;
    min-height: 174px;
    padding: 28px 30px 30px;
}

.pm-page > .pm-container > .pm-about-story .pm-about-item + .pm-about-item {
    border-top: 0;
    border-left: 1px solid var(--white-10);
}

.pm-page > .pm-container > .pm-about-story .pm-about-item-number {
    padding-top: 3px;
    font-size: 13px;
    line-height: 1;
}

.pm-page > .pm-container > .pm-about-story .pm-about-item-content h3 {
    margin-bottom: 12px;
    font-size: 18px;
    line-height: 1.18;
}

.pm-page > .pm-container > .pm-about-story .pm-about-item-content p {
    max-width: 40ch;
    font-size: 14px;
    line-height: 1.52;
}

@media (max-width: 900px) {
    .pm-page > .pm-container > .pm-about-story {
        gap: 34px;
        padding-top: 42px;
        padding-bottom: 48px;
    }

    .pm-page > .pm-container > .pm-about-story .pm-about-story-copy {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        row-gap: 22px;
    }


    .pm-page > .pm-container > .pm-about-story .pm-about-items {
        grid-template-columns: minmax(0, 1fr);
    }

    .pm-page > .pm-container > .pm-about-story .pm-about-item {
        min-height: 0;
        padding: 24px;
    }

    .pm-page > .pm-container > .pm-about-story .pm-about-item + .pm-about-item {
        border-top: 1px solid var(--white-10);
        border-left: 0;
    }
}

/* Home CTA strip: the accent rule belongs to the content column, not to the
   outer padded container. Match its inset to .pm-container at every width. */
.pm-cta-strip .pm-container {
    position: relative;
    border-bottom: 0;
}

.pm-cta-strip .pm-container::after {
    position: absolute;
    right: 16px;
    bottom: 0;
    left: 16px;
    height: 2px;
    background: var(--pink);
    content: "";
    pointer-events: none;
}

@media (min-width: 768px) {
    .pm-cta-strip .pm-container::after {
        right: 48px;
        left: 48px;
    }
}

@media (min-width: 1024px) {
    .pm-cta-strip .pm-container::after {
        right: var(--page-pad);
        left: var(--page-pad);
    }
}

/* Contact module: preserve the 50/50 composition but restore the wide,
   shallow Figma proportion. Validation rows remain reserved, only their
   vertical rhythm is tightened. */
@media (min-width: 1024px) {
    .pm-contact {
        padding-top: 82px;
        padding-bottom: 104px;
    }

    .pm-contact-card {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pm-contact-form-area {
        padding: 36px 54px;
    }

    .pm-contact-form-area .pm-form-group {
        margin-bottom: 10px;
    }

    .pm-contact-form-area .pm-form-input,
    .pm-contact-form-area .pm-form-textarea {
        padding: 12px 14px;
        font-size: 14px;
    }

    .pm-contact-form-area .pm-form-field-error {
        min-height: 12px;
        margin-top: 3px;
        font-size: 11px;
        line-height: 1.2;
    }

    .pm-contact-form-area .pm-form-textarea {
        min-height: 80px;
        max-height: 180px;
        line-height: 1.45;
    }

    .pm-contact-form-area .pm-form-counter {
        margin-top: 3px;
        font-size: 11px;
        line-height: 1.2;
    }
}


@keyframes pmMarqueeRight {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}


@keyframes pmMarqueeLeft {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

/* Figma typography system -------------------------------------------------
   Source: Pmedia design, desktop frames at 1440 px.
   One role = one family, weight, size and leading across every page type. */
.pm-hero-title {
    font-family: var(--ff);
    font-size: var(--type-display-size);
    font-weight: 900;
    line-height: var(--type-display-line);
    letter-spacing: 0;
}

.pm-page-hero-title,
.pm-blog-lead-copy h1 {
    font-family: var(--ff);
    font-size: var(--type-display-size);
    font-weight: 700;
    line-height: var(--type-display-line);
    letter-spacing: 0;
}


.pm-section-title,
.pm-about-title,
.pm-page-cta h2,
.pm-blog-news-header h2,

.pm-service-card-title,
.pm-portfolio-card-title,
.pm-blog-card-title {
    font-family: var(--ff);
    font-size: var(--type-card-size) !important;
    font-weight: 600 !important;
    line-height: var(--type-section-line) !important;
    letter-spacing: 0 !important;
}

.pm-section-label,
.pm-blog-kicker,
.pm-blog-overline,
.pm-case-hero-eyebrow {
    font-family: var(--ff);
    font-size: var(--type-overline-size) !important;
    font-weight: 400 !important;
    line-height: var(--type-overline-line) !important;
    letter-spacing: var(--type-overline-tracking) !important;
}

.pm-page-hero-title,
.pm-blog-lead-copy h1,
.pm-section-title,
.pm-about-title,
.pm-page-cta h2,
.pm-blog-news-header h2,
.pm-service-card-title,
.pm-portfolio-card-title,
.pm-blog-card-title {
    text-wrap: balance;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}

@media (min-width: 900px) {
    body .pm-primary-hero.pm-primary-hero.pm-primary-hero {
        height: 500px !important;
        min-height: 500px !important;
    }

    body .pm-primary-hero .pm-page-hero-title,
    body .pm-services-page-restored .pm-primary-hero .pm-services-hero-copy h1,
    body .pm-primary-hero .pm-blog-lead-copy h1 {
        max-width: 16ch;
        font-family: var(--ff) !important;
        font-size: var(--type-display-size) !important;
        font-weight: 700 !important;
        line-height: var(--type-display-line) !important;
        letter-spacing: 0 !important;
    }

    body .pm-primary-hero .pm-section-label,
    body .pm-services-page-restored .pm-primary-hero .pm-section-label,
    body .pm-primary-hero .pm-blog-kicker {
        font-family: var(--ff) !important;
        font-size: var(--type-overline-size) !important;
        font-weight: 400 !important;
        line-height: var(--type-overline-line) !important;
        letter-spacing: var(--type-overline-tracking) !important;
    }


}

@media (max-width: 767px) {
    :root {
        --type-display-size: clamp(38px, 11vw, 48px);
        --type-section-size: clamp(28px, 8vw, 34px);
        --type-card-lg-size: 28px;
        --type-card-size: 24px;
        --type-overline-size: 14px;
        --type-overline-tracking: 2px;
    }

}

/* /services: sections sit inside the page .pm-container wrapper, which boxes them
   narrower than the homepage. Break the OUR SERVICES section out to full viewport
   width (like home's pm-home-slot) so its own .pm-container centers the content 1:1
   with the homepage ignoring the service-page wrapper. (Projects section already
   has its own full-bleed rule.) */
.pm-services-page .pm-services-section {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* The shared homepage feature is rendered inside the services page wrapper.
   Keep its background full-bleed while its inner .pm-container stays aligned. */
.pm-services-page .pm-blog-feature {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* The page wrapper is itself padded. Once the feature background breaks out,
   neutralize only the wrapper's extra inset so the shared content grid aligns
   with the Format and Working Rhythm containers. */
.pm-services-page .pm-services-page-inline-services .pm-blog-feature-inner {
    width: 100%;
    max-width: var(--max-w);
    margin-left: auto;
    margin-right: auto;
}

.pm-services-page-sections {
    width: 100%;
    max-width: var(--max-w);
    margin-inline: auto;
}

.pm-services-page-sections > .pm-services-page-inline-services {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* pm-page-hero (portfolio / faq): full-bleed background like the other heroes,
   content centered at --max-w (same position as before, only the bg goes full-width). */
.pm-page-hero {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: max(var(--page-pad), calc((100vw - var(--max-w)) / 2 + var(--page-pad)));
    padding-right: max(var(--page-pad), calc((100vw - var(--max-w)) / 2 + var(--page-pad)));
}

/* Inner-page site header stays transparent the hero gradient shows through it
   via the pm-services-page background (see 05-services.css), no separate header bg. */

/* Services hero: uniform background, no lines. Kill the ::before right-panel
   (vertical border-left + hatch) and the hero top/bottom borders. */
body .pm-services-page-restored .pm-primary-hero.pm-services-hero::before { display: none !important; }
body .pm-services-page-restored .pm-primary-hero.pm-services-hero {
    border-top: 0 !important;
    border-bottom: 0 !important;
}

/* /services PORTFOLIO section: same gradient background + proportions as the hero. */
.pm-services-page .pm-projects-section {
    background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg) 100%) !important;
}

/* /portfolio hero: same gradient + vertical column divider + full-bleed as the services hero. */
.pm-portfolio-page .pm-page-hero {
    background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg) 100%) !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
}
.pm-portfolio-page .pm-page-hero-aside {
    border-left: 1px solid rgba(120, 110, 170, 0.18);
    padding-left: 60px;
}
.pm-portfolio-page .pm-page-hero::before { display: none !important; }
.pm-portfolio-page { background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg) 100%); }

/* Portfolio hero: grid ~60/40 (was 1fr 240px too wide left) + aside full-height. */
.pm-portfolio-page .pm-page-hero {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) !important;
}
.pm-portfolio-page .pm-page-hero-aside { align-self: stretch; }

/* About hero: hide the ::before panel (duplicate divider) keep only the aside border-left. */
body .pm-primary-hero.pm-page-hero::before { display: none !important; }

/* ═══ About page STRATEGIC APPROACH section: match Services/Portfolio system ═══ */

/* 1) Story-copy → block (heading stacks vertically, not split across columns) */
.pm-page .pm-about-story-copy {
    display: block !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    max-width: 540px;
}

/* 2) Story column ratio ~42/58, tighter gap */
.pm-page .pm-about-story {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr) !important;
    gap: clamp(48px, 6vw, 88px) !important;
}

/* 3) Right column text: max-width, line-height, padding-top to align with title */

/* 4) Heading: align with standard pm-section-title system */
.pm-page .pm-about-story-copy .pm-section-label {
    color: var(--white-72) !important;
    white-space: nowrap;
    margin-bottom: 10px;
}
.pm-page .pm-about-story-copy .pm-section-title {
    font: 700 clamp(32px, 3vw, 44px)/1.06 var(--ff) !important;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    margin: 0 0 16px;
}

/* 5) Cards: softer borders, tighter numbers, hover */
.pm-page .pm-about-items {
    border-color: rgba(255, 255, 255, 0.08) !important;
    background: rgba(19, 20, 33, 0.35) !important;
}
.pm-page .pm-about-item {
    grid-template-columns: 44px minmax(0, 1fr) !important;
    gap: 20px !important;
    padding: 32px 28px !important;
    border-left: 1px solid rgba(255, 255, 255, 0.06) !important;
    transition: background 200ms ease;
}
.pm-page .pm-about-item:first-child { border-left: 0 !important; }
.pm-page .pm-about-item:hover { background: rgba(255, 255, 255, 0.03); }
.pm-page .pm-about-item-number { color: var(--pink); font: 900 14px/1 var(--ff); }
.pm-page .pm-about-item-content h3 { font: 800 18px/1.2 var(--ff); color: var(--white); margin: 0 0 10px; text-transform: uppercase; }
.pm-page .pm-about-item-content p { font: 400 14px/1.55 var(--ff); color: rgba(255, 255, 255, 0.62); margin: 0; }

/* 6) Watermark: shared across the grid, very low opacity, not clipped */
.pm-page .pm-about-watermark {
    position: absolute;
    right: -20px;
    bottom: -30px;
    font-size: clamp(120px, 20vw, 280px);
    opacity: 0.02;
    pointer-events: none;
    z-index: 0;
    overflow: visible;
}

/* 7) Subtle radial glow (not flat) */
.pm-page .pm-about-story {
    background: radial-gradient(circle at 85% 35%, rgba(215, 0, 120, 0.03), transparent 38%), var(--bg) !important;
}

/* About story: override the high-specificity grid on story-copy → block, remove 1fr row. */
.pm-page > .pm-container > .pm-about-story .pm-about-story-copy {
    display: block !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    max-width: 540px;
}
.pm-page > .pm-container > .pm-about-story {
    min-height: 0 !important;
}
/* About story: two-column (heading left, cards right), not stacked. */
.pm-page > .pm-container > .pm-about-story {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr) !important;
    gap: clamp(48px, 6vw, 88px) !important;
}

/* ═══ About STRATEGIC APPROACH: restructure (intro top, cards full-width bottom) ═══ */

/* Story: 1 column (intro row → cards row), proper padding */
.pm-page > .pm-container > .pm-about-story {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: clamp(56px, 6vw, 88px) !important;
    padding-top: clamp(80px, 8vw, 140px) !important;
    padding-bottom: clamp(80px, 8vw, 140px) !important;
    min-height: 0 !important;
}

/* Story-copy: 2-column intro (heading left, text right) */
.pm-page > .pm-container > .pm-about-story .pm-about-story-copy {
    display: grid !important;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) !important;
    grid-template-rows: none !important;
    column-gap: clamp(48px, 6vw, 88px) !important;
    align-items: start !important;
    max-width: none !important;
}

/* Detail-content (paragraphs): right column of intro, max-width */
.pm-page > .pm-container > .pm-about-story .pm-about-story-copy .pm-section-label,
.pm-page > .pm-container > .pm-about-story .pm-about-story-copy .pm-section-title,
.pm-page > .pm-container > .pm-about-story .pm-about-story-copy .pm-section-line {
    grid-column: 1 !important;
}

/* Eyebrow: muted white (not pink) */
.pm-page .pm-about-story .pm-section-label {
    color: var(--white-72) !important;
    white-space: nowrap;
    margin-bottom: 10px;
}

/* Cards: full width, 3 columns */
.pm-page > .pm-container > .pm-about-story .pm-about-items {
    width: 100% !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Cards: padding, softer borders, hover */
.pm-page .pm-about-item {
    padding: clamp(28px, 3vw, 44px) !important;
    border-left-color: rgba(255, 255, 255, 0.06) !important;
    min-height: 220px !important;
    transition: background 200ms ease;
}
.pm-page .pm-about-item:hover { background: rgba(255, 255, 255, 0.03); }

/* About story: align content with hero (match pm-container centering + padding). */
.pm-page > .pm-container > .pm-about-story {
    padding-left: max(var(--page-pad), calc((100vw - var(--max-w)) / 2 + var(--page-pad))) !important;
    padding-right: max(var(--page-pad), calc((100vw - var(--max-w)) / 2 + var(--page-pad))) !important;
}

/* About: right text top-aligned (not centered), card body 16px, tighter numbers. */
.pm-page .pm-about-item-content p {
    font-size: 15px !important;
    line-height: 1.55 !important;
}
.pm-page .pm-about-item {
    grid-template-columns: 40px minmax(0, 1fr) !important;
    gap: 20px !important;
}

/* About story-copy → block (vertical flow: eyebrow → title → line → description), not 2-col grid. */
.pm-page > .pm-container > .pm-about-story .pm-about-story-copy {
    display: block !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    max-width: none !important;
}

/* Detail-content (paragraphs): below the line, left-aligned, max-width 620px. */

/* Cards: normal gap after intro. */
.pm-page > .pm-container > .pm-about-story .pm-about-items {
    margin-top: 0;
}

/* ═══ pm-ceh: COMPREHENSIVE override (beats 07-case-study.css which loads after 04-portfolio) ═══ */

/* Section: block, no grid, no glow, no min-height. */

/* Inner: standard container width + padding. */

/* Intro: two-column grid, full width. */

/* Heading column. */

/* Logo: static, in heading column, not overlapping. */

/* Body: full width of column, readable. */

/* Mockup: full width below intro. */

/* Old elements (shouldn't exist, but neutralize any residual). */

@media (max-width: 900px) {
}

/* pm-ceh: fine-tune alignment + column ratio + spacing. */

/* pm-ceh: reduce bottom padding (next section has its own top). Split from shorthand. */
/* Hide empty mockup wrapper (no image = no gap). */

/* Hide pm-ceh mockup wrapper if image broken/not loading (empty progressive-image). */

/* pm-ceh: minimal bottom (next section has its own top). */

/* case_task_approach (01/OVERVIEW): compact spacing. */
/* case_task_approach: padding handled by newer rule below */
/* Empty panels: hide if no content. */

/* Portfolio detail: reduce chapter margin-top (was clamp(56,7vw,96) → too much gap). */

/* ═══ Fix ALL remaining gaps + Overview spacing ═══ */

/* 1. pm-ceh: aggressive minimal bottom (was still ~130px from shorthand). */

/* ═══ pm-case-overview-simple: clean replacement for pm-etask ═══ */
/* Chapter markers: HIDDEN */

/* ═══ Section spacing: 100px between major sections, 48px sub-sections ═══ */
.pm-portfolio-case .pm-case-overview-simple,
.pm-portfolio-case .pm-case-research,

.pm-case-overview-simple {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    overflow: visible !important;
}
.pm-case-overview-simple__grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    column-gap: clamp(80px, 10vw, 140px) !important;
    align-items: start !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
.pm-case-overview-simple__item {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
.pm-case-overview-simple__item:last-child {
    justify-self: end !important;
}
.pm-case-overview-simple__title {
    margin: 0 !important;
    font: 700 clamp(38px, 2.7vw, 48px)/1 var(--ff) !important;
    letter-spacing: -0.025em !important;
    text-transform: uppercase !important;
    color: var(--white) !important;
}
.pm-case-overview-simple__accent {
    display: block !important;
    width: 140px !important;
    height: 3px !important;
    margin: 28px 0 0 !important;
    background: var(--pink) !important;
}
.pm-case-overview-simple__text {
    width: 100% !important;
    max-width: 570px !important;
    min-width: 0 !important;
    margin: 30px 0 0 !important;
    padding: 0 !important;
    font-size: 18px !important;
    line-height: 1.65 !important;
    font-weight: 400 !important;
    color: rgba(255, 255, 255, 0.74) !important;
}
/* Responsive */
@media (max-width: 1100px) {
    .pm-case-overview-simple__grid { column-gap: 72px !important; }
}
@media (max-width: 760px) {
    .pm-case-overview-simple__grid {
        grid-template-columns: 1fr !important;
        row-gap: 64px !important;
    }
    .pm-case-overview-simple__item:last-child { justify-self: start !important; }
    .pm-case-overview-simple__text { max-width: 100% !important; }
}

/* (chapter-based spacing rules removed — chapters hidden) */

/* 3. case_task_approach (etask): no padding, content-driven height */
/* 3. etask: ZERO padding — section margin handles all spacing */

/* 4. etask inner: full-width 2-column grid, equal columns */
/* Titles: approved section subheading scale */
/* Pink rule: unified 112px */
/* Text: readable, balanced */

/* Section after chapter content → next chapter: 100px */

/* 5. etask panels: hidden if empty. */

/* 6. If panels hidden, make textcol full width. */

/* ═══ WORKFLOW (pm-wf): ONE clean consolidated rule — no duplicates ═══ */
@media (max-width: 900px) {
}
@media (max-width: 560px) {
}

/* ═══ 03/DISCOVERY (pm-rm): left-aligned heading, no fixed height, clean cards ═══ */
@media (max-width: 1100px) {
}
@media (max-width: 620px) {
}

/* ═══ PERSONAS (pm-ps): grid layout, hide carousel arrows, clean cards ═══ */
/* Hide carousel arrows on desktop (all 3 cards visible). */
/* Heading: left-aligned section heading. */
/* Form-bg: hide (old light-theme decoration). */
/* Cards container: grid 3-col, no carousel positioning. */
/* Cards: no fixed height, show all content. */
/* Featured (center) card: soft pink, not aggressive. */
/* Details panel: override #f7f9fc light bg + all light-theme text colors */
@media (max-width: 760px) {
}

/* ═══ KEY INSIGHTS (pm-ki): two-column, no fixed height, clean cards ═══ */
/* Quote card: no fixed height, soft gradient. */
/* Content: right column, left-aligned heading. */
/* List: clean bullets. */
@media (max-width: 800px) {
}

@media (max-width: 800px) {
}

/* ═══ Typography specimen: Manrope (all widths) ═══ */

/* ═══ USER FLOW (pm-uf): in-flow, challenges + diagram as separate blocks ═══ */

/* Heading: subsection eyebrow + section title + pink line. */

/* Challenges block. */

/* Diagram section: separate block AFTER challenges. */
/* SVG links fill the canvas. */
/* Nodes: dark cards. Background is fully opaque (#131421) so the connector
   lines (z-index:1, behind) are completely hidden wherever a card sits the
   line then reads as starting at the card's edge, not passing through it. */

@media (max-width: 760px) {
}

/* ═══ Chapter → first section: remove 2nd divider + cumulative spacing ═══ */
/* The first section after a chapter marker: no border-top (kills 2nd divider),
   no margin-top, small padding-top so content sits right under the chapter. */
/* Kill the subtle border-top on every case-section (it doubles the chapter rule). */
/* Section vertical rhythm: use padding only, no big margin stacking. */

/* Chapter marker: gap comes from the previous section's padding-bottom. */

/* ═══ hero_screenshot (Execution blocks): wider text col, no hyphenation ═══ */
/* Visual: fill the right column fully (was shrunk by margin-right). */

/* ═══ Case-section vertical rhythm: zero all margins + bottom padding,
   single inter-section gap comes from the NEXT section's padding-top only. ═══ */

/* ═══ MOBILE EXPERIENCE: reverse composition + phone frame ═══ */
/* Swap columns: visual left, copy right (breaks Desktop/Mobile monotony). */
/* Phone frame: capped width, no blur-stretch. */
/* Mobile section: content-height only. CTA-safe padding NOT here Booking Flow
   follows immediately; the inter-section gap comes from the next section's
   padding-top (single source, no stacking). */
@media (max-width: 760px) {
}

/* ═══ Final CTA (.pm-page-cta on case page): airy, left-aligned, balanced rhythm ═══ */
/* Heading: strong but not hero-scale, no mid-word hyphenation. */
/* Supporting text. */
/* Button row: clear gap from supporting text. */

/* ═══ PERSONAS inner typography (pm-ps): meta grid, unified labels, rhythm ═══ */
/* Meta rows: proper label/value grid (was concatenated because display:grid was purged). */
/* Section labels: unified uppercase pink (was mixed Bio white / others pink). */
/* Section rhythm: equal gap between all sections. */

/* Remove the "active" middle card all three equal. */

/* CTA-safe padding after the whole personas grid. */
/* Kill double padding: card has padding, details wrapper must not add more. */

/* ═══ Blog READ MORE button: match global .pm-btn-link dimensions ═══ */
/* Was shrunk to 184×50 by 06-blog.css; reset to the global button system. */
.pm-blog-read {
    width: var(--control-button-width) !important;
    min-width: var(--control-button-width) !important;
    max-width: none !important;
    height: 56px !important;
    min-height: 56px !important;
    flex-basis: auto !important;
    padding: 0 20px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE (≤760px): portfolio detail hero + Project Overview (pm-ceh)
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
    /* ── Back button: compact text link ── */

    /* ── Tags: single horizontal scroll row (not 3 wrapped rows) ── */

    /* ── Hero: single column, copy → media → stats, compact ── */

    /* ── Title: NO mid-word break (kills HYPNOTHERA/PY) ── */

    /* ── Description / lead ── */

    /* ── Media: proper aspect, full width ── */

    /* ── Stats: compact single column ── */

    /* ═══ Project Overview (pm-ceh): single column, full-width text ═══ */
}

/* ═══ MOBILE (≤760px): PERSONAS vertical stack + BRAND SYSTEM single col ═══ */
@media (max-width: 760px) {
    /* ── PERSONAS: vertical stack (not 3-col, not horizontal scroll) ── */
    /* All cards equal no active/center highlight on mobile. */

    /* ── BRAND SYSTEM: single column, palette above descriptions ── */
    /* Palette: 2-col readable grid, full width. */
    /* Descriptions: full width below palette. */
    /* Typography specimen: single column. */
    /* Logo zone: single column (stage above content). */
}

@media (max-width: 760px) {
    /* Meta rows: proper grid (prevent AGE/value overlap). */
}

/* ═══ TABLET (761–1180px): Services section single-column layout, 2×2 cards ═══ */
@media (min-width: 761px) and (max-width: 1180px) {
    /* Layout: intro above grid (not sidebar + grid side by side). */
    .pm-services-section .pm-services-layout,
    [data-home-block="home_services"] .pm-services-layout {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 40px !important;
        height: auto !important;
        min-height: 0 !important;
    }
    /* Grid: 2×2 (not squished 4-in-a-row or narrow sidebar grid). */
    .pm-services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: none !important;
        gap: 20px !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    /* Cards: grow by content no fixed height, no aspect-ratio clip. */
    .pm-service-card {
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        height: auto !important;
        aspect-ratio: auto !important;
        padding: 28px 28px 26px !important;
        overflow: hidden;
    }
    /* Title: no mid-word break (kills DEVELOPMEN/T). */
    .pm-service-card-title {
        font-size: clamp(20px, 2.6vw, 26px) !important;
        line-height: 1.1 !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
        white-space: normal !important;
    }
    /* Description: readable, not clipped. */
    .pm-service-card-desc {
        position: static !important;
        max-width: 32ch !important;
        margin-top: 14px !important;
        font-size: 14px !important;
        line-height: 1.5 !important;
    }
    /* CTA: push to bottom via flex (not absolute). */
    .pm-card-link {
        position: static !important;
        margin-top: auto !important;
        padding-top: 20px !important;
        transform: none !important;
    }
    /* Section: auto height, scrollable, CTA-safe bottom. */
    .pm-services-section {
        height: auto !important;
        min-height: 0 !important;
    }
}

/* ═══ MOBILE (≤760px): Testimonials active card in-flow, hide carousel neighbors ═══ */
@media (max-width: 760px) {
    /* Scene: auto height (was fixed 350px → huge empty space). */
    .pm-testimonial-scene {
        height: auto !important;
        min-height: 0 !important;
    }
    /* Active card: in normal flow (determines scene height). */
    .pm-testimonial.is-active {
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
    }
    /* Hide non-active carousel cards (no partial neighbors on mobile). */
    .pm-testimonial:not(.is-active) {
        display: none !important;
    }
    /* Card layout: avatar+person row, then full-width quote. */
    .pm-testimonial {
        grid-template-columns: 64px minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        column-gap: 18px !important;
        row-gap: 20px !important;
        padding: 24px 22px 24px !important;
        overflow: hidden;
    }
    .pm-testimonial-quote {
        grid-column: 1 / -1 !important;
        max-width: none !important;
        margin: 0 !important;
        font-size: 16px !important;
        line-height: 1.55 !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
    }
    .pm-testimonial-avatar {
        width: 64px !important;
        height: 64px !important;
    }
    /* Controls: below the card, full width. */
    .pm-testimonial-controls {
        margin-top: 24px !important;
        position: static !important;
        transform: none !important;
    }
}

/* ═══ Social icons: no-wrap on mobile, SVG YouTube matches PNG icons ═══ */
@media (max-width: 760px) {
    body .pm-hero-social,
    body .pm-footer-social {
        flex-wrap: nowrap !important;
        gap: clamp(6px, 2vw, 10px) !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }
    body .pm-hero-social a,
    body .pm-footer-social a {
        flex: 0 0 auto !important;
        width: clamp(38px, 11vw, 44px) !important;
        height: clamp(38px, 11vw, 44px) !important;
        color: rgba(255, 255, 255, 0.92) !important;
    }
    /* SVG (YouTube) horizontal glyph, smaller than square icons. */
    body .pm-hero-social a svg,
    body .pm-footer-social a svg {
        width: 20px !important;
        height: 20px !important;
    }
    /* YouTube is a wide rectangle scale down so it doesn't fill the circle. */
    body .pm-hero-social a[aria-label="YouTube"] svg,
    body .pm-footer-social a[aria-label="YouTube"] svg {
        width: 22px !important;
        height: 16px !important;
        max-width: 22px !important;
        max-height: 16px !important;
        padding: 0 !important;
        margin: 0 !important;
    }
}

/* ═══ YouTube SVG: global sizing (all widths) match PNG icon scale ═══ */
/* The YouTube glyph is a wide rounded rectangle; at full <a> size it looks
   like a white block. Scale it down on ALL screen sizes (not just mobile). */
body .pm-hero-social a svg,
body .pm-footer-social a svg {
    width: 22px !important;
    height: 16px !important;
    max-width: 22px !important;
    max-height: 16px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    transform: none !important;
    object-fit: contain !important;
}
/* YouTube link container: same circle as other social links. */
body .pm-hero-social a[aria-label="YouTube"],
body .pm-footer-social a[aria-label="YouTube"] {
    overflow: hidden !important;
}

/* ═══ MOBILE (≤760px): page-hero collapse to single column ═══ */
@media (max-width: 760px) {
    /* Collapse 2-col grid to 1-col (was keeping 1fr 240px → main squeezed to ~135px). */
    .pm-page-hero,
    .pm-portfolio-page .pm-page-hero {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        min-height: 0 !important;
        height: auto !important;
        padding: 48px 20px 40px !important;
    }
    /* Aside: below main content, no vertical divider, compact. */
    .pm-page-hero-aside {
        border-left: none !important;
        padding-left: 0 !important;
        margin-top: 8px !important;
        display: block !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
    }
    .pm-page-hero-aside span,
    .pm-page-hero-aside small {
        display: block !important;
        font-size: 13px !important;
    }
    .pm-page-hero-aside strong {
        display: block !important;
        font-size: 13px !important;
    }
    /* Title: full width, no mid-word break (PRODMEDIA stays whole). */
    .pm-page-hero-title {
        max-width: none !important;
        font-size: clamp(34px, 10vw, 46px) !important;
        line-height: 1.02 !important;
        letter-spacing: -0.02em !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        hyphens: none !important;
        text-wrap: balance;
    }
    /* Intro: full width, readable. */
    .pm-page-hero-main .pm-page-intro {
        max-width: none !important;
        font-size: 17px !important;
        line-height: 1.55 !important;
    }
    /* Section label: compact. */
    .pm-page-hero-main .pm-section-label {
        font-size: 12px !important;
        margin-bottom: 14px !important;
    }
}

/* ═══ MOBILE (≤760px): /about single column, cards stack, compact meta ═══ */
@media (max-width: 760px) {
    /* Hero aside: compact vertical stack under description. */
    .pm-page-hero-aside {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
        text-align: left !important;
        margin-top: 12px !important;
    }
    .pm-page-hero-aside::after { display: none !important; }

    /* Story section: single column (was 1fr + minmax(420px) → 420px min overflow). */
    .pm-about-story,
    .pm-page > .pm-container > .pm-about-story {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
        padding: 56px 20px 48px !important;
        height: auto !important;
        min-height: 0 !important;
    }
    /* Copy: full width, not nested grid. */
    .pm-about-story-copy,
    .pm-page > .pm-container > .pm-about-story .pm-about-story-copy {
        display: block !important;
        grid-template-columns: none !important;
        max-width: none !important;
    }
    .pm-about-story-copy .pm-section-title {
        font-size: clamp(34px, 9vw, 44px) !important;
        line-height: 1.04 !important;
    }

    /* Items: vertical stack (force block, override any grid). */
    .pm-about-items,
    .pm-page > .pm-container > .pm-about-story .pm-about-items {
        display: block !important;
        grid-template-columns: none !important;
        width: 100% !important;
        border: none !important;
        background: transparent !important;
    }
    /* Watermark: hidden on mobile. */
    .pm-about-watermark { display: none !important; }

    /* Card: number above title, simplified. */
    .pm-about-item,
    .pm-page .pm-about-item {
        display: block !important;
        grid-template-columns: none !important;
        gap: 0 !important;
        padding: 24px 0 !important;
        min-height: 0 !important;
        border-left: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
    }
    .pm-about-item:last-child { border-bottom: none !important; }
    .pm-about-item-number {
        display: block !important;
        font-size: 13px !important;
        line-height: 1 !important;
        color: var(--pink) !important;
        margin-bottom: 10px !important;
    }
    .pm-about-item-content h3 {
        font-size: 22px !important;
        line-height: 1.1 !important;
        margin-bottom: 10px !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        hyphens: none !important;
    }
    .pm-about-item-content p {
        font-size: 16px !important;
        line-height: 1.55 !important;
    }
}

/* ═══ Services Portfolio: mobile alignment + reveal stagger ═══ */
/* Neutralize full-bleed on mobile so content aligns with services section. */
@media (max-width: 760px) {
    .pm-services-page .pm-projects-section {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .pm-services-page .pm-projects-section .pm-home-portfolio-card {
        width: 100% !important;
        max-width: 100% !important;
    }
}
/* Portfolio cards: reveal stagger (fade up on enter viewport). */
.pm-home-portfolio-card.pm-reveal {
    transition-delay: calc(var(--pm-reveal-i, 0) * 80ms);
}

/* ═══ Services Portfolio: UNSAFE reveal REMOVED replaced by safe
   animation at bottom of file (cards visible by default, animation on
   pm-motion-active). Never set opacity:0 as default cards got stuck
   invisible when activity observer didn't fire. ═══ */

/* ═══ Services mobile: targeted overflow reset + carousel visibility ═══ */
@media (max-width: 760px) {
    /* Only reset the layout wrappers NOT .pm-container or .pm-projects-section. */
    .pm-services-page,
    .pm-services-page-restored,
    .pm-services-page .pm-services-layout {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }
    /* Full-bleed neutralized on mobile. */
    .pm-services-page .pm-projects-section {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* Inner container: NOT a scroll container. */
    .pm-services-page .pm-projects-section > .pm-container {
        height: auto !important;
        overflow: visible !important;
    }

    /* ── CAROUSEL: swipe + autoplay via scrollLeft ── */
    .pm-services-page .pm-home-portfolio-carousel {
        position: relative !important;
        inset: auto !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 1px !important;
        max-height: none !important;
        margin: clamp(36px, 10vw, 52px) 0 0 !important;
        padding: 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        touch-action: pan-x pan-y;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        scroll-behavior: auto !important;
        scroll-snap-type: x proximity !important;
        contain: none !important;
        scrollbar-width: none !important;
    }
    .pm-services-page .pm-home-portfolio-carousel::-webkit-scrollbar { display: none !important; }

    /* ── TRACK: flex row, max-content width, NO animation/transform ── */
    .pm-services-page .pm-home-portfolio-track {
        position: relative !important;
        inset: auto !important;
        display: flex !important;
        flex-flow: row nowrap !important;
        align-items: flex-start !important;
        gap: 20px !important;
        width: max-content !important;
        min-width: max-content !important;
        max-width: none !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: translate3d(0, 0, 0) !important;
        animation: none !important;
        transition: none !important;
    }

    /* ── CARD: real width, visible, no snap ── */
    .pm-services-page .pm-home-portfolio-card {
        position: relative !important;
        display: block !important;
        flex: 0 0 min(82vw, 360px) !important;
        width: min(82vw, 360px) !important;
        min-width: min(82vw, 360px) !important;
        max-width: 360px !important;
        height: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
        scroll-snap-align: start !important;
    }
}

/* Portfolio carousel uses JS-driven marquee (pm-portfolio-scroll-bound),
   not CSS reveal. Cards are always visible no opacity:0 default.
   The JS auto-scrolls the track when section is pm-motion-active. */

/* Mobile: disable contain:paint on carousel (prevents layout calc for JS scrollLeft) */
@media (max-width: 760px) {
    .pm-home-portfolio-carousel {
        contain: none !important;
    }
}

/* ═══ Services Portfolio: isolated mobile carousel (no homepage classes) ═══ */
.pm-services-portfolio-mobile { display: none; }

@media (min-width: 761px) {
    .pm-services-page .pm-services-portfolio-mobile { display: none !important; }
}

@media (max-width: 760px) {
    .pm-services-page .pm-home-portfolio-carousel { display: none !important; }
    .pm-services-page .pm-services-portfolio-mobile {
        display: block;
        position: relative;
        width: calc(100% + 34px);
        margin-top: 42px;
        margin-right: -34px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        touch-action: pan-x pan-y;
        scrollbar-width: none;
        opacity: 1;
        visibility: visible;
    }
    .pm-services-portfolio-mobile::-webkit-scrollbar { display: none; }
    .pm-services-portfolio-mobile__track {
        display: flex;
        flex-flow: row nowrap;
        align-items: flex-start;
        width: max-content;
        min-width: max-content;
        gap: 20px;
        padding-right: 34px;
        transform: none;
        animation: none;
        transition: none;
    }
    .pm-services-portfolio-mobile__card {
        display: block;
        flex: 0 0 min(82vw, 340px);
        width: min(82vw, 340px);
        min-width: min(82vw, 340px);
        max-width: 340px;
        height: auto;
        margin: 0;
        opacity: 1;
        visibility: visible;
        transform: none;
        animation: none;
        transition: none;
    }
    .pm-services-portfolio-mobile__card .pm-portfolio-card-img {
        width: 100%;
        aspect-ratio: 16 / 10;
        overflow: hidden;
    }
    .pm-services-portfolio-mobile__card .pm-portfolio-card-img img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   OPEN "SELECTED CASE" SECTION
   The case hero must read as an open, full-bleed editorial section NOT a
   boxed card. The <section> keeps the full-width background and a
   content-driven height; the .pm-case-hero-inner wrapper is the single
   site-aligned container (same insets as .pm-container) and hosts the
   two-column grid. This block is intentionally last + high-specificity so it
   wins over every earlier boxed / fixed-height / centered / dark-backdrop
   rule for pm-case-hero / pm-primary-detail-hero.
   ════════════════════════════════════════════════════════════════════════ */

/* Section: full-bleed background + the two-column editorial grid ITSELF.
   The .pm-case-hero-inner wrapper is made display:contents (see below), so
   copy / media / stats become direct grid items of this section. Horizontal
   padding uses the same max() formula as .pm-container, so the columns align
   1:1 with the page back-button / tags. */
 body .pm-case-page .pm-case-hero.pm-primary-detail-hero:not(.pm-case-hero-unified),
 body .pm-case-page .pm-case-hero:not(.pm-case-hero-unified) {
     position: relative;
     display: grid !important;
     grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) !important;
     grid-template-areas: "copy media" "stats media" !important;
     grid-template-rows: auto auto !important;
     align-items: start !important;
     column-gap: clamp(40px, 5vw, 72px) !important;
     row-gap: clamp(20px, 2.5vw, 36px) !important;
     width: 100vw !important;
     max-width: none !important;
     margin-left: calc(50% - 50vw) !important;
     margin-right: calc(50% - 50vw) !important;
     margin-top: 0 !important;
     margin-bottom: 0 !important;
     padding-block: clamp(56px, 6vw, 96px) !important;
     padding-left: max(var(--page-pad), calc((100vw - var(--max-w)) / 2 + var(--page-pad))) !important;
     padding-right: max(var(--page-pad), calc((100vw - var(--max-w)) / 2 + var(--page-pad))) !important;
     min-height: 0 !important;
     height: auto !important;
     overflow: visible !important;
     border: 0 !important;
     border-radius: 0 !important;
     box-shadow: none !important;
 }

/* Inner wrapper is transparent to layout: copy / media / stats become
   direct grid items of the section grid above. */

/* Left column: copy is a direct grid item, starts at the container edge */


/* Right column: preview fills the column, top-aligned, no frame / no dark pad */


/* Metadata (pm-case-stats): left column under the copy, light 3-col strip */


/* Responsive horizontal padding match .pm-container at every breakpoint */
@media (max-width: 1023px) and (min-width: 768px) {
}

@media (max-width: 767px) {
}

/* Tablet & mobile: single column, copy → media → stats */
@media (max-width: 1023px) {
}

/* No-image variant: single centered column */

/* ════════════════════════════════════════════════════════════════════════
   pm-etask "01 / OVERVIEW": MAIN TASK + APPROACH side by side
   The inner is already full-width (decorative panels are empty/hidden), so
   the textcol just needs to become a 2-column grid instead of a stacked
   flex column. Typography, background and colors untouched.
   ════════════════════════════════════════════════════════════════════════ */

/* Mobile: stack MAIN TASK above APPROACH */
@media (max-width: 900px) {
}

/* ════════════════════════════════════════════════════════════════════════
   pm-case-research: clean replacement for pm-rm
   4 equal columns, uniform bullet rows, no panels/cards
   ════════════════════════════════════════════════════════════════════════ */
.pm-case-research {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    overflow: visible !important;
    background: transparent !important;
}
.pm-case-research__heading {
    display: flex !important;
    align-items: baseline !important;
    gap: 16px !important;
    margin: 0 0 clamp(40px, 4vw, 56px) !important;
}
.pm-case-research__num {
    color: var(--pink) !important;
    font: 700 14px/1 var(--ff) !important;
    letter-spacing: 0.08em !important;
}
.pm-case-research__title {
    margin: 0 !important;
    font: 700 clamp(28px, 2.5vw, 40px)/1.1 var(--ff) !important;
    letter-spacing: -0.025em !important;
    text-transform: uppercase !important;
    color: var(--white) !important;
}
.pm-case-research__grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    column-gap: clamp(40px, 4vw, 56px) !important;
    align-items: start !important;
    width: 100% !important;
}
.pm-case-research__col {
    min-width: 0 !important;
    width: 100% !important;
}
.pm-case-research__col-title {
    margin: 0 0 28px !important;
    font: 700 20px/1.2 var(--ff) !important;
    color: var(--white) !important;
}
.pm-case-research__content {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
}
.pm-case-research__row {
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    font: 400 16px/1.55 var(--ff) !important;
    color: rgba(255, 255, 255, 0.72) !important;
}
.pm-case-research__row--bullet {
    padding-left: 22px !important;
}
.pm-case-research__row--bullet::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0.62em !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: var(--pink) !important;
}
/* Responsive */
@media (max-width: 1150px) {
    .pm-case-research__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 48px !important;
    }
}
@media (max-width: 680px) {
    .pm-case-research__grid {
        grid-template-columns: 1fr !important;
        row-gap: 48px !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   pm-rm OLD rules below (dead code — class no longer in DOM)
   Open columns (no card panels) except the highlighted Client Insights.
   Custom bullets, consistent line-height, readable measure, even rhythm.
   ════════════════════════════════════════════════════════════════════════ */

/* Top grid: 3 equal wide columns (Audience Needs / Trust Barriers / Search Behaviour) */

/* Normal columns: open, no panel/border */

/* Client Insights: separate accent panel below the 3-column row */

/* Column titles: one uniform style across all four */

/* Body measure + rhythm */

/* Custom bullets: tight to text, hanging indent, even spacing */

/* Tablet: 2 columns (third wraps) */
@media (max-width: 1100px) {
}

/* Mobile: single column */
@media (max-width: 620px) {
}

/* ════════════════════════════════════════════════════════════════════════
   PERSONAS coverflow / card-carousel
   One dominant active card centered & forward; prev/next peek behind on the
   sides (smaller, dimmed, rotated); arrows sit over the side cards. Built on
   the existing order-rotation logic (is-left / is-center / is-right slots).
   High-specificity + last to win the earlier flat-grid pm-ps rules.
   ════════════════════════════════════════════════════════════════════════ */


/* Carousel wrapper: container-aligned width */

/* Stage: the positioned area holding the three cards + arrows.
   Sits after the header in normal flow; cards are top-aligned inside it so
   they can never overflow upward into the intro text. */

/* Cards: absolutely positioned, top-aligned + horizontally centered.
   top:0 (not 50%) guarantees the card never rises above the stage top,
   so it can't overlap the intro paragraph regardless of card height. */

/* Active card: forward, full size, full opacity */

/* Side cards: behind, smaller, dimmed, rotated */

/* Navigation arrows over the side cards */

/* Reduced motion: drop the rotation/dim, keep it simple */
@media (prefers-reduced-motion: reduce) {
}

/* Mobile / tablet: single active card, hide side cards & arrows styling */
@media (max-width: 900px) {
}

/* ════════════════════════════════════════════════════════════════════════
   UNIFIED VERTICAL RHYTHM case page (Model A: margin-top owns the gap)
   Every section owns its top gap via margin-top(--section-gap). padding-block
   is reserved for INTERNAL breathing only (zeroed here except full-bleed
   bands hero & ceh, whose padding-block is part of the band design).
   Chapter markers get a standard break; the section right after a chapter is
   tight (--section-gap-sm). This neutralizes the earlier per-block rhythm
   rules (the "engine" at ~7129–7216) which used padding for rhythm and
   caused doubled gaps (e.g. rm 88–128 bottom + next top).
   ════════════════════════════════════════════════════════════════════════ */
/* Non-band sections: no rhythm padding (gap comes from margin-top above) */
/* Chapter markers: standard break above, none below (tight section follows) */
/* Section right after its chapter header: tight */

/* ════════════════════════════════════════════════════════════════════════
   GLOBAL UNIFIED RHYTHM home / services / about / blog (Model A)
   Content sections own their top gap via margin-top(--section-gap); their
   padding-block is reserved for internal breathing only (zeroed here
   content/headings/cards carry their own margins). Full-bleed "band"
   sections keep their own padding-block (it's part of the band design) but
   still take the standard top gap. Works for block AND flex wrappers (margins
   are honoured in flex; those wrappers keep gap:0).
   ════════════════════════════════════════════════════════════════════════ */

/* Non-band content sections: rhythm via margin-top, no rhythm padding */
body .pm-cta-strip,
body .pm-about-strip,
body .pm-contact,
body .pm-section,
body .pm-blog-news,
body .pm-services-section {
    margin-top: var(--section-gap) !important;
    padding-block: 0 !important;
}

/* Full-bleed band sections: keep their padding-block, standardize top gap */
body .pm-services-hero,
body .pm-page-hero,
body .pm-blog-lead,
body .pm-services-engagement,
body .pm-services-process,
body .pm-about-story {
    margin-top: var(--section-gap) !important;
}

/* First content section of a page: no top gap (hero/nav clearance handles it).
   !important needed to beat the global margin-top above. */
body .pm-hero,
body .pm-section:first-child,
body .pm-services-page-sections > :first-child,
body .pm-blog-article-page .pm-blog-article-blocks > :first-child,
body .pm-blog-page > :first-child,
body .pm-page-hero,
body .pm-blog-lead {
    margin-top: 0 !important;
}

/* ═══ HOME — uniform 100px internal boundaries (block context + margin-collapse)
   .pm-home-sections switched from flex to block so that per-section
   margin:100px 0 collapses to a single 100px gap between blocks (in flex they
   would double). This also makes any stray inline container margin (e.g. from
   a cached WASM) collapse harmlessly into the same 100px. Home block
   sort_order is sequential (= DOM order), so dropping flex `order` changes
   nothing visually. */
.pm-home-sections {
    display: block !important;
}
.pm-home-sections .pm-hero,
.pm-home-sections .pm-services-section,
.pm-home-sections .pm-cta-strip,
.pm-home-sections .pm-about-strip,
.pm-home-sections .pm-projects-section,
.pm-home-sections .pm-blog-feature,
.pm-home-sections .pm-latest-section,
.pm-home-sections .pm-testimonials-section,
.pm-home-sections .pm-contact {
    margin: 100px 0 !important;
}
/* First section (hero) sits at the very top — no top margin. */
.pm-home-sections .pm-hero {
    margin-top: 0 !important;
}
@media (max-width: 767px) {
    .pm-home-sections .pm-hero,
    .pm-home-sections .pm-services-section,
    .pm-home-sections .pm-cta-strip,
    .pm-home-sections .pm-about-strip,
    .pm-home-sections .pm-projects-section,
    .pm-home-sections .pm-blog-feature,
    .pm-home-sections .pm-latest-section,
    .pm-home-sections .pm-testimonials-section,
    .pm-home-sections .pm-contact {
        margin: 48px 0 !important;
    }
    .pm-home-sections .pm-hero { margin-top: 0 !important; }
}

/* Portfolio header: VIEW ALL button aligned with the title row (not the
   whole eyebrow+title+line group). Grid areas put the button in the title's
   row so its vertical center matches the h2. */
.pm-projects-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "eyebrow ." "title button" "line .";
    column-gap: clamp(40px, 5vw, 80px);
    row-gap: 14px;
    align-items: center;
    margin-bottom: 40px;
}
.pm-projects-header__eyebrow { grid-area: eyebrow; }
.pm-projects-header__title { grid-area: title; margin: 0; }
.pm-projects-header__line { grid-area: line; }
.pm-projects-header__button { grid-area: button; align-self: center; }

/* Blog (latest) header: VIEW ALL aligned with the (two-line) title, same
   grid-areas pattern as the portfolio header. */
.pm-latest-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "eyebrow ." "title button" "line .";
    column-gap: clamp(40px, 5vw, 80px);
    row-gap: 14px;
    align-items: center;
    margin-bottom: 40px;
}
.pm-latest-header__eyebrow { grid-area: eyebrow; }
.pm-latest-header__title { grid-area: title; margin: 0; }
.pm-latest-header__line { grid-area: line; }
.pm-latest-header__button { grid-area: button; align-self: center; }
@media (max-width: 767px) {
    .pm-latest-header {
        grid-template-columns: 1fr;
        grid-template-areas: "eyebrow" "title" "button" "line";
        row-gap: 18px;
    }
    .pm-latest-header__button { justify-self: start; margin-top: 8px; }
}

@media (max-width: 767px) {
    .pm-projects-header {
        grid-template-columns: 1fr;
        grid-template-areas: "eyebrow" "title" "button" "line";
        row-gap: 18px;
    }
}

/* About section: explicit 100px top/bottom on its content container. */
.pm-about-strip .pm-container {
    margin-top: 100px !important;
    margin-bottom: 100px !important;
}

/* Contact section inner container: explicit 100px top/bottom. */
.pm-contact .pm-container {
    margin-top: 100px !important;
    margin-bottom: 100px !important;
}

/* Pin carousel edge shadows to the SECTION (non-scrolling parent) so they
   stay fixed while the carousel scrolls underneath. Removed from the
   scrolling carousel element itself. */
.pm-projects-section { position: relative; }
.pm-projects-section::before,
.pm-projects-section::after {
    position: absolute;
    z-index: 5;
    top: 0;
    bottom: 0;
    width: min(96px, 9vw);
    content: "";
    pointer-events: none;
}
.pm-projects-section::before {
    left: 0;
    background: linear-gradient(90deg, var(--bg), transparent);
}
.pm-projects-section::after {
    right: 0;
    background: linear-gradient(270deg, var(--bg), transparent);
}
.pm-home-portfolio-carousel::before,
.pm-home-portfolio-carousel::after {
    display: none !important;
}

/* Blog detail: container width matches site (was min(86%, 1280px)). */
.pm-blog-article-container {
    width: 100% !important;
    max-width: var(--max-w) !important;
    margin-inline: auto !important;
    padding-inline: var(--page-pad) !important;
    box-sizing: border-box !important;
}

/* Blog page: continuous gradient from nav top through hero (no seam).
   Hero is transparent so page gradient shows through it. */
.pm-blog-page {
    padding-bottom: 0 !important;
    background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg) 55%) !important;
}
.pm-blog-page .pm-blog-lead.pm-primary-hero {
    background: transparent !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
}
.pm-blog-news {
    margin-bottom: 0 !important;
}

/* Service detail hero: open layout — allow art panel (rotate(2deg)) and
   orbit circles to bleed outside container bounds without being clipped.
   The inline service_detail.css sets overflow:clip; !important beats it. */
.pm-service-detail-v3 {
    overflow: visible !important;
}

/* Blog detail: no trailing gap after the latest-news section.
   blog-detail.css (inline <style>) sets padding-bottom:80px on the container;
   !important here beats the inline cascade. */
.pm-blog-article-container {
    padding-bottom: 0 !important;
}

/* About page: unified vertical rhythm — no section borders, no huge gaps.
   Sections are content-driven; gap managed by margins on the story section. */
.pm-page:has(.pm-about-story) {
    background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg) 55%) !important;
}
.pm-page:has(.pm-about-story) .pm-page-hero.pm-primary-hero {
    background: transparent !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    margin-bottom: 0 !important;
}
.pm-page:has(.pm-about-story) .pm-about-story {
    border-top: 0 !important;
    border-bottom: 0 !important;
    padding-block: 0 !important;
    margin-top: 100px !important;
    margin-bottom: 0 !important;
}
.pm-page:has(.pm-about-story) .pm-contact {
    margin-top: 0 !important;
}

/* Services page selected_work (portfolio carousel): section flush top,
   inner container 100px top/bottom. */
.pm-services-page .pm-projects-section {
    margin-top: 0 !important;
}
.pm-services-page .pm-projects-section .pm-container {
    margin-top: 100px !important;
    margin-bottom: 100px !important;
}

/* Services engagement section: flush top. */
body .pm-services-engagement {
    margin-top: 0 !important;
}

/* Services section: flush at the top (no gap above it), everywhere. */
body .pm-services-section,
.pm-home-sections .pm-services-section {
    margin-top: 0 !important;
}

/* Services process section: beat the injected services_page.css inline style
   (which has !important padding: 96px 0 112px) by using higher specificity. */
body .pm-services-page-restored .pm-services-process {
    margin-top: 0 !important;
    padding-top: 96px !important;
    padding-bottom: 0 !important;
}
body .pm-services-process .pm-container {
    margin-bottom: 0 !important;
}
body .pm-services-process .pm-process-strip {
    margin-bottom: 0 !important;
}

/* About story section: flush at the top (no gap above it). */
body .pm-about-story {
    margin-top: 0 !important;
}

/* Blog "Latest News" (related) block: explicit 100px top gap. */
.pm-blog-latest-news {
    margin-top: 100px !important;
}

/* Testimonials+Partners layout: explicit 100px top/bottom on its container. */
.pm-testimonials-layout {
    margin-top: 100px !important;
    margin-bottom: 100px !important;
}

/* Contact section: no top gap anywhere (home + all pages). */
body .pm-contact,
.pm-home-sections .pm-contact {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Testimonials section: no bottom gap anywhere (flush before contact). */
body .pm-testimonials-section,
.pm-home-sections .pm-testimonials-section {
    margin-bottom: 0 !important;
}

/* Expertise/Services showcase (.pm-blog-feature): the global rhythm zeroed
   its padding (content glued to top) while min-height:610px left a void under
   the short content. Restore compact, content-driven height + padding, and
   center the two columns. Applies on both home and /services. Design (bg,
   texts, columns) unchanged. */
body .pm-blog-feature {
    margin-top: var(--section-gap) !important;
    padding-block: clamp(72px, 7vw, 104px) !important;
    min-height: 0 !important;
}
body .pm-blog-feature .pm-blog-feature-inner {
    align-items: center !important;
}

/* Merged Project Overview header inside Main Task/Approach (pm-etask) */


/* ═════════════ PORTFOLIO CASE PAGE — CLEAN REBUILD ═════════════ */

/* Full-bleed background on page wrapper */
.pm-portfolio-case { position: relative; }
.pm-portfolio-case::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 900px;
    background:
        radial-gradient(ellipse at 78% 36%, rgba(202, 2, 116, 0.17), transparent 42%),
        radial-gradient(ellipse at 5% 16%, rgba(75, 228, 219, 0.05), transparent 30%),
        linear-gradient(180deg, var(--bg-card) 0%, transparent 78%);
    z-index: 0;
    pointer-events: none;
}
.pm-portfolio-case > .pm-container {
    position: relative;
    z-index: 1;
}

/* Back button + tags */
.pm-case-page > .pm-container > .pm-btn.pm-blog-back {
    margin-bottom: 6px;
    text-decoration: none;
}
.pm-case-page > .pm-container > .pm-btn.pm-blog-back:hover .pm-arrow-back,
.pm-case-page > .pm-container > .pm-btn.pm-blog-back:focus-visible .pm-arrow-back {
    transform: translateX(-3px);
}
.pm-case-page > .pm-container > .pm-case-tags {
    min-height: 0;
    margin: 0 !important;
    padding: 6px 0 16px;
    border-bottom: 0 !important;
}
.pm-case-page > .pm-container > .pm-case-tags span {
    color: rgba(255, 255, 255, 0.45) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
}

/* Chapter markers: hidden */
.pm-case-chapter { display: none !important; }
.pm-case-chapter-rule { display: none !important; }

/* Section spacing */
.pm-portfolio-case .pm-case-overview-simple,
.pm-portfolio-case .pm-case-research,
.pm-portfolio-case .pm-wf,
.pm-portfolio-case .pm-rm,
.pm-portfolio-case .pm-ps,
.pm-portfolio-case .pm-ki,
.pm-portfolio-case .pm-br,
.pm-portfolio-case .pm-uf2,
.pm-portfolio-case .pm-uf,
.pm-portfolio-case .pm-case-highlight,
.pm-portfolio-case .pm-case-section {
    margin-top: 100px !important;
}

/* ═══ UNIFIED HERO ═══ */
.pm-case-page .pm-case-hero-unified.pm-primary-detail-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr) !important;
    grid-template-areas:
        "eyebrow  logo"
        "copy     media"
        "stats    media" !important;
    grid-template-rows: auto !important;
    column-gap: 80px !important;
    row-gap: 0 !important;
    width: 100% !important;
    margin: 40px 0 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
}
.pm-case-page .pm-case-hero-unified > .pm-case-hero-eyebrow {
    grid-area: eyebrow !important;
    margin: 0 0 40px !important;
    align-self: start !important;
}
.pm-case-page .pm-case-hero-unified > .pm-case-hero-logo {
    grid-area: logo !important;
    justify-self: end !important;
    align-self: start !important;
    width: 230px !important;
    max-width: 100% !important;
    max-height: 64px !important;
    object-fit: contain !important;
    margin: 0 !important;
}
.pm-case-page .pm-case-hero-unified .pm-case-hero-copy {
    grid-area: copy !important;
    min-width: 0 !important;
    max-width: 650px !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-self: start !important;
}
.pm-case-page .pm-case-hero-unified .pm-detail-title {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    font: 700 clamp(42px, 3.65vw, 68px)/1.08 var(--ff) !important;
    font-synthesis: none !important;
    letter-spacing: -0.035em !important;
    text-transform: uppercase !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
}
.pm-case-page .pm-case-hero-unified .pm-detail-title::after {
    content: "" !important;
    display: block !important;
    width: 180px !important;
    height: 3px !important;
    margin: 28px 0 0 !important;
    background: var(--pink) !important;
}
.pm-case-page .pm-case-hero-unified .pm-case-subtitle {
    max-width: 590px !important;
    margin: 24px 0 0 !important;
    font-size: 28px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    color: #fff !important;
}
.pm-case-page .pm-case-hero-unified .pm-detail-content {
    max-width: 570px !important;
    margin: 20px 0 0 !important;
    font-size: 18px !important;
    line-height: 1.65 !important;
    color: rgba(255, 255, 255, 0.74) !important;
}
.pm-case-page .pm-case-hero-unified .pm-detail-content p { margin: 0 !important; }
.pm-case-page .pm-case-hero-unified .pm-case-hero-media {
    grid-area: media !important;
    min-width: 0 !important;
    align-self: start !important;
    margin: 0 !important;
    padding: 12px 0 0 !important;
    border-left: 0 !important;
}
.pm-case-page .pm-case-hero-unified .pm-case-hero-media .pm-progressive-image {
    display: block !important;
    width: 100% !important;
}
.pm-case-page .pm-case-hero-unified .pm-case-hero-media .pm-progressive-image img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    border-radius: 12px !important;
    object-fit: cover !important;
}
.pm-case-page .pm-case-hero-unified .pm-case-stats {
    grid-area: stats !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
    margin: 34px 0 0 !important;
    max-width: 570px !important;
}
.pm-case-page .pm-case-hero-unified .pm-case-stat {
    min-width: 0 !important;
    min-height: 116px !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 24px 18px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    background: rgba(255, 255, 255, 0.012) !important;
}
.pm-case-page .pm-case-hero-unified .pm-case-stat strong {
    margin: 0 !important;
    font: 700 17px/1.25 var(--ff) !important;
    color: var(--white) !important;
}
.pm-case-page .pm-case-hero-unified .pm-case-stat span {
    margin: 16px 0 0 !important;
    font: 500 12px/1 var(--ff) !important;
    color: rgba(255,255,255,0.55) !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

/* Portfolio detail: keep the two-column hero safe on laptop viewports.
   Long project names must shrink with the available column instead of
   painting underneath the media column. */
@media (max-width: 1440px) and (min-width: 902px) {
    .pm-case-page .pm-case-hero-unified.pm-primary-detail-hero {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        column-gap: clamp(36px, 3vw, 48px) !important;
    }

    .pm-case-page .pm-case-hero-unified .pm-detail-title {
        letter-spacing: -0.03em !important;
    }

    .pm-case-page .pm-case-hero-unified .pm-case-subtitle {
        font-size: clamp(22px, 2.25vw, 27px) !important;
    }

    .pm-case-page .pm-case-hero-unified .pm-detail-content {
        font-size: 16px !important;
        line-height: 1.55 !important;
    }

    .pm-case-page .pm-case-hero-unified .pm-case-stats {
        gap: 10px !important;
        margin-top: 26px !important;
    }

    .pm-case-page .pm-case-hero-unified .pm-case-stat {
        min-height: 104px !important;
        padding: 18px 14px !important;
    }
}

/* Tablet/mobile: the unified selector is more specific than the old generic
   breakpoint, so give it an explicit non-overlapping layout. */
@media (max-width: 901px) {
    .pm-case-page .pm-case-hero-unified.pm-primary-detail-hero {
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "eyebrow logo"
            "copy    copy"
            "media   media"
            "stats   stats" !important;
        column-gap: 24px !important;
        row-gap: 0 !important;
    }

    .pm-case-page .pm-case-hero-unified > .pm-case-hero-eyebrow {
        margin-bottom: 30px !important;
    }

    .pm-case-page .pm-case-hero-unified > .pm-case-hero-logo {
        width: clamp(150px, 28vw, 210px) !important;
    }

    .pm-case-page .pm-case-hero-unified .pm-detail-title {
        max-width: 100% !important;
        font-size: clamp(38px, 7vw, 52px) !important;
        line-height: 1.06 !important;
        overflow-wrap: break-word !important;
    }

    .pm-case-page .pm-case-hero-unified .pm-case-subtitle {
        font-size: clamp(21px, 3.4vw, 26px) !important;
    }

    .pm-case-page .pm-case-hero-unified .pm-case-hero-media {
        margin-top: 38px !important;
        padding-top: 0 !important;
    }
}

/* ═══ OVERVIEW SIMPLE (MAIN TASK / APPROACH) ═══ */
.pm-case-overview-simple {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
.pm-case-overview-simple__grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    column-gap: clamp(80px, 10vw, 140px) !important;
    align-items: start !important;
    width: 100% !important;
}
.pm-case-overview-simple__item {
    width: 100% !important;
    min-width: 0 !important;
}
.pm-case-overview-simple__item:last-child { justify-self: end !important; }
.pm-case-overview-simple__title {
    margin: 0 !important;
    font: 700 clamp(38px, 2.7vw, 48px)/1 var(--ff) !important;
    letter-spacing: -0.025em !important;
    text-transform: uppercase !important;
    color: var(--white) !important;
}
.pm-case-overview-simple__accent {
    display: block !important;
    width: 140px !important;
    height: 3px !important;
    margin: 28px 0 0 !important;
    background: var(--pink) !important;
}
.pm-case-overview-simple__text {
    max-width: 570px !important;
    min-width: 0 !important;
    width: 100% !important;
    margin: 30px 0 0 !important;
    font-size: 18px !important;
    line-height: 1.65 !important;
    color: rgba(255, 255, 255, 0.74) !important;
}
@media (max-width: 1100px) { .pm-case-overview-simple__grid { column-gap: 72px !important; } }
@media (max-width: 760px) {
    .pm-case-overview-simple__grid { grid-template-columns: 1fr !important; row-gap: 64px !important; }
    .pm-case-overview-simple__item:last-child { justify-self: start !important; }
}

/* ═══ RESEARCH (4-column) ═══ */
.pm-case-research {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
 .pm-case-research__title {
    margin: 0 !important;
    font: 700 clamp(44px, 3.4vw, 58px)/1.04 var(--ff) !important;
    letter-spacing: -0.025em !important;
    text-transform: uppercase !important;
    color: var(--white) !important;
}
 .pm-case-research__title::after {
    content: "" !important;
    display: block !important;
    width: 140px !important;
    height: 3px !important;
    margin: 24px 0 0 !important;
    background: var(--pink) !important;
}
 .pm-case-research__grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    column-gap: 56px !important;
    align-items: start !important;
    width: 100% !important;
    margin: 64px 0 0 !important;
}
 .pm-case-research__col { min-width: 0 !important; width: 100% !important; }
 .pm-case-research__col-title {
    margin: 0 0 28px !important;
    min-height: 29px !important;
    font: 700 21px/1.2 var(--ff) !important;
    letter-spacing: -0.01em !important;
    color: var(--white) !important;
}
.pm-case-research__content {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
}
.pm-case-research__row {
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    font: 400 16px/1.55 var(--ff) !important;
    color: rgba(255, 255, 255, 0.72) !important;
}
.pm-case-research__row--bullet { padding-left: 22px !important; }
.pm-case-research__row--bullet::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0.62em !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: var(--pink) !important;
}
@media (max-width: 1150px) {
    .pm-case-research__grid { grid-template-columns: repeat(2, 1fr) !important; gap: 48px !important; }
}
@media (max-width: 680px) {
    .pm-case-research__grid { grid-template-columns: 1fr !important; row-gap: 48px !important; }
}

/* ═══ OLD BLOCKS: neutralize base 07-case-study.css ═══ */
/* These reset the absolute positioning + fixed heights from base CSS */
.pm-case-page .pm-wf,
.pm-case-page .pm-rm,
.pm-case-page .pm-ps,
.pm-case-page .pm-ki,
.pm-case-page .pm-br,
.pm-case-page .pm-uf {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    overflow: visible !important;
    background: transparent !important;
    container-type: normal !important;
}
.pm-case-page .pm-wf::before,
.pm-case-page .pm-rm::before,
.pm-case-page .pm-rm__band,
.pm-case-page .pm-ps__form-bg {
    display: none !important;
}
/* wf title + cards */
.pm-case-page .pm-wf__title {
    position: static !important;
    left: auto !important; top: auto !important;
    width: 100% !important;
    margin: 0 !important;
    text-align: left !important;
    font: 700 clamp(38px, 3vw, 52px)/1 var(--ff) !important;
    text-transform: uppercase !important;
    letter-spacing: -0.025em !important;
    color: var(--white) !important;
}
.pm-case-page .pm-wf__title::after {
    content: "" !important; display: block !important;
    width: 112px !important; height: 3px !important;
    margin: 22px 0 0 !important; background: var(--pink) !important;
}
.pm-case-page .pm-wf__list {
    position: relative !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: clamp(16px, 2vw, 28px) !important;
    width: 100% !important;
    margin: clamp(48px, 5vw, 72px) 0 0 !important;
    left: auto !important; bottom: auto !important; transform: none !important;
}
.pm-case-page .pm-wf__connector { display: none !important; }
.pm-case-page .pm-wf__card {
    position: relative !important;
    min-width: 0 !important;
    min-height: 176px !important;
    padding: 30px 14px 26px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: space-between !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    background: rgba(19,20,33,0.4) !important;
}
.pm-case-page .pm-wf__icon { width: 42px !important; height: 42px !important; color: var(--pink) !important; }
.pm-case-page .pm-wf__icon svg { width: 100% !important; height: 100% !important; }
.pm-case-page .pm-wf__label {
    display: flex !important; align-items: baseline !important;
    justify-content: center !important; gap: 5px !important;
    white-space: nowrap !important;
}
.pm-case-page .pm-wf__num { color: var(--pink) !important; font-weight: 700 !important; }
.pm-case-page .pm-wf__num::after { content: none !important; }
.pm-case-page .pm-wf__name { color: var(--white) !important; font-weight: 700 !important; text-transform: uppercase !important; }
@media (max-width: 900px) { .pm-case-page .pm-wf__list { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 560px) { .pm-case-page .pm-wf__list { grid-template-columns: 1fr !important; } }

/* ═══ PERSONAS: layered carousel ═══ */
 .pm-case-page .pm-ps {
    padding: 0 !important;
    display: block !important;
    position: relative !important;
}
/* Heading: approved section style */
 .pm-case-page .pm-ps__heading {
    position: static !important;
    width: 100% !important;
    margin: 0 0 64px !important;
}
 .pm-case-page .pm-ps__title {
    margin: 0 !important;
    font: 700 clamp(44px, 3.4vw, 58px)/1.04 var(--ff) !important;
    letter-spacing: -0.025em !important;
    text-transform: uppercase !important;
    color: var(--white) !important;
}
 .pm-case-page .pm-ps__title::after {
    content: "" !important;
    display: block !important;
    width: 140px !important;
    height: 3px !important;
    margin: 24px 0 0 !important;
    background: var(--pink) !important;
}
 .pm-case-page .pm-ps__intro {
    max-width: 680px !important;
    margin: 24px 0 0 !important;
    font-size: 18px !important;
    line-height: 1.65 !important;
    color: rgba(255,255,255,0.72) !important;
}

/* Arrows: positioned on the SIDES of the carousel, vertically centered */
 .pm-case-page .pm-ps__arrows {
    position: static !important;
    display: contents !important;
}
 .pm-case-page .pm-ps__arrow {
    position: absolute !important;
    top: 50% !important;
    z-index: 6 !important;
    width: 56px !important;
    height: 56px !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    background: rgba(19,10,36,0.92) !important;
    color: var(--white) !important;
    font-size: 20px !important;
    cursor: pointer !important;
    transition: border-color 200ms ease, background 200ms ease !important;
}
 .pm-case-page .pm-ps__arrows .pm-ps__arrow:first-child { left: 0 !important; }
 .pm-case-page .pm-ps__arrows .pm-ps__arrow:last-child { right: 0 !important; }
 .pm-case-page .pm-ps__arrow:hover:not(:disabled) {
    border-color: var(--pink) !important;
    background: rgba(202,2,116,0.15) !important;
}
 .pm-case-page .pm-ps__arrow:disabled { opacity: 0.4 !important; cursor: default !important; }
@media (min-width: 1500px) {
    .pm-case-page .pm-ps__arrows .pm-ps__arrow:first-child { left: 80px !important; }
    .pm-case-page .pm-ps__arrows .pm-ps__arrow:last-child { right: 80px !important; }
}

/* Track: height set dynamically by JS (exact measurement, no fallback bloat) */
 .pm-case-page .pm-ps__track {
    position: relative !important;
    height: auto;
    min-height: 0;
    overflow: visible !important;
}

/* Cards: absolute, centered, fully visible (no clipping) */
 .pm-case-page .pm-ps__card,
 .pm-case-page .pm-ps__card.is-left,
 .pm-case-page .pm-ps__card.is-center,
 .pm-case-page .pm-ps__card.is-right {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    width: min(760px, calc(100vw - 160px)) !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    background: rgba(19,20,33,0.4) !important;
    transition: transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1),
                opacity 420ms ease,
                filter 420ms ease,
                z-index 0s 260ms !important;
}
/* Active: center, full size, front */
 .pm-case-page .pm-ps__card.is-center {
    z-index: 3 !important;
    opacity: 1 !important;
    filter: none !important;
    transform: translateX(-50%) translateY(0) scale(1) !important;
    pointer-events: auto !important;
    border-color: rgba(202,2,116,0.5) !important;
    background: linear-gradient(135deg, rgba(202,2,116,0.07), rgba(202,2,116,0.015)) !important;
    transition: transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1),
                opacity 420ms ease,
                filter 420ms ease,
                z-index 0s 0s !important;
}
/* Left: behind, shifted left, smaller, darker */
 .pm-case-page .pm-ps__card.is-left {
    z-index: 1 !important;
    opacity: 0.36 !important;
    filter: brightness(0.64) !important;
    transform: translateX(-50%) translateX(-440px) translateY(70px) scale(0.82) rotate(-2deg) !important;
    pointer-events: none !important;
}
/* Right: behind, shifted right, smaller, darker */
 .pm-case-page .pm-ps__card.is-right {
    z-index: 1 !important;
    opacity: 0.36 !important;
    filter: brightness(0.64) !important;
    transform: translateX(-50%) translateX(440px) translateY(70px) scale(0.82) rotate(2deg) !important;
    pointer-events: none !important;
}

/* Card internal: dark theme */
 .pm-case-page .pm-ps__details { background: transparent !important; padding: 28px !important; overflow: visible !important; }
 .pm-case-page .pm-ps__photo { background: rgba(255,255,255,0.04) !important; }
 .pm-case-page .pm-ps__meta-label { color: rgba(255,255,255,0.45) !important; }
 .pm-case-page .pm-ps__meta-value { color: rgba(255,255,255,0.88) !important; }
 .pm-case-page .pm-ps__sec-label { color: var(--pink) !important; }
 .pm-case-page .pm-ps__sec p, .pm-case-page .pm-ps__sec li { color: rgba(255,255,255,0.72) !important; }
 .pm-case-page .pm-ps__bar-track { background: rgba(255,255,255,0.10) !important; }
 .pm-case-page .pm-ps__bar-fill { background: var(--pink) !important; }

/* Personas on laptop/desktop: one complete card must fit inside the viewport.
   Give the visual panel more room and tighten text rhythm without changing the
   carousel states or transitions. */
@media (min-width: 902px) {
    .pm-case-page .pm-ps__heading {
        margin-bottom: 20px !important;
    }

    .pm-case-page .pm-ps__title {
        font-size: clamp(40px, 2.8vw, 48px) !important;
        line-height: 1.02 !important;
    }

    .pm-case-page .pm-ps__title::after {
        margin-top: 16px !important;
    }

    .pm-case-page .pm-ps__intro {
        max-width: 720px !important;
        margin-top: 14px !important;
        font-size: 16px !important;
        line-height: 1.32 !important;
    }

    .pm-case-page .pm-ps__card,
    .pm-case-page .pm-ps__card.is-left,
    .pm-case-page .pm-ps__card.is-center,
    .pm-case-page .pm-ps__card.is-right {
        width: min(900px, calc(100vw - 128px)) !important;
        height: clamp(400px, calc(100vh - 228px), 470px) !important;
        overflow: hidden !important;
    }

    .pm-case-page .pm-ps__details {
        flex: 0 0 55% !important;
        padding: 16px 22px !important;
        overflow: hidden !important;
    }

    .pm-case-page .pm-ps__photo {
        flex: 0 0 45% !important;
        min-width: 0 !important;
    }

    .pm-case-page .pm-ps__photo img {
        object-position: center 22% !important;
    }

    .pm-case-page .pm-ps__meta {
        gap: 3px !important;
        margin-bottom: 9px !important;
    }

    .pm-case-page .pm-ps__sec {
        margin-bottom: 9px !important;
    }

    .pm-case-page .pm-ps__sec-label {
        margin-bottom: 4px !important;
    }

    .pm-case-page .pm-ps__sec p,
    .pm-case-page .pm-ps__sec li {
        font-size: 12px !important;
        line-height: 1.2 !important;
    }

    .pm-case-page .pm-ps__sec ul {
        padding-left: 24px !important;
    }

    .pm-case-page .pm-ps__sec li + li {
        margin-top: 1px !important;
    }

    .pm-case-page .pm-ps__info {
        margin-top: 9px !important;
        gap: 5px !important;
    }

    .pm-case-page .pm-ps__bar {
        gap: 4px !important;
    }

    .pm-case-page .pm-ps__caption {
        left: 8% !important;
        right: 6% !important;
        bottom: 5% !important;
        padding-top: 10% !important;
    }
}

 /* Key insights: approved section style */
 .pm-case-page .pm-ki {
    display: grid !important;
    grid-template-columns: minmax(420px, 0.82fr) minmax(0, 1.18fr) !important;
    column-gap: 96px !important;
    align-items: start !important;
    margin: 100px 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}
 .pm-case-page .pm-ki__quote,
 .pm-case-page .pm-ki__content {
    position: static !important;
    left: auto !important; top: auto !important;
    width: 100% !important; height: auto !important;
}
/* Quote: rectangular, compact — NO pink line inside */
 .pm-case-page .pm-ki__quote {
    max-width: 500px !important;
    margin: 0 !important;
    padding: 36px 42px 42px !important;
    border: 1px solid rgba(224, 0, 120, 0.5) !important;
    border-radius: 0 !important;
    background: linear-gradient(135deg, rgba(224,0,120,0.11), rgba(224,0,120,0.025)) !important;
    box-shadow: none !important;
    overflow: visible !important;
}
 .pm-case-page .pm-ki__quote::before {
    content: none !important;
    display: none !important;
}
 .pm-case-page .pm-ki__quote-text {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    font: 700 clamp(26px, 2vw, 32px)/1.32 var(--ff) !important;
    letter-spacing: -0.02em !important;
    color: #fff !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}
/* Title: section-heading, not hero */
 .pm-case-page .pm-ki__title {
    margin: 0 !important;
    max-width: 780px !important;
    font: 700 clamp(48px, 3.5vw, 62px)/1.02 var(--ff) !important;
    text-transform: uppercase !important;
    letter-spacing: -0.035em !important;
    color: #fff !important;
}
 .pm-case-page .pm-ki__title::after {
    content: "" !important; display: block !important;
    width: 140px !important; height: 3px !important;
    margin: 26px 0 0 !important; background: var(--pink) !important;
}
/* List: compact, uniform gap */
 .pm-case-page .pm-ki__list {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    margin: 42px 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
    max-width: 780px !important;
}
 .pm-case-page .pm-ki__item {
    position: relative !important;
    margin: 0 !important;
    padding: 0 0 0 28px !important;
    font: 400 18px/1.6 var(--ff) !important;
    color: rgba(255, 255, 255, 0.74) !important;
}
 .pm-case-page .pm-ki__item + .pm-ki__item { margin-top: 0 !important; }
 .pm-case-page .pm-ki__item::before {
    content: "" !important; position: absolute !important;
    left: 0 !important; top: 0.7em !important;
    width: 7px !important; height: 7px !important;
    border-radius: 50% !important; background: var(--pink) !important;
}
 .pm-case-page .pm-ki__item strong {
    font-weight: 700 !important;
    color: #fff !important;
}
/* Responsive */
@media (max-width: 1100px) {
    .pm-case-page .pm-ki {
        grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr) !important;
        column-gap: 64px !important;
    }
}
@media (max-width: 760px) {
    .pm-case-page .pm-ki {
        grid-template-columns: 1fr !important;
        row-gap: 56px !important;
    }
    .pm-case-page .pm-ki__quote { max-width: 100% !important; padding: 36px 28px !important; }
    .pm-case-page .pm-ki__quote-text { font-size: 26px !important; }
    .pm-case-page .pm-ki__list { margin-top: 40px !important; }
}

/* ═══ BRAND SYSTEM: clean approved design ═══ */
.pm-case-page .pm-br {
    padding: 0 !important;
    margin: 100px 0 0 !important;
}
/* Header: two-column grid */
.pm-case-page .pm-br__header {
    display: grid !important;
    grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr) !important;
    column-gap: 96px !important;
    align-items: end !important;
    width: 100% !important;
}
.pm-case-page .pm-br__heading {
    position: static !important;
    width: 100% !important;
    left: auto !important; top: auto !important;
}
.pm-case-page .pm-br__eyebrow {
    margin: 0 0 28px !important;
    font: 400 18px/1 var(--ff) !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: var(--pink) !important;
}
.pm-case-page .pm-br__title {
    margin: 0 !important;
    font: 700 clamp(52px, 4vw, 68px)/1 var(--ff) !important;
    letter-spacing: -0.035em !important;
    text-transform: uppercase !important;
    color: #fff !important;
}
.pm-case-page .pm-br__accent {
    display: block !important;
    width: 160px !important;
    height: 3px !important;
    margin: 28px 0 0 !important;
    background: var(--pink) !important;
}
.pm-case-page .pm-br__intro {
    max-width: 640px !important;
    margin: 0 0 4px !important;
    font-size: 18px !important;
    line-height: 1.65 !important;
    color: rgba(255, 255, 255, 0.72) !important;
}
/* Palette: mosaic grid */
.pm-case-page .pm-br__palette {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    grid-auto-rows: 92px !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 64px 0 0 !important;
    position: static !important;
    left: auto !important; top: auto !important;
    height: auto !important;
}
.pm-case-page .pm-br__swatch {
    position: relative !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    color: #fff !important;
    transition: border-color 180ms ease, filter 180ms ease !important;
    width: auto !important; height: auto !important;
    left: auto !important; top: auto !important;
}
.pm-case-page .pm-br__swatch:hover {
    border-color: rgba(224, 0, 120, 0.65) !important;
    filter: brightness(1.04) !important;
}
.pm-case-page .pm-br__swatch.is-light { color: #170d25 !important; }
.pm-case-page .pm-br__swatch.is-primary {
    grid-column: span 6 !important;
    grid-row: span 2 !important;
}
.pm-case-page .pm-br__swatch.is-wide {
    grid-column: span 12 !important;
}
.pm-case-page .pm-br__swatch:not(.is-primary):not(.is-wide) {
    grid-column: span 3 !important;
}
/* Swatch labels: name + hex stacked, positioned bottom-left */
.pm-case-page .pm-br__swatch-label {
    position: absolute !important;
    left: 20px !important;
    bottom: 18px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    margin: 0 !important;
    padding: 0 !important;
}
.pm-case-page .pm-br__swatch-name {
    font-size: 14px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    display: block !important;
}
.pm-case-page .pm-br__swatch-hex {
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 400 !important;
    opacity: 0.72 !important;
    display: block !important;
}
.pm-case-page .pm-br__swatch.is-primary .pm-br__swatch-name { font-size: 18px !important; }
.pm-case-page .pm-br__swatch.is-primary .pm-br__swatch-hex { font-size: 14px !important; }
/* Palette descriptions: 64px from palette, two equal columns */
.pm-case-page .pm-br__palette-desc {
    position: static !important;
    width: 100% !important;
    margin: 64px 0 0 !important;
    left: auto !important; top: auto !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 96px !important;
    row-gap: 0 !important;
    gap: 0 96px !important;
}
.pm-case-page .pm-br__pblock { min-width: 0 !important; margin: 0 !important; padding: 0 !important; }
.pm-case-page .pm-br__pblock h3 {
    margin: 0 0 24px !important;
    font: 700 20px/1.2 var(--ff) !important;
    letter-spacing: -0.01em !important;
    color: #fff !important;
}
.pm-case-page .pm-br__pblock p {
    max-width: 570px !important;
    margin: 0 !important;
    font-size: 18px !important;
    line-height: 1.65 !important;
    color: rgba(255,255,255,0.72) !important;
}
.pm-case-page .pm-br__pblock p + p { margin-top: 8px !important; }
/* Conclusion = summary block, 64px after columns */
.pm-case-page .pm-br__pconclusion {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: 220px minmax(0, 1fr) !important;
    column-gap: 48px !important;
    align-items: start !important;
    margin: 64px 0 0 !important;
    padding-top: 32px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    position: static !important;
    transform: none !important;
    font-size: 20px !important;
    line-height: 1.55 !important;
    color: rgba(255,255,255,0.78) !important;
}
.pm-case-page .pm-br__pconclusion::before {
    content: "PALETTE PRINCIPLE" !important;
    font: 700 13px/1.2 var(--ff) !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--pink) !important;
}
/* Logo zone: two-column grid */
.pm-case-page .pm-br__logo-zone {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    column-gap: 96px !important;
    align-items: start !important;
    margin: 64px 0 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    position: static !important;
    left: auto !important; top: auto !important;
    z-index: auto !important;
}
.pm-case-page .pm-br__logo-stage {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 48px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    background: linear-gradient(135deg, rgba(255,255,255,0.018), rgba(224,0,120,0.025)) !important;
    width: 100% !important;
    height: 460px !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    position: static !important;
    left: auto !important; top: auto !important;
}
.pm-case-page .pm-br__logo-image {
    display: block !important;
    width: 78% !important;
    max-width: 520px !important;
    max-height: 240px !important;
    height: auto !important;
    object-fit: contain !important;
    margin: 0 !important;
}
.pm-case-page .pm-br__logo-content {
    width: 100% !important;
    max-width: none !important;
    position: static !important;
    left: auto !important; top: auto !important;
}
.pm-case-page .pm-br__logo-eyebrow {
    margin: 0 0 28px !important;
    font: 400 17px/1 var(--ff) !important;
    letter-spacing: 0.17em !important;
    text-transform: uppercase !important;
    color: var(--pink) !important;
}
.pm-case-page .pm-br__logo-title {
    margin: 0 !important;
    max-width: 720px !important;
    font: 700 clamp(50px, 3.6vw, 64px)/1 var(--ff) !important;
    letter-spacing: -0.04em !important;
    text-transform: uppercase !important;
    color: #fff !important;
}
.pm-case-page .pm-br__logo-accent {
    display: block !important;
    width: 140px !important;
    height: 3px !important;
    margin: 28px 0 0 !important;
    background: var(--pink) !important;
}
.pm-case-page .pm-br__logo-desc {
    max-width: 640px !important;
    margin: 34px 0 0 !important;
    position: static !important;
    left: auto !important; top: auto !important;
    width: auto !important;
}
.pm-case-page .pm-br__logo-desc p {
    margin: 0 !important;
    font: 400 17px/1.65 var(--ff) !important;
    color: rgba(255,255,255,0.72) !important;
}
.pm-case-page .pm-br__logo-desc p + p { margin-top: 28px !important; }

/* ═══ TYPOGRAPHY: pm-br-typo (new unique classes, no old CSS conflicts) ═══ */
.pm-br-typo {
    width: 100%;
    margin: 72px 0 0;
    padding: 0;
    position: relative;
    height: auto;
    min-height: 0;
    overflow: visible;
    background: transparent;
}
.pm-br-typo__header {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
    column-gap: 72px;
    align-items: end;
    width: 100%;
    margin: 0;
    padding: 0;
}
.pm-br-typo__eyebrow {
    margin: 0 0 20px;
    font: 400 16px/1 var(--ff);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--pink);
}
.pm-br-typo__title {
    margin: 0;
    font: 700 clamp(48px, 4.2vw, 64px)/0.96 var(--ff);
    letter-spacing: -0.045em;
    text-transform: uppercase;
    color: #fff;
}
.pm-br-typo__accent {
    width: 136px;
    height: 3px;
    margin: 20px 0 0;
    background: var(--pink);
}
.pm-br-typo__intro {
    width: 100%;
    max-width: 640px;
    margin: 0 0 3px;
    font-size: 16px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.72);
}
.pm-br-typo__showcase {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(400px, 0.9fr);
    column-gap: 24px;
    align-items: stretch;
    width: 100%;
    margin: 32px 0 0;
}
/* Specimen panel */
.pm-br-typo__specimen {
    display: flex;
    flex-direction: column;
    min-height: 440px;
    padding: 34px 40px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: linear-gradient(135deg, rgba(224, 0, 120, 0.09), rgba(255, 255, 255, 0.012));
    overflow: hidden;
}
.pm-br-typo__specimen-label {
    font: 700 13px/1 var(--ff);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pink);
}
.pm-br-typo__letters {
    margin: 32px 0 0;
    font: 700 clamp(108px, 9.5vw, 152px)/0.78 var(--ff);
    letter-spacing: -0.08em;
    color: #fff;
}
.pm-br-typo__alphabet {
    margin-top: auto;
    padding-top: 36px;
    font: 400 14px/1.55 var(--ff);
    letter-spacing: 0.055em;
    color: rgba(255, 255, 255, 0.66);
}
/* System panel */
.pm-br-typo__system {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 0 28px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.012);
}
.pm-br-typo__weights {
    display: flex;
    flex-direction: column;
}
.pm-br-typo__weight {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    column-gap: 24px;
    align-items: center;
    min-height: 56px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.pm-br-typo__weight-name {
    font: 700 11px/1 var(--ff);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.52);
}
.pm-br-typo__weight-example {
    font: clamp(25px, 2vw, 34px)/1 var(--ff);
    color: #fff;
    white-space: nowrap;
}
.pm-br-typo__weight-example.is-light { font-weight: 300; }
.pm-br-typo__weight-example.is-regular { font-weight: 400; }
.pm-br-typo__weight-example.is-medium { font-weight: 500; }
.pm-br-typo__weight-example.is-semibold { font-weight: 600; }
.pm-br-typo__weight-example.is-bold { font-weight: 700; }
/* Usage */
.pm-br-typo__usage {
    margin-top: 14px;
    padding: 16px 0 18px;
}
.pm-br-typo__usage::before {
    content: "";
    display: block;
    width: 100px;
    height: 3px;
    margin: 0 0 12px;
    background: var(--pink);
}
.pm-br-typo__usage-label {
    margin: 0 0 10px;
    font: 700 11px/1 var(--ff);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
}
.pm-br-typo__usage p {
    max-width: 500px;
    margin: 0;
    font: 400 13.5px/1.45 var(--ff);
    color: rgba(255, 255, 255, 0.7);
}
/* Responsive */
@media (max-width: 1000px) {
    .pm-br-typo__header { grid-template-columns: 1fr; row-gap: 32px; }
    .pm-br-typo__showcase { grid-template-columns: 1fr; row-gap: 24px; }
}
@media (max-width: 640px) {
    .pm-br-typo__specimen { min-height: 320px; padding: 28px; }
    .pm-br-typo__system { padding: 0 20px; }
    .pm-br-typo__weight { grid-template-columns: 90px minmax(0, 1fr); }
    .pm-br-typo__weight-example { font-size: 24px; }
}

/* Responsive (brand mobile) */
@media (max-width: 1000px) {
    .pm-case-page .pm-br__header { grid-template-columns: 1fr !important; row-gap: 36px !important; }
    .pm-case-page .pm-br__palette { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
    .pm-case-page .pm-br__swatch.is-primary { grid-column: span 6 !important; }
    .pm-case-page .pm-br__swatch:not(.is-primary):not(.is-wide) { grid-column: span 3 !important; }
    .pm-case-page .pm-br__swatch.is-wide { grid-column: span 6 !important; }
    .pm-case-page .pm-br__logo-zone { grid-template-columns: 1fr !important; row-gap: 32px !important; }
}
@media (max-width: 640px) {
    .pm-case-page .pm-br__palette { grid-template-columns: 1fr !important; grid-auto-rows: 110px !important; }
    .pm-case-page .pm-br__swatch,
    .pm-case-page .pm-br__swatch.is-primary,
    .pm-case-page .pm-br__swatch.is-wide { grid-column: 1 !important; grid-row: auto !important; }
    .pm-case-page .pm-br__palette-desc { grid-template-columns: 1fr !important; }
}

/* ═══ USER FLOW: pm-uf2 (new unique classes, no base CSS conflicts) ═══ */
.pm-uf2 {
    width: 100%;
    margin: 100px 0 0;
    padding: 0;
    position: relative;
    height: auto;
    min-height: 0;
    overflow: visible;
}
/* CHALLENGE: two-column grid */
.pm-uf2__challenge {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    column-gap: clamp(40px, 4vw, 64px);
    align-items: start;
    width: 100%;
}
.pm-uf2__eyebrow {
    margin: 0 0 28px;
    font: 400 17px/1 var(--ff);
    letter-spacing: 0.17em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.68);
}
.pm-uf2__title {
    margin: 0;
    max-width: 560px;
    font: 700 clamp(54px, 4.1vw, 68px)/1.02 var(--ff);
    letter-spacing: -0.04em;
    text-transform: uppercase;
    color: #fff;
}
.pm-uf2__accent {
    display: block;
    width: 140px;
    height: 3px;
    margin: 30px 0 0;
    background: var(--pink);
}
.pm-uf2__lead {
    max-width: 500px;
    margin: 38px 0 0;
    font: 400 17px/1.7 var(--ff);
    color: rgba(255, 255, 255, 0.65);
}
/* Challenge items: right column — aligned with title, not eyebrow */
.pm-uf2__items {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 30px 0 0;
}
.pm-uf2__item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    column-gap: 18px;
    align-items: start;
    padding: 16px 0 17px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.pm-uf2__item:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.pm-uf2__item-num {
    margin: 3px 0 0;
    font: 700 14px/1 var(--ff);
    letter-spacing: 0.02em;
    color: var(--pink);
}
.pm-uf2__item-body {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    column-gap: clamp(16px, 1.7vw, 26px);
    align-items: start;
    min-width: 0;
}
.pm-uf2__item-problem {
    max-width: none;
    margin: 0;
    font: 700 16px/1.36 var(--ff);
    color: #fff;
}
.pm-uf2__item-solution {
    max-width: none;
    min-height: 100%;
    margin: 0;
    padding: 0 0 0 16px;
    border-left: 1px solid rgba(224, 0, 120, 0.38);
    font: 400 13.5px/1.48 var(--ff);
    color: rgba(255, 255, 255, 0.62);
}
/* JOURNEY section: 100px after challenge */
.pm-uf2__journey {
    margin: 100px 0 0;
    width: 100%;
}
.pm-uf2__journey-header {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
    column-gap: 96px;
    align-items: end;
    width: 100%;
}
/* JOURNEY: column grid with CSS connectors */
.pm-uf2__map {
    --uf2-col-gap: clamp(14px, 1.5vw, 28px);
    --uf2-row-gap: 24px;
    --uf2-line-color: rgba(255, 255, 255, 0.14);
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: repeat(3, auto);
    column-gap: var(--uf2-col-gap);
    row-gap: var(--uf2-row-gap);
    justify-content: center;
    width: 100%;
    max-width: 1280px;
    min-width: 0;
    margin: 64px auto 0;
    padding: 48px clamp(24px, 3vw, 52px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: repeating-linear-gradient(135deg, rgba(255,255,255,0.018) 0, rgba(255,255,255,0.018) 1px, transparent 1px, transparent 38px);
    overflow-x: hidden;
    isolation: isolate;
}
.pm-uf2__node {
    width: 100%;
    min-width: 0;
    min-height: 82px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px 14px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0;
    background: #151324;
    font: 600 13px/1.25 var(--ff);
    text-align: center;
    color: #fff;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
    overflow-wrap: anywhere;
}
.pm-uf2__node.is-primary {
    border-color: rgba(224, 0, 120, 0.7);
    background: rgba(224, 0, 120, 0.13);
}
/* Horizontal connector: from route card to next column */
.pm-uf2__hline {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: calc(100% + 1px);
    width: calc(var(--uf2-col-gap) - 2px);
    height: 1px;
    background: var(--uf2-line-color);
    transform: translateY(-50%);
    pointer-events: none;
}
/* Vertical connector: ONLY from upper card downward, starts after border */
.pm-uf2__vline {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: calc(100% + 1px);
    width: 1px;
    height: calc(var(--uf2-row-gap) - 2px);
    background: var(--uf2-line-color);
    transform: translateX(-50%);
    pointer-events: none;
}
.pm-uf2__node {
    width: 100%;
    min-height: 82px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 18px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 0;
    background: rgba(255, 255, 255, 0.035);
    font: 600 15px/1.25 var(--ff);
    text-align: center;
    color: #fff;
    box-sizing: border-box;
    position: relative;
}
.pm-uf2__node.is-primary {
    border-color: rgba(224, 0, 120, 0.7);
    background: rgba(224, 0, 120, 0.13);
}
/* Responsive */
@media (max-width: 1000px) {
    .pm-uf2__challenge { grid-template-columns: 1fr; row-gap: 48px; }
    .pm-uf2__journey-header { grid-template-columns: 1fr; row-gap: 32px; }
    .pm-uf2__map { overflow-x: auto; min-width: 900px; }
}
@media (max-width: 640px) {
    .pm-uf2__item { grid-template-columns: 50px minmax(0, 1fr); }
    .pm-uf2__item-body {
        grid-template-columns: 1fr;
        row-gap: 12px;
    }
    .pm-uf2__item-solution {
        min-height: 0;
        padding: 0 0 0 14px;
    }
    .pm-uf2__node { min-width: 140px; font-size: 12px; }
}

/* Case sections (screenshots, scope, highlight) */
.pm-case-page .pm-case-section { padding: 0 !important; }
.pm-case-page .pm-case-section + .pm-case-section { padding-top: clamp(64px, 6vw, 88px) !important; }
.pm-case-page .pm-case-highlight { padding: clamp(48px, 5vw, 72px) 0 !important; margin-top: 100px !important; }
.pm-case-page .pm-case-highlight:has(+ .pm-case-scope) {
    margin-top: clamp(48px, 4vw, 64px) !important;
    padding: clamp(32px, 3vw, 40px) 0 !important;
}
.pm-case-page .pm-case-highlight + .pm-case-scope {
    margin-top: clamp(24px, 2.4vw, 32px) !important;
}
.pm-case-page .pm-case-highlight + .pm-case-scope .pm-case-scope-head:empty {
    display: none !important;
    margin: 0 !important;
}
@media (min-width: 1001px) {
    /* Keep 100px of visible breathing room between the lower case-study blocks. */
    .pm-case-page > .pm-container > .pm-case-section + .pm-case-section {
        padding-top: 0 !important;
    }
    .pm-case-page > .pm-container > .pm-case-scope .pm-case-scope-head:empty {
        display: none !important;
        margin: 0 !important;
    }
    .pm-case-page > .pm-container > .pm-uf2:has(+ .pm-case-section--split),
    .pm-case-page > .pm-container > .pm-case-section--split:has(+ .pm-case-hero-screenshot),
    .pm-case-page > .pm-container > .pm-case-hero-screenshot:has(+ .pm-case-highlight),
    .pm-case-page > .pm-container > .pm-case-scope:has(+ .pm-case-hero-screenshot),
    .pm-case-page > .pm-container > .pm-case-hero-screenshot:has(+ .pm-case-hero-screenshot),
    .pm-case-page > .pm-container > .pm-case-hero-screenshot:has(+ .pm-case-section--split),
    .pm-case-page > .pm-container > .pm-case-section--split:has(+ .pm-case-highlight),
    .pm-case-page > .pm-container > .pm-case-hero-screenshot:has(+ .pm-case-scope),
    .pm-case-page > .pm-container > .pm-case-scope:has(+ .pm-case-highlight) {
        margin-bottom: 0 !important;
    }
    .pm-case-page > .pm-container > .pm-uf2:has(+ .pm-case-chapter + .pm-case-section--split),
    .pm-case-page > .pm-container > .pm-case-section--split:has(+ .pm-case-chapter + .pm-case-hero-screenshot),
    .pm-case-page > .pm-container > .pm-case-hero-screenshot:has(+ .pm-case-chapter + .pm-case-highlight),
    .pm-case-page > .pm-container > .pm-case-scope:has(+ .pm-case-chapter + .pm-case-hero-screenshot),
    .pm-case-page > .pm-container > .pm-case-hero-screenshot:has(+ .pm-case-chapter + .pm-case-section--split),
    .pm-case-page > .pm-container > .pm-case-highlight:has(+ .pm-case-chapter + .pm-case-hero-screenshot),
    .pm-case-page > .pm-container > .pm-case-hero-screenshot:has(+ .pm-case-chapter + .pm-case-scope) {
        margin-bottom: 0 !important;
    }
    .pm-case-page > .pm-container > .pm-uf2 + .pm-case-section--split {
        margin-top: 50px !important;
    }
    .pm-case-page > .pm-container > .pm-uf2 + .pm-case-chapter + .pm-case-section--split {
        margin-top: 50px !important;
    }
    .pm-case-page > .pm-container > .pm-case-section--split + .pm-case-hero-screenshot {
        margin-top: 99px !important;
    }
    .pm-case-page > .pm-container > .pm-case-section--split + .pm-case-chapter + .pm-case-hero-screenshot {
        margin-top: 77px !important;
    }
    .pm-case-page > .pm-container > .pm-case-hero-screenshot + .pm-case-highlight:has(+ .pm-case-scope) {
        margin-top: 42px !important;
    }
    .pm-case-page > .pm-container > .pm-case-hero-screenshot + .pm-case-chapter + .pm-case-highlight:has(+ .pm-case-scope) {
        margin-top: 19px !important;
    }
    .pm-case-page > .pm-container > .pm-case-highlight + .pm-case-scope {
        margin-top: 18px !important;
    }
    .pm-case-page > .pm-container > .pm-case-scope + .pm-case-hero-screenshot {
        margin-top: 59px !important;
    }
    .pm-case-page > .pm-container > .pm-case-scope + .pm-case-chapter + .pm-case-hero-screenshot {
        margin-top: 75px !important;
    }
    .pm-case-page > .pm-container > .pm-case-hero-screenshot + .pm-case-hero-screenshot {
        margin-top: 66px !important;
    }
    .pm-case-page > .pm-container > .pm-case-hero-screenshot + .pm-case-section--split {
        margin-top: 79px !important;
    }
    .pm-case-page > .pm-container > .pm-case-hero-screenshot + .pm-case-chapter + .pm-case-section--split {
        margin-top: 79px !important;
    }
    .pm-case-page > .pm-container > .pm-case-section--split + .pm-case-highlight {
        margin-top: 13px !important;
    }
    .pm-case-page > .pm-container > .pm-case-highlight + .pm-case-hero-screenshot {
        margin-top: 35px !important;
    }
    .pm-case-page > .pm-container > .pm-case-highlight + .pm-case-chapter + .pm-case-hero-screenshot {
        margin-top: 35px !important;
    }
    .pm-case-page > .pm-container > .pm-case-hero-screenshot + .pm-case-scope {
        margin-top: 40px !important;
    }
    .pm-case-page > .pm-container > .pm-case-hero-screenshot + .pm-case-chapter + .pm-case-scope {
        margin-top: 14px !important;
    }
    .pm-case-page > .pm-container > .pm-case-scope + .pm-case-highlight {
        margin-top: 52px !important;
        padding-top: 0 !important;
    }
}
.pm-case-page .pm-case-highlight h2 {
    font: 700 clamp(44px, 4vw, 64px)/1 var(--ff) !important;
    letter-spacing: -0.025em !important;
    color: var(--white) !important;
    max-width: 720px !important;
}
.pm-case-page .pm-case-highlight p {
    font-size: clamp(16px, 1.2vw, 18px) !important;
    line-height: 1.65 !important;
    color: rgba(255,255,255,0.72) !important;
    max-width: 680px !important;
    margin: 24px 0 0 !important;
}

/* Typography unification */
.pm-case-page :is(.pm-case-highlight p, .pm-detail-content p, .pm-case-copy p) {
    color: rgba(255, 255, 255, 0.72) !important;
    font-size: clamp(16px, 1.2vw, 18px) !important;
    line-height: 1.65 !important;
}
.pm-case-page :is(.pm-case-highlight h2, .pm-case-title) {
    color: var(--white) !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em !important;
}

/* Case screenshot sections */
.pm-case-page .pm-case-hero-screenshot {
    display: grid !important;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr) !important;
    column-gap: clamp(48px, 5vw, 80px) !important;
    align-items: center !important;
}
.pm-case-page .pm-case-hero-screenshot-text { max-width: 620px !important; }
.pm-case-page .pm-case-hero-screenshot-text .pm-case-title {
    font-size: clamp(36px, 3vw, 52px) !important;
    line-height: 1.05 !important;
    margin: 0 0 20px !important;
}
@media (max-width: 900px) {
    .pm-case-page .pm-case-hero-screenshot { grid-template-columns: 1fr !important; row-gap: 32px !important; }
}

/* Impact case: keep the first execution screenshot connected to the
   user-flow block above. The generic 100px case rhythm and centered media
   created a large empty pocket before/inside THE CHALLENGE. */
@media (min-width: 901px) {
    .pm-case-page .pm-uf2 + .pm-case-chapter + .pm-case-hero-screenshot {
        margin-top: clamp(44px, 4vw, 56px) !important;
        align-items: start !important;
    }

    .pm-case-page .pm-uf2 + .pm-case-chapter + .pm-case-hero-screenshot .pm-case-hero-screenshot-img {
        margin-top: 34px !important;
    }
}

/* Impact Hypnotherapy — one visual rhythm from THE CHALLENGE to the CTA.
   Scope by the case-specific mobile media so no other portfolio page is
   changed while its content is being edited in parallel. */
.pm-case-page:has(img[alt="Impact Hypnotherapy mobile experience"])
    .pm-uf2 + .pm-case-chapter + .pm-case-hero-screenshot {
    margin-bottom: 0 !important;
}

.pm-case-page:has(img[alt="Impact Hypnotherapy mobile experience"])
    .pm-uf2 + .pm-case-chapter + .pm-case-hero-screenshot ~ .pm-case-section {
    margin-top: clamp(64px, 5vw, 76px) !important;
    margin-bottom: 0 !important;
    padding-block: 0 !important;
}

.pm-case-page:has(img[alt="Impact Hypnotherapy mobile experience"])
    .pm-uf2 + .pm-case-chapter + .pm-case-hero-screenshot ~ .pm-case-highlight {
    width: 100% !important;
    max-width: none !important;
    margin-top: clamp(64px, 5vw, 76px) !important;
    margin-bottom: 0 !important;
    padding: clamp(42px, 4vw, 56px) clamp(30px, 3.5vw, 48px) !important;
    box-sizing: border-box !important;
    border-block: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(110deg, rgba(202, 2, 116, 0.08), transparent 46%),
        rgba(255, 255, 255, 0.018);
}

/* Screenshot chapters: align media with the title, keep the hierarchy
   editorial, and remove the compounded 100px margin + 86px padding. */
.pm-case-page:has(img[alt="Impact Hypnotherapy mobile experience"])
    .pm-uf2 + .pm-case-chapter + .pm-case-hero-screenshot ~ .pm-case-hero-screenshot {
    align-items: start !important;
}

.pm-case-page:has(img[alt="Impact Hypnotherapy mobile experience"])
    .pm-case-hero-screenshot-text > p:first-child {
    margin: 0 0 16px !important;
    color: var(--pink) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
}

.pm-case-page:has(img[alt="Impact Hypnotherapy mobile experience"])
    .pm-case-hero-screenshot-text .pm-case-title {
    max-width: 560px !important;
    margin-bottom: 22px !important;
    font-size: clamp(34px, 2.8vw, 44px) !important;
    line-height: 1.04 !important;
}

.pm-case-page:has(img[alt="Impact Hypnotherapy mobile experience"])
    .pm-case-hero-screenshot .pm-case-hero-screenshot-img {
    align-self: start !important;
    margin-top: 32px !important;
}

/* The tall mobile capture previously had a zero-height progressive wrapper:
   the 1141px image escaped the section and collided with the next blocks. */
.pm-case-page:has(img[alt="Impact Hypnotherapy mobile experience"])
    .pm-case-hero-screenshot.is-mobile .pm-case-hero-screenshot-img {
    display: grid !important;
    min-height: 560px !important;
    padding: 22px !important;
    place-items: center !important;
    box-sizing: border-box !important;
    background: rgba(255, 255, 255, 0.025) !important;
}

.pm-case-page:has(img[alt="Impact Hypnotherapy mobile experience"])
    .pm-case-hero-screenshot.is-mobile .pm-progressive-image {
    display: flex !important;
    width: 100% !important;
    height: 514px !important;
    justify-content: center !important;
    overflow: visible !important;
}

.pm-case-page:has(img[alt="Impact Hypnotherapy mobile experience"])
    .pm-case-hero-screenshot.is-mobile .pm-progressive-image > img {
    position: static !important;
    width: auto !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: contain !important;
}

/* A split block without a label must not reserve an empty left column. */
.pm-case-page:has(img[alt="Impact Hypnotherapy mobile experience"])
    .pm-case-section--split:has(.pm-case-section-head:empty) {
    display: block !important;
}

.pm-case-page:has(img[alt="Impact Hypnotherapy mobile experience"])
    .pm-case-section--split:has(.pm-case-section-head:empty) .pm-case-section-head {
    display: none !important;
}

.pm-case-page:has(img[alt="Impact Hypnotherapy mobile experience"])
    .pm-case-section--split:has(.pm-case-section-head:empty) .pm-case-section-body {
    max-width: 820px !important;
}

/* Highlights are horizontal editorial bands, not narrow floating cards. */
.pm-case-page:has(img[alt="Impact Hypnotherapy mobile experience"])
    .pm-case-highlight h2 {
    max-width: 820px !important;
    margin: 0 !important;
    font-size: clamp(38px, 3.6vw, 52px) !important;
    line-height: 1.02 !important;
}

.pm-case-page:has(img[alt="Impact Hypnotherapy mobile experience"])
    .pm-case-highlight p {
    margin-top: 20px !important;
}

.pm-case-page:has(img[alt="Impact Hypnotherapy mobile experience"])
    .pm-case-highlight .pm-case-highlight-number {
    margin: 0 0 16px !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.16em !important;
}

/* Scope and deliverable grids: compact enough to scan without turning every
   short item into an oversized card. */
.pm-case-page:has(img[alt="Impact Hypnotherapy mobile experience"])
    .pm-case-scope-grid {
    gap: 16px !important;
}

.pm-case-page:has(img[alt="Impact Hypnotherapy mobile experience"])
    .pm-scope-card {
    min-height: 210px !important;
    padding: 28px 26px !important;
    gap: 10px !important;
    border-radius: 0 !important;
}

.pm-case-page:has(img[alt="Impact Hypnotherapy mobile experience"])
    .pm-scope-num {
    height: auto !important;
    margin: 0 0 4px !important;
    line-height: 1.1 !important;
}

.pm-case-page:has(img[alt="Impact Hypnotherapy mobile experience"])
    .pm-scope-title {
    font-size: clamp(17px, 1.35vw, 20px) !important;
    line-height: 1.18 !important;
}

.pm-case-page:has(img[alt="Impact Hypnotherapy mobile experience"])
    .pm-scope-card:has(.pm-scope-desc:empty) {
    min-height: 132px !important;
    justify-content: flex-start !important;
}

.pm-case-page:has(img[alt="Impact Hypnotherapy mobile experience"])
    .pm-scope-card:has(.pm-scope-desc:empty) .pm-scope-desc {
    display: none !important;
}

.pm-case-page:has(img[alt="Impact Hypnotherapy mobile experience"])
    .pm-case-highlight .pm-case-cta {
    margin-top: 8px !important;
}

@media (max-width: 900px) {
    .pm-case-page:has(img[alt="Impact Hypnotherapy mobile experience"])
        .pm-uf2 + .pm-case-chapter + .pm-case-hero-screenshot,
    .pm-case-page:has(img[alt="Impact Hypnotherapy mobile experience"])
        .pm-uf2 + .pm-case-chapter + .pm-case-hero-screenshot ~ .pm-case-section,
    .pm-case-page:has(img[alt="Impact Hypnotherapy mobile experience"])
        .pm-uf2 + .pm-case-chapter + .pm-case-hero-screenshot ~ .pm-case-highlight {
        margin-top: 52px !important;
    }

    .pm-case-page:has(img[alt="Impact Hypnotherapy mobile experience"])
        .pm-case-hero-screenshot .pm-case-hero-screenshot-img {
        margin-top: 0 !important;
    }

    .pm-case-page:has(img[alt="Impact Hypnotherapy mobile experience"])
        .pm-case-hero-screenshot-text .pm-case-title {
        font-size: clamp(28px, 7vw, 32px) !important;
        line-height: 1.04 !important;
        overflow-wrap: normal !important;
    }

    .pm-case-page:has(img[alt="Impact Hypnotherapy mobile experience"])
        .pm-case-hero-screenshot.is-mobile .pm-case-hero-screenshot-img {
        min-height: 0 !important;
        padding: 16px !important;
    }

    .pm-case-page:has(img[alt="Impact Hypnotherapy mobile experience"])
        .pm-case-hero-screenshot.is-mobile .pm-progressive-image {
        height: min(126vw, 620px) !important;
    }

    .pm-case-page:has(img[alt="Impact Hypnotherapy mobile experience"])
        .pm-case-highlight {
        padding: 36px 22px !important;
    }

    .pm-case-page:has(img[alt="Impact Hypnotherapy mobile experience"])
        .pm-case-highlight h2 {
        font-size: clamp(30px, 8.5vw, 38px) !important;
    }

    .pm-case-page:has(img[alt="Impact Hypnotherapy mobile experience"])
        .pm-scope-card,
    .pm-case-page:has(img[alt="Impact Hypnotherapy mobile experience"])
        .pm-scope-card:has(.pm-scope-desc:empty) {
        min-height: 0 !important;
        padding: 24px 22px !important;
    }
}

/* Simple media blocks follow the same case-study rhythm even on pages with
   page-specific spacing overrides. Keep them inside the case container. */
.pm-case-page .pm-simple-block {
    width: 100% !important;
    max-width: none !important;
    margin: 100px 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.pm-case-page .pm-simple-block + .pm-simple-block,
.pm-case-page .pm-simple-block + .pm-case-highlight {
    margin-top: 100px !important;
}

@media (max-width: 760px) {
    .pm-case-page .pm-simple-block,
    .pm-case-page .pm-simple-block + .pm-simple-block,
    .pm-case-page .pm-simple-block + .pm-case-highlight {
        margin-top: 64px !important;
        margin-bottom: 64px !important;
    }
}