/*
 * SEZMC inner pages, Batch 02: MCK Industrial Park, Hyderabad, Sukkur and
 * Shaheed Benazirabad Industrial Enclaves, Invest in Sindh.
 * Loaded after pages.css, on these five pages only (inc/pages.php).
 * Same tokens and type as the homepage; each page has its own composition.
 *
 *  1. Shared Batch 02 parts (header over dark openings, figures, map,
 *     plan viewer on light ground, land-use strata, steps)
 *  2. MCK Industrial Park (mk-)
 *  3. Hyderabad Industrial Enclave (hy-)
 *  4. Sukkur Industrial Enclave (su-)
 *  5. Shaheed Benazirabad Industrial Enclave (sb-)
 *  6. Invest in Sindh (iv-)
 *  7. Reduced motion
 */

/* ==========================================================================
   1. Shared Batch 02 parts
   ========================================================================== */

.sezmc-page {
  --stone: #161b1b;
  --stone-2: #232928;
  --marble: #ece8df;
  --b2-industrial: #23796f;
  --b2-commercial: #5c6bb5;
  --b2-residential: #c9b98c;
  --b2-amenities: #c28a65;
  --b2-green: #6fbf73;
  --b2-road: #c8c4b8;
}

/* Header over the dark openings (MCK, Sukkur, Invest), as on the homepage. */
body.sezmc-designed--mck .sezmc-header-spacer,
body.sezmc-designed--sukkur .sezmc-header-spacer,
body.sezmc-designed--invest .sezmc-header-spacer {
  height: 0;
}

body.sezmc-designed--mck .sezmc-header:not(.is-scrolled):not(.is-menu-open)::before,
body.sezmc-designed--sukkur .sezmc-header:not(.is-scrolled):not(.is-menu-open)::before,
body.sezmc-designed--invest .sezmc-header:not(.is-scrolled):not(.is-menu-open)::before {
  opacity: 0;
}

body.sezmc-designed--mck .sezmc-header:not(.is-scrolled):not(.is-menu-open)::after,
body.sezmc-designed--sukkur .sezmc-header:not(.is-scrolled):not(.is-menu-open)::after,
body.sezmc-designed--invest .sezmc-header:not(.is-scrolled):not(.is-menu-open)::after {
  opacity: 1;
}

html:not(.sezmc-js) body.sezmc-designed--mck .sezmc-header::before,
html:not(.sezmc-js) body.sezmc-designed--sukkur .sezmc-header::before,
html:not(.sezmc-js) body.sezmc-designed--invest .sezmc-header::before {
  opacity: 1 !important;
}

/* The parent theme styles every table and h4; these pages set their own. */
.sezmc-page h4 {
  margin: 0;
  color: inherit;
}

.b2-land__table,
.iv-dist {
  margin: 0;
  border: 0;
  border-spacing: 0;
  font-size: inherit;
}

.b2-land__table :is(th, td),
.iv-dist :is(th, td) {
  border-width: 0 0 1px;
  border-style: solid;
  border-color: var(--rule-light);
  background: transparent !important;
  line-height: 1.4;
}

/* Land-use colours (harmonised with the plans' legends). */
.b2-key--industrial { background: var(--b2-industrial); }
.b2-key--commercial { background: var(--b2-commercial); }
.b2-key--residential { background: var(--b2-residential); }
.b2-key--amenities { background: var(--b2-amenities); }
.b2-key--green { background: var(--b2-green); }
.b2-key--road { background: var(--b2-road); }

/* Plan viewer on a light ground. */
.b2-viewer .dh-viewer__port {
  background: #fff;
  box-shadow: 0 0 0 1px var(--rule-light), 0 40px 80px -60px rgba(7, 29, 32, 0.6);
}

.b2-viewer .dh-viewer__btn {
  border-color: var(--rule-light) !important;
  color: var(--ink) !important;
}

.b2-viewer .dh-viewer__btn:hover {
  border-color: var(--copper) !important;
}

.b2-viewer .dh-viewer__level {
  color: var(--ink-muted);
}

.b2-viewer .dh-viewer__full {
  color: var(--ink);
}

/* Schematic map */
.b2-map {
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
}

.b2-map__land {
  fill: rgba(95, 179, 165, 0.07);
  stroke: rgba(95, 179, 165, 0.45);
  stroke-width: 0.8;
  stroke-linejoin: round;
}

.b2-map__river {
  fill: none;
  stroke: #5aa9d6;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
}

.b2-map__link {
  fill: none;
  stroke: var(--copper);
  stroke-width: 1.4;
  stroke-dasharray: 0.02 0.015;
  stroke-linecap: round;
}

