/* 
Theme Name: ROWE FC 1.0
Author: Rowe Facade
Version: 1.0
Text Domain: rowefc
*/

/* ================================
   DESIGN SYSTEM / BASE
================================ */
:root {
    --primary: #0f1c2c;
    --accent: #1e40af;
    --bg: #ffffff;
    --light: #f5f7fa;
    --text: #111827;
    --muted: #6b7280;
    --border: #e5e7eb;
    --container: 1180px;
    --radius: 18px;
    --shadow: 0 20px 40px rgba(0,0,0,0.06);
    /* Header */
    --brand-ink: #0f1c2c;
    --brand-line: #d7dde6;
    --brand-bg: rgba(255,255,255,0.92);
    --brand-hover: rgba(11,31,58,0.06);
    /* Shared UI control sizing (tabs / filters / search) */
    --control-h: 44px;
    --header-h: 78px;
    --font-sans: 'Urbanist', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
}

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    ;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
}

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

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

p {
    margin: 0 0 12px;
}

/* Screen-reader only utility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
}

.section {
    padding: 0;
}

/* ================================
   HOME HERO (Front Page)
   - Full width image + text overlay
================================ */
.home-hero {
    position: relative;
    width: 100%;
    height: 100vh; /* Default */
    height: 100svh; /* Mobile address bar support (given priority in supported browsers) */
    min-height: 560px; /* Prevents the element from being too small (adjust/delete if desired) */
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #0b1f3a;
}

.home-hero-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

    .home-hero-media picture,
    .home-hero-media img {
        width: 100%;
        height: 100%;
        display: block;
    }

    .home-hero-media img {
        object-fit: cover;
        object-position: center;
    }

/* readability overlay */
.home-hero-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,0.68) 0%, rgba(0,0,0,0.42) 40%, rgba(0,0,0,0.18) 72%, rgba(0,0,0,0.06) 100%), linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.00) 35%, rgba(0,0,0,0.28) 100%);
    opacity: 0.95;
    pointer-events: none;
}

.home-hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.home-hero-title {
    width: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.home-hero-logo {
    display: block;
    margin: 0 auto;
    line-height: 0;
}

    .home-hero-logo img {
        display: block;
        margin: 0 auto;
        width: min(100%, clamp(350px, 48vw, 490px));
        height: auto;
    }

.home-hero-sub {
    display: none;
}

@media (max-width: 640px) {
    .home-hero-sub {
        display: none !important;
    }
}

/* Scroll cue (hero bottom center) */
.home-hero-scroll {
    position: absolute;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    z-index: 3;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    opacity: 0.92;
    cursor: pointer;
    transition: transform .18s ease, opacity .18s ease;
}

    .home-hero-scroll:hover {
        transform: translateX(-50%) translateY(-2px);
        opacity: 1;
    }

html {
    scroll-behavior: smooth;
}

/* subtle bounce */
@keyframes heroCueBounce {
    0%, 100% {
        transform: translateX(-50%) translateY(0);
    }

    50% {
        transform: translateX(-50%) translateY(-8px);
    }
}

@media (hover:hover) {
    .home-hero-scroll {
        animation: heroCueBounce 1.6s ease-in-out infinite;
    }
}

/* ================================
   HOME: ABOUT US
================================ */
.home-about {
    padding: clamp(64px, 7vw, 110px) 0;
    background: linear-gradient(180deg, rgba(245,247,250,0.72), rgba(255,255,255,0.0));
    border-top: 1px solid rgba(215,221,230,0.65);
}

.home-about-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(18px, 3vw, 44px);
    align-items: start;
}

.home-kicker {
    margin: 0 0 10px;
    font-size: 12px;
    letter-spacing: .14em;
    font-weight: 900;
    text-transform: uppercase;
    color: rgba(11,31,58,0.62);
}

.home-about-title {
    margin: 0 0 14px;
    font-size: clamp(28px, 3.2vw, 44px);
    line-height: 1.12;
    letter-spacing: -0.4px;
    color: var(--brand-ink);
    font-weight: 900;
}

.home-about-desc {
    margin: 0 0 16px;
    max-width: 60ch;
    color: rgba(11,31,58,0.78);
    font-weight: 500;
}

.home-about-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

    .home-about-list li {
        position: relative;
        padding-left: 18px;
        color: rgba(11,31,58,0.80);
        font-weight: 500;
        line-height: 1.55;
    }

        .home-about-list li::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0.62em;
            width: 8px;
            height: 8px;
            border-radius: 999px;
            background: rgba(30,64,175,0.28);
            box-shadow: 0 0 0 4px rgba(30,64,175,0.10);
        }

.home-about-actions {
    margin-top: 18px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.home-about-cards {
    display: grid;
    gap: 12px;
}

.about-card {
    border: 1px solid rgba(215,221,230,0.85);
    border-radius: 18px;
    background: rgba(255,255,255,0.88);
    box-shadow: var(--shadow);
    padding: 16px 16px;
    transition: transform .18s ease, box-shadow .18s ease;
}

    .about-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 22px 48px rgba(0,0,0,0.10);
    }

.about-card-title {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.2px;
    color: rgba(11,31,58,0.92);
}

.about-card-desc {
    margin: 0;
    color: rgba(11,31,58,0.72);
    font-weight: 500;
    line-height: 1.6;
}

@media (max-width: 900px) {
    .home-about-grid {
        grid-template-columns: 1fr;
    }
}

/* ================================
   HOME: SECTION HEAD (shared)
================================ */
.home-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.home-section-title {
    margin: 0 0 10px;
    font-size: clamp(26px, 3vw, 40px);
    line-height: 1.15;
    letter-spacing: -0.4px;
    color: var(--brand-ink);
    font-weight: 900;
}

.home-section-desc {
    margin: 0;
    max-width: 64ch;
    color: rgba(11,31,58,0.74);
    font-weight: 500;
}

.home-section-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

