/* =====================================================================
   Payeshco — Inner pages (Services Hub + Department pages)
   Industrial / Asymmetric Shape Design
   ===================================================================== */

/* ----- Shared page hero ----- */
.page-hero {
    position: relative;
    min-height: clamp(320px, 45vh, 520px);
    display: flex;
    align-items: center;
    padding-block: calc(var(--header-height) + 2rem) 4rem;
    background: var(--c-black);
    overflow: hidden;
}

.page-hero--vectors::before,
.page-hero--vectors::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.35;
}

.page-hero--vectors::before {
    background:
        linear-gradient(125deg, transparent 48%, var(--c-wine-bright) 48.2%, transparent 48.4%),
        linear-gradient(55deg, transparent 62%, rgba(128, 0, 32, 0.6) 62.2%, transparent 62.5%),
        linear-gradient(168deg, transparent 35%, var(--c-wine) 35.15%, transparent 35.3%);
}

.page-hero--vectors::after {
    background:
        repeating-linear-gradient(90deg, transparent, transparent 80px, rgba(192, 26, 58, 0.08) 80px, rgba(192, 26, 58, 0.08) 81px),
        repeating-linear-gradient(0deg, transparent, transparent 60px, rgba(192, 26, 58, 0.06) 60px, rgba(192, 26, 58, 0.06) 61px);
    mask-image: linear-gradient(to bottom, #000 20%, transparent 95%);
}

.page-hero__iso-lines {
    position: absolute;
    inset: 0;
    opacity: 0.45;
    pointer-events: none;
}

.page-hero__iso-lines svg {
    width: 100%;
    height: 100%;
}

.page-hero__inner {
    position: relative;
    z-index: 2;
    max-width: 820px;
}

.page-hero__title {
    font-size: clamp(2rem, 5vw, 3.6rem);
    font-weight: 900;
    line-height: 1.12;
    color: var(--c-offwhite);
    margin: 0 0 1rem;
}

.page-hero__lead {
    font-size: 1.1rem;
    color: var(--c-text-muted);
    max-width: 38rem;
    margin: 0;
}

/* ----- Department hero (with image mask) ----- */
.dept-hero {
    position: relative;
    min-height: clamp(380px, 52vh, 580px);
    display: flex;
    align-items: flex-end;
    padding-block: calc(var(--header-height) + 2rem) 3.5rem;
    background: var(--c-black);
    overflow: hidden;
}

.dept-hero__media {
    position: absolute;
    inset: 0;
    clip-path: polygon(0 0, 100% 0, 100% 78%, 58% 92%, 32% 84%, 0 98%);
}

[dir="ltr"] .dept-hero__media {
    clip-path: polygon(0 0, 100% 0, 100% 98%, 68% 84%, 42% 92%, 0 78%);
}

.dept-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(1.05) contrast(1.08) brightness(0.75);
}

[dir="rtl"] .dept-hero__media img {
    transform: scaleX(-1);
    object-position: 60% center;
}

[dir="ltr"] .dept-hero__media img {
    object-position: 40% center;
}

.dept-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to inline-start, rgba(10, 10, 12, 0.94) 0%, rgba(10, 10, 12, 0.5) 50%, rgba(10, 10, 12, 0.2) 100%),
        linear-gradient(0deg, var(--c-black) 0%, transparent 45%);
}

.dept-hero__inner {
    position: relative;
    z-index: 2;
    max-width: 900px;
}

.dept-hero__badge {
    display: inline-block;
    padding: 0.35rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--c-wine-glow);
    border: 1px solid rgba(192, 26, 58, 0.45);
    clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%);
}

.dept-hero__title {
    font-size: clamp(1.8rem, 4.5vw, 3.2rem);
    font-weight: 900;
    line-height: 1.15;
    color: #fff;
    margin: 0;
}

/* Hero variants */
.dept-hero--triangle .dept-hero__media {
    clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 88%, 8% 42%);
}

[dir="ltr"] .dept-hero--triangle .dept-hero__media {
    clip-path: polygon(0 0, 82% 0, 92% 42%, 100% 88%, 0 100%);
}

.dept-hero--wide .dept-hero__media {
    clip-path: polygon(0 12%, 100% 0, 100% 72%, 72% 88%, 28% 96%, 0 82%);
}

[dir="ltr"] .dept-hero--wide .dept-hero__media {
    clip-path: polygon(0 0, 100% 12%, 100% 82%, 72% 96%, 28% 88%, 0 72%);
}

.dept-hero--wide .dept-hero__media img {
    object-position: center 35%;
}

