/* ───── Page-specific ───── */
      .hero {
        position: relative;
        min-height: 92vh;
        background: var(--c-dark);
        color: #fff;
        padding: 130px 0 56px;
        overflow: hidden;
      }
      .hero-media {
        position: absolute;
        inset: 0;
        z-index: 0;
        overflow: hidden;
      }
      .hero-media .ampro-photo--fill {
        z-index: 0;
      }
      .hero-media .placeholder {
        position: absolute;
        inset: 0;
        z-index: 0;
        background:
          radial-gradient(ellipse 60% 70% at 78% 40%, rgba(235,35,71,0.12), transparent 65%),
          radial-gradient(ellipse 90% 60% at 20% 110%, rgba(235,35,71,0.05), transparent 60%),
          linear-gradient(180deg, #16161b 0%, #08080b 100%);
      }
      .hero-overlay-grad {
        position: absolute;
        inset: 0;
        z-index: 1;
        background:
          linear-gradient(180deg, rgba(0,0,0,0.0) 30%, rgba(0,0,0,0.55) 100%),
          linear-gradient(90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 45%);
      }
      .hero > .container {
        position: relative;
        z-index: 3;
      }
      .hero-inner {
        position: relative;
        z-index: 2;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 64px;
        min-height: calc(92vh - 130px - 56px);
      }
      .hero-eyebrow {
        font-family: var(--f-mono);
        font-size: var(--fs-mono-md);
        font-weight: 500;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.7);
      }
      .hero-eyebrow .num {
        color: var(--c-accent);
      }
      .hero h1 {
        font-family: var(--f-sans);
        font-weight: 500;
        color: #fff;
        font-size: clamp(38px, 4.6vw, 60px);
        line-height: 1.06;
        letter-spacing: -0.022em;
        margin: 24px 0 0;
        max-width: 24ch;
        text-wrap: balance;
      }
      .hero p.lead {
        color: rgba(255, 255, 255, 0.78);
        max-width: 52ch;
        margin: 36px 0 0;
        font-size: var(--fs-body-lg);
        line-height: 1.55;
      }
      .hero-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 28px;
        margin-top: 40px;
      }
      .hero-link {
        font-family: var(--f-sans);
        font-size: var(--fs-body-md);
        font-weight: 500;
        color: #fff;
        text-decoration: none;
        border-bottom: 1px solid rgba(255,255,255,0.4);
        padding-bottom: 4px;
        transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
      }
      .hero-link:hover {
        border-bottom-color: var(--c-accent);
        color: var(--c-accent);
      }
      .hero-foot {
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 24px;
        font-family: var(--f-mono);
        font-size: var(--fs-mono-sm);
        color: rgba(255, 255, 255, 0.55);
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }
      .hero-foot .coord {
        display: flex;
        align-items: center;
        gap: 14px;
      }
      .hero-foot .pulse {
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: var(--c-accent);
        box-shadow: 0 0 0 0 rgba(235, 35, 71, 0.5);
        animation: pulse 2s var(--ease) infinite;
      }
      @keyframes pulse {
        0% { box-shadow: 0 0 0 0 rgba(235,35,71,0.6); }
        70% { box-shadow: 0 0 0 12px rgba(235,35,71,0); }
        100% { box-shadow: 0 0 0 0 rgba(235,35,71,0); }
      }
      .hero-scroll {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        color: rgba(255, 255, 255, 0.7);
      }

      /* Section 1.5 — Recognition row */
      .recog {
        padding: 36px 0;
        border-top: 1px solid var(--c-line);
        border-bottom: 1px solid var(--c-line);
      }
      .recog-inner {
        display: flex;
        align-items: center;
        gap: 48px;
      }
      .recog-label {
        flex-shrink: 0;
        font-family: var(--f-mono);
        font-size: var(--fs-mono-sm);
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--c-text-3);
        max-width: 14ch;
      }
      .recog-logos {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 1px;
        background: var(--c-line);
        border: 1px solid var(--c-line);
        flex: 1;
      }
      .recog-logo {
        background: #fff;
        height: 78px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 18px;
        font-family: var(--f-sans);
        font-weight: 500;
        font-size: var(--fs-body-sm);
        color: var(--c-text-2);
        letter-spacing: 0.02em;
        transition: color 0.25s var(--ease);
      }
      .recog-logo:hover {
        color: var(--c-ink);
      }
      @media (max-width: 1024px) {
        .recog-inner { flex-direction: column; align-items: stretch; }
        .recog-logos { grid-template-columns: repeat(4, 1fr); }
      }
      @media (min-width: 1025px) {
        .recog-logos .recog-logo:nth-child(8) {
          display: none;
        }
      }

      /* Section 2 — Numbers (editorial split) */
      .section--liczby {
        color: #fff;
        position: relative;
        overflow: hidden;
      }
      .section--liczby .marker { color: rgba(255,255,255,0.55); }
      .section--liczby .marker-num { color: #fff; }
      .section--liczby .h-2 { color: #fff; }
      .liczby-head {
        display: grid;
        grid-template-columns: 1.4fr 1fr;
        gap: 56px;
        align-items: end;
      }
      .liczby-stage {
        margin-top: 72px;
        display: grid;
        grid-template-columns: 1.6fr 1fr;
        border-top: 1px solid rgba(255,255,255,0.14);
      }
      .liczby-primary {
        padding: 48px 56px 48px 0;
        border-right: 1px solid rgba(255,255,255,0.14);
        display: flex;
        flex-direction: column;
        gap: 20px;
      }
      .liczby-eyebrow {
        font-family: var(--f-mono);
        font-size: var(--fs-mono-sm);
        font-weight: 500;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--c-accent);
      }
      .liczby-hero-num {
        display: flex;
        align-items: baseline;
        gap: 6px;
        line-height: 0.86;
      }
      .liczby-hero-num .num-big {
        font-family: var(--f-sans);
        font-weight: 600;
        font-size: var(--fs-numeric-xl);
        line-height: 0.86;
        letter-spacing: -0.04em;
        color: #fff;
        font-variant-numeric: tabular-nums;
      }
      .liczby-plus {
        font-family: var(--f-sans);
        font-weight: 400;
        font-size: var(--fs-numeric-md);
        color: var(--c-accent);
        letter-spacing: -0.02em;
      }
      .liczby-unit {
        font-family: var(--f-sans);
        font-weight: 400;
        font-size: var(--fs-h3);
        color: rgba(255,255,255,0.86);
        letter-spacing: -0.01em;
      }
      .liczby-desc {
        font-family: var(--f-sans);
        font-size: var(--fs-body-md);
        line-height: 1.55;
        color: rgba(255,255,255,0.62);
        max-width: 46ch;
      }
      .liczby-supports {
        display: flex;
        flex-direction: column;
        min-width: 0;
      }
      .liczby-spec {
        display: grid;
        grid-template-columns: minmax(9rem, 11rem) minmax(0, 1fr);
        gap: 0 clamp(28px, 3vw, 48px);
        align-items: start;
        padding: 28px 0 28px clamp(32px, 4vw, 56px);
        border-bottom: 1px solid rgba(255,255,255,0.14);
      }
      .liczby-spec:last-child { border-bottom: 0; }
      .liczby-spec-num {
        font-family: var(--f-sans);
        font-weight: 600;
        font-size: var(--fs-numeric-md);
        line-height: 1;
        letter-spacing: -0.025em;
        color: #fff;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
        flex-shrink: 0;
        display: flex;
        align-items: baseline;
        justify-content: flex-start;
      }
      .liczby-spec-suffix { color: var(--c-accent); font-weight: 400; font-size: 0.55em; margin-left: 2px; }
      .liczby-spec-slash { color: rgba(255,255,255,0.32); font-weight: 400; font-size: 0.5em; margin-left: 2px; }
      .liczby-spec-label {
        min-width: 0;
        overflow-wrap: break-word;
      }
      .liczby-spec-label .k {
        font-family: var(--f-mono);
        font-size: var(--fs-mono-xs);
        font-weight: 500;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: rgba(255,255,255,0.5);
        margin-bottom: 8px;
      }
      .liczby-spec-label .v {
        font-family: var(--f-sans);
        font-size: var(--fs-body-sm);
        line-height: 1.45;
        color: rgba(255,255,255,0.92);
        max-width: none;
      }
      .liczby-ledger {
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        gap: 18px;
        flex-wrap: wrap;
        padding: 22px 0 0;
        border-top: 1px solid rgba(255,255,255,0.14);
        font-family: var(--f-mono);
        font-size: var(--fs-mono-xs);
        font-weight: 500;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: rgba(255,255,255,0.5);
      }
      .liczby-ledger-dot {
        width: 4px; height: 4px; border-radius: 999px;
        background: rgba(255,255,255,0.3);
      }
      @media (max-width: 1024px) {
        .liczby-head { grid-template-columns: 1fr; gap: 24px; }
        .liczby-stage { grid-template-columns: 1fr; }
        .liczby-primary { padding: 0 0 40px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.14); }
        .liczby-spec {
          grid-template-columns: minmax(7rem, 9rem) minmax(0, 1fr);
          padding-left: 0;
          gap: 0 24px;
        }
        .liczby-spec:first-child { padding-top: 32px; }
      }

      /* Section 3 — Process cards (4) */
      .proc-head {
        display: grid;
        grid-template-columns: 1.3fr 1fr;
        gap: 56px;
        align-items: end;
      }
      .proc-head .body {
        color: var(--c-text-2);
        margin: 0;
      }
      .grid-process {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1px;
        background: var(--c-line);
        margin-top: 56px;
      }
      @media (max-width: 768px) {
        .proc-head {
          grid-template-columns: 1fr;
          gap: 20px;
        }
        .grid-process {
          grid-template-columns: 1fr;
        }
        .proc-card-base h3 {
          max-width: none;
        }
        .proc-card-base p {
          max-width: none;
        }
      }
      .proc-card {
        position: relative;
        background: #fff;
        min-height: 320px;
        overflow: hidden;
        cursor: default;
        transition: box-shadow 0.35s var(--ease);
      }
      .proc-card-base {
        position: relative;
        z-index: 1;
        min-height: 320px;
        padding: 44px 36px 36px;
        display: flex;
        flex-direction: column;
        gap: 16px;
        transition: opacity 0.35s var(--ease), visibility 0.35s var(--ease);
      }
      @media (hover: hover) and (pointer: fine) {
        .proc-card:hover {
          box-shadow: inset 0 0 0 1px rgba(235, 35, 71, 0.18);
        }
        .proc-card:hover .proc-card-base,
        .proc-card:focus-within .proc-card-base {
          opacity: 0;
          visibility: hidden;
        }
        .proc-card:hover .reveal-extra,
        .proc-card:focus-within .reveal-extra {
          opacity: 1;
          visibility: visible;
        }
      }
      .proc-num {
        font-family: var(--f-mono);
        font-size: var(--fs-body-sm);
        font-weight: 500;
        color: var(--c-accent-deep);
        letter-spacing: 0.04em;
      }
      .proc-card-base h3 {
        font-family: var(--f-sans);
        font-weight: 500;
        font-size: var(--fs-h3);
        line-height: 1.18;
        letter-spacing: -0.012em;
        margin: 0;
        color: var(--c-ink);
        max-width: 18ch;
      }
      .proc-card-base p {
        margin: 0;
        font-size: var(--fs-body-sm);
        line-height: 1.55;
        color: var(--c-text-2);
        max-width: 38ch;
      }
      .proc-card .hint {
        margin-top: auto;
        padding-top: 24px;
        font-family: var(--f-mono);
        font-size: var(--fs-mono-sm);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--c-text-3);
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .proc-card .hint .dot {
        width: 6px;
        height: 6px;
        border-radius: 999px;
        background: var(--c-accent);
        opacity: 0.75;
        flex-shrink: 0;
      }
      .proc-card .reveal-extra {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 32px 36px 36px;
        background: var(--c-ink);
        color: #fff;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.35s var(--ease), visibility 0.35s var(--ease);
        isolation: isolate;
      }
      .proc-card .reveal-extra::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        background-image: var(--ampro-proc-photo, var(--ampro-dark-photo-default));
        background-size: cover;
        background-position: center 35%;
        opacity: 0.22;
        filter: grayscale(0.35) contrast(1.05) brightness(0.82);
        pointer-events: none;
      }
      .proc-card .reveal-extra::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        background:
          linear-gradient(180deg, rgba(15, 15, 18, 0.72) 0%, rgba(15, 15, 18, 0.92) 55%, rgba(15, 15, 18, 0.98) 100%),
          linear-gradient(135deg, rgba(235, 35, 71, 0.08) 0%, transparent 50%);
        pointer-events: none;
      }
      .reveal-extra-inner {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        gap: 14px;
      }
      .reveal-extra-title {
        margin: 0;
        font-family: var(--f-sans);
        font-size: var(--fs-body-sm);
        font-weight: 500;
        line-height: 1.35;
        color: rgba(255, 255, 255, 0.88);
        max-width: 28ch;
      }
      .reveal-extra-num {
        font-family: var(--f-mono);
        color: var(--c-accent);
        letter-spacing: 0.04em;
      }
      .reveal-extra h4 {
        font-family: var(--f-mono);
        font-size: var(--fs-mono-sm);
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.48);
        margin: 0;
      }
      .reveal-extra .kpis {
        display: grid;
        gap: 0;
      }
      .reveal-extra .kpi {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        border-top: 1px solid rgba(255, 255, 255, 0.14);
        padding: 14px 0 0;
        margin-top: 14px;
      }
      .reveal-extra .kpi:first-child {
        margin-top: 0;
      }
      .reveal-extra .kpi .v {
        font-family: var(--f-sans);
        font-weight: 700;
        font-size: clamp(22px, 2.4vw, 30px);
        line-height: 1.05;
        letter-spacing: -0.02em;
        color: #fff;
      }
      .reveal-extra .kpi .l {
        font-size: var(--fs-body-sm);
        line-height: 1.45;
        color: rgba(255, 255, 255, 0.72);
        max-width: 34ch;
      }

      /* Section 4 — Services */
      .svc-pills { margin-top: 36px; }
      .svc-grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 24px;
        margin-top: 56px;
        align-items: stretch;
      }
      .svc-card {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 0;
        height: 100%;
        cursor: pointer;
        background: #fff;
        border: 1px solid var(--c-line);
        --corner-cut: 14px;
        clip-path: polygon(
          0 0,
          100% 0,
          100% calc(100% - var(--corner-cut)),
          calc(100% - var(--corner-cut)) 100%,
          0 100%
        );
        transition:
          border-color 0.35s var(--ease),
          box-shadow 0.35s var(--ease),
          transform 0.35s var(--ease);
      }
      .svc-card:hover {
        border-color: rgba(235, 35, 71, 0.22);
        box-shadow: 0 16px 40px rgba(15, 15, 18, 0.07);
        transform: translateY(-3px);
      }
      .svc-card-media {
        position: relative;
        width: 100%;
        aspect-ratio: 3 / 2;
        background: var(--c-bg-warm);
        border: none;
        border-bottom: 1px solid var(--c-line);
        overflow: hidden;
        clip-path: none;
      }
      .svc-card-media svg {
        width: 100%;
        height: 100%;
      }
      .svc-card-media .ampro-photo--fill {
        position: absolute;
        inset: 0;
      }
      .svc-card[data-size="lg"] {
        grid-column: span 3;
      }
      .svc-card[data-size="md"] {
        grid-column: span 2;
      }
      .svc-card[data-size="lg"] .svc-card-media {
        aspect-ratio: 7 / 4;
      }
      .svc-card[data-size="md"] .svc-card-media {
        aspect-ratio: 3 / 2;
      }
      .svc-card-meta {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        padding: clamp(18px, 2.2vw, 22px) clamp(18px, 2.2vw, 22px) 0;
      }
      .svc-card-meta h3 {
        font-family: var(--f-sans);
        font-weight: 500;
        font-size: var(--fs-h4);
        line-height: 1.2;
        margin: 0;
        color: var(--c-ink);
      }
      .svc-card-meta .arrow {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 999px;
        background: var(--c-accent);
        color: #fff;
        font-family: var(--f-mono);
        font-size: var(--fs-body-sm);
        line-height: 1;
        flex-shrink: 0;
        transition: transform 0.3s var(--ease), background 0.3s var(--ease);
      }
      .svc-card:hover .arrow {
        transform: translateX(6px);
        background: #c91835;
      }
      .svc-card .desc {
        font-size: var(--fs-body-sm);
        line-height: 1.55;
        color: var(--c-text-2);
        margin: 8px 0 0;
        padding: 0 clamp(18px, 2.2vw, 22px) clamp(18px, 2.2vw, 22px);
        flex: 1;
      }
      @media (prefers-reduced-motion: reduce) {
        .svc-card {
          transition: none;
        }
        .svc-card:hover {
          transform: none;
        }
      }
      @media (max-width: 1024px) {
        .svc-grid { grid-template-columns: 1fr 1fr; }
        .svc-card[data-size="lg"], .svc-card[data-size="md"] { grid-column: span 1; }
      }
      @media (max-width: 600px) {
        .svc-grid { grid-template-columns: 1fr; }
      }

      /* Section 5 — Realizations list */
      .real-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 56px;
        align-items: center;
        padding: 56px 0;
        border-top: 1px solid var(--c-line);
      }
      .real-row:first-of-type { border-top: 0; padding-top: 0; }
      .real-row:nth-child(even) .real-media { order: 2; }
      .real-media {
        position: relative;
        aspect-ratio: 16 / 10;
        background: var(--c-bg-warm);
        border: 0;
        overflow: hidden;
        --corner-cut: 28px;
        clip-path: polygon(
          0 0,
          100% 0,
          100% calc(100% - var(--corner-cut)),
          calc(100% - var(--corner-cut)) 100%,
          0 100%
        );
      }
      .real-media svg { width: 100%; height: 100%; }
      .real-media .ampro-photo--fill { position: absolute; inset: 0; }
      .real-status-tag {
        position: absolute;
        top: 18px;
        left: 18px;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 7px 13px 7px 11px;
        font-family: var(--f-mono);
        font-size: var(--fs-mono-sm);
        letter-spacing: 0.06em;
        color: #fff;
        background: rgba(235,35,71,0.92);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
      }
      .real-status-tag .dot {
        width: 6px; height: 6px; border-radius: 999px;
        background: #fff;
        animation: pulseDot 1.6s ease-in-out infinite;
      }
      .real-status-tag.is-done {
        background: rgba(15,15,18,0.78);
      }
      @keyframes pulseDot { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }
      .real-row:nth-child(even) .real-media {
        clip-path: polygon(
          var(--corner-cut) 0,
          100% 0,
          100% 100%,
          0 100%,
          0 var(--corner-cut)
        );
      }
      .real-row:first-of-type .real-media {
        --corner-cut: 40px;
      }
      .real-content .meta { margin-bottom: 18px; }
      .real-content h3 {
        font-family: var(--f-sans);
        font-weight: 500;
        font-size: var(--fs-h3);
        line-height: 1.18;
        letter-spacing: -0.012em;
        margin: 0 0 16px;
        color: var(--c-ink);
        max-width: 32ch;
      }
      .real-content p {
        font-size: var(--fs-body-md);
        line-height: 1.6;
        color: var(--c-text-2);
        max-width: 50ch;
        margin: 0 0 26px;
      }
      .real-link {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        font-size: var(--fs-body-sm);
        font-weight: 500;
        color: var(--c-ink);
        border-bottom: 1px solid var(--c-ink);
        padding-bottom: 4px;
        transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
      }
      .real-link:hover {
        color: var(--c-accent);
        border-color: var(--c-accent);
      }
      .real-link .arrow { transition: transform 0.3s var(--ease); }
      .real-link:hover .arrow { transform: translateX(6px); }
      @media (max-width: 800px) {
        .real-row {
          grid-template-columns: 1fr;
          gap: 24px;
        }
        .real-row:nth-child(even) .real-media { order: 0; }
      }

      /* Section 6 — Map (Leaflet) */
      .map-section {
        display: grid;
        grid-template-columns: minmax(320px, 460px) 1fr;
        gap: 56px;
        margin-top: 56px;
        align-items: stretch;
      }
      .map-side {
        display: flex;
        flex-direction: column;
        gap: 20px;
      }
      .map-featured {
        position: relative;
        border: 1px solid var(--c-line);
        background: #fff;
        --corner-cut: 22px;
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--corner-cut)), calc(100% - var(--corner-cut)) 100%, 0 100%);
        overflow: hidden;
        transition: transform 0.55s var(--ease), box-shadow 0.55s var(--ease);
        will-change: transform;
      }
      .map-featured.is-ready {
        animation: mapCardIn 0.7s var(--ease) both;
      }
      .map-featured.is-switching {
        transform: translateY(4px) scale(0.992);
        box-shadow: none;
      }
      .map-featured.is-entering .map-featured-head,
      .map-featured.is-entering .map-featured-body {
        animation: mapPanelIn 0.55s var(--ease) both;
      }
      .map-featured.is-entering .map-featured-body {
        animation-delay: 0.08s;
      }
      @keyframes mapCardIn {
        from { opacity: 0; transform: translateY(16px); }
        to { opacity: 1; transform: translateY(0); }
      }
      @keyframes mapPanelIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
      }
      /* Header band — replaces the old SVG warehouse illustration */
      .map-featured-head {
        position: relative;
        background: #0f0f12;
        color: #fff;
        padding: 20px 24px 22px;
        overflow: hidden;
      }
      .map-featured-head::before {
        content: "";
        position: absolute; inset: 0;
        background-image:
          linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
        background-size: 24px 24px;
        pointer-events: none;
      }
      .map-featured-head > * { position: relative; z-index: 1; }
      .map-featured-tag {
        font-family: var(--f-mono);
        font-size: var(--fs-mono-xs);
        letter-spacing: 0.14em;
        text-transform: uppercase;
        padding: 5px 9px;
        background: rgba(235,35,71,0.92);
        color: #fff;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%);
      }
      .map-featured-tag.is-done { background: rgba(255,255,255,0.12); }
      .map-featured-tag .dot { width: 5px; height: 5px; border-radius: 999px; background: #fff; }
      .map-featured-tag.is-active .dot { animation: pulseDot 1.6s ease-in-out infinite; }
      .map-featured-id {
        font-family: var(--f-mono);
        font-size: var(--fs-mono-md);
        letter-spacing: 0.16em;
        color: rgba(255,255,255,0.55);
        margin-top: 18px;
        display: block;
      }
      .map-featured-loc-large {
        font-family: var(--f-sans);
        font-weight: 500;
        font-size: 26px;
        line-height: 1.1;
        letter-spacing: -0.012em;
        color: #fff;
        margin: 6px 0 0;
      }
      .map-featured-loc-sub {
        font-family: var(--f-mono);
        font-size: var(--fs-mono-sm);
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: rgba(255,255,255,0.6);
        margin-top: 8px;
        display: block;
      }
      .map-featured-body {
        padding: 22px 24px 26px;
      }
      .map-featured h3 {
        font-family: var(--f-sans);
        font-weight: 500;
        font-size: var(--fs-h4);
        line-height: 1.22;
        letter-spacing: -0.005em;
        margin: 0 0 18px;
        color: var(--c-ink);
      }
      /* Per-project metric grid: 4 cells, hard numbers + mono labels */
      .map-featured-metrics {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px 24px;
        padding: 18px 0 20px;
        border-top: 1px solid var(--c-line);
        border-bottom: 1px solid var(--c-line);
        margin-bottom: 18px;
      }
      .map-featured-metrics .m { display: flex; flex-direction: column; gap: 4px; }
      .map-featured-metrics .m .l {
        font-family: var(--f-mono);
        font-size: var(--fs-mono-xs);
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--c-text-3);
      }
      .map-featured-metrics .m .v {
        font-family: var(--f-sans);
        font-weight: 500;
        font-size: 22px;
        line-height: 1.05;
        color: var(--c-ink);
        letter-spacing: -0.012em;
        font-variant-numeric: tabular-nums;
        transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
      }
      .map-featured-metrics .m .v .is-changing,
      [data-meta-id].is-changing,
      [data-meta-city].is-changing,
      [data-stat-area-num].is-changing,
      [data-stat-months].is-changing {
        opacity: 0.35;
        transform: translateY(3px);
      }
      .map-featured-metrics .m .v .u {
        font-size: 13px;
        font-weight: 400;
        color: var(--c-text-3);
        margin-left: 4px;
        letter-spacing: 0;
      }
      .map-featured-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-family: var(--f-mono);
        font-size: var(--fs-mono-md);
        letter-spacing: 0.04em;
        color: var(--c-accent-deep);
        text-decoration: none;
        border-bottom: 1px solid currentColor;
        padding-bottom: 2px;
      }
      .map-featured-link .arrow { transition: transform 0.25s var(--ease); }
      .map-featured-link:hover .arrow { transform: translateX(4px); }

      .map-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px 24px;
        padding-top: 24px;
        border-top: 1px solid var(--c-line);
      }
      .map-stats .v {
        font-family: var(--f-sans);
        font-weight: 500;
        font-size: 32px;
        line-height: 1;
        letter-spacing: -0.018em;
        color: var(--c-ink);
        font-variant-numeric: tabular-nums;
      }
      .map-stats .l {
        font-family: var(--f-mono);
        font-size: var(--fs-mono-xs);
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--c-text-3);
        margin-top: 8px;
      }

      .map-canvas {
        position: relative;
        background: #efece4;
        border: 1px solid var(--c-line);
        height: 100%;
        min-height: 0;
        overflow: hidden;
        --corner-cut: 28px;
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--corner-cut)), calc(100% - var(--corner-cut)) 100%, 0 100%);
      }
      .map-canvas::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 400;
        pointer-events: none;
        background:
          radial-gradient(ellipse at 50% 55%, transparent 42%, rgba(15,15,18,0.08) 100%),
          linear-gradient(180deg, rgba(248,247,243,0.15) 0%, transparent 18%, transparent 82%, rgba(15,15,18,0.06) 100%);
      }
      .map-canvas::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 399;
        pointer-events: none;
        opacity: 0.35;
        background-image:
          linear-gradient(rgba(15,15,18,0.04) 1px, transparent 1px),
          linear-gradient(90deg, rgba(15,15,18,0.04) 1px, transparent 1px);
        background-size: 48px 48px;
      }
      #ampro-map {
        width: 100%;
        height: 100%;
        background: #efece4;
      }
      /* Leaflet overrides — strip default chrome */
      .leaflet-container { background: #efece4 !important; outline: none; font-family: var(--f-mono); }
      .leaflet-control-attribution {
        background: rgba(248,247,243,0.7) !important;
        color: var(--c-text-3) !important;
        font-family: var(--f-mono);
        font-size: 9px !important;
        letter-spacing: 0.04em;
        padding: 3px 8px !important;
      }
      .leaflet-control-attribution a { color: var(--c-text-2) !important; }
      .leaflet-tile-pane { filter: grayscale(1) contrast(0.92) brightness(1.04) saturate(0.85); transition: filter 0.6s var(--ease); }
      .map-canvas:hover .leaflet-tile-pane { filter: grayscale(0.85) contrast(0.96) brightness(1.02) saturate(0.95); }
      /* Custom pins */
      .ampro-pin-wrap { background: transparent !important; border: 0 !important; }
      .ampro-pin {
        position: relative;
        width: 28px;
        height: 28px;
        cursor: pointer;
      }
      .ampro-pin .core {
        position: absolute;
        inset: 9px;
        border-radius: 999px;
        background: #eb2347;
        box-shadow: 0 0 0 2px #fff, 0 2px 10px rgba(235,35,71,0.38);
        transition: transform 0.45s cubic-bezier(0.34, 1.45, 0.64, 1), background 0.35s var(--ease), box-shadow 0.35s var(--ease);
      }
      .ampro-pin .halo {
        position: absolute;
        inset: 0;
        border-radius: 999px;
        background: rgba(235,35,71,0.18);
        opacity: 0;
        transform: scale(0.72);
        transition: opacity 0.4s var(--ease), transform 0.45s cubic-bezier(0.34, 1.45, 0.64, 1);
      }
      .ampro-pin .ripple {
        position: absolute;
        inset: 2px;
        border-radius: 999px;
        border: 1px solid rgba(235,35,71,0.45);
        opacity: 0;
        transform: scale(0.5);
        transition: opacity 0.35s var(--ease), transform 0.55s var(--ease);
      }
      .ampro-pin.is-hq .core {
        background: #eb2347;
        box-shadow: 0 0 0 2px #fff, 0 0 0 4px #eb2347, 0 2px 12px rgba(235,35,71,0.48);
      }
      .ampro-pin.is-preview .core {
        transform: scale(1.18);
        box-shadow: 0 0 0 2px #fff, 0 4px 14px rgba(235,35,71,0.42);
      }
      .ampro-pin.is-preview .halo {
        opacity: 0.55;
        transform: scale(1);
      }
      .ampro-pin.is-active .core {
        transform: scale(1.42);
        box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(235,35,71,0.22), 0 6px 18px rgba(235,35,71,0.5);
      }
      .ampro-pin.is-active .halo {
        opacity: 1;
        transform: scale(1.08);
        animation: mapPinPulse 2.4s ease-in-out infinite;
      }
      .ampro-pin.is-active .ripple {
        opacity: 1;
        transform: scale(1.55);
        animation: mapPinRipple 2.4s ease-out infinite;
      }
      @keyframes mapPinPulse {
        0%, 100% { opacity: 0.75; transform: scale(1.02); }
        50% { opacity: 1; transform: scale(1.12); }
      }
      @keyframes mapPinRipple {
        0% { opacity: 0.65; transform: scale(1); }
        70% { opacity: 0; transform: scale(1.85); }
        100% { opacity: 0; transform: scale(1.85); }
      }
      @media (prefers-reduced-motion: reduce) {
        .map-featured.is-ready,
        .map-featured.is-entering .map-featured-head,
        .map-featured.is-entering .map-featured-body,
        .ampro-pin.is-active .halo,
        .ampro-pin.is-active .ripple {
          animation: none !important;
        }
        .map-featured,
        .ampro-pin .core,
        .ampro-pin .halo,
        .leaflet-tile-pane {
          animation: none !important;
        }
      }
      .map-overlay-label {
        position: absolute;
        bottom: 18px;
        left: 18px;
        font-family: var(--f-mono);
        font-size: var(--fs-mono-xs);
        letter-spacing: 0.12em;
        color: var(--c-text-3);
        z-index: 401;
        pointer-events: none;
        background: rgba(248,247,243,0.82);
        padding: 6px 10px;
        backdrop-filter: blur(6px);
        border: 1px solid rgba(15,15,18,0.06);
        transition: color 0.35s var(--ease), background 0.35s var(--ease), transform 0.35s var(--ease);
      }
      .map-overlay-label.is-updated {
        color: var(--c-accent-deep);
        background: rgba(255,255,255,0.92);
        transform: translateY(-2px);
      }
      @media (max-width: 900px) {
        .map-section { grid-template-columns: 1fr; }
        .map-canvas { aspect-ratio: 4/5; }
      }

      /* Section 8 — Knowledge carousel */
      .know-carousel-head {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 24px;
        flex-wrap: wrap;
      }
      .know-carousel-head__actions {
        display: flex;
        align-items: center;
        gap: 20px;
        flex-wrap: wrap;
      }
      .know-carousel__nav {
        display: inline-flex;
        gap: 8px;
      }
      .know-carousel__btn {
        width: 48px;
        height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--c-line-strong);
        border-radius: 999px;
        background: #fff;
        color: var(--c-ink);
        cursor: pointer;
        flex-shrink: 0;
        box-shadow: 0 4px 18px rgba(15, 15, 18, 0.08);
        transition:
          border-color 0.25s var(--ease),
          color 0.25s var(--ease),
          background 0.25s var(--ease),
          transform 0.25s var(--ease),
          box-shadow 0.25s var(--ease);
      }
      .know-carousel__btn:hover:not(:disabled) {
        border-color: var(--c-accent);
        background: var(--c-accent);
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 10px 28px rgba(235, 35, 71, 0.28);
      }
      .know-carousel__btn:disabled {
        opacity: 0.32;
        cursor: not-allowed;
        box-shadow: none;
      }
      .know-carousel {
        margin-top: clamp(36px, 4vw, 48px);
        margin-left: calc(-1 * var(--pad));
        margin-right: calc(50% - 50vw);
        padding-left: var(--pad);
        padding-right: 0;
      }
      .know-carousel__track {
        display: flex;
        align-items: stretch;
        gap: 16px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 4px 0 16px;
        cursor: grab;
        user-select: none;
      }
      .know-carousel__track.is-dragging {
        cursor: grabbing;
        scroll-snap-type: none;
        scroll-behavior: auto;
      }
      .know-carousel__track::-webkit-scrollbar {
        display: none;
      }
      .know-card {
        flex: 0 0 clamp(280px, 28vw, 340px);
        scroll-snap-align: start;
        min-width: 0;
        display: flex;
        flex-direction: column;
        background: #fff;
        border: 1px solid var(--c-line);
        --corner-cut: 14px;
        clip-path: polygon(
          0 0,
          100% 0,
          100% calc(100% - var(--corner-cut)),
          calc(100% - var(--corner-cut)) 100%,
          0 100%
        );
        transition:
          transform 0.35s var(--ease),
          border-color 0.35s var(--ease),
          box-shadow 0.35s var(--ease);
      }
      .know-card:hover {
        transform: translateY(-3px);
        border-color: rgba(235, 35, 71, 0.22);
        box-shadow: 0 16px 40px rgba(15, 15, 18, 0.07);
      }
      .know-card__link {
        display: flex;
        flex-direction: column;
        flex: 1;
        height: 100%;
        color: inherit;
        text-decoration: none;
      }
      .know-card__media {
        position: relative;
        overflow: hidden;
        background: var(--c-bg-warm);
        border-bottom: 1px solid var(--c-line);
        aspect-ratio: 16 / 10;
        flex-shrink: 0;
      }
      .know-card__body {
        display: flex;
        flex-direction: column;
        gap: 12px;
        flex: 1;
        padding: clamp(18px, 2vw, 24px);
      }
      .know-meta {
        display: flex;
        gap: 10px;
        font-family: var(--f-mono);
        font-size: var(--fs-mono-sm);
        letter-spacing: 0.06em;
        color: var(--c-text-2);
        text-transform: uppercase;
      }
      .know-meta .cat { color: var(--c-accent-deep); }
      .know-card h3 {
        font-family: var(--f-sans);
        font-weight: 500;
        font-size: clamp(17px, 1.45vw, 20px);
        line-height: 1.28;
        color: var(--c-ink);
        margin: 0;
        letter-spacing: -0.012em;
        text-wrap: pretty;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      .know-card p {
        font-size: var(--fs-body-sm);
        line-height: 1.55;
        color: var(--c-text-2);
        margin: 0;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      .know-card .read {
        margin-top: auto;
        padding-top: 4px;
        font-family: var(--f-mono);
        font-size: var(--fs-mono-md);
        letter-spacing: 0.04em;
        color: var(--c-ink);
        transition: color 0.25s var(--ease);
      }
      .know-card:hover .read { color: var(--c-accent); }
      @media (max-width: 900px) {
        .know-carousel {
          margin-right: calc(50% - 50vw);
        }
        .know-card {
          flex-basis: clamp(260px, 78vw, 340px);
        }
      }
      @media (max-width: 600px) {
        .know-carousel-head__actions {
          width: 100%;
          justify-content: space-between;
        }
      }

      /* Section 9 — Light CTA (styles: contact.css) */

      /* Client placeholder logos */
      .client-logo-img {
        width: 58%;
        max-width: 120px;
        height: auto;
        opacity: 0.42;
        filter: grayscale(1) contrast(0.55);
        transition: opacity 0.3s var(--ease), filter 0.3s var(--ease);
      }
      .recog-logo:hover .client-logo-img {
        opacity: 0.85;
        filter: grayscale(1) contrast(1);
      }