:root {
  --container-pad: 100px;
  --container-max: 1250px;
  --nav-h: 110px;
  --lime: #c1d83c;
}

/* =========================
   PROJECTS HERO (ORBIT BG + CONTENT)
========================= */
.projects-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: #ffffff;
  padding-top: calc(var(--nav-h) + 40px); /* safe space from navbar */
  padding-bottom: 90px;
}

/* circles layer */
.bg-orbits {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* content layer above circles */
.projects-hero-content {
  position: relative;
  z-index: 2;
  max-width: var(--container-max);
  width: 100%;
}

/* your wording */
.project-wording1 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  margin: 0 auto 24px;
  width: min(900px, 100%);
}

.project-wording1 p {
  text-align: center;
  line-height: 1.55;
}

/* =========================
   ORBITS (your original)
========================= */
.orbit {
  position: absolute;
  width: 700px;
  height: 700px;
  border-radius: 50%;

  background: conic-gradient(
    from 0deg,
    rgba(180, 255, 80, 0) 0deg,
    rgba(180, 255, 80, 0) 280deg,
    rgba(180, 255, 80, 0.95) 300deg,
    rgba(180, 255, 80, 0.95) 330deg,
    rgba(180, 255, 80, 0) 350deg,
    rgba(180, 255, 80, 0) 360deg
  );

  -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%);
  mask: radial-gradient(circle, transparent 58%, #000 60%);

  box-shadow:
    0 0 0 2px rgba(0, 0, 0, 0.06) inset,
    0 0 80px rgba(0, 0, 0, 0.04);

  opacity: 0.55;
  filter: blur(0.2px);

  animation: spin 18s linear infinite;
  transform-origin: center;
}

.orbit::before {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(0, 0, 0, 0.06),
    rgba(0, 0, 0, 0.015) 55%,
    transparent 70%
  );
  opacity: 0.9;
}

.o1 {
  right: -260px;
  top: -220px;
  width: 780px;
  height: 780px;
  animation-duration: 22s;
}

.o2 {
  left: -320px;
  bottom: -260px;
  width: 820px;
  height: 820px;
  animation-duration: 30s;
  opacity: 0.45;
}

.o4 {
  right: 10%;
  bottom: -180px;
  width: 560px;
  height: 560px;
  animation-duration: 26s;
  opacity: 0.22;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* =========================
   PROJECTS MOSAIC (like your reference)
   - square edges
   - 2-column editorial grid
   - optional lime info panel on hover
========================= */

.projects-mosaic {
  width: 100%;
}

/* grid shape matches the reference:
   [ A | B ]
   [ A | D ]
   [ C | D ]
*/
.projects-mosaic-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: 110px;
  gap: 18px;

  /* packs items into gaps */
  grid-auto-flow: dense;
}

/* tile sizes (12-column system) */
.p-lg {
  grid-column: span 8;
  grid-row: span 4;
}
.p-tall {
  grid-column: span 4;
  grid-row: span 4;
}
.p-wide {
  grid-column: span 8;
  grid-row: span 2;
}
.p-sm {
  grid-column: span 4;
  grid-row: span 2;
}

/* tile base */
.p-tile {
  position: relative;
  display: block;
  overflow: hidden;
  background: #0a1012;
  text-decoration: none;
  color: #0a1012;
  outline: none;

  /* square edges */
  border-radius: 0;
}

/* assign areas */
.p-a {
  grid-area: a;
}
.p-b {
  grid-area: b;
}
.p-c {
  grid-area: c;
}
.p-d {
  grid-area: d;
}

/* image */
.p-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;

  transform: scale(1.02);
  transition:
    transform 220ms ease,
    filter 220ms ease;
}

/* subtle overlay */
.p-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.08);
  opacity: 0;
  transition: opacity 220ms ease;
  pointer-events: none;
}

/* lime vertical strip label (like your ref) */
.p-strip {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--lime, #c1d83c);
  padding: 10px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 135px;
  width: 50px;

  /* square */
}

.p-strip span {
  display: block;
  transform: rotate(-90deg);
  transform-origin: center;
  font-size: 11px;
  letter-spacing: 1px;
  font-weight: 800;
  color: #0a1012;
  white-space: nowrap;
}

/* hover / focus */
.p-tile:hover img,
.p-tile:focus-visible img {
  transform: scale(1.06);
  filter: saturate(1.05);
}

.p-tile:hover::after,
.p-tile:focus-visible::after {
  opacity: 1;
}

.p-tile:focus-visible {
  box-shadow: 0 0 0 3px rgba(209, 255, 69, 0.75);
}

/* ===== Lime info panel (optional) ===== */
.p-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) translateX(-10px);
  width: min(78%, 420px);
  padding: 22px 22px;

  background: var(--lime, #52b848);
  color: #0a1012;

  opacity: 0;
  pointer-events: none;
  transition:
    opacity 220ms ease,
    transform 220ms ease;

  border-radius: 0;
  width: 360px;
  height: 200px;
}