/* ----- Services Hub: asymmetric dept grid ----- */
.services-hub {
    background: var(--c-black);
    padding-block: clamp(3rem, 7vw, 6rem);
}

.dept-hub-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.4rem;
}

.dept-hub-card {
    position: relative;
    grid-column: span 4;
    min-height: 380px;
    background: var(--c-black-2);
    border: 1px solid var(--c-border);
    overflow: hidden;
    clip-path: polygon(0 5%, 94% 0, 100% 92%, 6% 100%);
    transition: transform 0.45s ease, border-color 0.35s ease;
}

.dept-hub-card:nth-child(1) { grid-column: span 7; min-height: 420px; }
.dept-hub-card:nth-child(2) { grid-column: span 5; clip-path: polygon(6% 0, 100% 4%, 94% 100%, 0 94%); margin-block-start: 2rem; }
.dept-hub-card:nth-child(3) { grid-column: span 5; clip-path: polygon(0 4%, 96% 0, 100% 96%, 4% 100%); }
.dept-hub-card:nth-child(4) { grid-column: span 4; margin-block-start: -1rem; }
.dept-hub-card:nth-child(5) { grid-column: span 3; clip-path: polygon(8% 0, 100% 6%, 92% 100%, 0 90%); margin-block-start: 1.5rem; }

[dir="ltr"] .dept-hub-card { clip-path: polygon(6% 5%, 100% 0, 94% 92%, 0 100%); }
[dir="ltr"] .dept-hub-card:nth-child(1) { clip-path: polygon(0 5%, 94% 0, 100% 92%, 6% 100%); }
[dir="ltr"] .dept-hub-card:nth-child(2) { clip-path: polygon(0 4%, 94% 0, 100% 100%, 6% 94%); }
[dir="ltr"] .dept-hub-card:nth-child(3) { clip-path: polygon(4% 4%, 100% 0, 96% 100%, 0 96%); }
[dir="ltr"] .dept-hub-card:nth-child(5) { clip-path: polygon(0 6%, 92% 0, 100% 90%, 8% 100%); }

.dept-hub-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(130% 130% at 70% 120%, var(--c-wine) 0%, var(--c-wine-bright) 35%, transparent 65%);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.dept-hub-card:hover {
    transform: translateY(-6px);
    border-color: var(--c-wine-bright);
}

.dept-hub-card:hover::before {
    opacity: 1;
}

.dept-hub-card__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    clip-path: polygon(0 0, 100% 0, 100% 72%, 8% 85%, 0 70%);
}

.dept-hub-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) contrast(1.1) brightness(0.55);
    transition: filter 0.55s ease, transform 0.7s ease;
}

.dept-hub-card:hover .dept-hub-card__media img {
    filter: grayscale(0) contrast(1.05) brightness(0.8);
    transform: scale(1.06);
}

.dept-hub-card__body {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 100%;
    padding: 1.8rem;
}

.dept-hub-card__index {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--c-steel);
    letter-spacing: 0.12em;
    margin-bottom: auto;
    padding-block-start: 0.5rem;
}

.dept-hub-card:hover .dept-hub-card__index {
    color: rgba(255, 255, 255, 0.75);
}

.dept-hub-card__title {
    font-size: clamp(1.15rem, 2vw, 1.5rem);
    font-weight: 800;
    color: var(--c-offwhite);
    margin: 0 0 0.35rem;
}

.dept-hub-card:hover .dept-hub-card__title {
    color: #fff;
}

.dept-hub-card__tag {
    font-size: 0.82rem;
    color: var(--c-text-muted);
    display: block;
    margin-bottom: 0.5rem;
}

.dept-hub-card:hover .dept-hub-card__tag {
    color: rgba(255, 255, 255, 0.75);
}

.dept-hub-card__desc {
    font-size: 0.88rem;
    color: var(--c-text-muted);
    margin: 0;
    line-height: 1.7;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.45s ease, opacity 0.4s ease, margin 0.4s ease;
}

.dept-hub-card:hover .dept-hub-card__desc {
    max-height: 100px;
    opacity: 1;
    margin-block: 0.6rem 0;
    color: rgba(255, 255, 255, 0.88);
}

.dept-hub-card__title-link {
    color: inherit;
    text-decoration: none;
}

.dept-hub-card__title-link:hover {
    color: #fff;
}

.dept-hub-card__enter {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-block-start: 1rem;
    padding: 0.45rem 0.9rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    background: rgba(10, 10, 12, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.35);
    clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease, background 0.25s ease, border-color 0.25s ease;
}

