/* ── HERO ── */
        .hero {
            position: relative; min-height: 70vh;
            display: flex; align-items: center;
            overflow: hidden;
        }
        .hero-bg {
            position: absolute; inset: 0;
            background-image: url('../images/pipeline/pipeline-install.jpg');
            background-size: cover; background-position: center 45%;
            filter: brightness(0.22) saturate(0.5);
            transform: scale(1.04);
            transition: transform 8s ease-out;
        }
        .hero-bg.reveal { transform: scale(1); }

        /* signature: diagonal pipe silhouette overlay */
        .hero-pipes {
            position: absolute; inset: 0; pointer-events: none; overflow: hidden;
        }
        .hero-pipes svg {
            position: absolute; bottom: 0; right: 0;
            width: 65vw; opacity: 0.06;
        }

        .hero-rust-bar {
            position: absolute; top: 0; left: 0;
            width: 4px; height: 100%;
            background: linear-gradient(to bottom, var(--rust), var(--rust-dk));
        }
        .hero-rust-bar::after {
            content: '';
            position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
            width: 12px; height: 12px; border-radius: 50%;
            background: var(--rust);
            box-shadow: 0 0 20px 6px var(--rust-glow);
        }

        .hero-content {
            position: relative; z-index: 2;
            padding: 8rem 6vw 6rem;
            max-width: 900px;
        }

        .hero-eyebrow-btn {
            padding: 6px 14px;
            border-radius: 999px;
            border: 1px solid #870101;
            background: #870101;
            color: #374151;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
            }
        .hero-eyebrow {
            display: inline-flex; align-items: center; gap: 10px;
            font-family: var(--f-cond);
            font-size: 11px; font-weight: 700;
            letter-spacing: 0.28em; text-transform: uppercase;
            color: #ffffff; margin-bottom: 1.5rem;
        }
        .hero-eyebrow::before {
            content: ''; display: block; width: 28px; height: 2px; background: var(--rust);
        }
        .hero h1 {
            font-family: var(--f-display);
            font-size: clamp(1.0rem, 3vw, 3rem);
            font-weight: 700; line-height: 0.93;
            letter-spacing: 0.01em;
            color: #ffffff; margin-bottom: 2rem;
            text-transform: uppercase;
        }
        .hero h1 .accent { color: var(--rust); }
        .hero h1 .thin { font-weight: 300; color: rgba(255,255,255,0.55); }
        .hero-sub {
            font-size: 1.05rem; font-weight: 300; line-height: 1.85;
            color: rgba(255,255,255,0.6); max-width: 540px;
            margin-bottom: 2.75rem;
            border-left: 2px solid rgba(196,92,26,0.4);
            padding-left: 1.25rem;
        }
        .hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
        .btn-rust {
            display: inline-flex; align-items: center; gap: 8px;
            padding: 0.9rem 2.25rem;
            background: var(--rust); color: var(--white);
            font-family: var(--f-display); font-size: 1rem; font-weight: 500;
            letter-spacing: 0.08em; text-transform: uppercase;
            text-decoration: none; border: none; cursor: pointer; border-radius: 1px;
            transition: background 0.2s, transform 0.2s;
        }
        .btn-rust:hover { background: var(--rust-lt); transform: translateY(-2px); }
        .btn-ghost {
            display: inline-flex; align-items: center; gap: 8px;
            padding: 0.9rem 2rem;
            background: transparent; color: rgba(255,255,255,0.7);
            font-family: var(--f-display); font-size: 1rem; font-weight: 400;
            letter-spacing: 0.08em; text-transform: uppercase;
            text-decoration: none;
            border: 1px solid rgba(255,255,255,0.2); border-radius: 1px;
            transition: border-color 0.2s, color 0.2s;
        }
        .btn-ghost:hover { border-color: var(--rust); color: var(--rust); }

        /* hero depth stats */
        .hero-depth {
            position: absolute; right: 0; bottom: 0;
            display: flex; flex-direction: column;
            border-left: 1px solid rgba(255,255,255,0.06);
            border-top: 1px solid rgba(255,255,255,0.06);
        }
        .depth-item {
            padding: 1.5rem 2.5rem;
            border-bottom: 1px solid rgba(255,255,255,0.06);
        }
        .depth-val {
            font-family: var(--f-display);
            font-size: 2.4rem; font-weight: 700;
            color: var(--rust); line-height: 1;
        }
        .depth-key {
            font-family: var(--f-cond);
            font-size: 10px; font-weight: 600;
            letter-spacing: 0.2em; text-transform: uppercase;
            color: rgba(255,255,255,0.3); margin-top: 4px;
        }
        @media (max-width: 900px) { .hero-depth { display: none; } }

        /* ── PIPELINE PROCESS STRIP (SIGNATURE) ── */
        .process-strip {
            background: #000000;
            border-top: 1px solid rgba(255,255,255,0.06);
            border-bottom: 1px solid rgba(255,255,255,0.06);
            overflow: hidden;
            position: relative;
        }
        .process-strip-inner {
            max-width: 1400px; margin: 0 auto;
            padding: 3.5rem 4vw;
        }
        .process-label {
            font-family: var(--f-cond);
            font-size: 10px; font-weight: 700;
            letter-spacing: 0.3em; text-transform: uppercase;
            color: rgba(255,255,255,0.25);
            margin-bottom: 2rem;
        }
        /* the pipeline diagram */
        .pipe-diagram {
            position: relative;
            display: flex; align-items: center;
            gap: 0;
        }
        .pipe-stage {
            flex: 1; position: relative;
            display: flex; flex-direction: column;
            align-items: center;
        }
        /* horizontal pipe line */
        .pipe-line {
            position: absolute; top: 28px; left: 50%; right: -50%;
            height: 6px;
            background: linear-gradient(to right, var(--pipe-mid), var(--pipe-lt));
            border-top: 1px solid rgba(255,255,255,0.12);
            border-bottom: 1px solid rgba(255,255,255,0.06);
            z-index: 0;
        }
        .pipe-stage:last-child .pipe-line { display: none; }
        /* rust fill on hover via JS class */
        .pipe-line.active { background: linear-gradient(to right, var(--rust), var(--rust-dk)); }

        .pipe-node {
            position: relative; z-index: 1;
            width: 56px; height: 56px;
            border-radius: 50%;
            background: var(--pipe-mid);
            border: 2px solid rgba(255,255,255,0.1);
            display: flex; align-items: center; justify-content: center;
            margin-bottom: 1.25rem;
            transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
            cursor: default;
        }
        .pipe-node svg {
            width: 22px; height: 22px;
            stroke: var(--slate); fill: none;
            stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
            transition: stroke 0.3s;
        }
        .pipe-stage.lit .pipe-node {
            background: var(--rust-glow);
            border-color: var(--rust);
            box-shadow: 0 0 18px 4px var(--rust-glow);
        }
        .pipe-stage.lit .pipe-node svg { stroke: var(--rust); }
        .pipe-stage.lit .pipe-line { background: linear-gradient(to right, var(--rust-dk), var(--pipe-lt)); }

        .pipe-stage-label {
            font-family: var(--f-display);
            font-size: 0.95rem; font-weight: 500;
            letter-spacing: 0.08em; text-transform: uppercase;
            color: rgba(255,255,255,0.35);
            text-align: center; transition: color 0.3s;
        }
        .pipe-stage.lit .pipe-stage-label { color: var(--white); }
        .pipe-stage-sub {
            font-size: 11px; font-weight: 300;
            color: rgba(255,255,255,0.2);
            text-align: center; margin-top: 4px;
            line-height: 1.4; transition: color 0.3s;
        }
        .pipe-stage.lit .pipe-stage-sub { color: rgba(255,255,255,0.5); }

        @media (max-width: 768px) {
            .pipe-diagram { flex-direction: column; align-items: flex-start; gap: 0; }
            .pipe-stage { flex-direction: row; align-items: center; gap: 1rem; width: 100%; padding: 0.75rem 0; }
            .pipe-line { top: 50%; left: 27px; right: auto; bottom: -50%; width: 6px; height: 100%; }
            .pipe-node { margin-bottom: 0; flex-shrink: 0; }
            .pipe-stage-label { text-align: left; }
            .pipe-stage-sub { text-align: left; }
        }

        /* ── SECTION BASE ── */
        .pg-section {
            max-width: 1400px; margin: 0 auto;
            padding: 5.5rem 4vw;
        }
        .sec-eyebrow {
            display: inline-flex; align-items: center; gap: 10px;
            font-family: var(--f-cond);
            font-size: 10px; font-weight: 700;
            letter-spacing: 0.28em; text-transform: uppercase;
            color: var(--rust); margin-bottom: 0.75rem;
        }
        .sec-eyebrow::before { content: ''; display: block; width: 22px; height: 2px; background: var(--rust); }
        .sec-title {
            font-family: var(--f-display);
            font-size: clamp(2.2rem, 4vw, 3.8rem);
            font-weight: 700; line-height: 0.95;
            letter-spacing: 0.02em; text-transform: uppercase;
            color: var(--white);
        }
        .sec-title .accent { color: var(--rust); }

        /* ── SERVICES GRID ── */
        .services-bg { background: var(--pipe); }
        .services-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.5px;
            background: rgba(255,255,255,0.05);
            margin-top: 3.5rem;
        }
        .svc-card {
            background: var(--pipe);
            padding: 2.75rem 2.25rem;
            position: relative; overflow: hidden;
            transition: background 0.3s;
        }
        .svc-card:hover { background: var(--pipe-mid); }
        .svc-card::before {
            content: '';
            position: absolute; bottom: 0; left: 0;
            width: 0; height: 3px;
            background: var(--rust);
            transition: width 0.45s ease;
        }
        .svc-card:hover::before { width: 100%; }
        .svc-icon {
            width: 48px; height: 48px;
            /* background: rgba(196,92,26,0.1); */
            /* border: 1px solid rgba(196,92,26,0.2); */
            display: flex; align-items: center; justify-content: center;
            margin-bottom: 1.75rem;
            transition: background 0.3s, border-color 0.3s;
        }
        .svc-card:hover .svc-icon { border-color: var(--rust); }
        .svc-icon svg {
            width: 22px; height: 22px; stroke: var(--rust);
            fill: none; stroke-width: 1.5;
            stroke-linecap: round; stroke-linejoin: round;
        }
        .svc-num {
            font-family: var(--f-display);
            font-size: 6rem; font-weight: 700;
            color: rgba(255,255,255,0.03);
            line-height: 1;
            position: absolute; top: 0.5rem; right: 1rem;
            pointer-events: none; user-select: none;
            letter-spacing: 0.02em;
        }
        .svc-title {
            font-family: var(--f-display);
            font-size: 1.4rem; font-weight: 600;
            letter-spacing: 0.04em; text-transform: uppercase;
            color: var(--white); margin-bottom: 0.75rem;
        }
        .svc-desc {
            font-size: 0.875rem; font-weight: 300; line-height: 1.85;
            color: var(--slate);
        }
        @media (max-width: 900px) { .services-grid { grid-template-columns: 1fr 1fr; } }
        @media (max-width: 580px) { .services-grid { grid-template-columns: 1fr; } }

        /* ── STATS BAND ── */
        .stats-band {
            background: var(--rust);
            position: relative; overflow: hidden;
        }
        .stats-band::before {
            content: '';
            position: absolute; inset: 0;
            background: repeating-linear-gradient(
                -60deg, transparent 0, transparent 48px,
                rgba(0,0,0,0.06) 48px, rgba(0,0,0,0.06) 64px
            );
        }
        .stats-band-inner {
            max-width: 1400px; margin: 0 auto;
            display: grid; grid-template-columns: repeat(4, 1fr);
            border-left: 1px solid rgba(255,255,255,0.15);
            position: relative;
        }
        .stat-item {
            padding: 2.75rem 2rem;
            border-right: 1px solid rgba(255,255,255,0.15);
            text-align: center;
        }
        .stat-val {
            font-family: var(--f-display);
            font-size: 3rem; font-weight: 700;
            color: var(--white); line-height: 1;
        }
        .stat-unit { font-size: 1.5rem; }
        .stat-key {
            font-family: var(--f-cond);
            font-size: 11px; font-weight: 600;
            letter-spacing: 0.2em; text-transform: uppercase;
            color: rgba(255,255,255,0.65); margin-top: 6px;
        }
        @media (max-width: 768px) { .stats-band-inner { grid-template-columns: 1fr 1fr; } }

        /* ── METHODOLOGY (alternating split) ── */
        .method-item {
            display: grid; grid-template-columns: 1fr 1fr;
            min-height: 480px; overflow: hidden;
            border-bottom: 1px solid rgba(255,255,255,0.05);
        }
        .method-item:nth-child(even) { direction: rtl; }
        .method-item:nth-child(even) > * { direction: ltr; }

        .mi-img {
            position: relative; overflow: hidden; background: var(--pipe);
        }
        .mi-img img {
            width: 100%; height: 100%; object-fit: cover; display: block;
            filter: brightness(0.7) saturate(0.65);
            transform: scale(1.05);
            transition: transform 0.8s ease, filter 0.5s;
        }
        .method-item:hover .mi-img img { transform: scale(1); filter: brightness(0.85) saturate(0.9); }
        .mi-img-overlay {
            position: absolute; inset: 0;
            background: linear-gradient(to right, rgba(13,15,18,0.5) 0%, transparent 60%);
        }
        .method-item:nth-child(even) .mi-img-overlay {
            background: linear-gradient(to left, rgba(13,15,18,0.5) 0%, transparent 60%);
        }
        .mi-phase {
            position: absolute; top: 1.5rem; left: 1.5rem;
            font-family: var(--f-display);
            font-size: 0.85rem; font-weight: 500;
            letter-spacing: 0.14em; text-transform: uppercase;
            color: var(--rust);
            background: rgba(13,15,18,0.75);
            padding: 6px 12px; backdrop-filter: blur(4px);
        }
        .method-item:nth-child(even) .mi-phase { left: auto; right: 1.5rem; }

        .mi-content {
            background: var(--pipe);
            padding: 4rem 3.5rem;
            display: flex; flex-direction: column; justify-content: center;
            position: relative;
        }
        .mi-content::before {
            content: '';
            position: absolute; top: 0; left: 0;
            width: 3px; height: 0;
            background: var(--rust);
            transition: height 0.5s ease;
        }
        .method-item:hover .mi-content::before { height: 100%; }
        .mi-step {
            font-family: var(--f-cond);
            font-size: 10px; font-weight: 700;
            letter-spacing: 0.26em; text-transform: uppercase;
            color: var(--rust); margin-bottom: 0.9rem;
        }
        .mi-title {
            font-family: var(--f-display);
            font-size: clamp(1.6rem, 2.5vw, 2.2rem);
            font-weight: 700; text-transform: uppercase;
            letter-spacing: 0.03em; color: var(--white);
            line-height: 1.05; margin-bottom: 1.25rem;
        }
        .mi-desc {
            font-size: 0.88rem; font-weight: 300; line-height: 1.9;
            color: var(--slate); margin-bottom: 1.75rem;
        }
        .mi-bullets { list-style: none; }
        .mi-bullets li {
            display: flex; gap: 0.75rem; align-items: flex-start;
            font-size: 0.82rem; font-weight: 400; line-height: 1.6;
            color: rgba(255,255,255,0.5);
            padding: 0.45rem 0;
            border-bottom: 1px solid rgba(255,255,255,0.05);
        }
        .mi-bullets li:first-child { border-top: 1px solid rgba(255,255,255,0.05); }
        .mi-bullets li::before {
            content: '';
            flex-shrink: 0; display: block;
            width: 4px; height: 4px; border-radius: 50%;
            background: var(--rust); margin-top: 7px;
        }

        @media (max-width: 900px) {
            .method-item, .method-item:nth-child(even) { grid-template-columns: 1fr; direction: ltr; }
            .mi-img { height: 260px; }
            .mi-content { padding: 2.5rem 2rem; }
        }

        /* ── EQUIPMENT SECTION ── */
        .equip-bg { background: var(--char); }
        .equip-grid {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 1.5px; background: rgba(255,255,255,0.05);
            margin-top: 3.5rem;
        }
        .equip-card {
            background: var(--pipe);
            padding: 2rem 2rem 2.25rem;
            position: relative; overflow: hidden;
            transition: background 0.3s;
        }
        .equip-card:hover { background: var(--pipe-mid); }
        .equip-card-bar {
            width: 100%; height: 2px;
            background: rgba(255,255,255,0.05);
            position: relative; margin-bottom: 1.75rem;
        }
        .equip-card-bar::after {
            content: '';
            position: absolute; left: 0; top: 0;
            height: 100%; width: 0;
            background: var(--rust);
            transition: width 0.5s ease;
        }
        .equip-card:hover .equip-card-bar::after { width: 100%; }
        .equip-name {
            font-family: var(--f-display);
            font-size: 1.15rem; font-weight: 600;
            letter-spacing: 0.06em; text-transform: uppercase;
            color: var(--white); margin-bottom: 0.6rem;
        }
        .equip-desc {
            font-size: 0.82rem; font-weight: 300; line-height: 1.75;
            color: var(--slate); margin-bottom: 1.25rem;
        }
        .equip-tags { display: flex; flex-wrap: wrap; gap: 5px; }
        .equip-tag {
            font-family: var(--f-cond);
            font-size: 9px; font-weight: 700;
            letter-spacing: 0.14em; text-transform: uppercase;
            padding: 3px 8px;
            border: 1px solid rgba(255,255,255,0.1);
            color: rgba(255,255,255,0.35);
        }

        /* ── HSE STRIP ── */
        .hse-strip {
            background: var(--pipe);
            border-top: 1px solid rgba(255,255,255,0.05);
            border-bottom: 1px solid rgba(255,255,255,0.05);
        }
        .hse-inner {
            max-width: 1400px; margin: 0 auto; padding: 3rem 4vw;
            display: flex; gap: 2rem; align-items: center; flex-wrap: wrap;
        }
        .hse-badge {
            flex-shrink: 0;
            width: 64px; height: 64px;
            border: 2px solid rgba(196,92,26,0.3);
            display: flex; align-items: center; justify-content: center;
        }
        .hse-badge svg { width: 30px; height: 30px; stroke: var(--rust); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
        .hse-text h4 {
            font-family: var(--f-display); font-size: 1.1rem; font-weight: 600;
            letter-spacing: 0.06em; text-transform: uppercase; color: var(--white);
            margin-bottom: 0.3rem;
        }
        .hse-text p { font-size: 0.85rem; font-weight: 300; color: var(--slate); line-height: 1.65; }
        .hse-divider { width: 1px; height: 60px; background: rgba(255,255,255,0.07); flex-shrink: 0; }
        @media (max-width: 768px) { .hse-divider { display: none; } }

        /* ── PROJECT SHOWCASE ── */
        .projects-bg { background: var(--char); }
        .projects-grid {
            display: grid; grid-template-columns: 2fr 1fr 1fr;
            grid-template-rows: 260px 260px;
            gap: 1.5px; background: rgba(255,255,255,0.05);
            margin-top: 3.5rem;
        }
        .proj-card {
            position: relative; overflow: hidden; background: var(--pipe);
            cursor: pointer;
        }
        .proj-card:first-child { grid-row: 1 / 3; }
        .proj-card img {
            width: 100%; height: 100%; object-fit: cover; display: block;
            filter: brightness(0.55) saturate(0.7);
            transform: scale(1.05);
            transition: transform 0.7s ease, filter 0.4s;
        }
        .proj-card:hover img { transform: scale(1); filter: brightness(0.75) saturate(1); }
        .proj-overlay {
            position: absolute; inset: 0;
            background: linear-gradient(to top, rgba(13,15,18,0.9) 0%, transparent 55%);
        }
        .proj-info {
            position: absolute; bottom: 0; left: 0; right: 0; padding: 1.5rem;
        }
        .proj-tag {
            font-family: var(--f-cond);
            font-size: 9px; font-weight: 700;
            letter-spacing: 0.2em; text-transform: uppercase;
            color: var(--rust); margin-bottom: 0.4rem;
        }
        .proj-title {
            font-family: var(--f-display);
            font-size: 1.1rem; font-weight: 600;
            letter-spacing: 0.05em; text-transform: uppercase;
            color: var(--white); line-height: 1.15;
        }
        .proj-card:first-child .proj-title { font-size: 1.6rem; }
        .proj-meta {
            font-size: 11px; font-weight: 300; color: rgba(255,255,255,0.45);
            margin-top: 4px;
        }
        @media (max-width: 900px) {
            .projects-grid {
                grid-template-columns: 1fr 1fr;
                grid-template-rows: repeat(3, 220px);
            }
            .proj-card:first-child { grid-row: auto; grid-column: 1 / 3; }
        }
        @media (max-width: 580px) {
            .projects-grid { grid-template-columns: 1fr; grid-template-rows: repeat(4, 220px); }
            .proj-card:first-child { grid-column: auto; }
        }

        /* ── CTA ── */
        .cta-wrap {
            position: relative; overflow: hidden;
            background: linear-gradient(135deg, var(--rust-dk) 0%, var(--rust) 60%, var(--rust-lt) 100%);
            padding: 6rem 4vw;
        }
        .cta-wrap::before {
            content: '';
            position: absolute; inset: 0;
            background: url('https://images.unsplash.com/photo-1504328345606-18bbc8c9d7d1?w=1200&q=60') center/cover;
            opacity: 0.08; mix-blend-mode: luminosity;
        }
        .cta-inner {
            max-width: 1400px; margin: 0 auto;
            display: grid; grid-template-columns: 1fr auto;
            gap: 3rem; align-items: center; position: relative;
        }
        .cta-text h2 {
            font-family: var(--f-display);
            font-size: clamp(2.5rem, 5vw, 5rem);
            font-weight: 700; text-transform: uppercase;
            letter-spacing: 0.02em; color: var(--white);
            line-height: 0.95;
        }
        .cta-text p {
            font-size: 1rem; font-weight: 300; color: rgba(255,255,255,0.8);
            margin-top: 1rem; max-width: 480px; line-height: 1.75;
        }
        .cta-actions { display: flex; flex-direction: column; gap: 0.75rem; align-items: flex-end; }
        .btn-white {
            display: inline-flex; align-items: center; gap: 10px;
            padding: 1rem 2.5rem;
            background: var(--white); color: var(--rust-dk);
            font-family: var(--f-display); font-size: 1rem; font-weight: 600;
            letter-spacing: 0.08em; text-transform: uppercase;
            text-decoration: none; border-radius: 1px;
            transition: transform 0.2s, background 0.2s; white-space: nowrap;
        }
        .btn-white:hover { transform: translateX(4px); background: var(--smoke); }
        .btn-white-ghost {
            display: inline-flex; align-items: center; gap: 8px;
            padding: 0.85rem 1.75rem;
            background: transparent; color: rgba(255,255,255,0.8);
            font-family: var(--f-display); font-size: 0.9rem; font-weight: 400;
            letter-spacing: 0.08em; text-transform: uppercase;
            text-decoration: none;
            border: 1px solid rgba(255,255,255,0.35); border-radius: 1px;
            transition: border-color 0.2s, color 0.2s; white-space: nowrap;
        }
        .btn-white-ghost:hover { border-color: var(--white); color: var(--white); }
        @media (max-width: 768px) {
            .cta-inner { grid-template-columns: 1fr; }
            .cta-actions { align-items: flex-start; }
        }