/* Reuse Web trends typography and grid. Only approved additions are styled here. */
.portfolio-bbs-concept {
    overflow: hidden;
}
.portfolio-bbs-concept .project-title-row {
    height: auto;
    min-height: 400px;
    padding-top: 50px;
    padding-bottom: 50px;
}
.portfolio-bbs-concept .project-summary {
    word-break: keep-all;
    overflow-wrap: break-word;
}
.portfolio-bbs-concept .project-hero {
    overflow: hidden;
    background-size: cover;
    background-position: center;
}
.portfolio-bbs-concept .project-hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    pointer-events: none;
}
.portfolio-bbs-concept .project-hero-brand {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
    pointer-events: none;
}
.portfolio-bbs-concept .project-hero-brand-surface {
    width: min(520px, 72vw);
    max-width: calc(var(--project-logo-width, 436px) + 84px);
    padding: 34px 42px;
    border-radius: 4px;
    background: transparent;
}
.portfolio-bbs-concept .project-hero-brand img {
    display: block;
    width: 100%;
    max-width: var(--project-logo-width, 436px);
    margin-inline: auto;
    height: 110px;
    object-fit: contain;
}
/* Shadow follows the transparent logo contour, never its rectangular wrapper. */
.portfolio-bbs-concept .project-hero-brand img.project-hero-logo-shadow--dark {
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.8)) drop-shadow(0 0 8px rgba(0,0,0,.65));
}
.portfolio-bbs-concept .project-hero-brand img.project-hero-logo-shadow--light {
    filter: drop-shadow(0 0 2px rgba(255,255,255,.95)) drop-shadow(0 1px 7px rgba(255,255,255,.85));
}
@media (max-width: 767px) {
    .portfolio-bbs-concept .project-hero-brand-surface { padding: 22px 26px; max-width: calc(var(--project-logo-width, 436px) + 52px); }
    .portfolio-bbs-concept .project-hero-brand img { height: 66px; }
}
.portfolio-bbs-concept .project-hero-wordmark {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    color: #fff;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: clamp(42px, 13vw, 210px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.045em;
    text-align: center;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .25);
    pointer-events: none;
}
/* Match the shared desktop motion breakpoint. Clip the fixed video to its hero.
   Keep transform animations off this element and its ancestors: they would
   turn the viewport-fixed video into a locally positioned layer. */