@media (max-width: 900px) {
    .home-section-head {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ================================
   HOME: LINE CARDS
================================ */
.home-linecards {
    padding-top: clamp(64px, 7vw, 110px);
}

.home-tile-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.home-tile {
    border: 1px solid rgba(215,221,230,0.85);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--shadow);
    padding: 16px 16px;
    transition: transform .18s ease, box-shadow .18s ease;
    position: relative;
    overflow: hidden;
}

    .home-tile::before {
        content: "";
        position: absolute;
        top: -40px;
        right: -40px;
        width: 140px;
        height: 140px;
        border-radius: 999px;
        background: rgba(30,64,175,0.10);
    }

    .home-tile:hover {
        transform: translateY(-3px);
        box-shadow: 0 22px 48px rgba(0,0,0,0.10);
    }

.home-tile-title {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: -0.2px;
    color: rgba(11,31,58,0.92);
}

.home-tile-desc {
    margin: 0;
    color: rgba(11,31,58,0.72);
    font-weight: 500;
    line-height: 1.6;
}

@media (max-width: 900px) {
    .home-tile-grid {
        grid-template-columns: 1fr;
    }
}

/* ================================
   LINE BUBBLES
========================= */

.rf-line-bubbles {
    --rf-blue: #075678;
    --rf-bg1: #eef4f6;
    --rf-bg2: #ffffff;
    --rf-bubble: 92px; /* base bubble diameter */
    --rf-shadow: 0 14px 30px rgba(0,0,0,.10);
    --rf-shadow-hover: 0 18px 40px rgba(0,0,0,.14);
    background: linear-gradient(0deg, var(--rf-bg1) 12%, #eef4f6 55%, var(--rf-bg2) 82%);
    padding-top: 20px;
}

.rf-line-bubbles__inner {
    margin: 0 auto;
    text-align: center;
}

/* Bubbles */
.rf-bubbles {
    position: relative;
    height: 350px; /* page height */
    width: 100%;
    overflow: hidden;
    border-radius: 24px;
}

    .rf-bubbles::before {
        /* subtle vignette */
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: radial-gradient(80% 70% at 50% 40%, rgba(255,255,255,.55), rgba(255,255,255,0) 65%), radial-gradient(80% 80% at 50% 120%, rgba(7,86,120,.10), rgba(7,86,120,0) 60%);
        z-index: 1;
    }

.rf-bubbles__viewport {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}

.rf-bubbles__track {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    will-change: transform;
    transform: translate3d(0,0,0);
}

.rf-bubble {
    position: absolute;
    width: var(--rf-bubble);
    height: var(--rf-bubble);
    border-radius: 9999px;
    background: rgba(255,255,255,.96);
    box-shadow: var(--rf-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    opacity: 0;
    transform: translate3d(0,0,0) scale(1);
    transition: opacity .5s ease, transform .25s ease, box-shadow .25s ease;
    z-index: 0;
    -webkit-tap-highlight-color: transparent;
}

    .rf-bubble img {
        width: 74%;
        height: 74%;
        object-fit: contain;
        filter: saturate(1.04);
    }

    .rf-bubble.is-ready {
        opacity: 1;
    }

    .rf-bubble:hover,
    .rf-bubble:focus-visible {
        box-shadow: var(--rf-shadow-hover);
        transform: translate3d(0,0,0) scale(var(--rf-scale, 1)) translateY(-2px);
        outline: none;
    }

/* Floating micro-motion (independent of track movement) */
@keyframes rfFloat {
    0% {
        transform: translate3d(0,0,0) scale(var(--rf-scale, 1)) translateY(0);
    }

    50% {
        transform: translate3d(0,0,0) scale(var(--rf-scale, 1)) translateY(-6px);
    }

    100% {
        transform: translate3d(0,0,0) scale(var(--rf-scale, 1)) translateY(0);
    }
}

.rf-bubble[data-float="1"] {
    animation: rfFloat 5.6s ease-in-out infinite;
}

.rf-bubble[data-float="2"] {
    animation: rfFloat 6.6s ease-in-out infinite;
}

.rf-bubble[data-float="3"] {
    animation: rfFloat 7.4s ease-in-out infinite;
}

/* Optional pause hint */
.rf-bubbles__hint {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 2;
    background: rgba(255,255,255,.62);
    border: 1px solid rgba(7,86,120,.10);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 12px;
    color: rgba(7,86,120,.85);
    display: none;
}

.rf-bubbles:hover .rf-bubbles__hint {
    display: inline-flex;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .rf-bubbles__track {
        transform: none !important;
    }

    .rf-bubble {
        animation: none !important;
    }
}

/* FIX: <picture> wrapper inside .rf-bubble (keeps original sizing) */
.rf-bubble picture {
    width: 74%;
    height: 74%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .rf-bubble picture img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
        filter: saturate(1.04);
    }

/* ================================
   HOME: PORTFOLIO
================================ */
.home-portfolio {
    padding: clamp(64px, 7vw, 110px) 0;
    background: linear-gradient(180deg, rgba(245,247,250,0.65), rgba(255,255,255,0));
    border-top: 1px solid rgba(215,221,230,0.65);
}

.home-portfolio-grid {
    gap: 18px; /* A little tighter on home */
}

.portfolio-single .container {
    padding-bottom: clamp(25px, 2.5vw, 50px);
}

/* ================================
   HOME: CONTACT CTA
================================ */
.home-contact {
    padding: clamp(56px, 6vw, 92px) 0;
    background: #1b2a3b;
    color: #fff;
}

.home-kicker--light {
    color: rgba(255,255,255,0.72);
}

.home-contact-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 22px;
    padding: clamp(18px, 3vw, 28px);
    background: rgba(255,255,255,0.06);
    box-shadow: 0 22px 54px rgba(0,0,0,0.18);
}

.home-contact-title {
    margin: 0 0 10px;
    font-size: clamp(24px, 3vw, 38px);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.4px;
}

.home-contact-desc {
    margin: 0;
    max-width: 62ch;
    color: rgba(255,255,255,0.82);
    font-weight: 300;
}

.home-contact-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.btn-ghost--light {
    background: transparent;
    color: rgba(255,255,255,0.92);
    border-color: rgba(255,255,255,0.30);
}

    .btn-ghost--light:hover {
        background: rgba(255,255,255,0.10);
    }

.label_sub {
    font-size: 12px;
}

/* CONTACT PAGE - Contacts + Social */

.contact-people {
    padding-top: 14px;
    border-top: 1px solid rgba(215,221,230,0.7);
}

.contact-people-list {
    margin-top: 10px;
    display: grid;
    gap: 10px;
}

.contact-person {
    border: 1px solid rgba(11,31,58,0.12);
    border-radius: 16px;
    padding: 12px;
    background: rgba(11,31,58,0.02);
}

/* Contact Page - Christopher profile image */
.contact-person-photo-wrap {
    margin: -12px -12px 12px;
    border-radius: 16px 16px 0 0;
    overflow: hidden;
    background: rgba(11,31,58,0.04);
}

    .contact-person-photo-wrap picture {
        display: block;
        width: 100%;
    }


.contact-person-photo {
    display: block;
    width: 100%;
    height: auto;
}

.contact-person-name {
    margin: 0;
    font-weight: 900;
    letter-spacing: -0.2px;
    color: rgba(11,31,58,0.92);
    font-size: 15px;
}

.contact-person-role {
    margin: 4px 0 10px;
    color: rgba(11,31,58,0.70);
    font-weight: 700;
    font-size: 13px;
}

.contact-person-dl {
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 6px 10px;
    font-size: 13px;
    margin: 5px;
}

    .contact-person-dl dt {
        color: rgba(11,31,58,0.62);
        font-weight: 700;
    }

    .contact-person-dl dd {
        margin: 0;
        color: rgba(11,31,58,0.86);
        font-weight: 500;
    }

/* Social links at the very bottom */
.contact-social {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(215,221,230,0.7);
}

.contact-social-links {
    margin-top: 10px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.social-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: var(--control-h);
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--brand-line);
    background: #fff;
    color: rgba(11,31,58,0.84);
    font-weight: 500;
    letter-spacing: -0.1px;
    transition: background .18s ease, transform .18s ease, border-color .18s ease;
}

    .social-link svg {
        width: 12px;
        height: 12px;
        fill: currentColor;
        opacity: .9;
    }

    .social-link:hover {
        background: var(--brand-hover);
        transform: translateY(-1px);
        border-color: rgba(11,31,58,0.22);
    }

    .social-link:focus-visible {
        outline: none;
        box-shadow: 0 0 0 4px rgba(30,64,175,0.12);
    }

.contact-social-empty {
    margin: 0;
    color: rgba(11,31,58,0.62);
    font-weight: 700;
    font-size: 12px;
}


@media (max-width: 900px) {
    .home-contact-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .home-contact-actions {
        justify-content: flex-start;
    }
}

/* Contact: Notice at Collection (below Follow) */
.contact-privacy-notice {
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 1.6;
    color: rgba(11,31,58,0.62);
    font-weight: 500;
}

    .contact-privacy-notice strong {
        color: rgba(11,31,58,0.78);
        font-weight: 900;
    }

.contact-privacy-note-sub {
    display: block;
    margin-top: 6px;
    color: rgba(11,31,58,0.56);
}


/* ================================
   BUTTONS (Front Page)
================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--control-h);
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid rgba(11,31,58,0.18);
    background: rgba(11,31,58,0.92);
    color: #fff;
    font-weight: 500;
    letter-spacing: -0.1px;
    box-shadow: 0 16px 30px rgba(11,31,58,0.18);
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}

    .btn:hover {
        transform: translateY(-1px);
        background: #071428;
        box-shadow: 0 18px 34px rgba(11,31,58,0.22);
    }

.btn-ghost {
    background: transparent;
    color: rgba(11,31,58,0.86);
    border-color: rgba(11,31,58,0.26);
    box-shadow: none;
}

    .btn-ghost:hover {
        background: rgba(11,31,58,0.06);
    }

.section-title {
    font-size: 34px;
    letter-spacing: -0.4px;
    margin: 0 0 10px;
    color: var(--brand-ink);
    /*padding-top: 50px*/
}

.section-desc {
    color: rgba(11,31,58,0.78);
    font-weight: 500;
}

/* ================================
   HEADER (Desktop + Mobile)
================================ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--brand-bg);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--brand-line);
    transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.header-inner {
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 900;
    letter-spacing: 0.6px;
    color: var(--brand-ink);
    white-space: nowrap;
    font-size: 18px;
}

.brand-logo {
    display: block;
    line-height: 0;
}

.brand-logo-image {
    display: block;
    height: 35px;
    width: auto;
}

.site-nav {
    margin-left: auto;
}

    .site-nav .menu {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        gap: 6px;
    }

        .site-nav .menu a {
            display: inline-flex;
            align-items: center;
            padding: 10px 14px;
            border-radius: 12px;
            font-weight: 700;
            letter-spacing: 0.2px;
            color: rgba(11,31,58,0.72);
            transition: background .18s ease, color .18s ease, transform .18s ease;
        }

            .site-nav .menu a:hover {
                background: var(--brand-hover);
                color: var(--brand-ink);
                transform: translateY(-1px);
            }

    /* Current page = hover state */
    .site-nav .current-menu-item > a,
    .site-nav .current_page_item > a {
        background: var(--brand-hover);
        color: var(--brand-ink);
        transform: translateY(-1px);
    }

        .site-nav .current-menu-item > a:hover,
        .site-nav .current_page_item > a:hover {
            background: var(--brand-hover);
            color: var(--brand-ink);
            transform: translateY(-1px);
        }

/* Mobile toggle */
.nav-toggle {
    display: none;
    appearance: none;
    border: 0;
    background: transparent;
    color: rgba(11,31,58,0.92);
    font-weight: 900;
    font-size: 22px;
    width: 44px;
    height: 44px;
    padding: 0;
    cursor: pointer;
    line-height: 1;
}

    .nav-toggle:hover {
        opacity: 0.9;
    }

    .nav-toggle:focus-visible {
        outline: none;
        border-radius: 12px;
        box-shadow: 0 0 0 4px rgba(30,64,175,0.18);
    }

@media (max-width: 900px) {
    .nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .site-nav {
        position: absolute;
        top: 78px;
        left: 0;
        right: 0;
        background: rgba(255,255,255,0.98);
        border-bottom: 1px solid var(--brand-line);
        display: none;
    }

        .site-nav.is-open {
            display: block;
        }

        /* Full-row highlight (not just the text box) */
        .site-nav .menu {
            flex-direction: column;
            align-items: stretch;
            gap: 0;
            padding: 0;
        }

            .site-nav .menu li + li {
                border-top: 1px solid rgba(215,221,230,0.65);
            }

            .site-nav .menu a {
                border-radius: 0;
                padding: 14px 22px;
                width: 100%;
                justify-content: flex-start;
                transform: none;
            }

                .site-nav .menu a:hover,
                .site-nav .menu a:focus-visible {
                    background: rgba(11,31,58,0.06);
                    transform: none;
                }

        .site-nav .current-menu-item > a,
        .site-nav .current_page_item > a {
            background: rgba(11,31,58,0.08);
            transform: none;
        }
}


/* ================================
   HOME: HEADER OVER HERO IMAGE
================================ */

/* Fixed header only on the main (front) page + made transparent (moved above the hero) */
/* Pages that use a full-width hero at the top */
.front-page .site-header,
.home .site-header,
.page-template-page-about-php .site-header,
.page-template-page-contact-php .site-header,
.page-template-page-linecard-php .site-header,
.page-template-page-portfolio-php .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    background: transparent;
    border-bottom-color: transparent;
    backdrop-filter: none;
    box-shadow: none;
}

/* Push the entire main page down to prevent the fixed header from covering the content below */
.front-page .site-main,
.home .site-main,
.page-template-page-about-php .site-main,
.page-template-page-contact-php .site-main,
.page-template-page-linecard-php .site-main,
.page-template-page-portfolio-php .site-main {
    padding-top: var(--header-h);
}

    /* Instead, pull only the first section (hero) up again to make the image "behind the header" */
    .front-page .site-main > :first-child,
    .home .site-main > :first-child,
    .page-template-page-about-php .site-main > :first-child,
    .page-template-page-contact-php .site-main > :first-child,
    .page-template-page-linecard-php .site-main > :first-child,
    .page-template-page-portfolio-php .site-main > :first-child {
        margin-top: calc(-1 * var(--header-h));
    }

.front-page .site-header:not(.is-solid) .brand,
.home .site-header:not(.is-solid) .brand,
.page-template-page-about-php .site-header:not(.is-solid) .brand,
.page-template-page-contact-php .site-header:not(.is-solid) .brand,
.page-template-page-linecard-php .site-header:not(.is-solid) .brand,
.page-template-page-portfolio-php .site-header:not(.is-solid) .brand {
    color: rgba(255,255,255,0.95);
}

.front-page .site-header:not(.is-solid) .nav-toggle,
.home .site-header:not(.is-solid) .nav-toggle,
.page-template-page-about-php .site-header:not(.is-solid) .nav-toggle,
.page-template-page-contact-php .site-header:not(.is-solid) .nav-toggle,
.page-template-page-linecard-php .site-header:not(.is-solid) .nav-toggle,
.page-template-page-portfolio-php .site-header:not(.is-solid) .nav-toggle {
    color: rgba(255,255,255,0.95);
}

