:root {
    /* IBM Plex Mono sparingly for coordinates and inspection codes; IBM Plex Sans Condensed* Condensed** for permit numbers. */
    --asphalt: #171A1C;
    --orange: #FF6A1A;
    --blue: #2477FF;
    --gold: #FFC247;
    --concrete: #D8D2C4;
    --green: #3F6F55;
    --pink: #FF4FA3;
    --act-progress: 0;
    --lamp-x: 50vw;
    --lamp-y: 50vh;
    --split: 0;
    --day-glow: rgba(255, 194, 71, 0.18);
}

* { box-sizing: border-box; }

html { background: var(--asphalt); }

body {
    margin: 0;
    color: var(--concrete);
    font-family: "IBM Plex Sans Condensed", sans-serif;
    background: var(--asphalt);
    overflow-x: hidden;
}

.cutaway-promenade {
    position: relative;
    min-height: 600vh;
    background: linear-gradient(180deg, #171A1C 0%, #171A1C 18%, #242524 33%, #34281f 53%, #171A1C 100%);
}

.city-model {
    position: fixed;
    inset: 0;
    overflow: hidden;
    perspective: 1200px;
    background:
        radial-gradient(circle at var(--lamp-x) var(--lamp-y), rgba(255, 106, 26, 0.22), transparent 18rem),
        radial-gradient(circle at 82% 18%, var(--day-glow), transparent 30rem),
        linear-gradient(180deg, rgba(36, 119, 255, 0.12), transparent 24%, rgba(216, 210, 196, 0.08) 25%, transparent 47%),
        var(--asphalt);
}

.city-model::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .34;
    background-image:
        radial-gradient(circle, rgba(216, 210, 196, .22) 1px, transparent 1px),
        linear-gradient(63deg, transparent 48%, rgba(255, 106, 26, .09) 49%, transparent 51%),
        linear-gradient(90deg, rgba(216, 210, 196, .04) 1px, transparent 1px);
    background-size: 19px 23px, 360px 360px, 8.33% 100%;
    mix-blend-mode: screen;
}

.time-wash {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent, rgba(255, 194, 71, calc(var(--act-progress) * .05)), rgba(255, 79, 163, calc(var(--act-progress) * .025)));
    pointer-events: none;
}

.stratum { position: absolute; left: 0; right: 0; }
.sky-stratum { top: 0; height: 27vh; transform: translateY(calc(var(--act-progress) * -3vh)); }
.street-stratum { top: 27vh; height: 29vh; }
.subgrade-stratum { top: 56vh; bottom: 0; background: linear-gradient(180deg, rgba(216, 210, 196, .12), rgba(63, 111, 85, .16), rgba(23, 26, 28, .96)); }

.asphalt-plane {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(175deg, transparent 0 44%, rgba(255, 106, 26, .18) 45%, transparent 46%),
        radial-gradient(circle, rgba(216, 210, 196, .18) 1px, transparent 1.5px),
        #171A1C;
    background-size: 100% 100%, 15px 17px, 100% 100%;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - (var(--split) * 25%)), 64% calc(100% - (var(--split) * 4%)), 44% 100%, 0 calc(100% - (var(--split) * 18%)));
    box-shadow: 0 20px 80px rgba(0,0,0,.55);
}

.lane-stripe { position: absolute; height: 1.8vh; width: 34vw; background: rgba(216, 210, 196, .72); transform: rotate(-3deg); top: 50%; filter: blur(.2px); }
.stripe-a { left: 8vw; }
.stripe-b { right: 10vw; top: 31%; width: 22vw; }

.survey-mark {
    position: absolute;
    color: var(--orange);
    font-family: "Archivo Black", sans-serif;
    letter-spacing: .07em;
    text-transform: uppercase;
    text-shadow: 0 0 18px rgba(255,106,26,.8);
    opacity: calc(.34 + var(--split) * .66);
    animation: paintFlicker 2.7s steps(4) infinite;
}
.mark-one { left: 7vw; top: 18%; font-size: clamp(1.6rem, 5vw, 5rem); transform: rotate(-10deg); }
.mark-two { left: 52vw; top: 52%; font-size: clamp(1rem, 2.6vw, 3rem); transform: rotate(8deg); }
.mark-three { right: 12vw; top: 12%; font-size: clamp(.9rem, 2vw, 2.2rem); transform: rotate(-4deg); color: var(--pink); }