.b2-map__link-label,
.b2-map__label {
  fill: currentColor;
  font-family: var(--sans);
  font-size: 7.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.b2-map__link-label {
  fill: var(--copper);
  font-size: 6.5px;
  text-anchor: middle;
}

.b2-map__region {
  fill: currentColor;
  font-family: var(--sans);
  font-size: 6.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.45;
}

.b2-map__dot {
  fill: var(--on-dark);
  stroke: var(--night);
  stroke-width: 1.2;
}

.b2-map__halo {
  fill: none;
  stroke: var(--copper);
  stroke-width: 1;
  opacity: 0;
}

.b2-map__pt.is-hub .b2-map__dot {
  fill: var(--copper);
  r: 5px;
}

.b2-map__pt.is-hub .b2-map__halo {
  opacity: 0.7;
  transform-box: fill-box;
  transform-origin: center;
  animation: b2-pulse 2.6s var(--ease) infinite;
}

.b2-map__pt.is-minor .b2-map__dot,
.b2-map__pt.is-ref .b2-map__dot {
  r: 3px;
}

.b2-map__pt.is-minor .b2-map__label,
.b2-map__pt.is-ref .b2-map__label {
  font-weight: 500;
  opacity: 0.75;
}

.b2-map__pt.is-exit .b2-map__dot {
  fill: none;
  stroke: var(--copper);
}

.b2-map__arrow {
  fill: none;
  stroke: var(--copper);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes b2-pulse {
  0% { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* Figures */
.b2-fig-row {
  display: grid;
}

/* Land use: strata (core) or band */
.b2-land {
  min-width: 0;
}

.b2-land__total {
  font-family: var(--serif);
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
  font-weight: 300;
  line-height: 1.2;
}

.b2-land__body {
  display: grid;
  gap: 1.5rem;
  margin-top: 1.25rem;
}

.b2-land__core {
  display: flex;
  overflow: hidden;
  border-radius: 0.5rem;
  box-shadow: inset 0 0 0 1px var(--rule-light);
}

.b2-land--band .b2-land__core {
  height: 1.5rem;
}

.b2-land--band .b2-land__seg {
  flex: var(--s) 1 0;
  min-width: 3px;
}

.b2-land--core .b2-land__body {
  grid-template-columns: 4.5rem 1fr;
  align-items: stretch;
}

.b2-land--core .b2-land__core {
  flex-direction: column;
  min-height: 18rem;
  border-radius: 2.25rem 2.25rem 0.5rem 0.5rem;
}

.b2-land--core .b2-land__seg {
  flex: var(--s) 1 0;
  min-height: 4px;
}

.b2-land__seg {
  position: relative;
  transition: filter 240ms var(--ease), opacity 240ms var(--ease);
}

/* A cut face: fine diagonal grain on every stratum. */
.b2-land__seg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 7px);
}

.b2-land.has-hot .b2-land__seg {
  opacity: 0.35;
}

.b2-land.has-hot .b2-land__seg.is-hot {
  opacity: 1;
  filter: saturate(1.15);
}

.b2-land__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.b2-land__table th,
.b2-land__table td {
  padding: 0.65rem 0.5rem;
  border-bottom: 1px solid var(--rule-light);
  text-align: left;
  font-weight: 500;
}

.b2-land__table thead th {
  color: var(--ink-muted);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.b2-land__table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.b2-land__table tbody tr {
  cursor: default;
  transition: background-color 200ms var(--ease);
}

.b2-land__table tbody tr.is-hot,
.b2-land__table tbody tr:focus-visible {
  background: rgba(35, 121, 111, 0.08);
}

.b2-land__swatch {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  margin-right: 0.6rem;
  border-radius: 2px;
  vertical-align: -0.05em;
}

.b2-land__note {
  margin-top: 1rem;
  color: var(--ink-muted);
  font-size: 0.875rem;
  line-height: 1.55;
}

/* Strata grow from the top when shown. */
.pg-motion .b2-land--core .b2-land__seg {
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 900ms var(--ease), filter 240ms, opacity 240ms;
  transition-delay: calc(var(--d, 0) * 120ms + 200ms);
}

.pg-motion .b2-land--band .b2-land__seg {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 900ms var(--ease), filter 240ms, opacity 240ms;
  transition-delay: calc(var(--d, 0) * 120ms + 200ms);
}

.pg-motion .b2-land.is-in .b2-land__seg {
  transform: none;
}

/* Steps (Hyderabad, Sukkur) */
.b2-steps {
  display: grid;
  gap: 1.5rem;
  margin-top: 3rem;
  counter-reset: step;
}

.b2-steps__item {
  position: relative;
  padding: 1.25rem 0 0 2.25rem;
  border-top: 1px solid var(--rule-light);
}

.b2-steps__mark {
  position: absolute;
  top: 1.35rem;
  left: 0;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 4px rgba(35, 121, 111, 0.16);
}

.b2-steps__item--current .b2-steps__mark {
  background: var(--copper);
  box-shadow: 0 0 0 4px rgba(194, 138, 101, 0.2);
}

.b2-steps__item--next .b2-steps__mark {
  border: 1.5px dashed var(--teal);
  background: transparent;
  box-shadow: none;
}

.b2-steps__state {
  display: block;
  color: var(--teal);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.b2-steps__item--next .b2-steps__state {
  color: var(--ink-muted);
}

.b2-steps__title {
  margin-top: 0.35rem;
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1.2;
}

.b2-steps__text {
  margin-top: 0.4rem;
  color: var(--ink-muted);
  line-height: 1.55;
}

@media (min-width: 64em) {
  .b2-steps--row {
    grid-template-columns: repeat(var(--n), minmax(0, 1fr));
    gap: 0 1.5rem;
  }

  .b2-steps--row .b2-steps__item {
    padding: 2rem 0 0;
    border-top: 0;
  }

  .b2-steps--row .b2-steps__item::before {
    content: "";
    position: absolute;
    top: 0.5rem;
    left: 0;
    right: -1.5rem;
    height: 2px;
    background: var(--rule-light);
  }

  .b2-steps--row .b2-steps__item--done::before,
  .b2-steps--row .b2-steps__item--current::before {
    background: var(--teal);
  }

  .b2-steps--row .b2-steps__item:last-child::before {
    right: 0;
  }

  .b2-steps--row .b2-steps__mark {
    top: 0;
  }
}

/* ==========================================================================
   2. MCK Industrial Park (mk-)
   ========================================================================== */

.mk-hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--header) + clamp(2.5rem, 1rem + 5vw, 6rem)) 0 clamp(2.5rem, 2rem + 2vw, 4rem);
  background: var(--stone);
  color: var(--on-dark);
}

/* Polished stone: soft veining in layered gradients (abstract, not a picture of the site). */
.mk-hero__stone {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 85% 10%, rgba(194, 138, 101, 0.16), transparent 60%),
    linear-gradient(118deg, transparent 0 38%, rgba(236, 232, 223, 0.05) 38.4%, transparent 39.2% 61%, rgba(236, 232, 223, 0.04) 61.3%, transparent 62%),
    linear-gradient(152deg, transparent 0 22%, rgba(236, 232, 223, 0.035) 22.3%, transparent 23% 74%, rgba(236, 232, 223, 0.03) 74.2%, transparent 75%),
    linear-gradient(180deg, #1d2423 0%, var(--stone) 60%, #0f1414 100%);
}

/* Saw-cut sweep: three fine copper blades crossing the slab. */
.mk-hero__saw {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.mk-hero__saw span {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(194, 138, 101, 0.55) 30%, rgba(194, 138, 101, 0.55) 70%, transparent);
  animation: mk-saw 14s linear infinite;
}

.mk-hero__saw span:nth-child(2) {
  animation-delay: -4.6s;
  opacity: 0.6;
}

.mk-hero__saw span:nth-child(3) {
  animation-delay: -9.3s;
  opacity: 0.35;
}

@keyframes mk-saw {
  from { transform: translateX(-5vw); }
  to { transform: translateX(105vw); }
}

.mk-hero__grid {
  position: relative;
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

.mk-hero__title {
  margin-top: 1.25rem;
  font-family: var(--serif);
  font-size: clamp(2.75rem, 1.6rem + 5vw, 6.25rem);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: -0.03em;
}

.mk-hero__lead {
  max-width: 34rem;
  margin-top: 1.75rem;
  color: var(--on-dark-muted);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  line-height: 1.6;
}

.mk-hero__stage {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
  margin-top: 1.5rem;
  color: var(--on-dark);
  font-size: 0.9375rem;
}

/* The concept plan as fine light lines on the stone. */
.mk-plate {
  position: relative;
  padding: clamp(1rem, 0.5rem + 1.5vw, 1.75rem);
  border: 1px solid rgba(236, 232, 223, 0.14);
  border-radius: 0.25rem;
  background: #000;
}

/* Copper corner marks, top left and bottom right. */
.mk-plate__marks {
  position: absolute;
  top: -1px;
  left: -1px;
  width: 1.25rem;
  height: 1.25rem;
  border: solid var(--copper);
  border-width: 2px 0 0 2px;
  pointer-events: none;
}

.mk-plate::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 1.25rem;
  height: 1.25rem;
  border: solid var(--copper);
  border-width: 0 2px 2px 0;
}

.mk-plate__link {
  display: block;
}

.mk-plate__img {
  width: 100%;
  aspect-ratio: 530 / 478;
  object-fit: cover;
  object-position: 3% 50% !important;
  filter: invert(1) hue-rotate(180deg) grayscale(0.25) contrast(1.35) brightness(1.15);
  opacity: 0.92;
  transition: opacity 400ms var(--ease);
}

.mk-plate__link:hover .mk-plate__img {
  opacity: 1;
}

.mk-plate__cap {
  margin-top: 0.75rem;
  color: var(--on-dark-muted);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mk-hero__foot {
  position: relative;
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
}

.mk-figs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  border-top: 1px solid var(--rule-dark);
}

.mk-figs__item {
  padding: 1.25rem 1.5rem 0 0;
}

.mk-figs__value {
  font-family: var(--serif);
  font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);
  font-weight: 300;
  line-height: 1;
}

.mk-figs__label {
  margin-top: 0.4rem;
  color: var(--on-dark-muted);
  font-size: 0.875rem;
}

.mk-hero__note {
  max-width: 46rem;
  margin-top: 2rem;
  padding-left: 1rem;
  border-left: 2px solid var(--copper);
  color: var(--on-dark-muted);
  font-size: 0.875rem;
  line-height: 1.55;
}

@media (min-width: 64em) {
  .mk-hero {
    min-height: min(56rem, 100svh);
  }

  .mk-hero__grid {
    grid-template-columns: 1.05fr 1fr;
    gap: 4rem;
  }
}

/* Purpose: objectives as cut slabs */
.mk-purpose {
  background: var(--marble);
}

.mk-purpose__grid {
  display: grid;
  gap: 2.5rem;
}

.mk-slabs {
  display: grid;
  gap: 0.6rem;
}

.mk-slab {
  position: relative;
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1rem;
  align-items: baseline;
  overflow: hidden;
  padding: 1.35rem 1.5rem;
  border-radius: 0.2rem;
  background: #f6f3ec;
  box-shadow: 0 1px 0 rgba(23, 34, 29, 0.08), 0 18px 30px -28px rgba(23, 34, 29, 0.5);
}

/* Each slab a different stone: fine veins at a different angle. */
.mk-slab::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(var(--a, 104deg), transparent 0 18px, rgba(120, 110, 95, 0.07) 18px 19px, transparent 19px 41px);
  pointer-events: none;
}

