:root {
    --portfolio-teal: #007c82;
    --portfolio-deep: #071d24;
    --portfolio-ink: #183039;
    --portfolio-gold: #c69b52;
    --portfolio-mist: #eef6f5;
    --portfolio-line: rgba(8, 78, 82, 0.14);
}

.portfolio-main { color: var(--portfolio-ink); background: #fff; }
.portfolio-main *, .portfolio-main *::before, .portfolio-main *::after { box-sizing: border-box; }
.portfolio-overview-hero { min-height: 660px; display: flex; align-items: center; position: relative; isolation: isolate; background: var(--portfolio-deep) url("/assets/branding/product-experience/products-portfolio-hero.png") center/cover no-repeat; }
.portfolio-overview-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(4,25,31,.96) 0%, rgba(4,34,40,.84) 42%, rgba(4,34,40,.32) 75%, rgba(4,34,40,.58) 100%); }
.portfolio-hero-copy { max-width: 750px; padding: 110px 0; color: #fff; }
.portfolio-hero-copy .section-kicker, .portfolio-category-hero .section-kicker { color: #7de1da; }
.portfolio-hero-copy h1 { margin: 14px 0 24px; max-width: 720px; color: #fff; font-size: clamp(3rem, 6vw, 5.8rem); line-height: .98; letter-spacing: -.055em; }
.portfolio-hero-copy > p:not(.section-kicker) { max-width: 680px; color: rgba(255,255,255,.84); font-size: 1.22rem; line-height: 1.75; }
.catalog-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.portfolio-main .button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; }
.portfolio-overview-hero .button-secondary, .portfolio-category-hero .button-secondary { border-color: rgba(255,255,255,.55); color: #fff; background: rgba(255,255,255,.07); }
.portfolio-overview-hero .button-secondary:hover, .portfolio-category-hero .button-secondary:hover { background: #fff; color: var(--portfolio-deep); }

.portfolio-intro, .portfolio-band { padding: 100px 0; }
.portfolio-band-light { background: linear-gradient(180deg, #f6faf9 0%, #edf6f5 100%); }
.portfolio-band-dark { color: #fff; background: linear-gradient(135deg, #061b22, #0b3339 62%, #104b4c); }
.portfolio-band-dark h2, .portfolio-band-dark h3 { color: #fff; }
.portfolio-band-dark .section-kicker { color: #75d8d1; }
.portfolio-intro-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr); gap: 70px; align-items: center; }
.portfolio-section-heading { max-width: 820px; margin-bottom: 44px; }
.portfolio-section-heading.center { text-align: center; margin-left: auto; margin-right: auto; }
.portfolio-section-heading h2, .portfolio-intro h2, .portfolio-adapter-callout h2 { margin: 10px 0 18px; color: var(--portfolio-deep); font-size: clamp(2.2rem, 4vw, 4rem); line-height: 1.08; letter-spacing: -.04em; }
.portfolio-section-heading > p:last-child, .portfolio-intro-grid > div > p:last-child, .portfolio-adapter-callout p { color: #5a6d73; font-size: 1.08rem; line-height: 1.75; }
.portfolio-band-dark .portfolio-section-heading h2 { color: #fff; }
.portfolio-band-dark .portfolio-section-heading > p:last-child { color: rgba(255,255,255,.76); }
.portfolio-intro blockquote { margin: 0; padding: 42px; color: #fff; background: linear-gradient(145deg, #07343a, #0b5657); border-radius: 24px; box-shadow: 0 28px 70px rgba(4,35,40,.18); font-size: 1.35rem; line-height: 1.55; }
.portfolio-intro cite, .portfolio-inline-quote cite { display: block; margin-top: 22px; color: #b9d8d6; font-size: .82rem; font-style: normal; letter-spacing: .09em; text-transform: uppercase; }
.portfolio-intro blockquote a, .portfolio-inline-quote a { display: inline-block; margin-top: 18px; color: #e8c47e; font-weight: 800; font-size: .8rem; letter-spacing: .12em; }

.portfolio-feature-grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 22px; }
.portfolio-feature-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.portfolio-feature-card.breakout-feature { grid-column: 1 / -1; min-height: 360px; display: grid; grid-template-columns: minmax(320px, .9fr) minmax(0, 1.1fr); }
.portfolio-feature-card.breakout-feature img { width: 100%; height: 100%; min-height: 360px; padding: 22px; }
.portfolio-feature-card { min-height: 440px; display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: inherit; background: #fff; border: 1px solid var(--portfolio-line); border-radius: 22px; box-shadow: 0 18px 48px rgba(7,49,54,.08); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.portfolio-feature-card:hover { transform: translateY(-6px); border-color: rgba(0,124,130,.38); box-shadow: 0 26px 68px rgba(7,49,54,.14); }
.portfolio-feature-card img { width: 100%; height: 210px; object-fit: contain; padding: 30px; background: radial-gradient(circle at 50% 45%, #fff 0%, #edf7f6 70%); }
.portfolio-feature-card.large img { height: 250px; }
.portfolio-feature-card > div { display: flex; flex: 1; flex-direction: column; padding: 28px; }
.portfolio-feature-card span { color: var(--portfolio-teal); font-size: .76rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.portfolio-feature-card h3 { margin: 9px 0 12px; color: var(--portfolio-deep); font-size: 1.65rem; }
.portfolio-feature-card p { margin: 0 0 22px; color: #62757a; line-height: 1.65; }
.portfolio-feature-card b { margin-top: auto; color: var(--portfolio-teal); }
.portfolio-inline-quote { margin: 46px 0 0; padding: 30px 36px; border-left: 4px solid var(--portfolio-gold); color: #efffff; background: var(--portfolio-deep); border-radius: 0 18px 18px 0; font-size: 1.14rem; line-height: 1.65; }

.portfolio-context-grid, .portfolio-guidance-grid, .portfolio-assurance-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.portfolio-context-card, .portfolio-guidance-card, .portfolio-assurance-card { padding: 34px; border-radius: 20px; }
.portfolio-context-card { min-height: 330px; color: #fff; background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.025)); border: 1px solid rgba(255,255,255,.12); }
.portfolio-card-number { display: block; margin-bottom: 50px; color: #75d8d1; font-size: .8rem; font-weight: 800; letter-spacing: .15em; }
.portfolio-context-card h3 { margin: 0 0 14px; font-size: 1.5rem; }
.portfolio-context-card p { color: rgba(255,255,255,.72); line-height: 1.7; }
.portfolio-guidance-card, .portfolio-assurance-card { background: #fff; border: 1px solid var(--portfolio-line); box-shadow: 0 14px 40px rgba(7,49,54,.06); }
.portfolio-guidance-card strong { display: grid; width: 42px; height: 42px; place-items: center; margin-bottom: 24px; color: #fff; background: var(--portfolio-teal); border-radius: 50%; }
.portfolio-guidance-card h3, .portfolio-assurance-card h3 { margin: 0 0 12px; color: var(--portfolio-deep); font-size: 1.35rem; }
.portfolio-guidance-card p, .portfolio-assurance-card p { margin: 0; color: #61747a; line-height: 1.68; }
.portfolio-assurance-card { border-top: 4px solid var(--portfolio-gold); }

.portfolio-adapter-callout { display: grid; grid-template-columns: 1fr minmax(320px, .72fr); gap: 60px; align-items: center; padding-top: 20px; padding-bottom: 20px; }
.portfolio-adapter-callout img { width: 100%; max-height: 340px; object-fit: contain; filter: drop-shadow(0 28px 30px rgba(0,52,55,.18)); }
.portfolio-speed-band { background: #f5f9f8; }
.portfolio-speed-grid, .portfolio-form-factor-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.portfolio-speed-grid a, .portfolio-form-factor-links a { min-height: 125px; display: flex; flex-direction: column; justify-content: space-between; padding: 24px; color: var(--portfolio-deep); text-decoration: none; background: #fff; border: 1px solid var(--portfolio-line); border-radius: 16px; transition: transform .2s ease, border-color .2s ease; }
.portfolio-speed-grid a:hover, .portfolio-form-factor-links a:hover { transform: translateY(-3px); border-color: var(--portfolio-teal); }
.portfolio-speed-grid strong, .portfolio-form-factor-links strong { font-size: 1.35rem; }
.portfolio-speed-grid span, .portfolio-form-factor-links span { color: var(--portfolio-teal); font-weight: 700; }
.portfolio-rfq-panel { display: grid; grid-template-columns: 1fr auto; gap: 50px; align-items: center; padding: 56px; background: linear-gradient(120deg, #063039, #087272); border-radius: 28px; box-shadow: 0 28px 70px rgba(3,45,50,.2); }
.portfolio-rfq-panel h2 { margin: 10px 0 16px; color: #fff; font-size: clamp(2rem, 4vw, 3.5rem); }
.portfolio-rfq-panel p { max-width: 720px; color: rgba(255,255,255,.78); font-size: 1.08rem; line-height: 1.7; }
.portfolio-rfq-panel .section-kicker { color: #7de1da; }

.portfolio-back-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 30px; padding-bottom: 20px; }
.portfolio-home-link { color: var(--portfolio-teal); font-weight: 800; text-decoration: none; }
.portfolio-category-hero { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: var(--portfolio-deep) url("/assets/branding/product-experience/products-portfolio-hero.png") center/cover no-repeat; }
.portfolio-category-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(3,25,31,.96), rgba(4,50,55,.82) 58%, rgba(4,40,45,.5)); }
.portfolio-category-hero-grid { min-height: 500px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 70px; align-items: center; padding-top: 70px; padding-bottom: 70px; }
.portfolio-category-hero h1 { margin: 12px 0 20px; color: #fff; font-size: clamp(3rem, 6vw, 5.4rem); line-height: 1; letter-spacing: -.05em; }
.portfolio-category-hero p:not(.section-kicker) { max-width: 720px; color: rgba(255,255,255,.8); font-size: 1.12rem; line-height: 1.75; }
.portfolio-category-hero-grid > img { width: 100%; max-height: 330px; object-fit: contain; filter: drop-shadow(0 32px 36px rgba(0,0,0,.35)); }
.breakout-sku-example { max-width: 820px; margin-top: 26px; padding: 20px; border: 1px solid rgba(255,255,255,.18); border-radius: 16px; background: rgba(2,22,25,.58); backdrop-filter: blur(8px); }
.breakout-sku-example > strong { display: block; color: #f0bd5e; font: 850 1rem var(--font-heading); overflow-wrap: anywhere; }
.breakout-sku-example > div { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin-top: 15px; }
.breakout-sku-example span { padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.08); }
.breakout-sku-example b, .breakout-sku-example small { display: block; }
.breakout-sku-example b { color: #fff; font: 850 .86rem var(--font-heading); }
.breakout-sku-example small { margin-top: 4px; color: rgba(255,255,255,.68); font-size: .72rem; line-height: 1.35; }
.portfolio-category-hero .breakout-sku-example > p { margin: 14px 0 0; color: rgba(255,255,255,.76); font-size: .82rem; line-height: 1.55; }
.portfolio-image-disclaimer { max-width: 980px; margin: -6px 0 26px; padding: 15px 18px; border: 1px solid #e2b85f; border-left: 5px solid #c98a19; border-radius: 10px; color: #39575b; background: #fff3d5; box-shadow: 0 8px 22px rgba(104,74,17,.09); font-size: .84rem; line-height: 1.6; }
.portfolio-image-disclaimer strong { color: #704a08; }
.portfolio-listing { padding: 90px 0 120px; background: #f5f9f8; }
.portfolio-tools { position: sticky; top: 84px; z-index: 5; display: grid; grid-template-columns: 1.7fr repeat(3, 1fr) auto; gap: 12px; align-items: end; margin-bottom: 14px; padding: 20px; background: rgba(255,255,255,.96); border: 1px solid var(--portfolio-line); border-radius: 18px; box-shadow: 0 14px 38px rgba(6,50,55,.1); backdrop-filter: blur(12px); }
.portfolio-tools label { display: grid; gap: 7px; color: #496168; font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.portfolio-tools input, .portfolio-tools select { width: 100%; height: 46px; padding: 0 13px; color: var(--portfolio-deep); background: #fff; border: 1px solid #cbdcda; border-radius: 10px; font: inherit; }
.portfolio-reset-button { min-height: 46px; padding: 0 8px; color: var(--portfolio-teal); background: transparent; border: 0; font: inherit; font-weight: 800; cursor: pointer; }
.portfolio-reset-button:hover { text-decoration: underline; }
.portfolio-filter-status { margin: 12px 0 28px; color: #60757a; }
.portfolio-product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.portfolio-product-card { overflow: hidden; background: #fff; border: 1px solid var(--portfolio-line); border-radius: 18px; box-shadow: 0 12px 34px rgba(6,50,55,.06); }
.portfolio-product-card[hidden] { display: none; }
.portfolio-product-card > a { height: 100%; display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.portfolio-product-image { height: 210px; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle, #fff, #edf6f5); }
.portfolio-product-image img { width: 100%; height: 100%; object-fit: contain; }
.portfolio-product-copy { display: flex; flex: 1; flex-direction: column; padding: 25px; }
.portfolio-product-speed { color: var(--portfolio-teal); font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.portfolio-product-copy h3 { margin: 8px 0 13px; color: var(--portfolio-deep); font-size: 1.24rem; overflow-wrap: anywhere; }
.portfolio-product-copy > p { color: #61757a; line-height: 1.55; }
.portfolio-product-copy dl { display: grid; gap: 0; margin: 15px 0 22px; border-top: 1px solid #e1ebea; }
.portfolio-product-copy dl div { display: grid; grid-template-columns: 1fr 1.2fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid #e1ebea; }
.portfolio-product-copy dt { color: #789095; font-size: .76rem; text-transform: uppercase; }
.portfolio-product-copy dd { margin: 0; text-align: right; font-weight: 700; overflow-wrap: anywhere; }
.portfolio-card-link { margin-top: auto; color: var(--portfolio-teal); font-weight: 800; }
.portfolio-form-factor-links { margin: 0 0 34px; }
.portfolio-empty { padding: 50px; text-align: center; background: #fff; border-radius: 18px; }

@media (max-width: 1050px) {
    .portfolio-feature-grid, .portfolio-context-grid, .portfolio-guidance-grid, .portfolio-assurance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .portfolio-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .portfolio-tools { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .portfolio-speed-grid, .portfolio-form-factor-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .portfolio-overview-hero { min-height: 590px; }
    .portfolio-hero-copy { padding: 80px 0; }
    .portfolio-hero-copy h1 { font-size: clamp(2.75rem, 13vw, 4.2rem); }
    .portfolio-intro, .portfolio-band { padding: 72px 0; }
    .portfolio-intro-grid, .portfolio-adapter-callout, .portfolio-category-hero-grid, .portfolio-rfq-panel { grid-template-columns: 1fr; gap: 34px; }
    .portfolio-feature-grid, .portfolio-feature-grid.four, .portfolio-context-grid, .portfolio-guidance-grid, .portfolio-assurance-grid, .portfolio-product-grid { grid-template-columns: 1fr; }
    .portfolio-feature-card.breakout-feature { grid-column: auto; grid-template-columns: 1fr; }
    .portfolio-feature-card.breakout-feature img { height: 230px; min-height: 230px; }
    .portfolio-speed-grid, .portfolio-form-factor-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .portfolio-tools { grid-template-columns: 1fr; }
    .portfolio-category-hero-grid { min-height: 620px; }
    .portfolio-category-hero-grid > img { max-height: 240px; }
    .breakout-sku-example > div { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .portfolio-rfq-panel { padding: 34px 26px; }
}

@media (max-width: 430px) {
    .portfolio-speed-grid, .portfolio-form-factor-links { grid-template-columns: 1fr; }
    .portfolio-intro blockquote { padding: 30px; }
}

/* Shared site-header palette; keeps product pages aligned with Home. */
.site-header {
    border-bottom-color: rgba(255, 255, 255, 0.06);
    background: rgba(2, 17, 21, 0.94);
}

.site-header.scrolled {
    background: rgba(2, 17, 21, 0.97);
}

/* Match the approved Home navigation geometry on every generated product route. */
@media (min-width: 1081px) {
    .site-header {
        min-height: 88px;
    }

    .site-header .container {
        width: min(calc(100% - 32px), 1504px);
    }

    .site-header-inner {
        min-height: 88px;
    }

    .nav-links {
        gap: 28px;
        font-size: 0.9rem;
    }

    .header-cta {
        min-height: 48px;
        padding: 0 28px;
        text-transform: uppercase;
    }
}

@media (min-width: 1081px) and (max-width: 1180px) {
    .brand-logo {
        width: 190px;
    }

    .brand-link {
        max-width: 220px;
    }
}