.manhole-ring { position: absolute; left: 28vw; top: 36%; width: 18vmin; height: 18vmin; border: 1.9vmin solid #3a3d3e; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--concrete), 0 0 0 1px #000, 0 18px 35px #000; display: grid; place-items: center; color: rgba(216,210,196,.5); font-family: "Archivo Black"; transform: rotate(calc(var(--act-progress) * 24deg)); }
.curb-cut { position: absolute; right: 4vw; bottom: -2vh; width: 24vw; height: 8vh; background: var(--concrete); clip-path: polygon(0 30%, 58% 0, 100% 14%, 100% 100%, 0 100%); box-shadow: inset 0 8px 0 rgba(63,111,85,.35); }

.utility-pole { position: absolute; bottom: -3vh; width: 1.1vw; min-width: 10px; height: 26vh; background: var(--green); box-shadow: inset -4px 0 rgba(23,26,28,.45); }
.pole-left { left: 16vw; } .pole-right { right: 21vw; }
.sky-cable { position: absolute; left: -5vw; width: 110vw; height: 24vh; border-top: 3px solid rgba(216,210,196,.72); border-radius: 0 0 50% 50%; }
.cable-one { top: 7vh; } .cable-two { top: 11vh; border-color: rgba(36,119,255,.55); }
.signal-arm { position: absolute; right: 14vw; top: 9vh; width: 28vw; height: 1.2vh; background: var(--green); box-shadow: 0 0 0 2px rgba(23,26,28,.8); }
.signal-head { position: absolute; right: 2vw; top: 1vh; width: 5.5vmin; padding: .7vmin; background: #101112; border: 2px solid var(--concrete); display: grid; gap: .5vmin; }
.signal-head i { display: block; aspect-ratio: 1; border-radius: 50%; background: #030405; box-shadow: inset 0 0 10px #000; }
.signal-head i:nth-child(2) { background: var(--gold); box-shadow: 0 0 calc(18px + var(--act-progress) * 18px) var(--gold); }
.signal-head i:nth-child(3) { background: rgb(72, calc(95 + var(--act-progress) * 120), 68); box-shadow: 0 0 calc(var(--act-progress) * 28px) #5cff6f; }
.signal-label { position: absolute; right: 8vw; top: 2.2vh; color: var(--concrete); font-size: .78rem; letter-spacing: .14em; }

.exploded-curb { position: fixed; left: 51vw; top: 38vh; width: 34vw; height: 32vh; transform: rotate(-5deg) translateY(calc(var(--split) * -3vh)); pointer-events: none; }
.curb-layer { position: absolute; left: 0; right: 0; height: 4.7vh; border: 2px solid rgba(23,26,28,.55); box-shadow: 0 12px 28px rgba(0,0,0,.26); transform: translateY(calc(var(--split) * var(--lift))); }
.curb-layer span { position: absolute; right: 1rem; top: .4rem; color: #171A1C; font: 700 .72rem "IBM Plex Sans Condensed"; letter-spacing: .14em; }
.sidewalk { top: 0; --lift: -34px; background: var(--concrete); }
.roadbed { top: 5.2vh; --lift: -12px; background: #171A1C; }
.roadbed span { color: var(--concrete); }
.aggregate { top: 10.4vh; --lift: 16px; background: radial-gradient(circle, #8b8171 2px, #594d3f 3px, #776b5d 5px); background-size: 18px 15px; }
.duct { top: 15.6vh; --lift: 38px; background: linear-gradient(90deg, var(--blue) 0 18%, #29333c 18% 24%, var(--orange) 24% 32%, #29333c 32% 100%); }
.soil { top: 20.8vh; --lift: 62px; background: linear-gradient(90deg, #3a2a22, #4a3328, #201918); }

.soil-band { position: absolute; left: 0; right: 0; height: 16vh; opacity: .7; }
.band-a { top: 6vh; background: repeating-linear-gradient(-3deg, rgba(216,210,196,.18) 0 8px, transparent 8px 18px); }
.band-b { bottom: 0; background: repeating-linear-gradient(6deg, rgba(63,111,85,.25) 0 12px, transparent 12px 28px); }
.utility-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pressure-main, .conduit, .reroute-line { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.pressure-main { stroke: var(--blue); stroke-width: 22; filter: drop-shadow(0 0 16px rgba(36,119,255,.75)); stroke-dasharray: 52 22; animation: pressurePulse 2.4s linear infinite; }
.conduit-one { stroke: var(--orange); stroke-width: 9; stroke-dasharray: 18 20; animation: conduitVibe .35s infinite alternate; }
.conduit-two { stroke: var(--concrete); stroke-width: 7; stroke-dasharray: 28 12; opacity: .72; animation: conduitVibe .45s infinite alternate-reverse; }
.reroute-line { stroke: var(--pink); stroke-width: 5; stroke-dasharray: 4 18; opacity: calc(.1 + var(--act-progress) * .9); animation: repaint 1.6s linear infinite; }
.valve-wheel { fill: none; stroke: var(--green); stroke-width: 8; transform-box: fill-box; transform-origin: center; animation: valveTurn 8s ease-in-out infinite; filter: drop-shadow(0 0 10px rgba(63,111,85,.9)); }
.measure-leaders { fill: none; stroke: rgba(216,210,196,.55); stroke-width: 2; stroke-dasharray: 8 7; }
.ladder-rungs { position: absolute; left: 7vw; top: 16vh; width: 10vw; height: 33vh; background: repeating-linear-gradient(180deg, transparent 0 18px, var(--gold) 18px 22px, transparent 22px 42px); border-left: 4px solid var(--gold); border-right: 4px solid var(--gold); opacity: .66; }
.storm-grate { position: absolute; right: 9vw; top: 12vh; width: 18vw; height: 8vh; background: repeating-linear-gradient(90deg, #050607 0 10px, var(--concrete) 10px 14px, #050607 14px 28px); transform: skewX(-18deg); opacity: .8; }
.substation-fins { position: absolute; right: 3vw; bottom: 4vh; width: 22vw; height: 20vh; background: repeating-linear-gradient(90deg, var(--green) 0 7px, transparent 7px 20px); opacity: .52; }

.act { min-height: 100vh; position: relative; z-index: 3; display: grid; grid-template-columns: repeat(12, 1fr); padding: 8vh 5vw; pointer-events: none; }
.act h1 { grid-column: 1 / 12; align-self: center; margin: 0; font-family: "Archivo Black", sans-serif; font-size: clamp(4.8rem, 18vw, 18rem); line-height: .78; letter-spacing: -.08em; color: rgba(216,210,196,.88); text-transform: lowercase; transform: rotate(-3deg); text-shadow: 0 4px 0 #000, 0 0 30px rgba(255,106,26,.12); mix-blend-mode: screen; }
.act h2 { margin: .4rem 0 1rem; font-family: "Archivo Black", sans-serif; font-size: clamp(2.7rem, 7vw, 7.8rem); line-height: .82; letter-spacing: -.055em; text-transform: uppercase; color: var(--concrete); }
.inspection-note { max-width: 32rem; font-family: "Literata", serif; font-size: clamp(1.05rem, 1.45vw, 1.55rem); line-height: 1.45; color: rgba(216,210,196,.86); }
.act-before-load .inspection-note { grid-column: 2 / 6; align-self: end; margin-bottom: 9vh; }
.permit-stamp { display: inline-block; width: max-content; padding: .35rem .6rem .28rem; border: 2px solid currentColor; color: var(--orange); font: 700 .86rem "IBM Plex Sans Condensed"; letter-spacing: .16em; text-transform: uppercase; transform: rotate(-2deg); background: rgba(23,26,28,.5); box-shadow: 4px 4px 0 rgba(255,106,26,.18); }
.act-before-load > .permit-stamp { grid-column: 2 / 5; align-self: end; }
.route-sleeve { grid-column: 9 / 12; align-self: end; margin-bottom: 12vh; padding: .8rem 1rem; color: var(--asphalt); background: var(--gold); font-weight: 700; letter-spacing: .12em; transform: rotate(4deg); }
.act-copy, .foldout-panel { grid-column: 2 / 7; align-self: center; padding: 1.2rem; background: rgba(23,26,28,.58); border: 2px solid rgba(216,210,196,.48); box-shadow: 12px 12px 0 rgba(63,111,85,.45), inset 0 0 40px rgba(216,210,196,.06); backdrop-filter: blur(2px); pointer-events: auto; }
.right-copy { grid-column: 7 / 12; }
.night-copy { grid-column: 4 / 10; text-align: center; justify-self: center; }
.access-hatch { grid-column: 8 / 11; align-self: center; width: 24vmin; height: 24vmin; border-radius: 50%; border: 1.7vmin solid var(--blue); background: radial-gradient(circle, transparent 38%, rgba(36,119,255,.22) 39% 44%, transparent 45%); box-shadow: 0 0 40px rgba(36,119,255,.5); transform: rotate(calc(var(--act-progress) * 90deg)); }
.access-hatch span { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, transparent 46%, var(--blue) 47% 53%, transparent 54%); }
.schedule-strip { grid-column: 1 / 6; align-self: center; display: flex; gap: .6rem; transform: rotate(-6deg); }
.schedule-strip span { display: block; padding: 1rem .55rem; min-height: 34vh; writing-mode: vertical-rl; color: var(--asphalt); background: var(--concrete); border-top: 8px solid var(--gold); font: 700 1.2rem "IBM Plex Mono"; box-shadow: 6px 8px 0 #000; animation: scheduleTick 4s steps(5) infinite; }
.foldout-panel { grid-column: 3 / 9; transform-origin: left center; transform: perspective(900px) rotateY(calc(-18deg + var(--split) * 18deg)); background: linear-gradient(135deg, rgba(216,210,196,.9), rgba(216,210,196,.68)); color: var(--asphalt); }
.foldout-panel h2, .foldout-panel .inspection-note { color: var(--asphalt); }
.weather-map { grid-column: 8 / 12; align-self: center; height: 38vh; background: rgba(36,119,255,.16); border: 2px dashed var(--blue); position: relative; transform: rotate(5deg); }
.weather-map b { position: absolute; left: 1rem; top: 1rem; color: var(--pink); font-size: 2rem; }
.weather-map i { position: absolute; border: 3px solid var(--blue); border-radius: 50%; opacity: .7; animation: stormRing 3s infinite; }
.weather-map i:nth-child(2) { width: 12vmin; height: 12vmin; left: 20%; top: 40%; }
.weather-map i:nth-child(3) { width: 19vmin; height: 19vmin; right: 12%; top: 18%; animation-delay: .6s; }
.weather-map i:nth-child(4) { width: 25vmin; height: 25vmin; left: 42%; bottom: 4%; animation-delay: 1.2s; }
.permit-tab { margin-top: 1rem; padding: .9rem 1.4rem; border: 0; background: var(--gold); color: var(--asphalt); font: 700 1rem "IBM Plex Sans Condensed"; letter-spacing: .18em; box-shadow: inset 0 -4px 0 rgba(23,26,28,.35), 0 0 30px rgba(255,194,71,.35); cursor: pointer; }
.permit-tab.stamped { animation: stamp .38s ease; }
.survey-lamp { position: fixed; left: var(--lamp-x); top: var(--lamp-y); width: 24rem; height: 24rem; margin: -12rem 0 0 -12rem; border-radius: 50%; pointer-events: none; z-index: 5; background: radial-gradient(circle, rgba(255,194,71,.18), rgba(255,106,26,.10) 30%, transparent 68%); mix-blend-mode: screen; }

@keyframes paintFlicker { 0%, 100% { filter: blur(.2px); opacity: .45; } 40% { filter: blur(1px); opacity: .95; } 70% { opacity: .62; } }
@keyframes pressurePulse { to { stroke-dashoffset: -74; } }
@keyframes conduitVibe { to { transform: translateY(2px); } }
@keyframes repaint { to { stroke-dashoffset: -44; } }
@keyframes valveTurn { 0%, 35% { transform: rotate(0deg); } 55%, 100% { transform: rotate(24deg); } }
@keyframes scheduleTick { 50% { transform: translateY(-1rem); } }
@keyframes stormRing { 50% { transform: scale(1.08); opacity: .95; } }
@keyframes stamp { 50% { transform: scale(.94) rotate(-2deg); filter: brightness(1.3); } }

@media (max-width: 800px) {
    .act { grid-template-columns: repeat(6, 1fr); padding: 7vh 5vw; }
    .act h1, .act-before-load .inspection-note, .act-before-load > .permit-stamp, .route-sleeve, .act-copy, .right-copy, .night-copy, .foldout-panel, .weather-map, .schedule-strip { grid-column: 1 / -1; }
    .exploded-curb { left: 28vw; width: 64vw; opacity: .85; }
    .signal-arm { width: 48vw; }
}