.front-page .site-header:not(.is-solid) .site-nav .menu a,
.home .site-header:not(.is-solid) .site-nav .menu a,
.page-template-page-about-php .site-header:not(.is-solid) .site-nav .menu a,
.page-template-page-contact-php .site-header:not(.is-solid) .site-nav .menu a,
.page-template-page-linecard-php .site-header:not(.is-solid) .site-nav .menu a,
.page-template-page-portfolio-php .site-header:not(.is-solid) .site-nav .menu a {
    color: rgba(255,255,255,0.92);
    text-shadow: 0 1px 2px rgba(0,0,0,0.22);
}

/* If the logo is originally a dark (black) image, temporarily make it appear white */
.front-page .site-header:not(.is-solid) .brand img,
.home .site-header:not(.is-solid) .brand img,
.page-template-page-about-php .site-header:not(.is-solid) .brand img,
.page-template-page-contact-php .site-header:not(.is-solid) .brand img,
.page-template-page-linecard-php .site-header:not(.is-solid) .brand img,
.page-template-page-portfolio-php .site-header:not(.is-solid) .brand img {
    filter: brightness(0) invert(1);
}

/* hover (PC) / focus-within (keyboard accessibility) / menu-open (mobile menu open state) */
.front-page .site-header:hover,
.front-page .site-header:focus-within,
.front-page .site-header.menu-open,
.front-page .site-header.is-solid,
.home .site-header:hover,
.home .site-header:focus-within,
.home .site-header.menu-open,
.home .site-header.is-solid,
.page-template-page-about-php .site-header:hover,
.page-template-page-about-php .site-header:focus-within,
.page-template-page-about-php .site-header.menu-open,
.page-template-page-about-php .site-header.is-solid,
.page-template-page-contact-php .site-header:hover,
.page-template-page-contact-php .site-header:focus-within,
.page-template-page-contact-php .site-header.menu-open,
.page-template-page-contact-php .site-header.is-solid,
.page-template-page-linecard-php .site-header:hover,
.page-template-page-linecard-php .site-header:focus-within,
.page-template-page-linecard-php .site-header.menu-open,
.page-template-page-linecard-php .site-header.is-solid,
.page-template-page-portfolio-php .site-header:hover,
.page-template-page-portfolio-php .site-header:focus-within,
.page-template-page-portfolio-php .site-header.menu-open,
.page-template-page-portfolio-php .site-header.is-solid {
    background: var(--brand-bg);
    backdrop-filter: blur(10px);
    border-bottom-color: var(--brand-line);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

    .front-page .site-header:hover .nav-toggle,
    .front-page .site-header:focus-within .nav-toggle,
    .front-page .site-header.menu-open .nav-toggle,
    .front-page .site-header.is-solid .nav-toggle,
    .home .site-header:hover .nav-toggle,
    .home .site-header:focus-within .nav-toggle,
    .home .site-header.menu-open .nav-toggle,
    .home .site-header.is-solid .nav-toggle,
    .page-template-page-about-php .site-header:hover .nav-toggle,
    .page-template-page-about-php .site-header:focus-within .nav-toggle,
    .page-template-page-about-php .site-header.menu-open .nav-toggle,
    .page-template-page-about-php .site-header.is-solid .nav-toggle,
    .page-template-page-contact-php .site-header:hover .nav-toggle,
    .page-template-page-contact-php .site-header:focus-within .nav-toggle,
    .page-template-page-contact-php .site-header.menu-open .nav-toggle,
    .page-template-page-contact-php .site-header.is-solid .nav-toggle,
    .page-template-page-linecard-php .site-header:hover .nav-toggle,
    .page-template-page-linecard-php .site-header:focus-within .nav-toggle,
    .page-template-page-linecard-php .site-header.menu-open .nav-toggle,
    .page-template-page-linecard-php .site-header.is-solid .nav-toggle,
    .page-template-page-portfolio-php .site-header:hover .nav-toggle,
    .page-template-page-portfolio-php .site-header:focus-within .nav-toggle,
    .page-template-page-portfolio-php .site-header.menu-open .nav-toggle,
    .page-template-page-portfolio-php .site-header.is-solid .nav-toggle {
        color: rgba(11,31,58,0.92);
    }


    /* In this state, revert to dark text/logo */
    .front-page .site-header:hover .brand,
    .front-page .site-header:focus-within .brand,
    .front-page .site-header.menu-open .brand,
    .front-page .site-header.is-solid .brand,
    .home .site-header:hover .brand,
    .home .site-header:focus-within .brand,
    .home .site-header.menu-open .brand,
    .home .site-header.is-solid .brand,
    .page-template-page-about-php .site-header:hover .brand,
    .page-template-page-about-php .site-header:focus-within .brand,
    .page-template-page-about-php .site-header.menu-open .brand,
    .page-template-page-about-php .site-header.is-solid .brand,
    .page-template-page-contact-php .site-header:hover .brand,
    .page-template-page-contact-php .site-header:focus-within .brand,
    .page-template-page-contact-php .site-header.menu-open .brand,
    .page-template-page-contact-php .site-header.is-solid .brand,
    .page-template-page-linecard-php .site-header:hover .brand,
    .page-template-page-linecard-php .site-header:focus-within .brand,
    .page-template-page-linecard-php .site-header.menu-open .brand,
    .page-template-page-linecard-php .site-header.is-solid .brand,
    .page-template-page-portfolio-php .site-header:hover .brand,
    .page-template-page-portfolio-php .site-header:focus-within .brand,
    .page-template-page-portfolio-php .site-header.menu-open .brand,
    .page-template-page-portfolio-php .site-header.is-solid .brand {
        color: var(--brand-ink);
    }

        .front-page .site-header:hover .brand img,
        .front-page .site-header:focus-within .brand img,
        .front-page .site-header.menu-open .brand img,
        .front-page .site-header.is-solid .brand img,
        .home .site-header:hover .brand img,
        .home .site-header:focus-within .brand img,
        .home .site-header.menu-open .brand img,
        .home .site-header.is-solid .brand img,
        .page-template-page-about-php .site-header:hover .brand img,
        .page-template-page-about-php .site-header:focus-within .brand img,
        .page-template-page-about-php .site-header.menu-open .brand img,
        .page-template-page-about-php .site-header.is-solid .brand img,
        .page-template-page-contact-php .site-header:hover .brand img,
        .page-template-page-contact-php .site-header:focus-within .brand img,
        .page-template-page-contact-php .site-header.menu-open .brand img,
        .page-template-page-contact-php .site-header.is-solid .brand img,
        .page-template-page-linecard-php .site-header:hover .brand img,
        .page-template-page-linecard-php .site-header:focus-within .brand img,
        .page-template-page-linecard-php .site-header.menu-open .brand img,
        .page-template-page-linecard-php .site-header.is-solid .brand img,
        .page-template-page-portfolio-php .site-header:hover .brand img,
        .page-template-page-portfolio-php .site-header:focus-within .brand img,
        .page-template-page-portfolio-php .site-header.menu-open .brand img,
        .page-template-page-portfolio-php .site-header.is-solid .brand img {
            filter: none;
        }

    .front-page .site-header:hover .site-nav .menu a,
    .front-page .site-header:focus-within .site-nav .menu a,
    .front-page .site-header.menu-open .site-nav .menu a,
    .front-page .site-header.is-solid .site-nav .menu a,
    .home .site-header:hover .site-nav .menu a,
    .home .site-header:focus-within .site-nav .menu a,
    .home .site-header.menu-open .site-nav .menu a,
    .home .site-header.is-solid .site-nav .menu a,
    .page-template-page-about-php .site-header:hover .site-nav .menu a,
    .page-template-page-about-php .site-header:focus-within .site-nav .menu a,
    .page-template-page-about-php .site-header.menu-open .site-nav .menu a,
    .page-template-page-about-php .site-header.is-solid .site-nav .menu a,
    .page-template-page-contact-php .site-header:hover .site-nav .menu a,
    .page-template-page-contact-php .site-header:focus-within .site-nav .menu a,
    .page-template-page-contact-php .site-header.menu-open .site-nav .menu a,
    .page-template-page-contact-php .site-header.is-solid .site-nav .menu a,
    .page-template-page-linecard-php .site-header:hover .site-nav .menu a,
    .page-template-page-linecard-php .site-header:focus-within .site-nav .menu a,
    .page-template-page-linecard-php .site-header.menu-open .site-nav .menu a,
    .page-template-page-linecard-php .site-header.is-solid .site-nav .menu a,
    .page-template-page-portfolio-php .site-header:hover .site-nav .menu a,
    .page-template-page-portfolio-php .site-header:focus-within .site-nav .menu a,
    .page-template-page-portfolio-php .site-header.menu-open .site-nav .menu a,
    .page-template-page-portfolio-php .site-header.is-solid .site-nav .menu a {
        color: rgba(11,31,58,0.72);
        text-shadow: none;
    }

/* (Optional) Admin logged in state: Drop down to the height of the WP Admin Bar */
body.admin-bar.home .site-header,
body.admin-bar.front-page .site-header,
body.admin-bar.page-template-page-about-php .site-header,
body.admin-bar.page-template-page-contact-php .site-header,
body.admin-bar.page-template-page-linecard-php .site-header,
body.admin-bar.page-template-page-portfolio-php .site-header {
    top: 32px; /* Desktop admin bar height */
}

@media (max-width: 782px) {
    body.admin-bar.home .site-header,
    body.admin-bar.front-page .site-header,
    body.admin-bar.page-template-page-about-php .site-header,
    body.admin-bar.page-template-page-contact-php .site-header,
    body.admin-bar.page-template-page-linecard-php .site-header,
    body.admin-bar.page-template-page-portfolio-php .site-header {
        top: 46px; /* Mobile admin bar height */
    }
}

/* ================================
   HERO PREVIEW (slug: hero-preview)
   FORCE header overlay on hero
================================ */

/* Header fixed + transparent */
body.page-hero-preview .site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000 !important;
    background: transparent !important;
    border-bottom-color: transparent !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
}

/* Reserve space for fixed header */
body.page-hero-preview .site-main {
    padding-top: var(--header-h) !important;
}

/* Pull the hero back up behind header */
body.page-hero-preview .home-hero,
body.page-hero-preview .page-hero {
    margin-top: calc(-1 * var(--header-h)) !important;
}

/* Transparent state: white text/logo */
body.page-hero-preview .site-header:not(.is-solid) .brand,
body.page-hero-preview .site-header:not(.is-solid) .nav-toggle {
    color: rgba(255,255,255,0.95) !important;
}

body.page-hero-preview .site-header:not(.is-solid) .site-nav .menu a {
    color: rgba(255,255,255,0.92) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.22) !important;
}

body.page-hero-preview .site-header:not(.is-solid) .brand img {
    filter: brightness(0) invert(1) !important;
}