.dept-hub-card:hover .dept-hub-card__enter {
    opacity: 1;
    transform: translateY(0);
    color: #fff;
}

.dept-hub-card .dept-hub-card__enter:hover,
.dept-hub-card:hover .dept-hub-card__enter:hover {
    color: #fff;
    background: var(--c-black);
    border-color: #fff;
}

.dept-hub-card__enter svg {
    width: 18px;
    height: 18px;
}

[dir="ltr"] .dept-hub-card__enter {
    clip-path: polygon(0 0, 92% 0, 100% 100%, 8% 100%);
}

/* ----- Standards bar (Services footer strip) ----- */
.standards-bar {
    position: relative;
    background: var(--c-offwhite);
    color: var(--c-black);
    padding-block: 3rem;
    clip-path: polygon(0 8%, 45% 0, 100% 6%, 100% 100%, 0 100%);
}

[dir="ltr"] .standards-bar {
    clip-path: polygon(0 6%, 55% 0, 100% 8%, 100% 100%, 0 100%);
}

.standards-bar__title {
    font-size: 1.1rem;
    font-weight: 800;
    margin: 0 0 1.8rem;
    text-align: center;
    color: var(--c-black);
}

.standards-bar__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem 3rem;
}

.std-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    text-align: center;
}

.std-badge__icon {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    background: var(--c-black);
    color: var(--c-wine-bright);
    clip-path: polygon(50% 0, 100% 25%, 82% 100%, 18% 100%, 0 25%);
}

.std-badge__icon svg {
    width: 26px;
    height: 26px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
}

.std-badge__label {
    font-size: 0.85rem;
    font-weight: 700;
    color: #444;
}

.std-badge__sub {
    font-size: 0.72rem;
    color: #777;
    max-width: 120px;
}

/* ----- CP: Pipeline process (3 angled layers) ----- */
.process-section {
    background: linear-gradient(180deg, var(--c-black) 0%, var(--c-black-2) 100%);
    padding-block: clamp(3.5rem, 8vw, 6rem);
    overflow: hidden;
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
    margin-block-start: 2rem;
}

.process-step {
    position: relative;
    padding: 2rem 1.6rem;
    background: var(--c-slate);
    border: 1px solid var(--c-border);
    clip-path: polygon(0 0, 100% 8%, 96% 100%, 0 92%);
    transition: transform 0.35s ease;
}

.process-step:nth-child(2) {
    margin-block-start: 2rem;
    background: var(--c-black-2);
    clip-path: polygon(4% 8%, 100% 0, 100% 92%, 0 100%);
}

.process-step:nth-child(3) {
    margin-block-start: 4rem;
    background: linear-gradient(145deg, var(--c-slate) 0%, rgba(128, 0, 32, 0.25) 100%);
    clip-path: polygon(0 8%, 96% 0, 100% 100%, 4% 92%);
}

[dir="ltr"] .process-step { clip-path: polygon(0 8%, 100% 0, 96% 92%, 4% 100%); }
[dir="ltr"] .process-step:nth-child(2) { clip-path: polygon(0 0, 96% 8%, 100% 100%, 4% 92%); }
[dir="ltr"] .process-step:nth-child(3) { clip-path: polygon(4% 0, 100% 8%, 96% 100%, 0 92%); }

.process-step:hover {
    transform: translateY(-4px);
}

.process-step__num {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--c-wine-bright);
    opacity: 0.5;
    line-height: 1;
    margin-bottom: 0.8rem;
}

.process-step__title {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--c-offwhite);
    margin: 0 0 0.8rem;
}

.process-step__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.45rem;
}

.process-step__list li {
    font-size: 0.88rem;
    color: var(--c-text-muted);
    padding-inline-start: 1rem;
    position: relative;
}

.process-step__list li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0.55em;
    width: 5px;
    height: 5px;
    background: var(--c-wine-bright);
    transform: skewX(-20deg);
}

.process-step:hover .process-step__list li {
    color: rgba(255, 255, 255, 0.85);
}

/* ----- CP: Micro-catalog ----- */
.catalog-section {
    background: var(--c-black);
    padding-block: clamp(3rem, 7vw, 5.5rem);
}

.catalog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem;
}

.catalog-card {
    position: relative;
    padding: 2rem 1.5rem;
    min-height: 280px;
    background: var(--c-black-2);
    border: 1px solid var(--c-border);
    clip-path: polygon(0 0, 100% 6%, 94% 100%, 6% 94%);
    transition: border-color 0.3s ease, transform 0.35s ease;
}

