*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
    body {
      font-family: 'Montserrat', sans-serif;
      background: #07162b;
      color: #fff;
    }
 
    /* ══════════════════════════════════
       CSS VARIABLES
    ══════════════════════════════════ */
    :root {
      --pipe-d: 40px;
    --pipe-bg: #939393;
    --pipe-hi: #4a4a4e;
    --pipe-sh: #464646;
      --red:      #c0281e;
      --gold:     #c9a84c;
      --gold-lt:  #e5c36a;
      --navy:     #07162b;
      --navy2:    #050e1c;
      --card-bg:  #0b1e38;
      --card-bd:  rgba(201,168,76,0.22);
      --blue-bd:  rgba(80,110,200,0.3);
    }
 
    /* ══════════════════════════════════
       SHARED FADE-UP
    ══════════════════════════════════ */
    .fade-up {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity 0.75s ease, transform 0.75s ease;
    }
    .fade-up.visible { opacity: 1; transform: translateY(0); }
 
    /* ══════════════════════════════════
       SECTION 1 — INDUSTRIAL HUB
    ══════════════════════════════════ */
    .industrial-section {
      background: var(--navy);
      padding: 80px 60px 100px;
    }
 
    .ind-container {
      max-width: 860px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
 
    /* Header */
    .sec-label {
      display: block;
      color: var(--gold-lt);
      font-size: 0.63rem;
      font-weight: 600;
      letter-spacing: 0.34em;
      text-transform: uppercase;
      margin-bottom: 12px;
      text-align: center;
    }
 
    .sec-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(1.7rem, 3.8vw, 2.6rem);
      font-weight: 700;
      color: #fff;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      line-height: 1.15;
      margin-bottom: 14px;
      text-align: center;
    }
 
    .sec-desc {
      font-size: 0.84rem;
      font-weight: 300;
      color: rgba(255,255,255,0.65);
      line-height: 1.75;
      text-align: center;
      max-width: 600px;
      margin-bottom: 32px;
    }
 
    /* Aerial image */
    .ind-image-wrap {
      width: 100%;
      border-radius: 10px;
      overflow: hidden;
      margin-bottom: 20px;
    }
    .ind-image-wrap img {
      width: 100%;
      height: 260px;
      object-fit: cover;
      display: block;
    }
 
    /* 3 stat cards */
    .ind-stats {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      margin-bottom: 14px;
    }
 
    .ind-stat-card {
      background: var(--card-bg);
      border: 1px solid var(--blue-bd);
      border-radius: 8px;
      padding: 26px 20px 22px;
      text-align: center;
      cursor: default;
      transition: border-color 0.3s, transform 0.3s;
    }
    .ind-stat-card:hover { border-color: var(--gold); transform: translateY(-3px); }
 
    .ind-stat-num {
      font-family: 'Cormorant Garamond', serif;
      font-size: 2rem;
      font-weight: 700;
      color: var(--gold-lt);
      line-height: 1;
      margin-bottom: 8px;
    }
 
    .ind-stat-label {
      font-size: 0.74rem;
      font-weight: 300;
      color: rgba(255,255,255,0.72);
    }
 
    /* Companies grid card */
    .ind-companies-card {
      width: 100%;
      background: var(--card-bg);
      border: 1px solid var(--blue-bd);
      border-radius: 8px;
      padding: 28px 32px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      row-gap: 14px;
      column-gap: 10px;
      margin-bottom: 40px;
      transition: border-color 0.3s;
    }
    .ind-companies-card:hover { border-color: rgba(201,168,76,0.4); }
 
    .company-name {
      font-size: 0.78rem;
      font-weight: 400;
      color: rgba(255,255,255,0.78);
      line-height: 1.4;
    }
 
    /* Industrial impact row */
    .ind-impact {
      width: 100%;
      text-align: center;
      margin-bottom: 0;
    }
 
    .ind-impact-label {
      display: block;
      color: var(--gold-lt);
      font-size: 0.62rem;
      font-weight: 600;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      margin-bottom: 22px;
    }
 
    .ind-impact-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
    }
 
    .ind-impact-item {
      padding: 0 16px;
      border-right: 1px solid rgba(255,255,255,0.08);
    }
    .ind-impact-item:last-child { border-right: none; }
 
    .ind-impact-title {
      display: block;
      color: var(--gold-lt);
      font-size: 0.76rem;
      font-weight: 600;
      margin-bottom: 6px;
    }
 
    .ind-impact-text {
      font-size: 0.78rem;
      font-weight: 300;
      color: rgba(255,255,255,0.68);
      line-height: 1.5;
    }
 
    /* ══════════════════════════════════
       HORIZONTAL PIPE DIVIDER
       Full-width pipe with drops + right vertical
    ══════════════════════════════════ */
    .pipe-divider {
      position: relative;
      width: 100%;
      height: 160px;          /* enough for drops to show */
      background: #040e1e;   /* dark bg behind pipe */
      overflow: visible;
    }
 
    /* Horizontal pipe bar */
    .pdiv-h {
      position: absolute;
      top: 20px;
      left: 0;
      right: 0;
      height: var(--pipe-d);
      background: linear-gradient(
        180deg,
        var(--pipe-hi)  0%,
        var(--pipe-bg) 30%,
        var(--pipe-sh) 58%,
        var(--pipe-bg) 80%,
        var(--pipe-hi) 100%
      );
      box-shadow:
        0 6px 18px rgba(0,0,0,0.8),
        inset 0 2px 5px rgba(255,255,255,0.07),
        inset 0 -2px 5px rgba(0,0,0,0.5);
      z-index: 2;
    }
 
    /* Clamps on horizontal pipe */
    .pdiv-h .hclamp {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 22px;
      height: calc(var(--pipe-d) + 16px);
      background: linear-gradient(90deg, #252528, #3e3e42, #252528);
      border-radius: 4px;
      box-shadow: 2px 0 6px rgba(0,0,0,0.7), -2px 0 6px rgba(0,0,0,0.7);
      z-index: 3;
    }
    .pdiv-h .hclamp::before,
    .pdiv-h .hclamp::after {
      content: '';
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: 10px; height: 10px;
      background: #555;
      border-radius: 50%;
      box-shadow: 0 0 3px rgba(0,0,0,0.9);
    }
    .pdiv-h .hclamp::before { top: 4px; }
    .pdiv-h .hclamp::after  { bottom: 4px; }
 
    /* Clamp positions */
    .hc1 { left: 4%; }
    .hc2 { left: 16%; }
    .hc3 { left: 30%; }
    .hc4 { left: 46%; }
    .hc5 { left: 62%; }
    .hc6 { left: 76%; }
    .hc7 { left: 88%; }
 
    /* Drop stubs */
    .pdiv-h .hdrop {
      position: absolute;
      top: 100%;
      width: var(--pipe-d);
      height: 90px;
      background: linear-gradient(
        90deg,
        var(--pipe-hi)  0%,
        var(--pipe-bg) 25%,
        var(--pipe-sh) 55%,
        var(--pipe-bg) 80%,
        var(--pipe-hi) 100%
      );
      box-shadow: 4px 0 10px rgba(0,0,0,0.7), -4px 0 10px rgba(0,0,0,0.7);
      z-index: 3;
    }
 
    /* Red cap bottom */
    .pdiv-h .hdrop::after {
      content: '';
      position: absolute;
      bottom: 0; left: 50%;
      transform: translateX(-50%);
      width: calc(var(--pipe-d) + 14px);
      height: 22px;
      background: linear-gradient(180deg, #e03020, var(--red), #8b1a10);
      border-radius: 3px;
      box-shadow: 0 5px 14px rgba(192,40,30,0.55);
    }
    /* Red cap ring */
    .pdiv-h .hdrop::before {
      content: '';
      position: absolute;
      bottom: 20px; left: 50%;
      transform: translateX(-50%);
      width: calc(var(--pipe-d) + 9px);
      height: 9px;
      background: linear-gradient(180deg, #c83828, #8b1a10);
      border-radius: 2px;
    }
 
    /* T-joint at top of drop */
    .pdiv-h .hdrop .drop-joint {
      position: absolute;
      top: -6px; left: 50%;
      transform: translateX(-50%);
      width: calc(var(--pipe-d) + 18px);
      height: calc(var(--pipe-d) + 10px);
      background: linear-gradient(180deg, #3a3a3e, #252528, #3a3a3e);
      border-radius: 6px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.8);
      z-index: 2;
    }
 
    /* Drop positions */
    .hd1 { left: calc(25% - 26px); }
    .hd2 { left: calc(68% - 26px); }
 
    /* RIGHT VERTICAL PIPE */
    .pdiv-v {
      position: absolute;
      right: 0;
      top: -80px;        /* extends above into previous section */
      width: var(--pipe-d);
      height: calc(100% + 160px); /* extends below into next section */
      background: linear-gradient(
        90deg,
        var(--pipe-hi)  0%,
        var(--pipe-bg) 25%,
        var(--pipe-sh) 55%,
        var(--pipe-bg) 80%,
        var(--pipe-hi) 100%
      );
      box-shadow:
        -4px 0 16px rgba(0,0,0,0.8),
        inset 2px 0 4px rgba(255,255,255,0.05);
      z-index: 4;
    }
 
    /* Clamps on vertical pipe */
    .pdiv-v .vclamp {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: calc(var(--pipe-d) + 16px);
      height: 20px;
      background: linear-gradient(180deg, #252528, #3e3e42, #252528);
      border-radius: 4px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.7), 0 -2px 6px rgba(0,0,0,0.7);
    }
    .pdiv-v .vclamp::before,
    .pdiv-v .vclamp::after {
      content: '';
      position: absolute;
      top: 50%; transform: translateY(-50%);
      width: 10px; height: 10px;
      background: #555; border-radius: 50%;
      box-shadow: 0 0 3px rgba(0,0,0,0.9);
    }
    .pdiv-v .vclamp::before { left: 4px; }
    .pdiv-v .vclamp::after  { right: 4px; }
    .vca { top: 20%; }
    .vcb { top: 50%; }
    .vcc { top: 75%; }
 
    /* Red wheel valve on vertical pipe */
    .pdiv-v .valve {
      position: absolute;
      top: 60%;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      z-index: 6;
    }
    .valve-stem {
      width: 12px; height: 26px;
      background: linear-gradient(90deg, #3a3a3e, #555, #3a3a3e);
      border-radius: 2px;
    }
    .valve-body {
      width: calc(var(--pipe-d) + 14px);
      height: 30px;
      background: linear-gradient(180deg, #d83828, var(--red), #8b1a10);
      border-radius: 4px;
      box-shadow: 0 4px 12px rgba(192,40,30,0.6);
    }
    .valve-wheel {
      position: relative;
      width: 38px; height: 38px;
      margin-top: 4px;
    }
    .valve-wheel::before {
      content: '';
      position: absolute; inset: 0;
      border-radius: 50%;
      border: 3px solid var(--red);
      box-shadow: 0 0 8px rgba(192,40,30,0.5);
    }
    .valve-wheel::after {
      content: '';
      position: absolute; top: 50%; left: 50%;
      transform: translate(-50%,-50%);
      width: 100%; height: 3px;
      background: var(--red);
      box-shadow: 0 -11px 0 3px var(--red), 0 11px 0 3px var(--red);
    }
    .valve-spoke {
      position: absolute; top: 50%; left: 50%;
      width: 100%; height: 3px;
      background: var(--red);
      transform-origin: left center;
    }
    .valve-spoke:nth-child(1) { transform: translate(-50%,-50%) rotate(0deg); }
    .valve-spoke:nth-child(2) { transform: translate(-50%,-50%) rotate(60deg); }
    .valve-spoke:nth-child(3) { transform: translate(-50%,-50%) rotate(120deg); }
 
    /* Corner joint where h-pipe meets v-pipe */
    .pdiv-corner {
      position: absolute;
      top: 20px;
      right: 0;
      width: var(--pipe-d);
      height: var(--pipe-d);
      background: linear-gradient(135deg, #3a3a3e, #1c1c1e);
      z-index: 5;
      box-shadow: -3px 3px 8px rgba(0,0,0,0.7);
    }
 
    /* ══════════════════════════════════
       SECTION 2 — TOURISM & LIFESTYLE
    ══════════════════════════════════ */
    .tourism-section {
      background: var(--navy2);
      padding: 80px 60px 100px;
      position: relative;
    }
 
    /* Right vertical pipe continues into tourism section */
    .tourism-section .pipe-v-right {
      position: absolute;
      right: 0;
      top: 0;
      width: var(--pipe-d);
      height: 100%;
      background: linear-gradient(
        90deg,
        var(--pipe-hi)  0%,
        var(--pipe-bg) 25%,
        var(--pipe-sh) 55%,
        var(--pipe-bg) 80%,
        var(--pipe-hi) 100%
      );
      box-shadow: -4px 0 16px rgba(0,0,0,0.8);
      z-index: 4;
    }
 
    .tour-container {
      max-width: 860px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      z-index: 3;
    }
 
    /* 2×3 attraction cards */
    .tour-grid {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      margin-bottom: 14px;
    }
 
    .tour-card {
      background: var(--card-bg);
      border: 1px solid var(--blue-bd);
      border-radius: 8px;
      padding: 18px 18px 22px;
      cursor: default;
      transition: border-color 0.3s, transform 0.3s;
    }
    .tour-card:hover { border-color: var(--gold); transform: translateY(-3px); }
 
    .tour-card-time {
      font-size: 0.6rem;
      font-weight: 500;
      color: rgba(255,255,255,0.45);
      letter-spacing: 0.1em;
      text-align: right;
      margin-bottom: 14px;
      display: block;
    }
 
    .tour-card-name {
      display: block;
      color: var(--gold-lt);
      font-size: 0.76rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      margin-bottom: 6px;
    }
 
    .tour-card-desc {
      font-size: 0.74rem;
      font-weight: 300;
      color: rgba(255,255,255,0.68);
      line-height: 1.5;
    }
 
    /* Tourism impact card */
    .tour-impact-card {
      width: 100%;
      background: var(--card-bg);
      border: 1px solid var(--blue-bd);
      border-radius: 8px;
      padding: 28px 32px;
      transition: border-color 0.3s;
    }
    .tour-impact-card:hover { border-color: rgba(201,168,76,0.4); }
 
    .tour-impact-title {
      font-size: 0.78rem;
      font-weight: 500;
      color: rgba(255,255,255,0.85);
      margin-bottom: 20px;
      text-align: center;
    }
 
    .tour-impact-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
      text-align: center;
    }
 
    .tour-impact-col {
      padding: 0 14px;
      border-right: 1px solid rgba(255,255,255,0.08);
    }
    .tour-impact-col:last-child { border-right: none; }
 
    .tour-impact-col-title {
      display: block;
      color: var(--gold-lt);
      font-size: 0.72rem;
      font-weight: 600;
      margin-bottom: 6px;
    }
 
    .tour-impact-col-text {
      font-size: 0.72rem;
      font-weight: 300;
      color: rgba(255,255,255,0.62);
      line-height: 1.5;
    }
 
    /* ══════════════════════════════════
       RESPONSIVE
    ══════════════════════════════════ */
    @media (max-width: 900px) {
      .industrial-section,
      .tourism-section { padding: 60px 32px 80px; }
 
      .ind-companies-card { grid-template-columns: repeat(2, 1fr); }
      .tour-grid { grid-template-columns: repeat(2, 1fr); }
    }
 
    @media (max-width: 640px) {
      :root { --pipe-d: 36px; }
 
      .industrial-section,
      .tourism-section { padding: 50px 20px 60px; }
 
      .ind-stats { grid-template-columns: 1fr; }
      .ind-companies-card { grid-template-columns: 1fr 1fr; padding: 20px; }
      .ind-impact-grid { grid-template-columns: 1fr; gap: 18px; }
      .ind-impact-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: 16px; }
      .ind-impact-item:last-child { border-bottom: none; }
 
      .tour-grid { grid-template-columns: 1fr; }
      .tour-impact-grid { grid-template-columns: 1fr; gap: 18px; }
      .tour-impact-col { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: 16px; }
      .tour-impact-col:last-child { border-bottom: none; }
 
      .pdiv-v { display: none; }
      .tourism-section .pipe-v-right { display: none; }
    }