/* Solid state: revert */
body.page-hero-preview .site-header.is-solid,
body.page-hero-preview .site-header:hover,
body.page-hero-preview .site-header:focus-within,
body.page-hero-preview .site-header.menu-open {
    background: var(--brand-bg) !important;
    backdrop-filter: blur(10px) !important;
    border-bottom-color: var(--brand-line) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important;
}

/* Admin bar offset */
body.admin-bar.page-hero-preview .site-header {
    top: 32px !important;
}

@media (max-width: 782px) {
    body.admin-bar.page-hero-preview .site-header {
        top: 46px !important;
    }
}

/* ================================
   FOOTER
================================ */
.site-footer {
    background: var(--primary);
    color: #fff;
    padding: 20px 0;
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    font-weight: 300;
}

.footer-menu {
    list-style: none;
    display: flex;
    gap: 20px;
    padding: 0;
    margin: 0;
}

    .footer-menu a {
        color: #fff;
        opacity: .8;
    }

        .footer-menu a:hover {
            opacity: 1;
        }


/* Footer: copyright + privacy button */
.footer-meta {
    display: flex;
    align-items: stretch;
    gap: 10px;
    flex-wrap: wrap;
    /* Since the small tag itself is used, the font size is automatically set to the same as the copyright. */
}

.footer-left {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.footer-sns {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    opacity: 0.8;
    font-size: 13px;
}

.footer-privacy-link {
    font-size: inherit; /* Same size as the copyright (small) */
    color: #fff;
    opacity: .8;
    font-weight: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: opacity .18s ease, border-color .18s ease;
}

/* Footer: privacy block */
.footer-privacy {
    display: flex;
    align-items: center;
}

/* Mobile: (row1) SNS + Privacy  / (row2) Copyright */
@media (max-width: 640px) {

    .footer-inner {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px 14px; /* row-gap / col-gap */
    }

    /* 1) SNS: Left */
    .footer-privacy {
        order: 1;
        width: auto;
        display: inline-flex;
        align-items: center;
        gap: 14px;
    }

    .footer-left {
        display: contents;
    }

    /* 2) Privacy: Right on the same line */
    .footer-sns {
        order: 2;
        margin-left: auto;
        width: auto;
    }

    /* 3) Copyright */
    .footer-copyright {
        order: 3;
        flex: 0 0 100%; /* Force line break */
        justify-content: center;
    }
}

/* ================================
   Line Cards (Manufacturers)
   - Manufacturer = 1 card
================================ */
.linecard-tools {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin: 0 0 22px;
    flex-wrap: wrap;
}

    .linecard-tools .linecard-regionbar {
        margin: 0;
    }

.linecard-regionbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 18px;
}

.region-chip {
    appearance: none;
    border: 1px solid var(--brand-line);
    background: #fff;
    color: rgba(11,31,58,0.76);
    font-weight: 700;
    height: var(--control-h);
    padding: 0 14px;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    white-space: nowrap;
    transition: background .18s ease, transform .18s ease, border-color .18s ease;
}

    .region-chip:hover {
        background: var(--brand-hover);
        transform: translateY(-1px);
        border-color: rgba(11,31,58,0.22);
    }

    .region-chip.is-active {
        background: rgba(11,31,58,0.10);
        border-color: rgba(11,31,58,0.35);
        color: rgba(11,31,58,0.92);
    }

.linecards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.linecard {
    border: 1px solid var(--brand-line);
    border-radius: 18px;
    background: #fff;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform .2s ease, box-shadow .2s ease;
    padding: 18px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
}

    .linecard:hover {
        transform: translateY(-4px);
        box-shadow: 0 20px 44px rgba(0,0,0,0.10);
    }

.linecard-logo {
    width: 100%;
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 10px 6px;
    background: transparent;
    border: 1px solid rgba(11,31,58,0.10);
    border-radius: 16px;
}

    .linecard-logo img {
        width: min(240px, 84%);
        max-height: 62px;
        height: auto;
        object-fit: contain;
        display: block;
    }

.linecard-logo-text {
    display: block;
    width: 100%;
    text-align: center;
    font-weight: 900;
    letter-spacing: -0.2px;
    color: rgba(11,31,58,0.78);
    font-size: 14px;
    line-height: 1.25;
    padding: 0 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* WebP picture wrapper fixes */
.linecard-logo picture {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.linecard-title {
    font-weight: 900;
    color: rgba(11,31,58,0.92);
    letter-spacing: -0.2px;
    margin: 2px 0 0;
    font-size: 18px;
    line-height: 1.2;
}

.linecard-summary {
    margin: -10px 2px;
    color: rgba(11,31,58,0.86);
    font-weight: 700;
    font-size: 13px;
    line-height: 1.55;
}

.manufacturer-summary {
    margin: -7px 0 12px 2px;
}

.linecard-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.linecard-tag {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(11,31,58,0.12);
    background: rgba(11,31,58,0.03);
    color: rgba(11,31,58,0.76);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: -0.1px;
}

.linecard-body {
    margin: 0;
    color: rgba(11,31,58,0.80);
    font-weight: 500;
    font-size: 13px;
    line-height: 1.55;
    flex: 1;
    min-height: 3.1em;
}

.linecard-actions {
    margin-top: auto;
    display: flex;
    width: 100%;
    height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(11,31,58,0.18);
    overflow: hidden;
    background: #fff;
}

.linecard-action {
    flex: 1;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: rgba(11,31,58,0.86);
    font-weight: 900;
    letter-spacing: -0.2px;
    transition: background .15s ease, transform .15s ease;
}

    .linecard-action:hover {
        background: rgba(11,31,58,0.04);
    }

    .linecard-action + .linecard-action {
        border-left: 1px solid rgba(11,31,58,0.18);
    }

.linecard-empty {
    margin-top: 18px;
    color: rgba(11,31,58,0.72);
    font-weight: 900;
    grid-column: 1 / -1;
}

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

@media (max-width: 640px) {
    .linecards {
        grid-template-columns: 1fr;
    }
}

/* ================================
   Portfolio LIST (page-portfolio.php)
   - 4:3 thumbnails + hover overlay + title slide down
================================ */
.portfolio-page {
    padding: 0;
}

/* Filter + Search row */
.portfolio-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 18px 0 26px;
}

.portfolio-search {
    position: relative;
    flex: 0 0 320px;
    max-width: 380px;
}

.portfolio-search-input {
    width: 100%;
    height: var(--control-h);
    padding: 0 44px 0 14px;
    border-radius: 999px;
    border: 1px solid var(--brand-line);
    background: #fff;
    color: rgba(11,31,58,0.84);
    font-weight: 500;
    outline: none;
}

    .portfolio-search-input:focus {
        border-color: rgba(11,31,58,0.35);
        box-shadow: 0 0 0 4px rgba(30,64,175,0.12);
    }

.portfolio-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 0;
    background: rgba(11,31,58,0.08);
    color: rgba(11,31,58,0.82);
    font-weight: 900;
    cursor: pointer;
    display: none;
}

.portfolio-search.is-dirty .portfolio-search-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.portfolio-search-count {
    position: absolute;
    right: 10px;
    top: -12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--brand-line);
    background: #fff;
    box-shadow: 0 10px 22px rgba(0,0,0,0.08);
    font-size: 12px;
    font-weight: 500;
    color: rgba(11,31,58,0.68);
    pointer-events: none;
    white-space: nowrap;
}

    .portfolio-search-count strong {
        color: rgba(11,31,58,0.92);
        font-weight: 700;
    }

/* empty message */
.portfolio-empty {
    margin-top: 22px;
    color: rgba(11,31,58,0.70);
    font-weight: 700;
}

.portfolio-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
}

.filter-btn {
    appearance: none;
    border: 1px solid var(--brand-line);
    background: #fff;
    color: rgba(11,31,58,0.78);
    font-weight: 700;
    height: var(--control-h);
    padding: 0 14px;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background .18s ease, transform .18s ease, border-color .18s ease;
}

    .filter-btn:hover {
        background: var(--brand-hover);
        transform: translateY(-1px);
        border-color: rgba(11,31,58,0.25);
    }

    .filter-btn.is-active {
        background: rgba(11,31,58,0.10);
        border-color: rgba(11,31,58,0.35);
        color: var(--brand-ink);
    }

@media (max-width: 900px) {
    .portfolio-tools {
        flex-direction: column;
        align-items: stretch;
    }

    .portfolio-search {
        flex-basis: auto;
        max-width: none;
    }

    .linecard-tools {
        flex-direction: column;
        align-items: stretch;
    }

        .linecard-tools .portfolio-search {
            flex-basis: auto;
            max-width: none;
        }
}

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

.portfolio-item {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    cursor: pointer;
    background: #000;
    border: 1px solid var(--brand-line);
    transition: transform .25s ease, box-shadow .25s ease;
}

    .portfolio-item:hover {
        transform: translateY(-6px);
        box-shadow: 0 20px 40px rgba(0,0,0,.15);
    }

.portfolio-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

    .portfolio-thumb picture,
    .portfolio-thumb img {
        width: 100%;
        height: 100%;
        display: block;
    }

    .portfolio-thumb img {
        object-fit: cover;
        transition: transform .4s ease, filter .4s ease;
    }

    .portfolio-thumb::after {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,0);
        transition: background .3s ease;
    }

.portfolio-item:hover .portfolio-thumb::after {
    background: rgba(0,0,0,.35);
}

.portfolio-item:hover .portfolio-thumb img {
    transform: scale(1.05);
    filter: brightness(0.85);
}

/* title slide down */
.portfolio-title {
    position: absolute;
    left: 14px;
    right: 14px;
    top: -48px;
    text-align: center;
    color: #fff;
    font-weight: 500;
    font-size: 20px;
    letter-spacing: .4px;
    opacity: 0;
    transition: top .45s ease, opacity .30s ease;
    pointer-events: none;
}

.portfolio-item:hover .portfolio-title {
    top: 42%;
    opacity: 1;
}

/* Touch devices: show "hover" state by default (mobile list) */
@media (hover: none) {
    .portfolio-thumb::after {
        background: rgba(0,0,0,.35);
    }

    .portfolio-title {
        top: 42%;
        opacity: 1;
    }

    .portfolio-thumb img {
        transform: scale(1.05);
        filter: brightness(0.85);
    }
}

/* Some mobile browsers can still report hover (e.g. certain Android/Chromium builds).
   Force the "over" state on small screens. */
@media (max-width: 900px) {
    .portfolio-thumb::after {
        background: rgba(0,0,0,.35);
    }

    .portfolio-title {
        top: 42%;
        opacity: 1;
    }

    .portfolio-thumb img {
        transform: scale(1.05);
        filter: brightness(0.85);
    }
}

/* Maker → Products list (single portfolio info) */
.mp-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mp-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mp-maker {
    font-weight: 700;
}