.catalog-card:nth-child(2) {
    clip-path: polygon(6% 0, 100% 0, 100% 94%, 0 100%);
    margin-block-start: 1.8rem;
}

.catalog-card:nth-child(3) {
    clip-path: polygon(0 6%, 94% 0, 100% 100%, 0 94%);
    margin-block-start: 3.2rem;
}

[dir="ltr"] .catalog-card { clip-path: polygon(6% 0, 100% 0, 94% 94%, 0 100%); }
[dir="ltr"] .catalog-card:nth-child(2) { clip-path: polygon(0 0, 94% 6%, 100% 100%, 6% 94%); }
[dir="ltr"] .catalog-card:nth-child(3) { clip-path: polygon(6% 6%, 100% 0, 94% 100%, 0 94%); }

.catalog-card:hover {
    border-color: var(--c-wine-bright);
    transform: translateY(-5px);
}

.catalog-card__label {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--c-wine-glow);
    margin-bottom: 0.8rem;
}

.catalog-card__title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--c-offwhite);
    margin: 0 0 1rem;
}

.catalog-card__items {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.5rem;
}

.catalog-card__items li {
    font-size: 0.86rem;
    color: var(--c-text-muted);
    padding-inline-start: 0.9rem;
    border-inline-start: 2px solid var(--c-wine);
}

/* ----- CP: Technical deep-dive (white) ----- */
.tech-dive {
    background: var(--c-offwhite);
    color: var(--c-black);
    padding-block: clamp(3.5rem, 8vw, 6rem);
    clip-path: polygon(0 4%, 52% 0, 100% 5%, 100% 100%, 0 100%);
}

[dir="ltr"] .tech-dive {
    clip-path: polygon(0 5%, 48% 0, 100% 4%, 100% 100%, 0 100%);
}

.tech-dive .section__title {
    color: var(--c-black);
}

.tech-dive .section__intro {
    color: #555;
}

.tech-dive__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.tech-dive__text p {
    font-size: 0.95rem;
    line-height: 1.9;
    color: #444;
    margin: 0 0 1rem;
}

.tech-dive__diagram {
    position: relative;
    aspect-ratio: 4/3;
    background: #fff;
    border: 1px solid #ddd;
    clip-path: polygon(0 0, 100% 5%, 95% 100%, 5% 95%);
    padding: 1.5rem;
}

.tech-dive__diagram svg {
    width: 100%;
    height: 100%;
}

.tech-dive__diagram svg .diagram-caption {
    stroke: none;
    letter-spacing: 0.02em;
}

body.locale-fa .tech-dive__diagram svg .diagram-caption {
    font-family: var(--font-fa);
}

body.locale-en .tech-dive__diagram svg .diagram-caption {
    font-family: var(--font-en);
}

/* ----- CP: Case studies slider ----- */
.cases-section {
    background: var(--c-black-2);
    padding-block: clamp(3rem, 7vw, 5rem);
}

.cases-slider {
    display: flex;
    gap: 1.2rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-block-end: 1rem;
    scrollbar-width: none;
}

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

.case-slide {
    flex: 0 0 min(340px, 85vw);
    scroll-snap-align: start;
    position: relative;
    min-height: 260px;
    border: 1px solid var(--c-border);
    clip-path: polygon(0 0, 100% 6%, 94% 100%, 6% 94%);
    overflow: hidden;
}

.case-slide img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    filter: grayscale(0.8) brightness(0.7);
    transition: filter 0.4s ease;
}

.case-slide:hover img {
    filter: grayscale(0) brightness(0.85);
}

.case-slide__body {
    padding: 1.2rem;
    background: var(--c-black);
}

.case-slide__client {
    font-size: 0.75rem;
    color: var(--c-wine-glow);
    font-weight: 700;
}

.case-slide__name {
    font-size: 1rem;
    font-weight: 800;
    color: #fff;
    margin: 0.3rem 0 0;
}

.case-slide__meta {
    font-size: 0.8rem;
    color: var(--c-text-muted);
    margin: 0.4rem 0 0;
}

/* ----- CP: Smart CTA banner ----- */
.dept-cta {
    position: relative;
    background: #000;
    padding-block: clamp(3.5rem, 8vw, 5.5rem);
    overflow: hidden;
}

.dept-cta::before,
.dept-cta::after {
    content: "";
    position: absolute;
    width: 140%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--c-wine-bright), transparent);
    opacity: 0.55;
}

.dept-cta::before {
    inset-block-start: 25%;
    inset-inline-start: -20%;
    transform: rotate(-10deg);
}