/* show panel on hover/focus for tiles that have it */
.has-panel:hover .p-panel,
.has-panel:focus-visible .p-panel {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* make image slightly dim when panel shows */
.has-panel:hover img,
.has-panel:focus-visible img {
  filter: saturate(1.05) brightness(0.92);
}

.p-panel-kicker {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 10px;
}

.p-panel-title {
  font-size: clamp(18px, 2vw, 26px);
  letter-spacing: 1px;
  line-height: 1.05;
}

.p-panel-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 1px;
}

/*Categories*/
/* Filter buttons */
.projects-filter {
  position: relative;
  display: flex;
  gap: 28px;
  align-items: center;
  justify-content: center;
  margin: 30px 0;
  flex-wrap: wrap;
}

.pf-btn {
  background: transparent;
  border: 2px solid rgba(0, 0, 0, 0.18);
  padding: 10px 14px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 12px;
  cursor: pointer;
  transition: 0.25s ease;
}

.pf-btn:hover {
  border-color: rgba(0, 0, 0, 0.35);
}

.pf-btn.is-active {
  background: var(--lime);
  border-color: var(--lime);
  color: #0a1012;
}

/* Smooth show/hide tiles */
.p-tile {
  transition:
    opacity 260ms ease,
    transform 260ms ease;
  will-change: opacity, transform;
}

/* Hidden state */
.p-tile.is-hidden {
  opacity: 0;
  transform: scale(0.98);
  pointer-events: none;
}

/* Collapse space in grid nicely */
.p-tile.is-collapsed {
  display: none;
}

/* Left line */
.projects-filter::before,
.projects-filter::after {
  content: "";
  flex: 1;
  height: 0px;

  /* subtle patterned line */
  border: 5px solid rgba(189, 243, 25, 0.822);
  border-image-source: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 1px,
    rgba(189, 243, 25, 0.822) 1px,
    rgba(0, 0, 0, 0.2) 3px
  );
  border-image-slice: 5;
  border-image-width: 1;
  border-image-outset: 0;
  border-image-repeat: stretch;

  margin: 0 10px;
}

/*Modal Card*/
/* modal wrapper */
.p-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: none; /* stays hidden by default */
  place-items: center; /* only works when display becomes grid */
}

/* open state */
.p-modal.is-open {
  display: grid;
  pointer-events: auto;
}
.p-modal[aria-hidden="true"] {
  pointer-events: none;
}

/* backdrop */
.p-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 16, 18, 0.72);
  backdrop-filter: blur(10px);
}

/* modal card */
.p-modal-card {
  position: relative;
  width: min(1000px, calc(100vw - 40px));
  max-height: calc(100vh - 60px);
  overflow: hidden;

  background: #ffffff;
  color: #fff;
  border: 1px solid rgba(209, 255, 69, 0.25);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6);

  display: grid;
  grid-template-columns: 1.2fr 1fr;

  transform: scale(0.96);
  opacity: 0;
  transition: 0.28s ease;
  z-index: 1;
}
.p-modal.is-open .p-modal-card {
  opacity: 1;
  transform: scale(1);
}

/* image side */
.p-modal-media {
  position: relative;
  min-height: 420px;
}

.p-modal-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.05) contrast(1.02);
}

.p-modal-strip {
  position: absolute;
  left: 16px;
  top: 16px;
  background: #52b848;
  color: #0a1012;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 1px;
  padding: 10px 12px;
}

/* content side */
.p-modal-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 26px 60px;
  overflow: auto;
  color: #000;
  gap: 5px;
}

.p-modal-kicker {
  opacity: 0.7;
  letter-spacing: 2px;
  font-size: 14px;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.p-modal-sub {
  opacity: 0.85;
  margin-top: 10px;
}
.p-modal-meta {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: grid;
  gap: 8px;
  font-size: 14px;
  opacity: 0.92;
}
.p-modal-desc {
  opacity: 0.85;
  line-height: 1.6;
  margin-top: 16px;
}

/* close button */
.p-modal-close {
  position: absolute;
  right: 14px;
  top: 12px;
  width: 42px;
  height: 42px;
  border: 0;
  cursor: pointer;
  background: rgba(216, 213, 213, 0.486);
  color: #000000;
  font-size: 18px;
  z-index: 60;
}

/* prevent page scroll when modal open */
body.modal-open {
  overflow: hidden;
}

/*Modal Nav*/
.p-modal-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border: none;
  cursor: pointer;
  margin: 0 26px 0 0;

  background: rgba(209, 255, 69, 0.95);
  color: #0a1012;
  font-size: 22px;
  font-weight: 900;

  display: flex;
  align-items: center;
  justify-content: center;

  transition: 0.2s ease;
  z-index: 50;
}

.p-modal-nav:hover {
  background: #52b848;
  transform: translateY(-50%) scale(1.05);
}

.p-modal-nav.prev {
  left: -26px;
  margin-left: 26px;
}
.p-modal-nav.next {
  right: -26px;
}
/* keep the image layer below nav buttons */
.p-modal-media,
.p-modal-media img {
  position: relative;
  z-index: 1;
  transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}
.p-modal-media img:hover {
  transform: scale(1.05);
}