.mp-products {
    color: rgba(11,31,58,0.78);
    font-weight: 700;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

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

@media (max-width: 640px) {
    .portfolio-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================
   Portfolio SINGLE (single-portfolio.php)
   - Desktop: Left gallery / Right info (sticky)
   - Gallery: 4:3 main + thumbnails (no mosaic)
================================ */
.portfolio-single {
    padding: 0;
}

.portfolio-head {
    margin-bottom: 10px;
}

    .portfolio-head h1 {
        margin: 0 0 10px 15px;
        font-size: 34px;
        letter-spacing: -0.4px;
        color: var(--brand-ink);
        font-weight: 700;
    }

.portfolio-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 22px;
    align-items: start;
}

.portfolio-back {
    display: inline-block;
    color: rgba(11,31,58,0.72);
    font-weight: 900;
    margin: 15px;
}

    .portfolio-back:hover {
        opacity: .9;
    }

/* left / right wrappers from PHP */
.portfolio-media {
    min-width: 0;
}

.portfolio-aside {
    position: sticky;
    top: 96px; /* below sticky header */
    align-self: start;
}

@media (max-width: 980px) {
    .portfolio-layout {
        grid-template-columns: 1fr;
    }

    .portfolio-aside {
        position: static;
    }
}

/* -------- Gallery slider (desktop + mobile) -------- */
.portfolio-slider {
    display: block;
    margin-top: 0;
    position: relative;
}

/* viewport is the 4:3 stage */
.slider-viewport {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid var(--brand-line);
    background: #000;
    aspect-ratio: 4 / 3;
    touch-action: pan-y;
}

/* track moves by JS (px) */
.portfolio-slider .slider-track {
    display: flex;
    width: 100%;
    height: 100%;
    gap: 0;
    transform: translate3d(0px,0,0);
    transition: transform .38s ease;
    will-change: transform;
}

.portfolio-slider .slider-item {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    cursor: zoom-in;
}

    .portfolio-slider .slider-item picture,
    .portfolio-slider .slider-item img {
        width: 100%;
        height: 100%;
        display: block;
    }

    .portfolio-slider .slider-item img {
        object-fit: cover;
    }

/* arrows (inside viewport in updated PHP) */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.35);
    background: rgba(0,0,0,0.30);
    color: #fff;
    font-size: 22px;
    font-weight: 900;
    cursor: pointer;
    z-index: 2;
}

    .slider-btn.prev {
        left: 10px;
    }

    .slider-btn.next {
        right: 10px;
    }

    .slider-btn:active {
        transform: translateY(-50%) scale(0.98);
    }

/* thumbnails */
.slider-thumbs {
    --thumb-visible: 5.5;
    margin-top: 12px;
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 2px 2px 10px;
    scrollbar-width: none; /* Firefox */
}

    .slider-thumbs::-webkit-scrollbar {
        display: none;
    }

@media (max-width: 1024px) {
    .slider-thumbs {
        --thumb-visible: 4.5;
    }
}

@media (max-width: 640px) {
    .slider-thumbs {
        --thumb-visible: 3.5;
        gap: 8px;
        padding-bottom: 8px;
    }
}

.thumb {
    appearance: none;
    border: 1px solid transparent;
    padding: 0;
    border-radius: 14px;
    overflow: hidden;
    background: #000;
    cursor: pointer;
    flex: 0 0 calc(100% / var(--thumb-visible));
    scroll-snap-align: start;
    aspect-ratio: 4 / 3;
}

    .thumb picture,
    .thumb img {
        width: 100%;
        height: 100%;
        display: block;
    }

    .thumb img {
        object-fit: cover;
        opacity: .94;
        transition: transform .25s ease, opacity .25s ease, filter .25s ease;
    }

    .thumb:hover img {
        opacity: 1;
        transform: scale(1.02);
        filter: brightness(0.92);
    }

    .thumb.is-active {
        border-color: rgba(11,31,58,0.45);
        box-shadow: 0 0 0 3px rgba(30,64,175,0.14);
    }

/* dots (optional, mobile-friendly) */
.slider-dots {
    display: none;
    gap: 8px;
    justify-content: center;
    margin-top: 10px;
}

@media (max-width: 768px) {
    .slider-dots {
        display: flex;
    }
}

.slider-dots .dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(11,31,58,0.20);
}

    .slider-dots .dot.is-active {
        background: rgba(11,31,58,0.75);
    }

/* -------- Lightbox -------- */
.gallery-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: 20px;
}

    .gallery-lightbox.is-open {
        display: flex;
    }

    .gallery-lightbox picture {
        display: block;
    }

    .gallery-lightbox img {
        max-width: min(1100px, 96vw);
        max-height: 90vh;
        border-radius: 16px;
        display: block;
    }

.gallery-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.25);
    background: rgba(0,0,0,0.25);
    color: #fff;
    font-size: 18px;
    font-weight: 900;
    cursor: pointer;
}

/* -------- Info box (existing classes kept) -------- */
.portfolio-info {
    border: 1px solid var(--brand-line);
    border-radius: 18px;
    background: #fff;
    padding: 18px;
}

.info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px 18px;
}

@media (max-width: 1024px) {
    .info-grid {
        grid-template-columns: 1fr;
    }
}

.info-row {
    display: flex;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px solid rgba(215,221,230,0.7);
}

    .info-row:first-child {
        border-top: none;
    }

.info-k {
    width: 120px;
    color: rgba(11,31,58,0.65);
    font-weight: 700;
}

.info-v {
    flex: 1;
    color: rgba(11,31,58,0.88);
    font-weight: 500;
}

/* Description row: stacked label/value (only this row) */
.info-row--desc {
    display: block;
}

    .info-row--desc .info-k {
        width: auto;
        margin: 0 0 6px;
    }

    .info-row--desc .info-v {
        margin: 0;
    }

/* Description (rendered as a normal info-row) */
.info-v--desc {
    font-weight: 500;
    color: rgba(11,31,58,0.82);
    white-space: pre-line;
}

/* One item per line utility (Products etc.) */
.line-item {
    display: block;
    margin: 2px 0;
    font-weight: 500;
}

/* Location address (two-line subtext) */
.info-v .subtext {
    color: rgba(11,31,58,0.60);
    font-weight: 500;
    margin-top: 4px;
}

/* Description */
.portfolio-desc-label {
    margin-top: 18px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(11,31,58,0.65);
}

.portfolio-description {
    margin-top: 8px;
    color: rgba(11,31,58,0.82);
    font-weight: 700;
    white-space: pre-line;
}

/* -------- Prev / Next + Same Products (existing styles kept) -------- */
.portfolio-nav {
    margin-top: 34px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (max-width: 640px) {
    .portfolio-nav {
        grid-template-columns: 1fr;
    }
}

/* Nav card (shared) */
.nav-card {
    border: 1px solid var(--brand-line);
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
    display: grid;
    grid-template-columns: 140px 1fr;
    min-height: 92px;
    transition: transform .2s ease, box-shadow .2s ease;
}

    .nav-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 18px 40px rgba(0,0,0,.10);
    }

/* Before/After + Fixed 4:3 aspect ratio for same product card thumbnails */
.nav-thumb {
    background: #0b1f3a;
    width: 140px;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

    .nav-thumb picture,
    .nav-thumb img {
        width: 100%;
        height: 100%;
        display: block;
    }

    .nav-thumb img {
        object-fit: cover;
    }

.nav-body {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}

.nav-label {
    font-size: 12px;
    font-weight: 900;
    color: rgba(11,31,58,0.60);
}

.nav-title {
    font-size: 14px;
    font-weight: 900;
    color: rgba(11,31,58,0.92);
    letter-spacing: -0.2px;
}

@media (max-width: 640px) {
    .nav-card {
        grid-template-columns: 120px 1fr;
    }

    .nav-thumb {
        width: 120px;
    }
}

/* Same product section */
.same-product {
    margin-top: 34px;
    border-top: 1px solid rgba(215,221,230,0.7);
    padding-top: 22px;
}

    .same-product h2 {
        margin: 0 0 14px;
        font-size: 18px;
        color: var(--brand-ink);
        font-weight: 900;
    }

/* Same Products: Nav-card style + 3 per card */
.same-grid.same-grid--navcards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
    /* Hide labels for same products */
    .same-grid.same-grid--navcards .nav-label {
        display: none;
    }

    /* Slightly compact same cards (thumbnail width also adjusted) */
    .same-grid.same-grid--navcards .nav-card {
        grid-template-columns: 120px 1fr;
    }

    .same-grid.same-grid--navcards .nav-thumb {
        width: 120px;
    }

@media (max-width: 1024px) {
    .same-grid.same-grid--navcards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .same-grid.same-grid--navcards {
        grid-template-columns: 1fr;
    }
}

/* ================================
   Manufacturer detail (taxonomy-manufacturer.php)
================================ */
.manufacturer-detail .manufacturer-head {
    margin-bottom: 18px;
}

.manufacturer-back {
    display: inline-block;
    color: rgba(11,31,58,0.72);
    font-weight: 900;
    margin: 15px;
}

    .manufacturer-back:hover {
        opacity: .9;
    }

.manufacturer-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--brand-line);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--shadow);
}