.dept-cta::after {
    inset-block-end: 30%;
    inset-inline-start: -20%;
    transform: rotate(7deg);
}

.dept-cta__inner {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 720px;
    margin-inline: auto;
}

.dept-cta__title {
    font-size: clamp(1.5rem, 3.5vw, 2.2rem);
    font-weight: 900;
    color: #fff;
    margin: 0 0 1rem;
}

.dept-cta__lead {
    color: var(--c-text-muted);
    margin: 0 0 2rem;
    font-size: 1.05rem;
}

/* ----- Monitoring: Methods grid ----- */
.method-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.4rem;
}

.method-card {
    position: relative;
    padding: 2rem 1.6rem;
    min-height: 320px;
    background: var(--c-black-2);
    border: 1px solid var(--c-border);
    clip-path: polygon(0 0, 96% 0, 100% 88%, 4% 100%);
    overflow: hidden;
    transition: transform 0.35s ease, border-color 0.35s ease;
}

.method-card:nth-child(2) {
    clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 88%);
    margin-block-start: 2rem;
    background: linear-gradient(160deg, var(--c-black-2) 0%, rgba(128, 0, 32, 0.15) 100%);
}

[dir="ltr"] .method-card { clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 88%); }
[dir="ltr"] .method-card:nth-child(2) { clip-path: polygon(0 0, 96% 0, 100% 88%, 4% 100%); }

.method-card::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    width: 4px;
    height: 100%;
    background: var(--c-wine-bright);
    transform: skewX(-8deg);
}

.method-card:hover {
    transform: translateY(-5px);
    border-color: var(--c-wine-bright);
}

.method-card__type {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--c-wine-glow);
    margin-bottom: 0.6rem;
}

.method-card__title {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--c-offwhite);
    margin: 0 0 1rem;
}

.method-card__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.55rem;
}

.method-card__list li {
    font-size: 0.9rem;
    color: var(--c-text-muted);
    padding-inline-start: 1rem;
    border-inline-start: 2px solid var(--c-wine);
}

/* ----- Monitoring: Data logging showcase ----- */
.data-logging {
    position: relative;
    background: #000;
    padding-block: clamp(3.5rem, 8vw, 6rem);
    overflow: hidden;
}

.data-logging::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(90deg, transparent, transparent 60px, rgba(192, 26, 58, 0.07) 60px, rgba(192, 26, 58, 0.07) 61px),
        repeating-linear-gradient(0deg, transparent, transparent 50px, rgba(192, 26, 58, 0.05) 50px, rgba(192, 26, 58, 0.05) 51px);
    pointer-events: none;
}

.data-logging__grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: center;
}

.data-logging__chart {
    background: var(--c-black-2);
    border: 1px solid var(--c-border);
    padding: 1.5rem;
    clip-path: polygon(0 5%, 96% 0, 100% 95%, 4% 100%);
}

.data-logging__chart svg {
    width: 100%;
    height: auto;
}

.data-logging__features {
    display: grid;
    gap: 1rem;
}

.data-logging__feat {
    padding: 1rem 1.2rem;
    border: 1px solid var(--c-border);
    clip-path: polygon(0 0, 100% 0, 98% 100%, 2% 100%);
    font-size: 0.9rem;
    color: var(--c-text-muted);
}

.data-logging__feat strong {
    display: block;
    color: var(--c-offwhite);
    margin-bottom: 0.25rem;
}

/* ----- Monitoring: Injection & sampling (white box) ----- */
.injection-section {
    background: var(--c-offwhite);
    color: var(--c-black);
    padding-block: clamp(3rem, 7vw, 5rem);
    clip-path: polygon(0 5%, 48% 0, 100% 4%, 100% 100%, 0 100%);
}

[dir="ltr"] .injection-section {
    clip-path: polygon(0 4%, 52% 0, 100% 5%, 100% 100%, 0 100%);
}

.injection-section .section__title { color: var(--c-black); }
.injection-section .section__intro { color: #555; }

.injection-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
}

.injection-item {
    background: #fff;
    border: 1px solid #e0dbd2;
    padding: 1.5rem;
    clip-path: polygon(0 0, 100% 0, 100% 90%, 90% 100%, 0 100%);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.injection-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px -20px rgba(128, 0, 32, 0.45);
}

.injection-item h4 {
    font-size: 1rem;
    font-weight: 800;
    margin: 0 0 0.5rem;
    color: var(--c-wine);
}

.injection-item p {
    font-size: 0.85rem;
    color: #666;
    margin: 0;
    line-height: 1.7;
}