.mk-slab--1 { --a: 128deg; background: #f2efe7; }
.mk-slab--2 { --a: 96deg; background: #ece6da; }
.mk-slab--3 { --a: 142deg; background: #f4f1ea; }
.mk-slab--4 { --a: 112deg; background: #e9e4d8; }

.mk-slab__n {
  position: relative;
  color: var(--copper-deep);
  font-size: 0.875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.mk-slab__text {
  position: relative;
  font-family: var(--serif);
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  line-height: 1.35;
}

.pg-motion .mk-slab[data-reveal] {
  transform: translateX(-2rem);
}

.pg-motion .mk-slab[data-reveal].is-in {
  transform: none;
}

@media (min-width: 64em) {
  .mk-purpose__grid {
    grid-template-columns: 0.9fr 1.1fr;
    gap: 5rem;
    align-items: start;
  }

  .mk-purpose__head {
    position: sticky;
    top: calc(var(--header) + 2rem);
  }

  .mk-slab:nth-child(even) {
    margin-left: 2.5rem;
  }
}

/* Value chain: a process line */
.mk-chain {
  background: linear-gradient(180deg, var(--stone-2), var(--stone));
  color: var(--on-dark);
}

.mk-chain .pg-intro {
  color: var(--on-dark-muted);
}

.mk-line {
  margin-top: 3rem;
}

.mk-line__rail {
  position: relative;
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scrollbar-width: none;
}

.mk-line__rail::-webkit-scrollbar {
  display: none;
}

.mk-line__track {
  display: none;
}

.mk-line__station {
  flex: 0 0 auto;
  display: grid;
  gap: 0.25rem;
  min-height: 2.75rem;
  padding: 0.75rem 1rem !important;
  border: 1px solid var(--rule-dark) !important;
  border-radius: 0.5rem !important;
  text-align: left;
  transition: border-color 240ms var(--ease), background-color 240ms var(--ease);
}

.mk-line__station[aria-selected="true"] {
  border-color: var(--copper) !important;
  background: rgba(194, 138, 101, 0.12) !important;
}

.mk-line__n {
  color: var(--copper);
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.mk-line__name {
  font-weight: 600;
}

.mk-line__panel {
  margin-top: 2rem;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border: 1px solid var(--rule-dark);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.025);
}

.mk-line:not(.is-tabbed) .mk-line__panel + .mk-line__panel {
  margin-top: 1rem;
}

.mk-line__title {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  font-family: var(--serif);
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  font-weight: 300;
}

.mk-line__title span {
  color: var(--copper);
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 700;
}

.mk-line__cols {
  display: grid;
  gap: 2rem;
  margin-top: 1.5rem;
}

.mk-line__label {
  color: var(--on-dark-muted);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.mk-line__objective {
  margin-top: 0.6rem;
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  font-weight: 300;
  line-height: 1.35;
}

.mk-line__items {
  display: grid;
  gap: 0.6rem;
  margin-top: 0.8rem;
}

.mk-line__items li {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: 0.7rem 0.9rem;
  border-radius: 0.4rem;
  background: rgba(255, 255, 255, 0.04);
}

.mk-line__panel.is-active .mk-line__items li {
  animation: mk-in 600ms var(--ease) both;
  animation-delay: calc(var(--j) * 70ms);
}

@keyframes mk-in {
  from { opacity: 0; transform: translateY(0.5rem); }
  to { opacity: 1; transform: none; }
}

.mk-chain__note {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: center;
  margin-top: 1.5rem;
  color: var(--on-dark-muted);
  font-size: 0.875rem;
}

@media (min-width: 64em) {
  .mk-line__rail {
    display: grid;
    grid-template-columns: repeat(var(--n), minmax(0, 1fr));
    gap: 0;
    overflow: visible;
    padding-top: 1.75rem;
  }

  .mk-line__track {
    position: absolute;
    top: 0.5rem;
    left: calc(50% / var(--n));
    right: calc(50% / var(--n));
    display: block;
    height: 2px;
    background: var(--rule-dark);
  }

  /* The block travels along the line to the selected station. */
  .mk-line__block {
    position: absolute;
    top: -0.55rem;
    left: calc(var(--at) / max(1, var(--n) - 1) * 100%);
    width: 1.75rem;
    height: 1.25rem;
    margin-left: -0.875rem;
    border-radius: 0.15rem;
    background: linear-gradient(135deg, #efe9dc, #b9ad98);
    box-shadow: 0 6px 14px -6px #000;
    transition: left 700ms var(--ease);
  }

  .mk-line__station {
    margin: 0 0.35rem;
    text-align: center;
  }

  .mk-line__cols {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }
}

/* Master plan and strata */
.mk-plan {
  background: var(--paper);
}

.mk-plan__grid {
  display: grid;
  gap: 3rem;
  margin-top: 3rem;
}

@media (min-width: 64em) {
  .mk-plan__grid {
    grid-template-columns: 1.55fr 1fr;
    align-items: start;
  }
}

/* Location and measured distances */
.mk-loc {
  background: var(--stone);
  color: var(--on-dark);
}

.mk-loc__grid {
  display: grid;
  gap: 3rem;
}

.mk-loc .pg-h2 {
  max-width: 22ch;
}

.mk-loc__text {
  display: grid;
  gap: 1rem;
  max-width: 38rem;
  margin-top: 1.5rem;
  color: var(--on-dark-muted);
  line-height: 1.65;
}

.mk-measure {
  display: grid;
  gap: 0.9rem;
  margin-top: 2.25rem;
}

.mk-measure__row {
  display: grid;
  grid-template-areas: "place km" "bar bar";
  grid-template-columns: 1fr auto;
  gap: 0.35rem 1rem;
  align-items: baseline;
}

.mk-measure__place { grid-area: place; }
.mk-measure__km { grid-area: km; }

.mk-measure__place {
  font-weight: 600;
}

.mk-measure__km {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
}

.mk-measure__km abbr {
  font-family: var(--sans);
  font-size: 0.75rem;
  text-decoration: none;
}

.mk-measure__bar {
  grid-area: bar;
  position: relative;
  height: 2px;
  background: var(--rule-dark);
}

.mk-measure__bar span {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--v) * 100%);
  background: var(--copper);
}

/* Measuring ticks at each end of the copper line */
.mk-measure__bar span::before,
.mk-measure__bar span::after {
  content: "";
  position: absolute;
  top: -4px;
  width: 1px;
  height: 10px;
  background: var(--copper);
}

.mk-measure__bar span::before {
  left: 0;
}

.mk-measure__bar span::after {
  right: 0;
}

.pg-motion .mk-measure__row .mk-measure__bar span {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1100ms var(--ease) calc(var(--d, 0) * 110ms + 250ms);
}

.pg-motion .mk-measure__row.is-in .mk-measure__bar span {
  transform: none;
}

.mk-loc__map a {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 0.5rem;
}

.mk-loc__map img {
  width: 100%;
}

@media (min-width: 64em) {
  .mk-loc__grid {
    grid-template-columns: 1fr 1.1fr;
    gap: 5rem;
    align-items: center;
  }
}

/* Development framework */
.mk-frame {
  background: var(--marble);
}

.mk-term {
  margin-top: 3rem;
}

.mk-term__cap {
  color: var(--ink-muted);
  font-size: 0.9375rem;
}

.mk-term__cap strong {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 400;
}

.mk-term__bar {
  display: flex;
  height: 4.5rem;
  margin-top: 1rem;
  overflow: hidden;
  border-radius: 0.4rem;
}

.mk-term__build,
.mk-term__run {
  display: flex;
  flex: var(--w) 1 0;
  align-items: center;
  padding: 0 1rem;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
}

.mk-term__build {
  background: repeating-linear-gradient(135deg, var(--copper-deep) 0 8px, var(--copper) 8px 16px);
}

.mk-term__run {
  background: var(--emerald);
}

.pg-motion .mk-term[data-reveal] .mk-term__build,
.pg-motion .mk-term[data-reveal] .mk-term__run {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1000ms var(--ease);
}

.pg-motion .mk-term[data-reveal] .mk-term__run {
  transition-delay: 500ms;
}

.pg-motion .mk-term.is-in .mk-term__build,
.pg-motion .mk-term.is-in .mk-term__run {
  transform: none;
}

.mk-term__ticks {
  position: relative;
  height: 1.5rem;
  margin-top: 0.4rem;
  color: var(--ink-muted);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.mk-term__ticks li {
  position: absolute;
  left: calc(var(--x) * 100%);
  transform: translateX(-50%);
}

.mk-term__ticks li:first-child {
  transform: none;
}

.mk-term__ticks li:last-child {
  transform: translateX(-100%);
}

.mk-frame__grid {
  display: grid;
  gap: 1.5rem;
  margin-top: 3rem;
}

.mk-roles {
  display: grid;
  gap: 1rem;
}

.mk-role {
  padding: 1.5rem;
  border-top: 2px solid var(--ink);
  background: #f6f3ec;
}

.mk-role__who {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 400;
}

.mk-role__what {
  margin-top: 0.5rem;
  color: var(--ink-muted);
  line-height: 1.55;
}

.mk-notice {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 1rem;
  align-items: start;
  padding: 1.5rem;
  border: 1px solid var(--copper);
  border-radius: 0.5rem;
  background: #fffaf3;
  line-height: 1.6;
}

.mk-notice__mark {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--copper);
  color: #fff;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
}

@media (min-width: 48em) {
  .mk-roles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Documented progress */
.mk-progress {
  background: var(--stone);
  color: var(--on-dark);
}

.mk-progress .pg-intro {
  color: var(--on-dark-muted);
}

.mk-progress__grid {
  display: grid;
  gap: 3rem;
}

.mk-miles {
  position: relative;
  display: grid;
  gap: 1.75rem;
  margin-top: 2.5rem;
  padding-left: 2rem;
}

.mk-miles::before,
.mk-miles::after {
  content: "";
  position: absolute;
  top: 0.4rem;
  bottom: 0.4rem;
  left: 0.45rem;
  width: 2px;
  background: var(--rule-dark);
}

.mk-miles::after {
  bottom: auto;
  height: calc(var(--p, 1) * (100% - 0.8rem));
  background: var(--copper);
}

.mk-mile {
  position: relative;
}

.mk-mile__mark {
  position: absolute;
  top: 0.25rem;
  left: -2rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--copper);
  box-shadow: 0 0 0 4px var(--stone);
}

.mk-mile--target .mk-mile__mark {
  border: 1.5px dashed var(--copper);
  background: var(--stone);
}

.mk-mile__date {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  color: var(--copper);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.mk-mile__state {
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--rule-dark);
  border-radius: 999px;
  color: var(--on-dark-muted);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mk-mile__title {
  margin-top: 0.35rem;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 400;
}

.mk-mile__text {
  margin-top: 0.35rem;
  color: var(--on-dark-muted);
  line-height: 1.55;
}

.mk-progress__photo a {
  display: block;
  overflow: hidden;
  border-radius: 0.5rem;
}

.mk-progress__photo img {
  width: 100%;
  transition: transform 1200ms var(--ease);
}

.mk-progress__photo a:hover img {
  transform: scale(1.03);
}

@media (min-width: 64em) {
  .mk-progress__grid {
    grid-template-columns: 1fr 1.05fr;
    gap: 5rem;
    align-items: center;
  }
}

/* ==========================================================================
   3. Hyderabad Industrial Enclave (hy-)
   ========================================================================== */

.hy-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 2rem + 4vw, 6rem) clamp(2.5rem, 2rem + 2vw, 4rem);
  background: linear-gradient(180deg, #f3f6f4, var(--paper));
}

/* Survey grid behind the opening */
.hy-hero__grid-lines {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(35, 121, 111, 0.07) 1px, transparent 1px) 0 0 / 4rem 4rem,
    linear-gradient(90deg, rgba(35, 121, 111, 0.07) 1px, transparent 1px) 0 0 / 4rem 4rem;
  -webkit-mask-image: linear-gradient(100deg, transparent 30%, #000 75%);
  mask-image: linear-gradient(100deg, transparent 30%, #000 75%);
}

.hy-hero__grid {
  position: relative;
  display: grid;
  gap: 3rem;
  align-items: end;
}

.hy-hero__title {
  margin-top: 1.25rem;
  font-family: var(--serif);
  font-size: clamp(2.75rem, 1.6rem + 4.8vw, 6rem);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: -0.03em;
}

.hy-hero__lead {
  max-width: 36rem;
  margin-top: 1.75rem;
  color: var(--ink-muted);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  line-height: 1.6;
}

.hy-hero__status {
  margin-top: 1.5rem;
}

/* The two parcels, to scale */
.hy-parcels__row {
  display: flex;
  gap: clamp(1rem, 0.5rem + 2vw, 2.5rem);
  align-items: flex-end;
  min-height: clamp(14rem, 10rem + 14vw, 24rem);
}

.hy-parcel {
  --size: clamp(14rem, 10rem + 14vw, 24rem);
  position: relative;
  display: grid;
  align-content: end;
  text-decoration: none;
}

.hy-parcel__plot {
  display: block;
  width: calc(var(--side) * var(--size));
  height: calc(var(--side) * var(--size));
  min-width: 3.5rem;
  min-height: 3.5rem;
  border: 1.5px solid var(--teal);
  background:
    repeating-linear-gradient(0deg, transparent 0 calc(var(--size) / 14 - 1px), rgba(35, 121, 111, 0.22) calc(var(--size) / 14 - 1px) calc(var(--size) / 14)),
    repeating-linear-gradient(90deg, transparent 0 calc(var(--size) / 14 - 1px), rgba(35, 121, 111, 0.22) calc(var(--size) / 14 - 1px) calc(var(--size) / 14)),
    rgba(35, 121, 111, 0.08);
  transition: background-color 300ms var(--ease), transform 300ms var(--ease);
}

.hy-parcel:hover .hy-parcel__plot {
  background-color: rgba(35, 121, 111, 0.16);
}

.hy-parcel__acres {
  margin-top: 0.75rem;
  font-family: var(--serif);
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.75rem);
  font-weight: 300;
  line-height: 1;
}

.hy-parcel__label {
  margin-top: 0.25rem;
  color: var(--ink-muted);
  font-size: 0.8125rem;
}

.hy-parcels__cap {
  margin-top: 1rem;
  color: var(--ink-muted);
  font-size: 0.8125rem;
}

.pg-motion .hy-parcels[data-reveal] .hy-parcel__plot {
  transform: scale(0);
  transform-origin: bottom left;
  transition: transform 1100ms var(--ease) calc(var(--d) * 200ms + 300ms);
}

.pg-motion .hy-parcels.is-in .hy-parcel__plot {
  transform: none;
}

.hy-figs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  border-top: 1px solid var(--rule-light);
}

.hy-figs__item {
  padding: 1.25rem 1.5rem 0 0;
}

.hy-figs__value {
  color: var(--teal);
  font-family: var(--serif);
  font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);
  font-weight: 300;
  line-height: 1;
}

.hy-figs__label {
  margin-top: 0.4rem;
  color: var(--ink-muted);
  font-size: 0.875rem;
}

@media (min-width: 64em) {
  .hy-hero__grid {
    grid-template-columns: 1.1fr 1fr;
    gap: 4rem;
  }
}

/* Corridor */
.hy-corridor {
  background: radial-gradient(110% 120% at 80% 30%, #0f4a43, #072528 60%);
  color: var(--on-dark);
}

.hy-corridor .pg-intro {
  color: var(--on-dark-muted);
}

.hy-corridor__grid {
  display: grid;
  gap: 2.5rem;
}

.hy-stops {
  display: grid;
  gap: 0.35rem;
  margin-top: 2rem;
}

.hy-stop {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.1rem 1rem;
  width: 100%;
  padding: 0.8rem 1rem !important;
  border: 1px solid transparent !important;
  border-radius: 0.5rem !important;
  text-align: left;
  transition: border-color 200ms var(--ease), background-color 200ms var(--ease);
}

.hy-stop:hover,
.hy-stop[aria-pressed="true"] {
  border-color: rgba(194, 138, 101, 0.6) !important;
  background: rgba(194, 138, 101, 0.1) !important;
}

.hy-stop__name {
  font-weight: 600;
}

.hy-stop__km {
  color: var(--copper);
  font-family: var(--serif);
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.hy-stop__src {
  grid-column: 1 / -1;
  color: var(--on-dark-muted);
  font-size: 0.75rem;
}

.hy-corridor__map {
  min-width: 0;
}

.hy-map {
  color: var(--on-dark);
}

.hy-map .b2-map__label {
  font-size: 6.5px;
}

/* Links stay faint until a destination is chosen; then one draws in. */
.hy-map .b2-map__link {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0.25;
  transition: stroke-dashoffset 900ms var(--ease), opacity 300ms;
}

.hy-corridor:not(:has(.is-live)) .hy-map .b2-map__link,
.hy-map .b2-map__link.is-on {
  stroke-dashoffset: 0;
  opacity: 1;
}

.hy-map .b2-map__pt.is-on .b2-map__halo {
  opacity: 0.9;
  stroke-width: 1.4;
}

.hy-map .b2-map__pt.is-on .b2-map__dot {
  fill: var(--copper);
}

.hy-map .is-offmap {
  opacity: 0.55;
  transition: opacity 300ms;
}

.hy-map .is-offmap.is-on {
  opacity: 1;
}

.hy-readout {
  min-height: 1.5em;
  margin-top: 0.75rem;
  color: var(--copper);
  font-family: var(--serif);
  font-size: 1.25rem;
}

@media (min-width: 64em) {
  .hy-corridor__grid {
    grid-template-columns: 0.9fr 1.3fr;
    gap: 4rem;
    align-items: center;
  }
}

/* Regional industry */
.hy-industry {
  background: var(--paper);
}

.hy-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1px;
  margin-top: 3rem;
  overflow: hidden;
  border-radius: 0.75rem;
  background: var(--rule-light);
}

.hy-stats__item {
  padding: 1.75rem 1.5rem;
  background: #fff;
}

.hy-stats__value {
  color: var(--emerald);
  font-family: var(--serif);
  font-size: clamp(2.5rem, 1.8rem + 2.6vw, 3.75rem);
  font-weight: 300;
  line-height: 1;
}

.hy-stats__label {
  margin-top: 0.75rem;
  color: var(--ink-muted);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.hy-industry__grid {
  display: grid;
  gap: 2rem;
  margin-top: 3rem;
}

.hy-present__title {
  color: var(--ink-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hy-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.hy-chips li {
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--rule-light);
  border-radius: 999px;
  background: #fff;
  font-size: 0.9375rem;
}

.hy-potential {
  display: grid;
  gap: 1rem;
}

.hy-pot {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 0.25rem 1rem;
  padding: 1.5rem;
  border-left: 3px solid var(--teal);
  background: #fff;
}

.hy-pot__n {
  grid-row: span 2;
  color: var(--teal);
  font-weight: 700;
}

.hy-pot__title {
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 400;
}

.hy-pot__text {
  color: var(--ink-muted);
  line-height: 1.55;
}

@media (min-width: 64em) {
  .hy-industry__grid {
    grid-template-columns: 0.8fr 1.2fr;
    gap: 4rem;
  }
}

/* Plans */
.hy-plans {
  background: var(--concrete);
}

.hy-switch {
  margin-top: 2.5rem;
}

.hy-switch__tabs {
  display: inline-flex;
  gap: 0.25rem;
  margin-bottom: 1.25rem;
  padding: 0.3rem;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--rule-light);
}

.hy-switch__tab {
  min-height: 2.75rem;
  padding: 0.5rem 1.25rem !important;
  border-radius: 999px !important;
  color: var(--ink-muted) !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  transition: background-color 240ms var(--ease), color 240ms var(--ease);
}

.hy-switch__tab[aria-selected="true"] {
  background: var(--night) !important;
  color: var(--on-dark) !important;
}

.hy-switch:not(.is-tabbed) .hy-switch__panel + .hy-switch__panel {
  margin-top: 2.5rem;
}

/* Status and pathway */
.hy-status {
  background: var(--paper);
}

.hy-path {
  padding-top: 0;
  background: var(--paper);
}

.hy-ways {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
}

.hy-way {
  position: relative;
  padding: 2rem;
  border-radius: 0.75rem;
  background: var(--night);
  color: var(--on-dark);
}

.hy-way__n {
  color: var(--copper);
  font-weight: 700;
}

.hy-way__who {
  margin-top: 0.75rem;
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 300;
}

.hy-way__text {
  max-width: 32rem;
  margin-top: 0.75rem;
  color: var(--on-dark-muted);
  line-height: 1.6;
}

.hy-way__link {
  display: inline-block;
  margin-top: 1.25rem;
}

@media (min-width: 48em) {
  .hy-ways {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==========================================================================
   4. Sukkur Industrial Enclave (su-)
   ========================================================================== */

.su-hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--header) + clamp(2rem, 1rem + 4vw, 5rem)) 0 clamp(2.5rem, 2rem + 2vw, 4rem);
  background: linear-gradient(160deg, #0b2c2f 0%, var(--night) 55%, #04181a 100%);
  color: var(--on-dark);
}

.su-hero__glow {
  position: absolute;
  top: -20%;
  right: -10%;
  width: 70vw;
  height: 70vw;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(194, 138, 101, 0.16), transparent);
  pointer-events: none;
}

.su-hero__grid {
  position: relative;
  display: grid;
  gap: 2rem;
  align-items: center;
}

.su-hero__title {
  margin-top: 1.25rem;
  font-family: var(--serif);
  font-size: clamp(2.75rem, 1.6rem + 4.8vw, 6rem);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: -0.03em;
}

.su-hero__lead {
  max-width: 36rem;
  margin-top: 1.75rem;
  color: var(--on-dark-muted);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  line-height: 1.6;
}

.su-hero__status {
  margin-top: 1.5rem;
}

.su-map {
  color: var(--on-dark);
}

.su-map .b2-map__land {
  fill: rgba(95, 179, 165, 0.06);
}

.su-map .b2-map__river {
  stroke-width: 2.2;
}

.su-map .b2-map__label {
  font-size: 6px;
}

.su-map .b2-map__region {
  font-size: 5.5px;
}

.b2-map__link--motorway {
  stroke-dasharray: none;
  stroke-width: 1.8;
}

.pg-motion .su-hero__map .b2-map__link {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1600ms var(--ease) 600ms;
}

.pg-motion .su-hero__map.is-in .b2-map__link {
  stroke-dashoffset: 0;
}

.su-figs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  border-top: 1px solid var(--rule-dark);
}

.su-figs__item {
  padding: 1.25rem 1.5rem 0 0;
}

.su-figs__value {
  color: var(--copper);
  font-family: var(--serif);
  font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);
  font-weight: 300;
  line-height: 1;
}

.su-figs__label {
  margin-top: 0.4rem;
  color: var(--on-dark-muted);
  font-size: 0.875rem;
}

@media (min-width: 64em) {
  .su-hero {
    min-height: min(54rem, 100svh);
  }

  .su-hero__grid {
    grid-template-columns: 1fr 1.05fr;
    gap: 3rem;
  }
}

/* Region */
.su-region {
  background: var(--paper);
}

.su-region__grid {
  display: grid;
  gap: 3rem;
  align-items: center;
}

.su-region__text {
  display: grid;
  gap: 1rem;
  max-width: 38rem;
  margin-top: 1.5rem;
  color: var(--ink-muted);
  line-height: 1.65;
}

.su-crops {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.75rem;
}

.su-crops li {
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: rgba(194, 138, 101, 0.14);
  color: var(--copper-deep);
  font-size: 0.875rem;
  font-weight: 600;
}

.su-junction svg {
  display: block;
  width: 100%;
  height: auto;
}

.su-junction__prov {
  stroke: #fff;
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.su-junction__prov--balochistan { fill: #dcd6c8; }
.su-junction__prov--punjab { fill: #c9d8d2; }
.su-junction__prov--sindh { fill: var(--teal); }

.su-junction__name {
  fill: var(--ink);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.6;
}

.su-junction__ring {
  fill: none;
  stroke: var(--copper);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  animation: b2-pulse 2.6s var(--ease) infinite;
}

.su-junction__dot {
  fill: var(--copper);
  stroke: #fff;
  stroke-width: 2;
}

.su-junction__label {
  paint-order: stroke;
  stroke: var(--paper);
  stroke-width: 4px;
  stroke-linejoin: round;
  fill: var(--ink);
  font-family: var(--serif);
  font-size: 15px;
}

@media (min-width: 64em) {
  .su-region__grid {
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
  }
}

/* Distance ladder */
.su-ladder {
  background: var(--night);
  color: var(--on-dark);
}

.su-ladder .pg-intro {
  color: var(--on-dark-muted);
}

.su-ladder__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  justify-content: space-between;
  margin-top: 2.5rem;
}

.su-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.su-ladder:not(.is-live) .su-filter {
  display: none;
}

.su-filter__btn {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.5rem 1rem !important;
  border: 1px solid var(--rule-dark) !important;
  border-radius: 999px !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  transition: border-color 200ms, background-color 200ms;
}

.su-filter__btn[aria-pressed="true"] {
  border-color: var(--copper) !important;
  background: rgba(194, 138, 101, 0.16) !important;
}

.su-ladder__count {
  color: var(--on-dark-muted);
  font-size: 0.875rem;
}

.su-mode {
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--teal-soft);
}

.su-mode--road { background: var(--copper); }
.su-mode--rail { background: #9db7e8; }
.su-mode--air { background: #e8d79d; }
.su-mode--port { background: #5aa9d6; }
.su-mode--power { background: #e88f6a; }
.su-mode--region { background: var(--teal-soft); }

.su-rungs {
  margin-top: 2rem;
  border-top: 1px solid var(--rule-dark);
}

.su-rung {
  display: grid;
  grid-template-areas: "name km" "bar bar" "more more";
  grid-template-columns: 1fr auto;
  gap: 0.35rem 1rem;
  align-items: baseline;
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule-dark);
  transition: opacity 300ms var(--ease);
}

.su-rung.is-dim {
  opacity: 0.22;
}

.su-rung__mode {
  display: none;
}

.su-rung__name {
  grid-area: name;
  font-weight: 600;
}

.su-rung__km {
  grid-area: km;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.su-rung__km small {
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--on-dark-muted);
}

.su-rung__bar {
  grid-area: bar;
  position: relative;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.05);
}

.su-rung__bar span {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--v) * 100%);
  border-radius: 3px;
  background: linear-gradient(90deg, var(--teal), var(--copper));
}

.su-rung__more {
  grid-area: more;
  color: var(--on-dark-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

.su-rung__more em {
  font-style: normal;
  opacity: 0.75;
}

.su-rung__more em::before {
  content: "· ";
}

.pg-motion .su-rung .su-rung__bar span {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1000ms var(--ease) calc(var(--d, 0) * 80ms + 200ms);
}

.pg-motion .su-rung.is-in .su-rung__bar span {
  transform: none;
}

@media (min-width: 64em) {
  .su-rung {
    grid-template-areas: "mode name bar km" ". more more .";
    grid-template-columns: 8rem minmax(12rem, 1.1fr) 1.6fr 6.5rem;
    gap: 0 1.5rem;
    align-items: center;
  }

  .su-rung__mode {
    grid-area: mode;
    display: inline-flex;
    gap: 0.5rem;
    align-items: center;
    color: var(--on-dark-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  
}

/* Site and plan */
.su-site {
  background: var(--paper);
}

.su-study {
  display: grid;
  gap: 2rem;
  margin-top: 3rem;
}

.su-study__fig a {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 0.5rem;
}

.su-parcels {
  display: grid;
  gap: 1px;
  align-content: start;
  overflow: hidden;
  border-radius: 0.75rem;
  background: var(--rule-light);
}

.su-parcels__item {
  padding: 1.25rem 1.5rem;
  background: #fff;
}

.su-parcels dt {
  font-family: var(--serif);
  font-size: 1.75rem;
  font-weight: 300;
}

.su-parcels dd {
  margin-top: 0.25rem;
  color: var(--ink-muted);
}

.su-plan {
  display: grid;
  gap: 2.5rem;
  margin-top: 4rem;
}

@media (min-width: 64em) {
  .su-study {
    grid-template-columns: 1.6fr 1fr;
    gap: 3rem;
    align-items: start;
  }

  .su-plan {
    grid-template-columns: 1.5fr 1fr;
    gap: 3rem;
    align-items: start;
  }
}

/* Clusters and projection */
.su-clusters {
  background: linear-gradient(180deg, #0e3134, var(--night));
  color: var(--on-dark);
}

.su-clusters .pg-intro {
  color: var(--on-dark-muted);
}

.su-clusters__grid {
  display: grid;
  gap: 2.5rem;
}

.su-cluster-list {
  display: grid;
  gap: 1rem;
}

.su-cluster {
  padding: 1.75rem;
  border: 1px solid var(--rule-dark);
  border-radius: 0.75rem;
}

.su-cluster__n {
  color: var(--copper);
  font-weight: 700;
}

.su-cluster__name {
  margin-top: 0.6rem;
  font-family: var(--serif);
  font-size: 1.75rem;
  font-weight: 300;
  line-height: 1.15;
}

.su-cluster__text {
  margin-top: 0.6rem;
  color: var(--on-dark-muted);
  line-height: 1.55;
}

.su-projection {
  align-self: start;
  padding: 1.75rem;
  border: 1.5px dashed rgba(194, 138, 101, 0.7);
  border-radius: 0.75rem;
}

.su-projection__tag {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: rgba(194, 138, 101, 0.18);
  color: var(--copper);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.su-projection__figs {
  display: grid;
  gap: 1rem;
  margin-top: 1.25rem;
}

.su-projection__figs dt {
  font-family: var(--serif);
  font-size: 2.25rem;
  font-weight: 300;
  line-height: 1;
}

.su-projection__figs dd {
  color: var(--on-dark-muted);
}

.su-projection__note {
  margin-top: 1.25rem;
  color: var(--on-dark-muted);
  font-size: 0.8125rem;
  line-height: 1.5;
}

@media (min-width: 48em) {
  .su-cluster-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 64em) {
  .su-clusters__grid {
    grid-template-columns: 1fr 1fr;
  }

  .su-clusters__head {
    grid-column: 1 / -1;
  }

  .su-cluster-list {
    grid-template-columns: 1fr;
  }
}

.su-status {
  background: var(--paper);
}

/* ==========================================================================
   5. Shaheed Benazirabad Industrial Enclave (sb-)
   ========================================================================== */

.sb-hero {
  padding-block: clamp(3rem, 2rem + 4vw, 6rem);
  background: var(--marble);
}

.sb-hero__grid {
  display: grid;
  gap: 3rem;
  align-items: center;
}

.sb-hero__title {
  margin-top: 1.5rem;
  font-family: var(--serif);
  font-size: clamp(3rem, 1.6rem + 5.6vw, 7rem);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.035em;
}

.sb-hero__title .pg-line:last-child > span {
  font-style: italic;
  color: var(--emerald);
}

.sb-hero__lead {
  max-width: 34rem;
  margin-top: 2rem;
  color: var(--ink-muted);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  line-height: 1.65;
}

.sb-hero__status {
  margin-top: 1.5rem;
}

.sb-map {
  color: var(--ink);
}

.sb-map .b2-map__land {
  fill: #fff;
  stroke: rgba(23, 34, 29, 0.25);
}

.sb-map .b2-map__river {
  stroke: #4b97c4;
}

.sb-map .b2-map__dot {
  fill: var(--ink);
  stroke: var(--marble);
}

.sb-map .b2-map__pt.is-hub .b2-map__dot {
  fill: var(--copper);
}

.sb-map .b2-map__label {
  font-size: 9px;
}

.sb-hero__map {
  max-width: 26rem;
  margin-inline: auto;
}

.sb-hero__photo img {
  width: 100%;
  border-radius: 0.5rem;
}

@media (min-width: 64em) {
  .sb-hero__grid {
    grid-template-columns: 1.3fr 1fr;
    gap: 5rem;
  }
}

/* Evidence ledger */
.sb-ledger {
  background: var(--paper);
}

.sb-ledger__grid {
  display: grid;
  gap: 1.5rem;
  margin-top: 3rem;
}

.sb-col {
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-radius: 0.75rem;
}

.sb-col--known {
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--rule-light);
}

.sb-col--pending {
  border: 1.5px dashed var(--silt);
}

.sb-col__title {
  color: var(--ink-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.sb-facts,
.sb-pending {
  display: grid;
  gap: 1.1rem;
  margin-top: 1.5rem;
}

.sb-fact {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: 0.15rem 0.75rem;
}

.sb-fact__tick {
  position: relative;
  grid-row: span 2;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.15rem;
  border-radius: 50%;
  background: var(--emerald);
}

/* The tick mark */
.sb-fact__tick::after {
  content: "";
  position: absolute;
  top: 0.28rem;
  left: 0.44rem;
  width: 0.32rem;
  height: 0.58rem;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.sb-fact__text {
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.35;
}

.sb-fact__src {
  color: var(--ink-muted);
  font-size: 0.8125rem;
}

.sb-pending li {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  color: var(--ink-muted);
  font-size: 1.0625rem;
}

.sb-pending__box {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  border: 1.5px dashed var(--silt);
  border-radius: 0.2rem;
}

@media (min-width: 48em) {
  .sb-ledger__grid {
    grid-template-columns: 1.3fr 1fr;
  }
}

/* Region */
.sb-region {
  padding-top: 0;
  background: var(--paper);
}

.sb-region__grid {
  max-width: 52rem;
}

.sb-region__text {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
  color: var(--ink-muted);
  font-size: 1.0625rem;
  line-height: 1.7;
}

.sb-region__map {
  max-width: 22rem;
  margin-top: 2rem;
}

/* Programme */
.sb-prog {
  background: var(--night);
  color: var(--on-dark);
}

.sb-prog .pg-intro {
  color: var(--on-dark-muted);
}

.sb-three {
  display: grid;
  gap: 1rem;
  margin-top: 3rem;
}

.sb-enclave {
  position: relative;
  display: grid;
  gap: 0.75rem;
  align-content: start;
  padding: 2rem;
  border: 1px solid var(--rule-dark);
  border-radius: 0.75rem;
}

.sb-enclave.is-here {
  border-color: var(--copper);
  background: rgba(194, 138, 101, 0.08);
}

.sb-enclave__name {
  font-family: var(--serif);
  font-size: 1.625rem;
  font-weight: 300;
  line-height: 1.15;
}

.sb-enclave__land {
  color: var(--on-dark-muted);
}

.sb-enclave__here {
  color: var(--copper);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.sb-enclave__link {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--copper);
  text-underline-offset: 0.3em;
}

@media (min-width: 48em) {
  .sb-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ==========================================================================
   6. Invest in Sindh (iv-)
   ========================================================================== */

.iv-hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--header) + clamp(2.5rem, 1rem + 5vw, 6rem)) 0 clamp(3rem, 2rem + 3vw, 5rem);
  background:
    radial-gradient(90% 90% at 100% 0%, rgba(194, 138, 101, 0.18), transparent 55%),
    radial-gradient(120% 120% at 0% 100%, #0f4a43, transparent 60%),
    var(--night);
  color: var(--on-dark);
}

.iv-hero__art {
  position: absolute;
  top: 0;
  right: -6%;
  width: min(62rem, 90vw);
  height: 100%;
  opacity: 0.55;
  pointer-events: none;
}

@media (max-width: 63.99em) {
  .iv-hero__art {
    right: -30%;
    width: 120vw;
    opacity: 0.18;
  }
}

.iv-hero__land {
  fill: rgba(95, 179, 165, 0.05);
  stroke: rgba(95, 179, 165, 0.35);
  stroke-width: 1;
}

.iv-hero__river {
  fill: none;
  stroke: #5aa9d6;
  stroke-width: 1.8;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.pg-motion .iv-hero__river {
  stroke-dashoffset: 1;
  animation: iv-draw 3.2s var(--ease) 400ms forwards;
}

@keyframes iv-draw {
  to { stroke-dashoffset: 0; }
}

.iv-hero__zone {
  fill: var(--copper);
  stroke: var(--night);
  stroke-width: 2;
}

.iv-hero__grid {
  position: relative;
  display: grid;
  gap: 3rem;
  align-items: end;
}

.iv-hero__title {
  margin-top: 1.25rem;
  font-family: var(--serif);
  font-size: clamp(2.75rem, 1.5rem + 5.2vw, 6.5rem);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: -0.03em;
}

.iv-hero__lead {
  max-width: 36rem;
  margin-top: 1.75rem;
  color: var(--on-dark-muted);
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem);
  line-height: 1.6;
}

.iv-hero__updated {
  margin-top: 1.5rem;
  color: var(--on-dark-muted);
  font-size: 0.8125rem;
}

.iv-contents {
  padding: 1.5rem;
  border: 1px solid var(--rule-dark);
  border-radius: 0.75rem;
  background: rgba(7, 29, 32, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.iv-contents__title {
  color: var(--copper);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.iv-contents__list {
  display: grid;
  margin-top: 0.75rem;
}

.iv-contents__list a {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--rule-dark);
  text-decoration: none;
  transition: color 200ms, padding-left 300ms var(--ease);
}

.iv-contents__list a:hover {
  padding-left: 0.4rem;
  color: #fff;
}

.iv-contents__n {
  color: var(--on-dark-muted);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.iv-contents__name {
  font-weight: 600;
}

@media (min-width: 64em) {
  .iv-hero {
    min-height: min(52rem, 100svh);
  }

  .iv-hero__grid {
    grid-template-columns: 1.4fr 0.8fr;
    gap: 5rem;
  }
}

/* Section bar */
.iv-bar {
  position: sticky;
  top: calc(var(--sezmc-admin-offset, 0px) + var(--sezmc-header-h-compact, 3.75rem));
  z-index: 50;
  border-bottom: 1px solid var(--rule-light);
  background: rgba(249, 249, 246, 0.94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: box-shadow 300ms var(--ease);
}

.iv-bar.is-stuck {
  box-shadow: 0 12px 30px -24px rgba(7, 29, 32, 0.6);
}

.iv-bar__list {
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.iv-bar__list::-webkit-scrollbar {
  display: none;
}

.iv-bar__link {
  position: relative;
  display: block;
  padding: 1rem 0.85rem;
  color: var(--ink-muted);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color 200ms;
}

.iv-bar__link::after {
  content: "";
  position: absolute;
  right: 0.85rem;
  bottom: -1px;
  left: 0.85rem;
  height: 2px;
  background: var(--copper);
  transform: scaleX(0);
  transition: transform 300ms var(--ease);
}

.iv-bar__link:hover,
.iv-bar__link[aria-current="true"] {
  color: var(--ink);
}

.iv-bar__link[aria-current="true"]::after {
  transform: none;
}

.iv-anchor {
  scroll-margin-top: calc(var(--sezmc-header-h-compact, 3.75rem) + 3.5rem);
}

/* Why Sindh */
.iv-why {
  background: var(--paper);
}

.iv-why__grid {
  display: grid;
  gap: 3rem;
}

.iv-why__text {
  display: grid;
  gap: 1rem;
  max-width: 38rem;
  margin-top: 1.5rem;
  color: var(--ink-muted);
  font-size: 1.125rem;
  line-height: 1.65;
}

.iv-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  align-content: start;
  overflow: hidden;
  border-radius: 0.75rem;
  background: var(--rule-light);
}

.iv-fact {
  padding: 1.75rem 1.5rem;
  background: #fff;
}

.iv-fact__value {
  color: var(--emerald);
  font-family: var(--serif);
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3.25rem);
  font-weight: 300;
  line-height: 1;
}

.iv-fact__label {
  margin-top: 0.75rem;
  color: var(--ink);
  font-size: 0.9375rem;
  line-height: 1.45;
}

.iv-fact__src {
  display: block;
  margin-top: 0.4rem;
  color: var(--ink-muted);
  font-size: 0.75rem;
}

@media (max-width: 29.99em) {
  .iv-facts {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 64em) {
  .iv-why__grid {
    grid-template-columns: 1fr 1.1fr;
    gap: 5rem;
    align-items: start;
  }
}

/* Advantages */
.iv-adv {
  background: linear-gradient(180deg, var(--night), #0a2a2c);
  color: var(--on-dark);
}

.iv-plates {
  display: grid;
  gap: 1px;
  margin-top: 3rem;
  overflow: hidden;
  border-radius: 0.75rem;
  background: var(--rule-dark);
}

.iv-plate {
  position: relative;
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  background: #0a2a2c;
  transition: background-color 300ms var(--ease);
}

.iv-plate:hover {
  background: #0d3335;
}

.iv-plate__icon {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--copper);
}

.iv-plate__n {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  color: var(--on-dark-muted);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.iv-plate__title {
  margin-top: 1.25rem;
  font-family: var(--serif);
  font-size: 1.625rem;
  font-weight: 300;
}

.iv-plate__text {
  margin-top: 0.75rem;
  color: var(--on-dark-muted);
  line-height: 1.6;
}

.iv-plate__points {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 1rem;
}

.iv-plate__points li {
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--rule-dark);
  border-radius: 999px;
  font-size: 0.8125rem;
}

@media (min-width: 48em) {
  .iv-plates {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64em) {
  .iv-plates {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Connectivity */
.iv-conn {
  background: var(--paper);
}

.iv-modes {
  margin-top: 2.5rem;
}

.iv-modes__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.5rem;
}

.iv-modes__tab {
  min-height: 2.75rem;
  padding: 0.5rem 1.25rem !important;
  border: 1px solid var(--rule-light) !important;
  border-radius: 999px !important;
  color: var(--ink-muted) !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  transition: background-color 200ms, color 200ms, border-color 200ms;
}

.iv-modes__tab[aria-selected="true"] {
  border-color: var(--night) !important;
  background: var(--night) !important;
  color: var(--on-dark) !important;
}

.iv-modes:not(.is-tabbed) .iv-modes__panel + .iv-modes__panel {
  margin-top: 2rem;
}

.iv-dist {
  width: 100%;
  border-collapse: collapse;
}

.iv-dist th,
.iv-dist td {
  padding: 1rem 0.75rem 1rem 0;
  border-bottom: 1px solid var(--rule-light);
  text-align: left;
  vertical-align: middle;
}

.iv-dist thead th {
  color: var(--ink-muted);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.iv-dist__project a {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--copper);
  text-underline-offset: 0.25em;
}

.iv-dist__src {
  display: block;
  margin-top: 0.2rem;
  color: var(--ink-muted);
  font-size: 0.75rem;
}

.iv-dist__km {
  width: 40%;
  white-space: nowrap;
}

.iv-dist__km strong {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 400;
}

.iv-dist__bar {
  display: inline-block;
  width: calc(100% - 6rem);
  height: 6px;
  margin-right: 0.75rem;
  border-radius: 3px;
  background: rgba(23, 34, 29, 0.06);
  vertical-align: middle;
}

.iv-dist__bar span {
  display: block;
  width: calc(max(0.04, var(--v)) * 100%);
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--teal), var(--copper));
}

.iv-modes__panel.is-active .iv-dist__bar span {
  animation: iv-grow 900ms var(--ease) both;
  animation-delay: calc(var(--j) * 70ms);
  transform-origin: left;
}

@keyframes iv-grow {
  from { transform: scaleX(0); }
  to { transform: none; }
}

.iv-dist__absent {
  margin-top: 1rem;
  color: var(--ink-muted);
  font-size: 0.875rem;
}

@media (max-width: 47.99em) {
  .iv-dist thead {
    display: none;
  }

  .iv-dist tr {
    display: grid;
    grid-template-columns: 1fr auto;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--rule-light);
  }

  .iv-dist th,
  .iv-dist td {
    padding: 0;
    border: 0;
  }

  .iv-dist__to {
    grid-column: 1;
    margin-top: 0.25rem;
    color: var(--ink-muted);
    font-size: 0.9375rem;
  }

  .iv-dist__km {
    grid-row: 1 / span 2;
    grid-column: 2;
    width: auto;
    align-self: center;
  }

  .iv-dist__bar {
    display: none;
  }
}

/* Sector explorer */
.iv-sectors {
  background:
    radial-gradient(70% 90% at 0% 0%, rgba(35, 121, 111, 0.35), transparent 60%),
    var(--night);
  color: var(--on-dark);
}

.iv-sectors .pg-intro {
  color: var(--on-dark-muted);
}

.iv-finder {
  display: grid;
  gap: 2rem;
  margin-top: 3rem;
}

.iv-finder__chips {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
  scrollbar-width: none;
}

.iv-finder__chips::-webkit-scrollbar {
  display: none;
}

.iv-finder:not(.is-tabbed) .iv-finder__chips {
  display: none;
}

.iv-finder__chip {
  flex: 0 0 auto;
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  min-height: 2.75rem;
  padding: 0.65rem 1rem !important;
  border: 1px solid var(--rule-dark) !important;
  border-radius: 0.5rem !important;
  text-align: left;
  transition: border-color 200ms, background-color 200ms;
}

.iv-finder__chip:hover {
  border-color: rgba(194, 138, 101, 0.6) !important;
}

.iv-finder__chip[aria-selected="true"] {
  border-color: var(--copper) !important;
  background: rgba(194, 138, 101, 0.14) !important;
}

.iv-finder__name {
  font-weight: 600;
}

.iv-finder__count {
  display: grid;
  place-items: center;
  min-width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

.iv-finder__chip[aria-selected="true"] .iv-finder__count {
  background: var(--copper);
  color: var(--night);
}

.iv-finder__panel + .iv-finder__panel {
  margin-top: 2.5rem;
}

.iv-finder.is-tabbed .iv-finder__panel + .iv-finder__panel {
  margin-top: 0;
}

.iv-finder__title {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  font-weight: 300;
}

.iv-finder__summary {
  margin-top: 0.4rem;
  color: var(--copper);
  font-size: 0.9375rem;
  font-weight: 600;
}

.iv-match {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.iv-match__item {
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--rule-dark);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.03);
}

.iv-finder__panel.is-active .iv-match__item {
  animation: mk-in 600ms var(--ease) both;
  animation-delay: calc(var(--j) * 80ms);
}

.iv-match__top {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
  justify-content: space-between;
}

.iv-match__name {
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 400;
}

.iv-match__quote {
  margin-top: 0.6rem;
  color: var(--on-dark-muted);
  line-height: 1.55;
}

.iv-match__link {
  display: inline-block;
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--copper);
  text-underline-offset: 0.3em;
}

.iv-finder__others {
  margin-top: 1.25rem;
  color: var(--on-dark-muted);
  font-size: 0.875rem;
  line-height: 1.55;
}

.iv-finder__others span {
  color: var(--on-dark);
}

.iv-finder__note {
  margin-top: 2rem;
  padding: 1rem 1.25rem;
  border-left: 2px solid var(--copper);
  background: rgba(255, 255, 255, 0.04);
  color: var(--on-dark-muted);
  font-size: 0.875rem;
  line-height: 1.55;
}

.iv-finder__cta {
  margin-top: 1.5rem;
}

@media (min-width: 64em) {
  .iv-finder {
    grid-template-columns: 19rem 1fr;
    gap: 3rem;
    align-items: start;
  }

  .iv-finder__chips {
    flex-direction: column;
    overflow: visible;
    position: sticky;
    top: calc(var(--sezmc-header-h-compact, 3.75rem) + 5rem);
  }
}

/* Zones */
.iv-zones {
  background: var(--paper);
}

.iv-cards {
  display: grid;
  gap: 1.25rem;
  margin-top: 3rem;
}

.iv-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: 0.75rem;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--rule-light);
  text-decoration: none;
  transition: transform 300ms var(--ease), box-shadow 300ms var(--ease);
}

.iv-card__link:hover {
  transform: translateY(-4px);
  box-shadow: inset 0 0 0 1px var(--copper), 0 30px 50px -40px rgba(7, 29, 32, 0.6);
}

.iv-card__media {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--night);
}

.iv-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease);
}

.iv-card__link:hover .iv-card__media img {
  transform: scale(1.04);
}

.iv-card__type {
  display: grid;
  place-items: center;
  height: 100%;
  padding: 1rem;
  background:
    repeating-linear-gradient(90deg, rgba(242, 240, 234, 0.05) 0 1px, transparent 1px 2rem),
    linear-gradient(135deg, #0f4a43, var(--night));
  color: var(--on-dark);
  font-family: var(--serif);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  font-weight: 300;
  text-align: center;
}

.iv-card__body {
  display: grid;
  flex: 1;
  gap: 0.6rem;
  align-content: start;
  padding: 1.5rem;
}

.iv-card__title {
  font-family: var(--serif);
  font-size: 1.375rem;
  line-height: 1.2;
}

.iv-card__text {
  color: var(--ink-muted);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.iv-card__more {
  margin-top: 0.5rem;
  color: var(--copper-deep);
  font-size: 0.875rem;
  font-weight: 700;
}

.iv-card__more::after {
  content: " →";
}

@media (min-width: 40em) {
  .iv-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64em) {
  .iv-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Policies */
.iv-policy {
  background: var(--concrete);
}

.iv-policy__grid {
  display: grid;
  gap: 3rem;
}

.iv-notice {
  margin-top: 2rem;
  padding: 1.5rem;
  border: 1.5px solid var(--copper);
  border-radius: 0.75rem;
  background: #fffaf3;
}

.iv-notice__title {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  font-weight: 700;
}

.iv-notice__mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--copper);
  color: #fff;
  font-weight: 800;
}

.iv-notice__text {
  margin-top: 0.75rem;
  line-height: 1.6;
}

.iv-notice__src {
  margin-top: 0.75rem;
  color: var(--ink-muted);
  font-size: 0.8125rem;
}

.iv-laws {
  display: grid;
  gap: 0.75rem;
}

.iv-law {
  border-radius: 0.75rem;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--rule-light);
}

.iv-law[open] {
  box-shadow: inset 0 0 0 1px var(--teal);
}

.iv-law__sum {
  display: grid;
  grid-template-columns: 2.25rem 1fr 1.5rem;
  gap: 0.75rem;
  align-items: center;
  min-height: 3.5rem;
  padding: 1rem 1.25rem;
  cursor: pointer;
  list-style: none;
}

.iv-law__sum::-webkit-details-marker {
  display: none;
}

.iv-law__n {
  color: var(--copper-deep);
  font-size: 0.8125rem;
  font-weight: 700;
}

.iv-law__name {
  font-family: var(--serif);
  font-size: 1.1875rem;
  line-height: 1.3;
}

.iv-law__toggle {
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
}

.iv-law__toggle::before,
.iv-law__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 25%;
  width: 50%;
  height: 1.5px;
  background: currentColor;
  transition: transform 300ms var(--ease);
}

.iv-law__toggle::after {
  transform: rotate(90deg);
}

.iv-law[open] .iv-law__toggle::after {
  transform: rotate(0deg);
}

.iv-law__body {
  padding: 0 1.25rem 1.5rem calc(1.25rem + 3rem);
}

.iv-law__label {
  margin-top: 1rem;
  color: var(--ink-muted);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.iv-law__label:first-child {
  margin-top: 0;
}

.iv-law__text,
.iv-law__status {
  margin-top: 0.4rem;
  line-height: 1.6;
}

.iv-law__doc {
  display: inline-block;
  margin-top: 1rem;
}

@media (max-width: 47.99em) {
  .iv-law__body {
    padding-left: 1.25rem;
  }
}

@media (min-width: 64em) {
  .iv-policy__grid {
    grid-template-columns: 0.9fr 1.2fr;
    gap: 4rem;
    align-items: start;
  }

  .iv-policy__head {
    position: sticky;
    top: calc(var(--sezmc-header-h-compact, 3.75rem) + 5rem);
  }
}

/* Ease of doing business */
.iv-ease {
  background: var(--night);
  color: var(--on-dark);
}

.iv-ease .pg-intro {
  color: var(--on-dark-muted);
}

.iv-ease__grid {
  display: grid;
  gap: 3rem;
  margin-top: 3rem;
}

.iv-clock__list {
  display: grid;
  gap: 0.25rem;
}

.iv-clock__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.35rem 1rem;
  align-items: baseline;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--rule-dark);
}

.iv-clock__name {
  font-weight: 600;
}

.iv-clock__days {
  color: var(--copper);
  font-family: var(--serif);
  font-size: 1.125rem;
  white-space: nowrap;
}

.iv-clock__row.is-open .iv-clock__days {
  color: var(--on-dark-muted);
  font-family: var(--sans);
  font-size: 0.8125rem;
}

.iv-clock__bar {
  grid-column: 1 / -1;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.06);
}

.iv-clock__bar span {
  display: block;
  width: calc(var(--v) * 100%);
  height: 100%;
  border-radius: 2px;
  background: var(--copper);
}

.pg-motion .iv-clock[data-reveal] .iv-clock__bar span {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 900ms var(--ease) calc(var(--j) * 60ms + 300ms);
}

.pg-motion .iv-clock.is-in .iv-clock__bar span {
  transform: none;
}

.iv-ease__sub {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 300;
}

.iv-fed {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.iv-fed__item {
  padding: 1.25rem;
  border: 1px solid var(--rule-dark);
  border-radius: 0.75rem;
}

.iv-fed__link {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  align-items: baseline;
  justify-content: space-between;
  text-decoration: none;
}

.iv-fed__name {
  font-weight: 700;
}

.iv-fed__host {
  color: var(--copper);
  font-size: 0.8125rem;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.iv-fed__text {
  margin-top: 0.5rem;
  color: var(--on-dark-muted);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.iv-history {
  margin-top: 1.5rem;
  padding: 1.5rem;
  border: 1px dashed rgba(242, 240, 234, 0.3);
  border-radius: 0.75rem;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.015) 0 10px, transparent 10px 20px);
}

.iv-history__tag {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  border: 1px solid var(--rule-dark);
  border-radius: 999px;
  color: var(--on-dark-muted);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.iv-history__title {
  margin-top: 0.75rem;
  font-size: 1.0625rem;
  font-weight: 700;
}

.iv-history__text {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.6rem;
  color: var(--on-dark-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
}

@media (min-width: 64em) {
  .iv-ease__grid {
    grid-template-columns: 1.1fr 1fr;
    gap: 5rem;
  }
}

/* Inquiry */
.iv-inquiry {
  position: relative;
  overflow: hidden;
  background: radial-gradient(120% 140% at 85% 0%, #0f4a43 0%, var(--night) 55%);
  color: var(--on-dark);
}

.iv-inquiry__grid {
  position: relative;
  display: grid;
  gap: 3rem;
}

.iv-inquiry__role {
  max-width: 36rem;
  margin-top: 1.5rem;
  color: var(--on-dark-muted);
  font-size: 1.0625rem;
  line-height: 1.65;
}

.iv-steps {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
}

.iv-step {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 0.15rem 1rem;
}

.iv-step__n {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--copper);
  border-radius: 50%;
  color: var(--copper);
  font-weight: 700;
}

.iv-step__title {
  font-size: 1.0625rem;
  font-weight: 700;
}

.iv-step__text {
  color: var(--on-dark-muted);
  line-height: 1.55;
}

.iv-inquiry__photo img {
  width: 100%;
  border-radius: 0.5rem;
}

@media (min-width: 64em) {
  .iv-inquiry__grid {
    grid-template-columns: 1.2fr 0.9fr;
    gap: 5rem;
    align-items: start;
  }
}

/* ==========================================================================
   7. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .mk-hero__saw,
  .b2-map__pt.is-hub .b2-map__halo,
  .su-junction__ring {
    display: none;
  }

  .iv-hero__river {
    stroke-dashoffset: 0 !important;
  }

  .hy-map .b2-map__link,
  .pg-motion .su-hero__map .b2-map__link {
    stroke-dashoffset: 0;
  }
}