.manufacturer-logo {
    width: 92px;
    height: 72px;
    border-radius: 16px;
    border: 1px solid rgba(11,31,58,0.10);
    background: rgba(11,31,58,0.02);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    overflow: hidden;
}

    /* WebP picture wrapper fixes */
    .manufacturer-logo picture {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

.manufacturer-logo-link {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .manufacturer-logo-link:hover {
        opacity: .92;
    }

    .manufacturer-logo-link:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
        border-radius: 14px;
    }

.manufacturer-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

.manufacturer-logo-text {
    display: block;
    width: 100%;
    text-align: center;
    font-weight: 900;
    letter-spacing: -0.2px;
    color: rgba(11,31,58,0.78);
    font-size: 13px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.manufacturer-title {
    margin: 0;
    font-weight: 900;
    letter-spacing: -0.3px;
}

.manufacturer-sub {
    margin: 8px 0 0;
    color: rgba(11,31,58,0.76);
    font-weight: 700;
    font-size: 13px;
    line-height: 1.6;
}

.manufacturer-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.manufacturer-tag {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(11,31,58,0.12);
    background: rgba(11,31,58,0.03);
    color: rgba(11,31,58,0.76);
    font-weight: 900;
    font-size: 11px;
    letter-spacing: -0.1px;
}

.manufacturer-content {
    margin-top: 16px;
    padding: 18px;
    border: 1px solid var(--brand-line);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--shadow);
    color: rgba(11,31,58,0.86);
    line-height: 1.7;
}

    .manufacturer-content p {
        margin: 0.8em 0;
    }

    .manufacturer-content img {
        width: 100%;
        max-width: 100%;
        height: auto;
        display: block;
        border-radius: 16px;
    }

    /* 1) If a <picture> contains an img with class="50", use the <picture> itself as the 50% width box */
    .manufacturer-content picture:has(> img.\35 0) {
        display: inline-block;
        vertical-align: top;
        width: calc(50% - 8px);
        margin: 0;
    }

        /* 2) Add horizontal gap only when two 50% <picture> elements appear consecutively */
        .manufacturer-content picture:has(> img.\35 0) + picture:has(> img.\35 0) {
            margin-left: 16px;
        }

        /* 3) Make the img fill its <picture> wrapper */
        .manufacturer-content picture:has(> img.\35 0) > img.\35 0 {
            display: block;
            width: 100%;
            max-width: 100%;
            height: auto;
        }

    /* 4) Also support standalone img elements with class="50" (without a <picture> wrapper) */
    .manufacturer-content img.\35 0 {
        display: inline-block;
        vertical-align: top;
        width: calc(50% - 8px);
        max-width: calc(50% - 8px);
        height: auto;
    }

        /* 5) Add horizontal gap only when two standalone 50% images appear consecutively */
        .manufacturer-content img.\35 0 + img.\35 0 {
            margin-left: 16px;
        }


.manufacturer-section-title {
    margin: 22px 0 0;
    font-weight: 900;
    letter-spacing: -0.2px;
}

@media (max-width: 640px) {
    .manufacturer-hero {
        flex-direction: column;
        align-items: flex-start;
    }

    .manufacturer-logo {
        width: 100%;
        height: 86px;
    }
}

/* =========================
   Manufacturer Detail (Line Card Detail)
========================= */
.manufacturer-detail-page {
    padding: var(--pad) 0;
}

    .manufacturer-detail-page .manufacturer-back {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: rgba(11,31,58,0.78);
        font-weight: 900;
        text-decoration: none;
    }

.manufacturer-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
    gap: clamp(16px, 3vw, 28px);
    align-items: start;
    padding-bottom: clamp(25px, 2.5vw, 50px);
}

@media (max-width: 980px) {
    .manufacturer-detail-grid {
        grid-template-columns: 1fr;
    }
}

.manufacturer-content {
    border: 1px solid var(--brand-line);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--shadow);
    padding: 18px 18px;
    line-height: 1.75;
}

.manufacturer-sidebar {
    border: 1px solid var(--brand-line);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--shadow);
    padding: 16px 16px;
    position: static;
    top: 16px;
}

    .manufacturer-sidebar .manufacturer-logo {
        width: 100%;
        min-height: 110px;
        border: 1px solid rgba(11,31,58,0.10);
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 16px 14px;
        background: transparent;
    }

        .manufacturer-sidebar .manufacturer-logo img {
            width: min(280px, 90%);
            max-height: 90px;
            object-fit: contain;
        }

    .manufacturer-sidebar .manufacturer-title {
        margin: 14px 0 6px;
        font-size: 20px;
        font-weight: 900;
        letter-spacing: -0.3px;
    }

    .manufacturer-sidebar .manufacturer-sub {
        margin: 0 0 12px;
        color: rgba(11,31,58,0.70);
        font-size: 13px;
        line-height: 1.6;
    }

.manu-contacts {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}

.manu-contact-card {
    border: 1px solid rgba(11,31,58,0.12);
    border-radius: 16px;
    padding: 12px 12px;
    background: #fff;
}

.manu-contact-name {
    font-weight: 900;
    letter-spacing: -0.2px;
    margin: 0 0 2px;
    font-size: 16px;
}

.manu-contact-role {
    margin: 0 0 8px;
    color: rgba(11,31,58,0.70);
    font-size: 13px;
    font-weight: 700
}

.manu-contact-list {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 6px 10px;
    font-size: 13px;
}

    .manu-contact-list dt {
        color: rgba(11,31,58,0.62);
        font-weight: 700;
    }

    .manu-contact-list dd {
        margin: 0;
        color: rgba(11,31,58,0.86);
        font-weight: 500;
    }

    .manu-contact-list a {
        text-decoration: underline;
        text-underline-offset: 2px;
    }

.manufacturer-portfolio-section {
    margin-top: 26px;
}

    .manufacturer-portfolio-section .section-title {
        margin: 0 0 10px;
        font-size: 16px;
        font-weight: 900;
        letter-spacing: -0.2px;
    }

.manu-mini-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

@media (max-width: 1024px) {
    .manu-mini-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .manu-mini-grid {
        grid-template-columns: 1fr;
    }
}

.manu-mini-card {
    border: 1px solid var(--brand-line);
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
    box-shadow: var(--shadow);
    transition: transform .18s ease, box-shadow .18s ease;
}

    .manu-mini-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 22px 48px rgba(0,0,0,0.10);
    }

.manu-mini-thumb {
    aspect-ratio: 4/3;
    background: rgba(11,31,58,0.03);
    overflow: hidden;
}

    .manu-mini-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.manu-mini-body {
    padding: 12px 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.manu-mini-title {
    margin: 0;
    font-weight: 900;
    letter-spacing: -0.2px;
    font-size: 13px;
}

.manu-mini-meta {
    margin: 0;
    font-size: 12px;
    color: rgba(11,31,58,0.70);
    line-height: 1.55;
}

.manu-mini-products {
    margin: 0;
    font-size: 12px;
    color: rgba(11,31,58,0.80);
    line-height: 1.55;
}

/* =========================
   Manufacturer Detail tweaks (keep existing CSS intact)
========================= */
.manufacturer-detail-page .manufacturer-content {
    margin-top: 0 !important;
}

    .manufacturer-detail-page .manufacturer-content > :first-child {
        margin-top: 0 !important;
    }

/* Manufacturer detail portfolio cards (match single portfolio bottom cards) */
.portfolio-grid--side {
    grid-template-columns: 1fr;
    gap: 14px;
}

.portfolio-item--maker {
    transform: none;
}

    .portfolio-item--maker .portfolio-caption {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 3;
        padding: 12px 14px 14px;
        background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,0));
    }

    .portfolio-item--maker .portfolio-cap-title {
        margin: 0;
        font-weight: 900;
        font-size: 14px;
        letter-spacing: -0.2px;
        line-height: 1.25;
        color: #fff;
    }

    .portfolio-item--maker .portfolio-cap-meta,
    .portfolio-item--maker .portfolio-cap-products {
        margin: 5px 0 0;
        font-size: 12px;
        line-height: 1.35;
        color: rgba(255,255,255,.86);
    }

    .portfolio-item--maker .portfolio-cap-products {
        color: rgba(255,255,255,.92);
    }

    .portfolio-item--maker .portfolio-cap-products {
        display: block;
    }

        .portfolio-item--maker .portfolio-cap-products .prod-line {
            display: block;
            white-space: normal;
        }