/* ----- Coatings: Survey timeline ----- */
.survey-section {
    background: var(--c-black);
    padding-block: clamp(3rem, 7vw, 5.5rem);
}

.survey-timeline {
    position: relative;
    display: grid;
    gap: 1.4rem;
    margin-block-start: 2rem;
}

.survey-timeline::before {
    content: "";
    position: absolute;
    inset-inline-start: 24px;
    inset-block: 0;
    width: 2px;
    background: linear-gradient(var(--c-wine-bright), transparent);
    transform: skewX(-6deg);
}

[dir="ltr"] .survey-timeline::before {
    inset-inline-start: auto;
    inset-inline-end: 24px;
    transform: skewX(6deg);
}

.survey-card {
    position: relative;
    margin-inline-start: 3rem;
    padding: 1.8rem 1.6rem;
    background: var(--c-black-2);
    border: 1px solid var(--c-border);
    clip-path: polygon(0 0, 98% 0, 100% 100%, 2% 96%);
    transition: border-color 0.3s ease, transform 0.3s ease;
}

.survey-card:nth-child(even) {
    clip-path: polygon(2% 0, 100% 4%, 98% 100%, 0 100%);
    margin-inline-start: 4rem;
}

[dir="ltr"] .survey-card { clip-path: polygon(2% 0, 100% 0, 98% 96%, 0 100%); margin-inline-start: 0; margin-inline-end: 3rem; }
[dir="ltr"] .survey-card:nth-child(even) { clip-path: polygon(0 4%, 98% 0, 100% 100%, 2% 100%); margin-inline-end: 4rem; }

.survey-card:hover {
    border-color: var(--c-wine-bright);
    transform: translateX(4px);
}

[dir="ltr"] .survey-card:hover { transform: translateX(-4px); }

.survey-card__code {
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--c-wine-bright);
    margin-bottom: 0.4rem;
}

.survey-card__title {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--c-offwhite);
    margin: 0 0 0.5rem;
}

.survey-card__desc {
    font-size: 0.88rem;
    color: var(--c-text-muted);
    margin: 0;
    line-height: 1.75;
}

/* ----- Coatings: Portfolio (off-white grid) ----- */
.portfolio-section {
    background: var(--c-offwhite);
    color: var(--c-black);
    padding-block: clamp(3rem, 7vw, 5.5rem);
    clip-path: polygon(0 3%, 55% 0, 100% 4%, 100% 100%, 0 100%);
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
}

.coating-spec {
    background: #fff;
    border: 1px solid #e2ddd4;
    padding: 1.4rem;
    clip-path: polygon(0 0, 100% 0, 100% 88%, 88% 100%, 0 100%);
}

.coating-spec:nth-child(even) {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 12% 100%, 0 88%);
    margin-block-start: 1.2rem;
}

.coating-spec h4 {
    font-size: 1.05rem;
    font-weight: 800;
    margin: 0 0 0.8rem;
    color: var(--c-black);
}

.coating-spec table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.coating-spec th,
.coating-spec td {
    padding: 0.45rem 0.6rem;
    text-align: start;
    border-bottom: 1px solid #ece8e0;
}

.coating-spec th {
    color: var(--c-wine);
    font-weight: 700;
    width: 40%;
}

.coating-spec td {
    color: #555;
}

/* ----- Coatings: Wine CTA banner ----- */
.survey-cta {
    position: relative;
    background: linear-gradient(135deg, var(--c-wine) 0%, #5a0018 100%);
    padding-block: clamp(3rem, 7vw, 5rem);
    clip-path: polygon(0 8%, 100% 0, 100% 92%, 0 100%);
    overflow: hidden;
}

[dir="ltr"] .survey-cta {
    clip-path: polygon(0 0, 100% 8%, 100% 100%, 0 92%);
}

.survey-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(-12deg, transparent, transparent 40px, rgba(0,0,0,0.08) 40px, rgba(0,0,0,0.08) 41px);
}

.survey-cta__inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 2rem;
    align-items: center;
}

.survey-cta__title {
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 900;
    color: #fff;
    margin: 0 0 0.8rem;
}

.survey-cta__lead {
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 1.5rem;
    line-height: 1.8;
}

.survey-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.survey-cta .shape-btn--outline {
    color: #fff;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5);
}

.survey-cta .shape-btn:not(.shape-btn--outline) {
    --btn-bg: var(--c-black);
    --btn-bg-hover: var(--c-black-2);
}

/* ----- Earthing: Dual core split layout ----- */
.dual-core {
    position: relative;
    background: var(--c-black);
    padding-block: clamp(3rem, 7vw, 5.5rem);
    overflow: hidden;
}