@media (min-width: 1200px) {
    .portfolio-bbs-concept .project-hero--video {
        clip-path: inset(0 round 6px);
    }
    .portfolio-bbs-concept .project-hero-video {
        position: fixed;
        height: 100vh;
    }
    .portfolio-bbs-concept .project-hero--image {
        background-attachment: fixed;
    }
}
.portfolio-bbs-concept .project-site-url {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.portfolio-bbs-concept .project-site-url a {
    overflow-wrap: anywhere;
}
.portfolio-bbs-concept .project-review-copy h2 {
    font: inherit;
    font-weight: 700;
    letter-spacing: normal;
    margin: 0 0 10px;
}
.portfolio-bbs-concept .project-review-copy p {
    margin: 0;
}
.portfolio-bbs-concept .project-language-section,
.portfolio-bbs-concept .project-included-site { margin-bottom: 90px; padding: 0; }
.portfolio-bbs-concept .project-module-title { font-size: clamp(26px, 3vw, 38px); font-weight: 600; letter-spacing: -1px; line-height: 1.4; margin: 0 0 30px; color: #202020; }
.portfolio-bbs-concept .project-language-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
.portfolio-bbs-concept .project-language-grid figure { margin: 0; min-width: 0; }
.portfolio-bbs-concept .project-language-grid figcaption { font-size: 17px; font-weight: 600; color: #202020; margin-bottom: 16px; }
.portfolio-bbs-concept .project-language-grid img { display: block; width: 100%; height: auto; border-radius: 6px; }
.portfolio-bbs-concept .project-included-site { padding-top: 70px; border-top: 1px solid #ddd; }
.portfolio-bbs-concept .project-work-type { font-size: 16px; font-weight: 600; color: #202020; margin: 0 0 12px; }
.portfolio-bbs-concept .project-included-heading .project-module-title { margin-bottom: 18px; }
.portfolio-bbs-concept .project-included-review { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 50px; margin: 40px 0 55px; }
.portfolio-bbs-concept .project-included-review h3 { font: inherit; font-weight: 700; letter-spacing: normal; margin: 0 0 10px; color: #202020; }
.portfolio-bbs-concept .project-included-review .project-review-part { margin-top: 0; }
@media (max-width: 767px) {
    .portfolio-bbs-concept .project-language-grid,
    .portfolio-bbs-concept .project-included-review { grid-template-columns: 1fr; gap: 30px; }
    .portfolio-bbs-concept .project-included-site { padding-top: 45px; }
    .portfolio-bbs-concept .project-language-section,
    .portfolio-bbs-concept .project-included-site { margin-bottom: 55px; }
    .portfolio-bbs-concept .project-included-heading .project-site-url { margin-bottom: 0; }
}
.portfolio-bbs-concept .project-review-part + .project-review-part {
    margin-top: 20px;
}
.portfolio-bbs-concept .project-capture-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 375px;
    gap: 75px;
    align-items: stretch;
}
.portfolio-bbs-concept .project-capture-grid--desktop-only {
    grid-template-columns: minmax(0, 1fr);
    max-width: 1000px;
    margin-inline: auto;
}
.portfolio-bbs-concept .project-capture-column figure {
    margin: 0;
}
.portfolio-bbs-concept .project-capture-column img {
    display: block;
    width: 100%;
    height: auto;
}
.portfolio-bbs-concept .project-capture-mobile {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.portfolio-bbs-concept .project-capture-mobile figure {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.portfolio-bbs-concept .project-capture-mobile img {
    position: absolute;
    top: 0;
    left: 0;
}
.portfolio-bbs-concept .project-cta-banner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 40px;
    background: #000;
    padding: 52px 48px;
}
.portfolio-bbs-concept .project-cta-copy h2 {
    color: #fff;
    font-size: clamp(26px, 2.4vw, 36px);
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: -1px;
    margin: 0 0 18px;
    word-break: keep-all;
}
.portfolio-bbs-concept .project-cta-copy p {
    color: rgba(255, 255, 255, .8);
    font-size: 17px;
    line-height: 1.8;
    margin: 0;
    max-width: 620px;
    word-break: keep-all;
}
.portfolio-bbs-concept .project-cta-action {
    text-align: center;
}
.portfolio-bbs-concept .project-cta-action a {
    white-space: nowrap;
    font-weight: 600;
}
.portfolio-bbs-concept .project-cta-action p {
    color: rgba(255, 255, 255, .8);
    font-size: 13px;
    line-height: 1.6;
    margin: 14px 0 0;
}
@media (max-width: 991px) {
    /* The shared mobile CSS removes top-space-margin: keep copy below the header. */
    .portfolio-bbs-concept .project-title-section {
        padding-top: 82px !important;
    }
    .portfolio-bbs-concept .project-title-row {
        min-height: 0;
        padding-top: 32px;
        padding-bottom: 48px;
    }
    .portfolio-bbs-concept .project-cta-banner {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 36px 28px;
    }
    .portfolio-bbs-concept .project-cta-action {
        text-align: left;
    }
}
@media (max-width: 1199px) {
    .portfolio-bbs-concept .project-capture-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .portfolio-bbs-concept .project-capture-mobile {
        width: min(100%, 375px);
        margin: 0 auto;
        display: block;
    }
    .portfolio-bbs-concept .project-capture-mobile figure {
        aspect-ratio: var(--project-pc-aspect);
    }
}
@media (max-width: 767px) {
    .portfolio-bbs-concept #project-title.project-title--long {
        font-size: clamp(28px, 8.2vw, 40px);
        line-height: 1.25;
        letter-spacing: -1px;
        word-break: keep-all;
        overflow-wrap: anywhere;
        text-wrap: balance;
    }
    .portfolio-bbs-concept .project-site-url {
        margin-top: 0 !important;
        margin-bottom: 30px;
    }
    .portfolio-bbs-concept .project-cta-action a {
        display: block;
        text-align: center;
    }
}
@media (prefers-reduced-motion: reduce) {
    .portfolio-bbs-concept [data-anime],
    .portfolio-bbs-concept [data-top-bottom] {
        opacity: 1 !important;
        transform: none !important;
    }
    .portfolio-bbs-concept .project-hero-video {
        display: none;
    }
    .portfolio-bbs-concept .project-hero {
        background-attachment: scroll !important;
        background-position: center !important;
    }
}