/* When portfolio grid is rendered in the sidebar */
.manufacturer-sidebar .manufacturer-portfolio-section--side {
    margin-top: 14px;
    padding: 14px 0;
    border-top: 1px solid rgba(11,31,58,0.10);
}

    .manufacturer-sidebar .manufacturer-portfolio-section--side .portfolio-grid--side {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .manufacturer-sidebar .manufacturer-portfolio-section--side .portfolio-thumb {
        aspect-ratio: 4/3;
    }

/* Manufacturer detail: portfolio cards as row (thumb left, text right) */
.manufacturer-portfolio-section--side .portfolio-item--row {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: #fff;
    border: 1px solid var(--brand-line);
    border-radius: 18px;
    overflow: hidden;
    transform: none;
}

    .manufacturer-portfolio-section--side .portfolio-item--row:hover {
        transform: translateY(-3px);
        box-shadow: 0 14px 28px rgba(0,0,0,.10);
    }

    /* thumb on the left */
    .manufacturer-portfolio-section--side .portfolio-item--row .portfolio-thumb {
        flex: 0 0 clamp(120px, 38%, 200px);
        max-width: 220px;
        aspect-ratio: 4 / 3;
    }

        .manufacturer-portfolio-section--side .portfolio-item--row .portfolio-thumb::after {
            display: none !important;
        }

        .manufacturer-portfolio-section--side .portfolio-item--row .portfolio-thumb img {
            transform: none !important;
            filter: none !important;
        }

    /* text on the right */
    .manufacturer-portfolio-section--side .portfolio-item--row .portfolio-caption {
        position: static !important;
        inset: auto !important;
        padding: 14px 16px;
        background: none !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .manufacturer-portfolio-section--side .portfolio-item--row .portfolio-cap-title {
        color: var(--text) !important;
        font-size: 15px;
        font-weight: 900;
        margin: 0;
    }

    .manufacturer-portfolio-section--side .portfolio-item--row .portfolio-cap-meta {
        color: var(--muted) !important;
        margin: 6px 0 0;
        font-size: 12px;
    }

    .manufacturer-portfolio-section--side .portfolio-item--row .portfolio-cap-meta {
        white-space: normal;
        word-break: break-word;
    }

    .manufacturer-portfolio-section--side .portfolio-item--row .portfolio-cap-loc .portfolio-cap-meta--sub {
        margin-top: 2px;
    }

    .manufacturer-portfolio-section--side .portfolio-item--row .portfolio-cap-products {
        color: var(--text) !important;
        margin: 6px 0 0;
        font-size: 12px;
        opacity: .85;
    }

/* narrow: stack if needed */
@media (max-width: 420px) {
    .manufacturer-portfolio-section--side .portfolio-item--row {
        flex-direction: column;
    }

        .manufacturer-portfolio-section--side .portfolio-item--row .portfolio-thumb {
            max-width: none;
            flex-basis: auto;
            width: 100%;
        }
}

/* HOME PORTFOLIO: mobile card layout (thumb left / meta right) */
@media (max-width: 640px) {
    .home-portfolio-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

        .home-portfolio-grid .home-portfolio-card {
            display: flex;
            align-items: stretch;
            gap: 0;
            background: #fff;
            border: 1px solid var(--brand-line);
            border-radius: 18px;
            overflow: hidden;
            transform: none !important;
        }

            /* Disable existing portfolio mobile hover/overlay (home only) */
            .home-portfolio-grid .home-portfolio-card .portfolio-thumb::after {
                display: none !important;
            }

            .home-portfolio-grid .home-portfolio-card .portfolio-thumb img {
                transform: none !important;
                filter: none !important;
            }

            .home-portfolio-grid .home-portfolio-card .portfolio-title {
                display: none !important;
            }

            .home-portfolio-grid .home-portfolio-card .portfolio-thumb {
                flex: 0 0 clamp(120px, 40%, 200px);
                max-width: 220px;
                aspect-ratio: 4 / 3;
            }

    .home-portfolio-meta {
        flex: 1;
        padding: 14px 16px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 6px;
        min-width: 0;
    }

    .home-portfolio-locname {
        margin: 0;
        font-weight: 900;
        font-size: 15px;
        letter-spacing: -0.2px;
        color: rgba(11,31,58,0.92);
    }

    .home-portfolio-locaddr {
        margin: 0;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.5;
        color: rgba(11,31,58,0.70);
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
}

/* very narrow: stack */
@media (max-width: 420px) {
    .home-portfolio-grid .home-portfolio-card {
        flex-direction: column;
    }

        .home-portfolio-grid .home-portfolio-card .portfolio-thumb {
            max-width: none;
            flex-basis: auto;
            width: 100%;
        }
}

/* HOME PORTFOLIO: disable hover darken + title slide */
.home-portfolio .portfolio-item:hover {
    transform: none;
    box-shadow: none;
}

.home-portfolio .portfolio-thumb::after {
    display: none !important;
}

.home-portfolio .portfolio-thumb img {
    transform: none !important;
    filter: none !important;
}

.home-portfolio .portfolio-title {
    display: none !important;
}

/* HOME PORTFOLIO: meta typography */
.home-portfolio-meta {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    min-width: 0;
}

.home-portfolio-locname {
    margin: 0;
    font-weight: 700; /* Requested */
    font-size: 16px;
    letter-spacing: -0.2px;
    color: rgba(11,31,58,0.92);
    line-height: 1.25;
}

.home-portfolio-locaddr {
    margin: 0;
    font-weight: 500; /* Requested */
    font-size: 12.5px;
    line-height: 1.5;
    color: rgba(11,31,58,0.68);
    display: flex;
    align-items: center;
    gap: 8px;
    /* Limit to 2 lines if long */
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

    /* Dot icon (for positioning) */
    .home-portfolio-locaddr::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 999px;
        background: rgba(30,64,175,0.28);
        box-shadow: 0 0 0 4px rgba(30,64,175,0.10);
        flex: 0 0 6px;
    }

/* HOME PORTFOLIO: mobile card polish */
@media (max-width: 640px) {
    .home-portfolio-grid .home-portfolio-card {
        display: flex;
        gap: 0;
        border: 1px solid rgba(215,221,230,0.85);
        border-radius: 18px;
        background: #fff;
        box-shadow: var(--shadow);
        overflow: hidden;
    }

        .home-portfolio-grid .home-portfolio-card .portfolio-thumb {
            flex: 0 0 42%;
            max-width: 220px;
            aspect-ratio: 4 / 3;
            border-right: 1px solid rgba(215,221,230,0.65);
        }
}
/* HOME PORTFOLIO (including PC): Remove black background below card (meta) */
.home-portfolio .home-portfolio-card {
    background: #fff; /* Cover existing .portfolio-item { background:#000 } */
    box-shadow: var(--shadow); /* Match other card tones (can be removed if desired) */
}

    /* When HOME portfolio cards are rendered without links (temporary mode) */
    .home-portfolio .home-portfolio-card.is-static {
        cursor: default; /* override .portfolio-item { cursor:pointer } */
    }

    /* Ensure the meta area is also white on a solid background */
    .home-portfolio .home-portfolio-card .home-portfolio-meta {
        background: #fff;
    }

/* (Optional) Slightly raise the background on hover */
@media (hover:hover) {
    .home-portfolio .home-portfolio-card:hover {
        box-shadow: 0 22px 48px rgba(0,0,0,0.10);
    }

    /* Keep static cards from looking "clickable" on hover */
    .home-portfolio .home-portfolio-card.is-static:hover {
        box-shadow: var(--shadow);
    }
}

/* ================================
   SHARED: PAGE HERO + CONTENT (About/Contact/Line Card/Portfolio)
================================ */
.page-hero {
    position: relative;
    overflow: hidden;
    background: #0b1f3a;
    color: #fff;
    /* Fix the title from being too far below the header (fixed/overlay) */
    padding-top: calc(var(--header-h) + clamp(46px, 5.8vw, 78px));
    padding-bottom: clamp(84px, 9vw, 132px);
}

.page-hero-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

    .page-hero-media picture {
        width: 100%;
        height: 100%;
        display: block;
    }

    .page-hero-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        filter: contrast(1.02) saturate(1.02);
    }

.page-hero-scrim {
    position: absolute;
    inset: 0;
    background: radial-gradient(900px 400px at 10% 20%, rgba(30,64,175,0.26), rgba(0,0,0,0) 60%), linear-gradient(90deg, rgba(0,0,0,.66) 0%, rgba(0,0,0,.40) 45%, rgba(0,0,0,.16) 100%), linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.18) 100%);
    pointer-events: none;
}

.page-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 980px;
}

.page-hero-title {
    margin: 0 0 12px;
    font-size: clamp(34px, 5vw, 62px);
    line-height: 1.06;
    font-weight: 900;
    letter-spacing: -0.6px;
}

.page-hero-lead {
    margin: 0;
    max-width: 62ch;
    font-size: clamp(15px, 1.8vw, 20px);
    color: rgba(255,255,255,.86);
    font-weight: 300;
}

.page-hero-actions {
    margin-top: 18px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.page-content {
    padding: clamp(25px, 2.5vw, 50px) 0;
    background: linear-gradient(180deg, rgba(245,247,250,0.68), rgba(255,255,255,0));
    border-top: 1px solid rgba(215,221,230,0.65);
}

    /* Reduce top padding for specific pages under the hero */
    .page-content.linecard-content,
    .page-content.portfolio-content {
    }

/* ================================
   ABOUT PAGE
================================ */
.about-page {
    padding: 0;
}

/* shared section */
.about-section {
    padding: clamp(21px, 3vw, 42px) 0;
}

.about-section-head {
    margin-bottom: 18px;
}

.about-h2 {
    margin: 0 0 10px;
    font-size: clamp(26px, 3.2vw, 42px);
    line-height: 1.15;
    letter-spacing: -0.4px;
    color: var(--brand-ink);
    font-weight: 900;
}

.about-sub {
    margin: 0;
    max-width: 70ch;
    color: rgba(11,31,58,0.74);
    font-weight: 500;
}

/* intro */
.about-intro {
    background: linear-gradient(180deg, rgba(245,247,250,0.68), rgba(255,255,255,0));
    border-top: 1px solid rgba(215,221,230,0.65);
}

.about-intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: clamp(18px, 3vw, 44px);
    align-items: start;
}

.about-lead {
    margin: 0;
    color: rgba(11,31,58,0.78);
    font-weight: 500;
}

.about-intro-body {
    border: 1px solid rgba(215,221,230,0.85);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--shadow);
    padding: 18px;
    color: rgba(11,31,58,0.82);
    line-height: 1.75;
}

    .about-intro-body p {
        margin: 0.8em 0;
    }

    .about-intro-body > :first-child {
        margin-top: 0;
    }

/* services cards */
.about-card-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0,1fr));
    gap: 14px;
}

.about-info-card {
    border: 1px solid rgba(215,221,230,0.85);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--shadow);
    padding: 16px;
}

.about-card-title {
    margin: 0 0 6px;
    font-weight: 900;
    letter-spacing: -0.2px;
    color: rgba(11,31,58,0.92);
}

.about-card-desc {
    margin: 0 0 10px;
    color: rgba(11,31,58,0.72);
    font-weight: 500;
    line-height: 1.6;
}

.about-mini-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
}

    .about-mini-list li {
        position: relative;
        padding-left: 18px;
        color: rgba(11,31,58,0.80);
        font-weight: 500;
    }

        .about-mini-list li::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0.62em;
            width: 8px;
            height: 8px;
            border-radius: 999px;
            background: rgba(30,64,175,0.28);
            box-shadow: 0 0 0 4px rgba(30,64,175,0.10);
        }

/* values */
.about-values {
    background: linear-gradient(180deg, rgba(245,247,250,0.60), rgba(255,255,255,0));
    border-top: 1px solid rgba(215,221,230,0.65);
}

.about-value-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 12px;
}

.about-value {
    border: 1px solid rgba(215,221,230,0.85);
    border-radius: 18px;
    background: rgba(255,255,255,0.92);
    box-shadow: var(--shadow);
    padding: 16px;
    position: relative;
    overflow: hidden;
}

    .about-value::before {
        content: "";
        position: absolute;
        top: -42px;
        right: -42px;
        width: 160px;
        height: 160px;
        border-radius: 999px;
        background: rgba(30,64,175,0.10);
    }

.about-value-title {
    margin: 0 0 6px;
    font-weight: 700;
    letter-spacing: -0.2px;
    color: rgba(11,31,58,0.92);
    position: relative;
}

.about-value-desc {
    margin: 0;
    color: rgba(11,31,58,0.72);
    font-weight: 500;
    line-height: 1.6;
    position: relative;
}

/* team */
.about-team-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 14px;
}

.team-card {
    border: 1px solid rgba(215,221,230,0.85);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--shadow);
    padding: 16px;
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 12px;
    align-items: start;
}

.team-avatar {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: rgba(11,31,58,0.06);
    border: 1px solid rgba(11,31,58,0.10);
    display: grid;
    place-items: center;
    font-weight: 900;
    color: rgba(11,31,58,0.82);
    letter-spacing: -0.2px;
}

.team-name {
    margin: 0;
    font-weight: 900;
    color: rgba(11,31,58,0.92);
    letter-spacing: -0.2px;
}

.team-role {
    margin: 4px 0 8px;
    color: rgba(11,31,58,0.68);
    font-weight: 500;
    font-size: 13px;
}

.team-bio {
    margin: 0 0 10px;
    color: rgba(11,31,58,0.76);
    font-weight: 500;
    line-height: 1.65;
}

.team-link {
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 700;
    color: rgba(11,31,58,0.82);
}

/* CTA */
.about-cta {
    padding: clamp(56px, 6vw, 92px) 0;
    background: #1b2a3b;
    color: #fff;
}

.about-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 22px;
    padding: clamp(18px, 3vw, 28px);
    background: rgba(255,255,255,0.06);
    box-shadow: 0 22px 54px rgba(0,0,0,0.18);
}

.about-cta-title {
    margin: 0 0 10px;
    font-size: clamp(22px, 3vw, 36px);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.4px;
}

.about-cta-desc {
    margin: 0;
    max-width: 62ch;
    color: rgba(255,255,255,0.82);
    font-weight: 300;
}