.dual-core::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(118deg, transparent 49.5%, var(--c-wine-bright) 50%, transparent 50.5%),
        linear-gradient(62deg, transparent 49.8%, rgba(192, 26, 58, 0.25) 50%, transparent 50.2%);
    opacity: 0.35;
    pointer-events: none;
}

.dual-core__split {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    min-height: 420px;
    max-width: var(--container-width, 1200px);
    margin-inline: auto;
    padding-inline: var(--container-padding, 1.5rem);
}

.dual-core__panel {
    position: relative;
    padding: clamp(2rem, 5vw, 3rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.dual-core__panel--dark {
    background: var(--c-black-2);
    clip-path: polygon(0 0, 100% 0, 92% 100%, 0 92%);
    border: 1px solid var(--c-border);
    margin-inline-end: -1.5rem;
    z-index: 2;
}

.dual-core__panel--light {
    background: var(--c-offwhite);
    color: var(--c-black);
    clip-path: polygon(8% 0, 100% 8%, 100% 100%, 0 100%);
    margin-block-start: 2.5rem;
    margin-inline-start: -1.5rem;
    z-index: 1;
}

[dir="ltr"] .dual-core__panel--dark {
    clip-path: polygon(0 0, 100% 0, 100% 92%, 8% 100%);
    margin-inline-end: 0;
    margin-inline-start: -1.5rem;
}

[dir="ltr"] .dual-core__panel--light {
    clip-path: polygon(0 8%, 92% 0, 100% 100%, 0 100%);
    margin-inline-start: 0;
    margin-inline-end: -1.5rem;
}

.dual-core__label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--c-wine-bright);
    margin-bottom: 0.6rem;
}

.dual-core__panel--light .dual-core__label {
    color: var(--c-wine);
}

.dual-core__title {
    font-size: clamp(1.2rem, 2.5vw, 1.6rem);
    font-weight: 900;
    margin: 0 0 1.2rem;
    line-height: 1.25;
}

.dual-core__panel--dark .dual-core__title {
    color: var(--c-offwhite);
}

.dual-core__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.6rem;
}

.dual-core__list li {
    font-size: 0.9rem;
    line-height: 1.7;
    padding-inline-start: 1rem;
    border-inline-start: 2px solid var(--c-wine);
}

.dual-core__panel--dark .dual-core__list li {
    color: var(--c-text-muted);
}

.dual-core__panel--light .dual-core__list li {
    color: #555;
}

/* ----- Earthing: Cadweld section ----- */
.cadweld-section {
    position: relative;
    background: #000;
    padding-block: clamp(3.5rem, 8vw, 6rem);
    border-block: 4px solid transparent;
    border-image: repeating-linear-gradient(
        -45deg,
        var(--c-wine-bright),
        var(--c-wine-bright) 8px,
        transparent 8px,
        transparent 14px
    ) 4;
    overflow: hidden;
}

.cadweld-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(90deg, transparent, transparent 80px, rgba(192, 26, 58, 0.04) 80px, rgba(192, 26, 58, 0.04) 81px);
    pointer-events: none;
}

.cadweld-section .container {
    position: relative;
    z-index: 2;
}

.cadweld-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem;
}

.cadweld-product {
    background: var(--c-black-2);
    border: 1px solid var(--c-border);
    padding: 1.4rem;
    clip-path: polygon(0 0, 100% 0, 100% 85%, 85% 100%, 0 100%);
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.cadweld-product:nth-child(even) {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 15% 100%, 0 85%);
    margin-block-start: 1.5rem;
}

.cadweld-product:hover {
    transform: translateY(-4px);
    border-color: var(--c-wine-bright);
}

.cadweld-product__visual {
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    background: rgba(255, 255, 255, 0.03);
    clip-path: polygon(0 0, 100% 0, 96% 100%, 4% 100%);
}

.cadweld-product__visual svg {
    width: 70%;
    height: auto;
}

.cadweld-product h4 {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--c-offwhite);
    margin: 0 0 0.45rem;
}

.cadweld-product p {
    font-size: 0.82rem;
    color: var(--c-text-muted);
    margin: 0 0 0.8rem;
    line-height: 1.65;
}

.cadweld-product__link {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--c-wine-glow);
    text-decoration: none;
    border-bottom: 1px solid var(--c-wine);
    padding-bottom: 2px;
    transition: color 0.2s ease;
}

.cadweld-product__link:hover {
    color: #fff;
}

