/* From mockup/project-navigator.html — shared project single styles */

:root {
      --font-display: 'Manrope', 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
      --font-body: 'Plus Jakarta Sans', Inter, ui-sans-serif, system-ui, sans-serif;
      --font-label: 'Plus Jakarta Sans', Inter, ui-sans-serif, system-ui, sans-serif;
      --font-eyebrow: 'Barlow Condensed', 'Arial Narrow', ui-sans-serif, system-ui, sans-serif;
      --font-cta: 'Sora', 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;

      --text-label: 0.6875rem;
      --text-nav: 0.8125rem;
      --text-ui: 0.875rem;
      --text-phone: 0.9375rem;
      --text-lead: 1.0625rem;
      --text-lead-lg: 1.125rem;
      --text-display: clamp(3.75rem, 9.5vw, 7.75rem);
      --text-cta: 0.8125rem;

      --leading-display: 0.94;
      --leading-tight: 1.15;
      --leading-snug: 1.35;
      --leading-body: 1.6;

      --tracking-display: -0.045em;
      --tracking-label: 0.12em;
      --tracking-nav: 0.01em;
      --tracking-tight: -0.01em;
      --tracking-cta: 0.06em;

      --weight-regular: 400;
      --weight-medium: 500;
      --weight-semibold: 600;
      --weight-bold: 700;
      --weight-extrabold: 800;
      --weight-black: 900;
    }
    html { scroll-behavior: smooth; scroll-padding-top: 7.75rem; }
    body.menu-open { overflow: hidden; }
    .brand-logo {
      display: block;
      flex-shrink: 0;
      height: auto;
      width: auto;
      max-height: 2.75rem;
      object-fit: contain;
      object-position: left center;
    }
    .cta-green {
      background: rgb(39 196 106);
      color: #fff;
      text-shadow: 0 1px 2px rgba(8, 12, 17, .32);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .24),
        0 0 0 1px rgba(8, 12, 17, .12);
      transition: background .3s ease, box-shadow .3s ease, gap .3s ease;
    }
    .cta-green:hover {
      background: rgb(52 210 118);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .28),
        0 0 0 1px rgba(8, 12, 17, .1),
        0 14px 44px rgba(39, 196, 106, .35);
    }
    #topbar {
      background-color: rgba(255, 255, 255, 0.72);
      -webkit-backdrop-filter: blur(18px) saturate(140%);
      backdrop-filter: blur(18px) saturate(140%);
      box-shadow: 0 1px 0 rgba(8, 12, 17, 0.06);
      transition: background-color 0.35s ease, box-shadow 0.35s ease;
    }
    #topbar.is-over-light {
      background-color: rgba(255, 255, 255, 0.86);
      box-shadow: 0 1px 0 rgba(8, 12, 17, 0.07), 0 8px 24px rgba(8, 12, 17, 0.05);
    }
    #topbar .topbar-nav a {
      color: #475569;
      font-family: var(--font-body);
      font-size: var(--text-nav);
      font-weight: var(--weight-semibold);
      letter-spacing: var(--tracking-nav);
      line-height: var(--leading-snug);
      transition: color .2s ease;
    }
    #topbar .topbar-nav a:hover {
      color: #080C11;
    }
    #topbar #menuBtn {
      position: relative;
      display: inline-flex;
      width: 2.75rem;
      height: 2.75rem;
      align-items: center;
      justify-content: center;
      padding: 0;
      border-color: #e2e8f0;
      background: transparent;
      transition: border-color .2s ease, background-color .2s ease, width .25s ease, height .25s ease;
    }
    @media (min-width: 1024px) {
      #topbar #menuBtn {
        display: none;
      }
    }
    #topbar #menuBtn:hover {
      border-color: #cbd5e1;
      background: rgba(8, 12, 17, 0.03);
    }
    #topbar #menuBtn span {
      position: absolute;
      left: 50%;
      display: block;
      width: 1.15rem;
      height: 1.5px;
      background: #080C11;
      border-radius: 999px;
      transform: translateX(-50%);
      transition: transform .25s ease, opacity .2s ease, top .25s ease, width .25s ease;
    }
    #topbar #menuBtn span:nth-child(1) {
      top: calc(50% - .28rem);
    }
    #topbar #menuBtn span:nth-child(2) {
      top: calc(50% + .28rem);
    }
    #topbar.is-menu-open #menuBtn span:nth-child(1) {
      top: 50%;
      transform: translateX(-50%) rotate(45deg);
    }
    #topbar.is-menu-open #menuBtn span:nth-child(2) {
      top: 50%;
      transform: translateX(-50%) rotate(-45deg);
    }
    #topbar .topbar-rail,
    #topbar .topbar-shell {
      position: relative;
      z-index: 2;
    }
    #topbar.is-menu-open {
      background-color: #fff;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
      box-shadow: none;
    }
    #topbar.is-menu-open .topbar-rail,
    #topbar.is-menu-open .topbar-shell {
      background-color: #fff;
    }
    #topbar #mobileMenu {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 1;
      box-sizing: border-box;
      height: 100svh;
      max-height: none;
      padding-top: 7.75rem;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      background: #fff;
      border-top: 0;
    }
    #topbar.is-menu-open #mobileMenu {
      display: flex;
      flex-direction: column;
    }
    @media (min-width: 1024px) {
      #topbar #mobileMenu,
      #topbar.is-menu-open #mobileMenu {
        display: none;
      }
    }
    #topbar #mobileMenu a {
      color: #334155;
      font-family: var(--font-body);
      font-size: var(--text-ui);
      font-weight: var(--weight-semibold);
      letter-spacing: var(--tracking-nav);
      line-height: var(--leading-snug);
    }
    .mobile-menu__inner {
      display: flex;
      flex-direction: column;
      flex: 1;
      gap: .35rem;
      box-sizing: border-box;
      width: 100%;
      min-height: calc(100svh - 7.75rem);
      padding: 1.25rem 1rem 0;
    }
    @media (min-width: 640px) {
      .mobile-menu__inner {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
      }
    }
    .mobile-menu__phone {
      display: flex;
      align-items: center;
      gap: .75rem;
      margin-bottom: .85rem;
      padding: 1rem 1.1rem;
      border-radius: 0;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      color: #080C11 !important;
      text-decoration: none;
    }
    .mobile-menu__phone-flag {
      display: block;
      flex-shrink: 0;
      width: 2rem;
      height: 2rem;
      padding: .14rem;
      border-radius: 50%;
      background: #fff;
      overflow: hidden;
      box-shadow: 0 0 0 1px rgba(8, 12, 17, .08);
      box-sizing: border-box;
    }
    .mobile-menu__phone-flag .fi {
      display: block;
      width: 100% !important;
      height: 100%;
      border-radius: 50%;
      background-size: cover !important;
      background-position: center;
    }
    .mobile-menu__phone-content {
      display: flex;
      flex-direction: column;
      gap: .2rem;
      min-width: 0;
    }
    .mobile-menu__phone-label {
      font-family: var(--font-label);
      font-size: var(--text-label);
      font-weight: var(--weight-semibold);
      letter-spacing: var(--tracking-label);
      text-transform: uppercase;
      color: #64748B;
    }
    .mobile-menu__phone-number {
      font-size: var(--text-phone);
      font-weight: var(--weight-bold);
      letter-spacing: var(--tracking-tight);
      color: #080C11;
    }
    .mobile-menu__nav {
      display: flex;
      flex-direction: column;
      flex: 1;
    }
    .mobile-menu__link {
      display: block;
      padding: 1.15rem .15rem;
      border-bottom: 1px solid #f1f5f9;
      font-size: 1.2rem !important;
      font-weight: 700 !important;
      color: #080C11 !important;
      transition: color .2s ease;
    }
    .mobile-menu__link:hover {
      color: rgb(39 196 106) !important;
    }
    .mobile-menu__cta {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: .55rem;
      width: 100%;
      margin-top: auto;
      flex-shrink: 0;
      margin-bottom: max(1rem, env(safe-area-inset-bottom));
      padding: 1.05rem 1.15rem;
      border-radius: 0;
      font-family: var(--font-cta) !important;
      font-size: var(--text-cta) !important;
      font-weight: var(--weight-semibold) !important;
      letter-spacing: var(--tracking-cta) !important;
      text-transform: uppercase;
      text-decoration: none;
      color: #fff !important;
      text-shadow: none;
      box-shadow: none;
    }
    .mobile-menu__cta:hover,
    .mobile-menu__cta:focus-visible {
      text-shadow: none;
      box-shadow: none;
    }
    .mobile-menu__cta svg {
      width: 1rem;
      height: 1rem;
      flex-shrink: 0;
    }
    .topbar-rail {
      display: block;
      border-bottom: 1px solid rgba(8, 12, 17, 0.08);
    }
    .topbar-rail__inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: .75rem;
      min-height: 2.75rem;
      padding-left: 1rem;
      padding-right: 1rem;
      transition: min-height .25s ease;
    }
    @media (min-width: 640px) {
      .topbar-rail__inner {
        gap: 1rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
      }
    }
    @media (min-width: 1024px) {
      .topbar-rail__inner {
        padding-left: 5rem;
        padding-right: 5rem;
      }
    }
    .topbar-rail__meta {
      display: flex;
      align-items: center;
      gap: .85rem;
      min-width: 0;
      color: #64748B;
      font-family: var(--font-label);
      font-size: var(--text-label);
      font-weight: var(--weight-semibold);
      letter-spacing: var(--tracking-label);
      line-height: var(--leading-tight);
      text-transform: uppercase;
      white-space: nowrap;
    }
    .topbar-rail__meta-sep,
    .topbar-rail__meta-detail {
      display: none;
    }
    .topbar-rail__meta-sep {
      color: #cbd5e1;
      letter-spacing: 0;
    }
    @media (min-width: 768px) {
      .topbar-rail__meta-sep,
      .topbar-rail__meta-detail {
        display: inline;
      }
    }
    .topbar-rail__social {
      display: none;
      align-items: center;
      gap: .35rem;
    }
    @media (min-width: 768px) {
      .topbar-rail__social {
        display: inline-flex;
      }
    }
    .topbar-rail__social a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 1.65rem;
      height: 1.65rem;
      color: #64748B;
      transition: color .2s ease, transform .2s ease;
    }
    .topbar-rail__social a:hover {
      color: rgb(39 196 106);
      transform: translateY(-1px);
    }
    .topbar-rail__social svg {
      width: .95rem;
      height: .95rem;
    }
    .topbar-rail .topbar-phone {
      margin-left: auto;
    }
    @media (min-width: 768px) {
      .topbar-rail .topbar-phone {
        display: none;
      }
    }
    .topbar-shell .topbar-phone {
      display: none;
    }
    @media (min-width: 768px) {
      .topbar-shell .topbar-phone {
        display: inline-flex;
      }
    }
    .topbar-shell {
      display: flex;
      height: 5rem;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      box-sizing: border-box;
      transition: height .25s ease;
    }
    @media (min-width: 640px) {
      .topbar-shell {
        gap: 1.5rem;
      }
    }
    .topbar-primary {
      display: flex;
      align-items: center;
      gap: 1.75rem;
      min-width: 0;
    }
    .topbar-brand,
    .topbar-actions {
      display: flex;
      align-items: center;
    }
    .topbar-brand {
      flex-shrink: 0;
    }
    .topbar-brand-mark {
      display: inline-flex;
      align-items: center;
    }
    .topbar-brand-mark .brand-logo {
      max-height: 2.5rem;
      transition: max-height .25s ease;
    }
    @media (min-width: 768px) {
      .topbar-brand-mark .brand-logo {
        max-height: 2.35rem;
      }
    }
    @media (max-width: 1023px) {
      .topbar-rail__inner {
        min-height: 2.25rem;
      }
      .topbar-shell {
        height: 3.75rem;
      }
      .topbar-brand-mark .brand-logo {
        max-height: 1.95rem;
      }
      #topbar #menuBtn {
        width: 2.15rem;
        height: 2.15rem;
      }
      #topbar:not(.is-menu-open) #menuBtn span {
        width: .9rem;
      }
      #topbar:not(.is-menu-open) #menuBtn span:nth-child(1) {
        top: calc(50% - .22rem);
      }
      #topbar:not(.is-menu-open) #menuBtn span:nth-child(2) {
        top: calc(50% + .22rem);
      }
      #topbar #mobileMenu {
        padding-top: 6rem;
      }
    }
    .topbar-nav {
      align-items: center;
      gap: 1.5rem;
      padding-left: 1.75rem;
      border-left: 1px solid #e2e8f0;
    }
    @media (min-width: 1280px) {
      .topbar-primary {
        gap: 2rem;
      }
      .topbar-nav {
        gap: 1.85rem;
        padding-left: 2rem;
      }
    }
    .topbar-actions {
      gap: .55rem;
      flex-shrink: 0;
      margin-left: auto;
    }
    @media (min-width: 768px) {
      .topbar-actions {
        gap: .75rem;
      }
    }
    .topbar-phone {
      display: inline-flex;
      align-items: center;
      gap: .55rem;
      min-width: 0;
      transition: transform .2s ease, opacity .2s ease;
    }
    @media (min-width: 768px) {
      .topbar-phone {
        gap: .75rem;
      }
    }
    .topbar-phone:hover {
      transform: translateY(-1px);
    }
    .topbar-phone:hover .topbar-phone__number {
      color: rgb(39 196 106);
    }
    .topbar-phone__flag {
      display: block;
      flex-shrink: 0;
      width: 1.5rem;
      height: 1.5rem;
      padding: .1rem;
      border-radius: 50%;
      background: #fff;
      overflow: hidden;
      box-shadow: 0 0 0 1px rgba(8, 12, 17, .08);
      box-sizing: border-box;
    }
    @media (min-width: 768px) {
      .topbar-phone__flag {
        width: 1.75rem;
        height: 1.75rem;
        padding: .12rem;
      }
    }
    .topbar-phone__flag .fi {
      display: block;
      width: 100% !important;
      height: 100%;
      border-radius: 50%;
      background-size: cover !important;
      background-position: center;
    }
    .topbar-phone__content {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: .45rem;
      line-height: 1;
      min-width: 0;
    }
    @media (min-width: 768px) {
      .topbar-phone__content {
        flex-direction: column;
        align-items: flex-start;
        gap: .15rem;
      }
    }
    .topbar-phone__label {
      display: none;
      align-items: center;
      gap: .35rem;
      font-family: var(--font-label);
      font-size: var(--text-label);
      font-weight: var(--weight-semibold);
      letter-spacing: var(--tracking-label);
      line-height: var(--leading-tight);
      text-transform: uppercase;
      color: #64748B;
    }
    @media (min-width: 480px) {
      .topbar-phone__label {
        display: inline-flex;
      }
    }
    .topbar-phone__dot {
      width: .34rem;
      height: .34rem;
      border-radius: 50%;
      background: rgb(39 196 106);
      box-shadow: 0 0 7px rgba(39, 196, 106, .85);
      animation: phone-cta-pulse 2.4s ease-in-out infinite;
    }
    .topbar-phone__number {
      font-family: var(--font-body);
      font-size: 0.8125rem;
      font-weight: var(--weight-bold);
      letter-spacing: var(--tracking-tight);
      line-height: var(--leading-tight);
      color: #080C11;
      white-space: nowrap;
      transition: color .2s ease;
    }
    @media (min-width: 768px) {
      .topbar-phone__number {
        font-size: var(--text-phone);
      }
    }
    @media (min-width: 1024px) and (max-width: 1279px) {
      .topbar-primary {
        gap: 1.25rem;
      }
      .topbar-nav {
        gap: 1.15rem;
        padding-left: 1.25rem;
      }
    }