.about-cta-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* responsive */
@media (max-width: 980px) {
    .about-intro-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1024px) {
    .about-card-grid {
        grid-template-columns: 1fr;
    }

    .about-value-grid {
        grid-template-columns: repeat(1, minmax(0,1fr));
    }

    .about-team-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .about-cta-inner {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ================================
   CONTACT PAGE
================================ */
.contact-page {
    padding: 0;
}

/* HERO */

/* SECTION */
.contact-section {
    padding: clamp(21px, 3vw, 42px);
    background: linear-gradient(180deg, rgba(245,247,250,0.68), rgba(255,255,255,0));
    border-top: 1px solid rgba(215,221,230,0.65);
}

.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(14px, 3vw, 22px);
    align-items: start;
}

/* LEFT CARD */
.contact-card {
    border: 1px solid rgba(215,221,230,0.85);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--shadow);
    padding: 18px;
    position: static;
}

.contact-card-title {
    margin: 0;
    font-weight: 900;
    letter-spacing: -0.2px;
    color: rgba(11,31,58,0.92);
    font-size: 18px;
}

.contact-card-sub {
    margin: 6px 0 0;
    color: rgba(11,31,58,0.70);
    font-weight: 500;
    font-size: 13px;
}

.contact-list {
    margin: 14px 0 0;
    display: grid;
    gap: 10px;
}

.contact-row {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(215,221,230,0.7);
}

    .contact-row:first-child {
        border-top: 0;
        padding-top: 0;
    }

    .contact-row dt {
        color: rgba(11,31,58,0.62);
        font-weight: 700;
        font-size: 13px;
    }

    .contact-row dd {
        margin: 0;
        color: rgba(11,31,58,0.86);
        font-weight: 500;
        font-size: 13px;
        line-height: 1.6;
    }

.contact-link {
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 700;
    color: rgba(11,31,58,0.86);
}

.contact-hints {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(215,221,230,0.7);
}

.contact-hint-title {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(11,31,58,0.62);
}

.contact-hint-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
}

    .contact-hint-list li {
        position: relative;
        padding-left: 18px;
        color: rgba(11,31,58,0.80);
        font-weight: 500;
    }

        .contact-hint-list li::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0.62em;
            width: 8px;
            height: 8px;
            border-radius: 999px;
            background: rgba(30,64,175,0.28);
            box-shadow: 0 0 0 4px rgba(30,64,175,0.10);
        }

/* RIGHT CARD (FORM) */
.contact-form-card {
    border: 1px solid rgba(215,221,230,0.85);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--shadow);
    padding: 18px;
}

.contact-form-title {
    margin: 0;
    font-weight: 900;
    letter-spacing: -0.2px;
    color: rgba(11,31,58,0.92);
    font-size: 18px;
}

.contact-form-sub {
    margin: 6px 0 0;
    color: rgba(11,31,58,0.70);
    font-weight: 500;
    font-size: 13px;
}

.contact-form-wrap {
    margin-top: 14px;
}

    /* CF7 default form style (with theme tones) */
    .contact-form-wrap .wpcf7 form {
        margin: 0;
    }

    .contact-form-wrap .wpcf7 p {
        margin: 0 0 12px;
    }

    .contact-form-wrap input[type="text"],
    .contact-form-wrap input[type="email"],
    .contact-form-wrap input[type="tel"],
    .contact-form-wrap input[type="url"],
    .contact-form-wrap textarea,
    .contact-form-wrap select {
        width: 100%;
        border: 1px solid var(--brand-line);
        border-radius: 14px;
        background: #fff;
        padding: 12px 14px;
        font-weight: 500;
        color: rgba(11,31,58,0.86);
        outline: none;
    }

    .contact-form-wrap textarea {
        min-height: 140px;
        resize: vertical;
    }

        .contact-form-wrap input:focus,
        .contact-form-wrap textarea:focus,
        .contact-form-wrap select:focus {
            border-color: rgba(11,31,58,0.35);
            box-shadow: 0 0 0 4px rgba(30,64,175,0.12);
        }

    /* Submit button with theme btn style */
    .contact-form-wrap input[type="submit"],
    .contact-form-wrap button,
    .contact-form-wrap .wpcf7-submit {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: var(--control-h);
        padding: 0 18px;
        border-radius: 999px;
        border: 1px solid rgba(11,31,58,0.18);
        background: rgba(11,31,58,0.92);
        color: #fff;
        font-weight: 900;
        letter-spacing: -0.1px;
        box-shadow: 0 16px 30px rgba(11,31,58,0.18);
        cursor: pointer;
    }

        .contact-form-wrap input[type="submit"]:hover,
        .contact-form-wrap .wpcf7-submit:hover {
            background: #071428;
        }

    /* CF7 response message */
    .contact-form-wrap .wpcf7-response-output {
        border-radius: 14px;
        padding: 12px 14px;
        margin: 14px 0 0;
        font-weight: 500;
    }

/* responsive */
@media (max-width: 980px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .contact-card {
        position: static;
        top: auto;
    }
}

/* ================================
   HOME PORTFOLIO (Mobile) - STABLE
   - Default: Thumbnail left / Text right (2 columns)
   - Very narrow (<=420px): Automatically stack vertically
   - Avoid duplicate @media conflicts: It's recommended to keep only this block.
================================ */

/* 2-column mobile layout */
@media (max-width: 900px) {
    .home-portfolio-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

        .home-portfolio-grid .home-portfolio-card {
            display: flex;
            flex-wrap: nowrap;
            align-items: stretch;
            gap: 0;
            background: #fff;
            border: 1px solid rgba(215,221,230,0.85);
            border-radius: 18px;
            overflow: hidden;
            box-shadow: var(--shadow);
            transform: none !important;
        }

            /* left thumb */
            .home-portfolio-grid .home-portfolio-card .portfolio-thumb {
                flex: 0 0 42%;
                max-width: 220px;
                width: auto;
                aspect-ratio: 4 / 3;
                border-right: 1px solid rgba(215,221,230,0.65);
            }

                /* Disable hover/overlay elements on mobile */
                .home-portfolio-grid .home-portfolio-card .portfolio-thumb::after {
                    display: none !important;
                }

                .home-portfolio-grid .home-portfolio-card .portfolio-thumb img {
                    transform: none !important;
                    filter: none !important;
                }

            .home-portfolio-grid .home-portfolio-card .portfolio-title {
                display: none !important;
            }

            /* right meta */
            .home-portfolio-grid .home-portfolio-card .home-portfolio-meta {
                flex: 1 1 auto;
                min-width: 0;
                padding: 14px 16px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                gap: 6px;
                background: #fff;
            }
}

/* ultra narrow: stack */
@media (max-width: 420px) {
    .home-portfolio-grid .home-portfolio-card {
        flex-direction: column;
    }

        .home-portfolio-grid .home-portfolio-card .portfolio-thumb {
            flex: 0 0 auto;
            width: 100%;
            max-width: none;
            border-right: 0;
        }
}

/* ================================
   REVEAL (scroll / load animation)
================================ */
html.js .reveal {
    opacity: 0;
    translate: 0 16px;
    transition: opacity 600ms cubic-bezier(.2,.8,.2,1), translate 600ms cubic-bezier(.2,.8,.2,1), transform 600ms cubic-bezier(.2,.8,.2,1);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, translate, transform;
}

    /* Reveal active */
    html.js .reveal.is-inview {
        opacity: 1;
        transform: none;
    }

/* Visible in environments without JS. */
html:not(.js) .reveal {
    opacity: 1;
    translate: 0 0;
    transform: none;
}

html.js .reveal.is-inview {
    opacity: 1;
    translate: 0 0;
    transform: none;
}

html.js .reveal.reveal--left {
    transform: translate3d(-18px, 0, 0);
}

html.js .reveal.reveal--right {
    transform: translate3d(18px, 0, 0);
}

html.js .reveal.reveal--scale {
    transform: scale(.985);
}

html.js .home-hero-scroll.reveal.is-inview {
    transform: translateX(-50%);
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    html.js .reveal {
        opacity: 1 !important;
        translate: 0 0 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* =========================================================
   FIX: manufacturer-sidebar reveal not animating
   - .Due to a transform/opacity conflict with the .manufacturer-sidebar.
     Preventing the invisible reveal change.
========================================================= */

html.js .manufacturer-sidebar.reveal {
    opacity: 0 !important;
    transform: translateY(14px) !important;
    transition: opacity .65s ease, transform .65s ease !important;
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}

    html.js .manufacturer-sidebar.reveal.is-inview {
        opacity: 1 !important;
        translate: 0 0;
        !important;
        transform: translateY(0) !important;
    }

/* ================================
   PRIVACY POLICY PAGE – FIX
   1) Header always visible (solid)
   2) Long-form readability like Portfolio pages
================================ */

/* 1) Force header visible on this page (override fixed/transparent cases) */
body.page-privacy-policy .site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    background: var(--brand-bg) !important;
    border-bottom: 1px solid var(--brand-line) !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: none !important;
}

    body.page-privacy-policy .site-header .brand,
    body.page-privacy-policy .site-header .nav-toggle,
    body.page-privacy-policy .site-header .site-nav .menu a {
        color: rgba(11,31,58,0.82) !important;
        text-shadow: none !important;
    }

/* 2) Ensure content isn’t constrained/clipped by any generic template styles */
body.page-privacy-policy .site-main {
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
}

    /* 3) Typography + spacing to match your other long pages */
    body.page-privacy-policy .site-main .container {
        max-width: 980px;
    }

    body.page-privacy-policy .site-main h1,
    body.page-privacy-policy .site-main h2,
    body.page-privacy-policy .site-main h3 {
        color: var(--brand-ink);
        letter-spacing: -0.3px;
    }

    body.page-privacy-policy .site-main p {
        margin: 0 0 14px;
        color: rgba(11,31,58,0.78);
        font-weight: 500;
        max-width: 72ch;
    }

    body.page-privacy-policy .site-main a {
        color: rgba(30,64,175,0.95);
        text-decoration: underline;
        text-underline-offset: 2px;
    }

    body.page-privacy-policy .site-main ul,
    body.page-privacy-policy .site-main ol {
        margin: 0 0 14px;
        padding-left: 1.2em;
        color: rgba(11,31,58,0.78);
    }

/* ================================
   Manufacturer content: subtle link styling
   (only inside .manufacturer-content)
================================ */
.manufacturer-content a {
    color: var(--accent);
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    text-decoration-color: rgba(30, 64, 175, 0.28);
    /* soft highlight (subtle) */
    background: linear-gradient( transparent 70%, rgba(30, 64, 175, 0.10) 0 );
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    transition: color 180ms ease, text-decoration-color 180ms ease, background 180ms ease;
}

    .manufacturer-content a:hover {
        text-decoration-color: rgba(30, 64, 175, 0.65);
        background: linear-gradient( transparent 60%, rgba(30, 64, 175, 0.16) 0 );
    }

    .manufacturer-content a:focus-visible {
        outline: 2px solid rgba(30, 64, 175, 0.35);
        outline-offset: 2px;
        border-radius: 4px;
    }