/* ----- Pigging: Alliance banner ----- */
.alliance-banner {
    position: relative;
    background: linear-gradient(135deg, var(--c-wine) 0%, #4a0015 100%);
    padding-block: clamp(2.5rem, 6vw, 4.5rem);
    clip-path: polygon(0 6%, 100% 0, 100% 94%, 0 100%);
    overflow: hidden;
}

[dir="ltr"] .alliance-banner {
    clip-path: polygon(0 0, 100% 6%, 100% 100%, 0 94%);
}

.alliance-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(12deg, transparent, transparent 35px, rgba(0, 0, 0, 0.12) 35px, rgba(0, 0, 0, 0.12) 36px),
        repeating-linear-gradient(-18deg, transparent, transparent 50px, rgba(0, 0, 0, 0.08) 50px, rgba(0, 0, 0, 0.08) 51px);
}

.alliance-banner__inner {
    position: relative;
    z-index: 2;
    max-width: 820px;
}

.alliance-banner__eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 0.8rem;
}

.alliance-banner__title {
    font-size: clamp(1.3rem, 3vw, 2rem);
    font-weight: 900;
    color: #fff;
    margin: 0 0 0.8rem;
    line-height: 1.2;
}

.alliance-banner__lead {
    color: rgba(255, 255, 255, 0.88);
    margin: 0;
    line-height: 1.85;
    font-size: 1rem;
}

/* ----- Pigging: Project inquiry form ----- */
.pigging-inquiry {
    background: var(--c-black);
    padding-block: clamp(3rem, 7vw, 5.5rem);
}

.pigging-inquiry__box {
    background: var(--c-black-2);
    border: 1px solid var(--c-border);
    padding: clamp(2rem, 5vw, 3rem);
    clip-path: polygon(0 0, 98% 0, 100% 96%, 2% 100%);
}

[dir="ltr"] .pigging-inquiry__box {
    clip-path: polygon(2% 0, 100% 0, 98% 100%, 0 96%);
}

.pigging-inquiry__title {
    font-size: clamp(1.3rem, 3vw, 1.8rem);
    font-weight: 900;
    color: var(--c-offwhite);
    margin: 0 0 0.6rem;
}

.pigging-inquiry__lead {
    color: var(--c-text-muted);
    margin: 0 0 2rem;
    max-width: 540px;
    line-height: 1.75;
}

.pigging-form__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.pigging-form__field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.pigging-form__field--full {
    grid-column: 1 / -1;
}

.pigging-form__field span {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--c-wine-glow);
    text-transform: uppercase;
}

.pigging-form__field input,
.pigging-form__field textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--c-black);
    border: 1px solid var(--c-border);
    color: var(--c-offwhite);
    font-family: inherit;
    font-size: 0.9rem;
    clip-path: polygon(0 0, 100% 0, 100% 88%, 98% 100%, 0 100%);
    transition: border-color 0.2s ease;
}

.pigging-form__field input:focus,
.pigging-form__field textarea:focus {
    outline: none;
    border-color: var(--c-wine-bright);
}

.pigging-form__field textarea {
    resize: vertical;
    min-height: 90px;
}

.pigging-form__actions {
    margin-block-start: 1.5rem;
}

/* ----- Responsive ----- */
@media (max-width: 960px) {
    .dept-hub-grid { grid-template-columns: 1fr; }
    .dept-hub-card,
    .dept-hub-card:nth-child(n) {
        grid-column: span 1;
        margin-block-start: 0 !important;
        min-height: 340px;
    }

    .process-grid,
    .catalog-grid,
    .tech-dive__grid,
    .method-grid,
    .data-logging__grid,
    .injection-grid,
    .portfolio-grid,
    .survey-cta__inner,
    .dual-core__split,
    .cadweld-grid,
    .pigging-form__grid {
        grid-template-columns: 1fr;
    }

    .dual-core__panel--dark,
    .dual-core__panel--light,
    [dir="ltr"] .dual-core__panel--dark,
    [dir="ltr"] .dual-core__panel--light {
        margin: 0 !important;
        clip-path: none;
    }

    .cadweld-product:nth-child(even) {
        margin-block-start: 0 !important;
    }

    .method-card:nth-child(2),
    .coating-spec:nth-child(even) {
        margin-block-start: 0 !important;
    }

    .survey-card,
    .survey-card:nth-child(even) {
        margin-inline: 0 !important;
    }

    .survey-timeline::before { display: none; }

    .process-step:nth-child(n),
    .catalog-card:nth-child(n) {
        margin-block-start: 0 !important;
    }
}