@keyframes phone-cta-pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: .5; transform: scale(.82); }
    }

    body { background: #080C11; font-family: var(--font-body); }
    .reveal { opacity: 0; transform: translateY(24px); transition: .7s ease; }
    .reveal.show { opacity: 1; transform: translateY(0); }


    main {
      padding-top: 7.75rem;
      background: #fff;
    }
    .project-hero {
      position: relative;
      background:
        linear-gradient(160deg, #27c46a 0%, #1eab5a 8%, #18924c 22%, #168544 48%, #147a3e 100%);
      overflow: hidden;
      border-bottom: 1px solid #147a3e;
    }
    .project-hero__content {
      position: relative;
      z-index: 1;
      width: 100%;
      padding: 2.25rem 0 2.75rem;
    }
    @media (min-width: 1024px) {
      .project-hero__content {
        padding: 2.75rem 0 3.25rem;
      }
    }
    .project-hero__layout {
      display: grid;
      gap: 1.75rem;
      align-items: start;
    }
    @media (min-width: 1280px) {
      .project-hero__layout {
        grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
        gap: 2.5rem 2.75rem;
        align-items: stretch;
      }
    }
    .project-hero__header {
      min-width: 0;
    }
    @media (min-width: 1280px) {
      .project-hero__header {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
      }
    }
    .project-hero__eyebrow {
      font-size: .75rem;
      font-weight: 700;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.85);
    }
    .project-hero__title {
      margin-top: .65rem;
      font-family: var(--font-display);
      font-size: clamp(2.5rem, 6vw, 4.25rem);
      font-weight: 800;
      line-height: .96;
      letter-spacing: -.04em;
      color: #fff;
    }
    .project-hero__lede {
      margin-top: .75rem;
      max-width: 36rem;
      font-size: 1rem;
      line-height: 1.5;
      color: rgba(255, 255, 255, 0.78);
    }
    .project-hero__meta {
      display: grid;
      grid-template-columns: 1fr;
      gap: .85rem 1.25rem;
      margin-top: 1.35rem;
      padding-top: 1.1rem;
      border-top: 1px solid rgba(255, 255, 255, 0.14);
    }
    @media (min-width: 640px) {
      .project-hero__meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }
    @media (min-width: 960px) {
      .project-hero__meta {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }
    .project-hero__meta dt {
      display: flex;
      align-items: center;
      gap: .4rem;
      font-size: .65rem;
      font-weight: 700;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.45);
    }
    .project-hero__meta dt svg {
      width: .85rem;
      height: .85rem;
      flex-shrink: 0;
      stroke: rgba(255, 255, 255, 0.7);
    }
    .project-hero__meta dd {
      margin-top: .25rem;
      font-size: .9rem;
      font-weight: 600;
      color: #fff;
      overflow-wrap: anywhere;
    }
    .project-hero__meta-item {
      min-width: 0;
    }

    .project-hero__overview {
      min-width: 0;
      padding-top: 1.25rem;
      border-top: 1px solid rgba(255, 255, 255, 0.18);
    }
    @media (min-width: 1280px) {
      .project-hero__overview {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 100%;
        padding-top: 0;
        border-top: 0;
      }
    }
    .project-hero__overview-label {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.92);
    }
    .project-hero__overview-cards {
      display: grid;
      grid-template-columns: 1fr;
      gap: .75rem;
      margin-top: .85rem;
    }
    @media (min-width: 640px) {
      .project-hero__overview-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }
    @media (min-width: 960px) {
      .project-hero__overview-cards {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }
    }
    @media (min-width: 1280px) {
      .project-hero__overview-cards {
        flex: 1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .75rem;
        margin-top: .75rem;
        min-height: 0;
        align-items: stretch;
      }
      .project-hero__overview-cards .project-card-data {
        height: 100%;
        min-height: 0;
        padding: 1rem .85rem 1.1rem;
      }
      .project-hero__overview-cards .project-card-data dd {
        margin-top: .5rem;
        font-size: .95rem;
      }
      .project-hero__overview-cards .project-card-data dd span {
        margin-top: .3rem;
        font-size: .75rem;
      }
    }
    @media (min-width: 1440px) {
      .project-hero__overview-cards {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }
    }
    .project-hero__overview-cards .project-card-data {
      display: flex;
      flex-direction: column;
      min-height: 100%;
      min-width: 0;
      border: 1px solid rgba(255, 255, 255, 0.16);
      background: #188c48;
      padding: .95rem 1rem 1.05rem;
      opacity: 1;
      transform: none;
    }
    .project-hero__overview-cards .project-card-data dt {
      font-size: .65rem;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.72);
    }
    .project-hero__overview-cards .project-card-data dd {
      margin-top: .55rem;
      font-family: var(--font-display);
      font-size: clamp(.9rem, 1.5vw, 1.02rem);
      font-weight: 800;
      letter-spacing: -.025em;
      line-height: 1.25;
      color: #fff;
      overflow-wrap: anywhere;
    }
    .project-hero__overview-cards .project-card-data dd span {
      display: block;
      margin-top: .35rem;
      font-family: var(--font-body);
      font-size: .8rem;
      font-weight: 500;
      line-height: 1.45;
      letter-spacing: 0;
      color: rgba(255, 255, 255, 0.72);
      overflow-wrap: anywhere;
    }

    .project-section {
      padding: 3.5rem 0;
    }
    @media (min-width: 1024px) {
      .project-section { padding: 4.25rem 0; }
    }
    .project-label {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: .7rem;
      font-weight: 700;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: rgb(39 196 106);
    }
    .project-heading {
      margin-top: .65rem;
      font-family: var(--font-display);
      font-size: clamp(1.65rem, 3vw, 2.25rem);
      font-weight: 800;
      letter-spacing: -.035em;
      color: #080C11;
    }

    .project-cards {
      display: grid;
      gap: 1rem;
      margin-top: 2rem;
    }
    @media (min-width: 640px) {
      .project-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.1rem;
      }
    }
    @media (min-width: 1100px) {
      .project-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }
    .project-cards--dense {
      gap: .9rem;
    }
    @media (min-width: 1100px) {
      .project-cards--dense {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }
    }
    @media (min-width: 1100px) {
      .project-cards--four {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }
    }
    .project-cards .project-card-data {
      display: flex;
      flex-direction: column;
      min-height: 100%;
      border: 1px solid #dbe3ec;
      background: #fff;
      padding: 1.15rem 1.2rem 1.25rem;
    }
    .project-cards .project-card-data dt {
      font-size: .65rem;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: rgb(39 196 106);
    }
    .project-cards .project-card-data dd {
      margin-top: .7rem;
      font-family: var(--font-display);
      font-size: 1.15rem;
      font-weight: 800;
      letter-spacing: -.025em;
      line-height: 1.25;
      color: #080C11;
    }
    .project-cards .project-card-data dd span {
      display: block;
      margin-top: .45rem;
      font-family: var(--font-body);
      font-size: .875rem;
      font-weight: 500;
      line-height: 1.45;
      letter-spacing: 0;
      color: #475569;
    }


    .project-scope {
      list-style: none;
      margin: 0;
      padding: 0;
      border-top: 1px solid #cbd5e1;
    }
    .project-scope li {
      display: grid;
      grid-template-columns: 2.25rem minmax(0, 1fr);
      gap: .85rem;
      padding: 1rem 0;
      border-bottom: 1px solid #e2e8f0;
    }
    .project-scope__num {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: .75rem;
      font-weight: 700;
      letter-spacing: .12em;
      color: #94a3b8;
      padding-top: .2rem;
    }
    .project-scope__title {
      margin: 0;
      font-size: 1.05rem;
      font-weight: 800;
      letter-spacing: -.02em;
      color: #080C11;
    }
    .project-scope__text {
      margin-top: .3rem;
      font-size: .95rem;
      line-height: 1.5;
      color: #475569;
    }
    .project-scope__facts {
      display: flex;
      flex-wrap: wrap;
      gap: .45rem;
      margin-top: .8rem;
    }
    .project-scope__facts span {
      border: 1px solid #dbe3ec;
      background: #f8fafc;
      padding: .45rem .6rem;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: .7rem;
      font-weight: 700;
      line-height: 1.35;
      letter-spacing: .02em;
      color: #334155;
    }

    .project-gallery-section {
      padding-top: 1.75rem;
      padding-bottom: 3.25rem;
    }
    @media (min-width: 1024px) {
      .project-gallery-section {
        padding-top: 2rem;
        padding-bottom: 4rem;
      }
    }
    .project-gallery-section .project-heading-note {
      margin-top: .55rem;
      max-width: 34rem;
      font-size: .95rem;
      line-height: 1.5;
      color: #475569;
    }
    .project-gallery {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: .75rem;
      margin-top: 1.35rem;
      opacity: 1;
      transform: none;
    }
    @media (min-width: 768px) {
      .project-gallery {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        grid-auto-rows: minmax(13rem, 20vw);
        gap: .9rem;
      }
    }
    .project-gallery__item {
      position: relative;
      overflow: hidden;
      background: #e2e8f0;
      aspect-ratio: 4 / 3;
    }
    .project-gallery__item:first-child {
      grid-column: 1 / -1;
      aspect-ratio: 16 / 9;
    }
    @media (min-width: 768px) {
      .project-gallery__item {
        grid-column: span 2;
        aspect-ratio: auto;
      }
      .project-gallery__item:first-child {
        grid-column: span 4;
        grid-row: span 2;
        aspect-ratio: auto;
      }
      .project-gallery__item:nth-child(2) {
        grid-column: span 2;
        grid-row: span 2;
      }
      .project-gallery__item:nth-child(n+3) {
        grid-column: span 3;
      }
    }
    .project-gallery__trigger {
      position: relative;
      display: block;
      width: 100%;
      height: 100%;
      border: 0;
      background: transparent;
      padding: 0;
      overflow: hidden;
      cursor: zoom-in;
      text-align: left;
    }
    .project-gallery__trigger::after {
      content: "+";
      position: absolute;
      top: .75rem;
      right: .75rem;
      z-index: 2;
      display: grid;
      place-items: center;
      width: 2rem;
      height: 2rem;
      border: 1px solid rgba(255, 255, 255, .58);
      background: rgba(8, 12, 17, .62);
      color: #fff;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 1.1rem;
      line-height: 1;
      backdrop-filter: blur(8px);
      transition: background .2s ease, border-color .2s ease, transform .2s ease;
    }
    .project-gallery__trigger:hover::after,
    .project-gallery__trigger:focus-visible::after {
      border-color: rgb(39 196 106);
      background: rgba(39, 196, 106, .9);
      color: #080C11;
      transform: scale(1.06);
    }
    .project-gallery__trigger:focus-visible {
      outline: 3px solid rgb(39 196 106);
      outline-offset: -3px;
    }
    .project-gallery__item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .55s cubic-bezier(.22, 1, .36, 1);
    }
    .project-gallery__item:hover img {
      transform: scale(1.04);
    }
    .project-gallery__trigger:hover img {
      transform: scale(1.04);
    }

    body.lightbox-open { overflow: hidden; }
    .project-lightbox {
      width: 100vw;
      max-width: none;
      height: 100dvh;
      max-height: none;
      margin: 0;
      border: 0;
      background: rgba(4, 7, 10, .98);
      padding: 0;
      color: #fff;
      overflow: hidden;
    }
    .project-lightbox::backdrop { background: rgba(4, 7, 10, .96); }
    .project-lightbox[open] { animation: lightbox-in .22s ease-out; }
    @keyframes lightbox-in {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    .project-lightbox__panel {
      position: relative;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      width: 100%;
      height: 100%;
      padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
    }
    .project-lightbox__header {
      position: relative;
      z-index: 3;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      min-height: 2.75rem;
    }
    .project-lightbox__counter {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: .7rem;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .62);
    }
    .project-lightbox__close,
    .project-lightbox__nav {
      display: grid;
      place-items: center;
      width: 2.75rem;
      height: 2.75rem;
      border: 1px solid rgba(255, 255, 255, .24);
      background: rgba(255, 255, 255, .07);
      color: #fff;
      transition: border-color .2s ease, background .2s ease, color .2s ease;
    }
    .project-lightbox__close:hover,
    .project-lightbox__close:focus-visible,
    .project-lightbox__nav:hover,
    .project-lightbox__nav:focus-visible {
      border-color: rgb(39 196 106);
      background: rgb(39 196 106);
      color: #080C11;
      outline: none;
    }
    .project-lightbox__close svg,
    .project-lightbox__nav svg {
      width: 1.2rem;
      height: 1.2rem;
    }
    .project-lightbox__stage {
      display: grid;
      place-items: center;
      min-height: 0;
      overflow: hidden;
      padding: 1rem 3.25rem;
      touch-action: none;
      user-select: none;
    }
    .project-lightbox__viewport {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    .project-lightbox__image {
      display: block;
      width: 100%;
      max-width: 100%;
      height: 100%;
      max-height: 100%;
      object-fit: contain;
      object-position: center;
      box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .32);
      transform-origin: center center;
      will-change: transform;
      transition: transform .08s linear;
    }
    .project-lightbox__stage.is-zoomed .project-lightbox__image {
      transition: none;
    }
    .project-lightbox__stage.is-zoomed .project-lightbox__nav {
      opacity: .35;
      pointer-events: none;
    }
    .project-lightbox__nav {
      position: absolute;
      z-index: 4;
      top: 50%;
      transform: translateY(-50%);
    }
    .project-lightbox__nav--prev { left: max(1rem, env(safe-area-inset-left)); }
    .project-lightbox__nav--next { right: max(1rem, env(safe-area-inset-right)); }
    .project-lightbox__nav[hidden] { display: none; }
    @media (max-width: 639px) {
      .project-lightbox__panel {
        padding-left: max(.75rem, env(safe-area-inset-left));
        padding-right: max(.75rem, env(safe-area-inset-right));
      }
      .project-lightbox__stage { padding: .75rem 0 1rem; }
      .project-lightbox__nav {
        width: 3rem;
        height: 3rem;
        background: rgba(4, 7, 10, .76);
        backdrop-filter: blur(8px);
      }
    }

    .project-bar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }
    .project-cta {
      display: inline-flex;
      align-items: center;
      gap: .65rem;
      background: rgb(39 196 106);
      color: #080C11;
      font-size: .8125rem;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
      padding: .95rem 1.35rem;
      transition: filter .2s ease;
    }
    .project-cta:hover { filter: brightness(1.05); }
    .project-cta svg { width: 1rem; height: 1rem; }



    .site-footer {
      border-top: 1px solid rgba(255,255,255,.10);
      background: #080C11;
      color: #94A3B8;
    }
    .site-footer__main {
      padding: 4.5rem 0 3.5rem;
    }
    .site-footer__logo {
      display: block;
      width: auto;
      max-height: 3.25rem;
      object-fit: contain;
      object-position: left center;
    }
    .site-footer__tagline {
      margin-top: 1.25rem;
      max-width: 18rem;
      font-size: .92rem;
      line-height: 1.65;
      color: #94A3B8;
    }
    .site-footer__heading {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: .62rem;
      font-weight: 700;
      letter-spacing: .28em;
      text-transform: uppercase;
      color: rgb(39 196 106);
    }
    .site-footer__links {
      display: grid;
      gap: .65rem;
      margin-top: 1.25rem;
      list-style: none;
      padding: 0;
    }
    .site-footer__links a {
      display: inline-flex;
      align-items: center;
      gap: .45rem;
      font-size: .9rem;
      line-height: 1.4;
      color: #CBD5E1;
      transition: color .2s ease, transform .2s ease;
    }
    .site-footer__links a::before {
      content: "";
      flex-shrink: 0;
      width: .3rem;
      height: .3rem;
      border-radius: 50%;
      background: rgba(39,196,106,.45);
      transition: background .2s ease, box-shadow .2s ease;
    }
    .site-footer__links a:hover {
      color: #fff;
      transform: translateX(2px);
    }
    .site-footer__links a:hover::before {
      background: rgb(39 196 106);
      box-shadow: 0 0 8px rgba(39,196,106,.55);
    }
    .site-footer__contact {
      border-top: 1px solid rgba(255,255,255,.08);
      padding: 1.5rem 0;
    }
    .site-footer__contact-list {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      justify-content: space-between;
      gap: 1.25rem 2rem;
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .site-footer__contact-item {
      display: flex;
      gap: .75rem;
      align-items: flex-start;
      min-width: 0;
    }
    .site-footer__contact-icon {
      display: flex;
      flex-shrink: 0;
      align-items: center;
      justify-content: center;
      width: 2.1rem;
      height: 2.1rem;
      border-radius: .55rem;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.04);
      color: rgb(39 196 106);
    }
    .site-footer__contact-icon svg {
      width: .95rem;
      height: .95rem;
    }
    .site-footer__contact-label {
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: #64748B;
    }
    .site-footer__contact-value {
      margin-top: .15rem;
      font-size: .9rem;
      line-height: 1.5;
      color: #E2E8F0;
      white-space: nowrap;
    }
    .site-footer__contact-value a {
      color: inherit;
      transition: color .2s ease;
    }
    .site-footer__contact-value a:hover {
      color: #fff;
    }
    .site-footer__contact-value--wrap {
      white-space: normal;
    }
    @media (max-width: 639px) {
      .site-footer__contact-value {
        white-space: normal;
      }
    }
    .site-footer__social {
      display: flex;
      flex-wrap: wrap;
      gap: .65rem;
      margin-top: 1.75rem;
    }
    .site-footer__social a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2.5rem;
      height: 2.5rem;
      border-radius: .65rem;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.04);
      color: #CBD5E1;
      transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease;
    }
    .site-footer__social a:hover {
      border-color: rgba(39,196,106,.45);
      background: rgba(39,196,106,.10);
      color: #fff;
      transform: translateY(-2px);
    }
    .site-footer__social svg {
      width: 1.1rem;
      height: 1.1rem;
    }
    .site-footer__bottom {
      border-top: 1px solid rgba(255,255,255,.08);
      padding: 1.35rem 0;
      font-size: .82rem;
      color: #64748B;
    }
    .site-footer__legal {
      display: flex;
      flex-wrap: wrap;
      gap: 1.25rem;
    }
    .site-footer__legal a {
      color: #94A3B8;
      transition: color .2s ease;
    }
    .site-footer__legal a:hover {
      color: #fff;
    }