:root {
  --cube-size: 146px; /* 66% of previous 220px size. */
  --cube-gap: 3.25rem;
  --cube-depth: 900px; /* Perspective depth keeps faces readable while rotating. */
  --cube-border: #d9d3c8;
  --cube-face: #2f4b70;
  --cube-face-quiet: #03516c;
  --cube-text: #ffffff;
  --cube-front-text: #1c2f45;
  --cube-front-overlay: rgba(255, 255, 255, 0.25);
  --cube-front-overlay-hover: rgba(255, 255, 255, 0.15);
  --cube-transition: 120ms;
}

.hero-cubes {
  margin: 32px 0 56px;
}

.hero-cubes h1 {
  margin: 0 0 8px;
}

.hero-cubes .lede {
  margin: 0 0 48px;
}

.cube-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 3rem;
  margin-top: 48px;
}

.cube-wrapper {
  position: relative;
  min-height: var(--cube-size);
}

.cube-fallback {
  border: 1px solid var(--cube-border);
  background: #ffffff;
  color: #1f1f1b;
  border-radius: 10px;
  padding: 1rem;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 0.35rem;
}

.fallback-link {
  color: var(--cube-face);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.fallback-link:hover,
.fallback-link:focus-visible {
  text-decoration: underline;
  outline: none;
}

.fallback-note {
  margin: 0;
  font-size: 0.9rem;
  color: #4f4f4b;
}

/* Plain-language caption shown under each cube in the JS view; non-JS uses .fallback-note.
   margin-top clears the cube's 3D faces, which overflow the cube box while rotating.
   pointer-events:none so the caption never intercepts a drag aimed at those overflowing faces. */
.cube-caption {
  display: none;
  margin: 3.5rem auto 0;
  max-width: 220px;
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.3;
  color: #4f4f4b;
  pointer-events: none;
}

body.js-enabled .cube-caption { display: block; }

/* 3D cube container with perspective so faces appear dimensional. The depth keeps faces readable while allowing rotation without distortion. */
.cube-shell {
  width: var(--cube-size);
  height: var(--cube-size);
  margin: 0 auto;
  perspective: var(--cube-depth);
  display: none; /* Hidden until JS toggles .js-enabled. */
}

.cube {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: none; /* Driven frame-by-frame; CSS transition only adds lag. */
  cursor: grab;
  touch-action: none;
  will-change: transform; /* Promotes cube to its own GPU compositing layer. */
  user-select: none;
}

.cube:active { cursor: grabbing; }

/* During drag and momentum, faces must not fire hover or intercept pointer events. */
.cube.dragging .face { pointer-events: none; }

.face {
  position: absolute;
  width: var(--cube-size);
  height: var(--cube-size);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--cube-text);
  background: var(--cube-face-quiet);
  border: 1px solid var(--cube-border);
  border-radius: 8px;
  backface-visibility: hidden;
  text-decoration: none;
  line-height: 1.2;
  padding: 0.75rem;
  transition: background var(--cube-transition) ease, color var(--cube-transition) ease;
  -webkit-touch-callout: none; /* Suppresses iOS Safari long-press link preview sheet. */
  user-select: none;
}

.face-empty {
  pointer-events: none;
  background: transparent;
  color: transparent;
  cursor: default;
}

@media (hover: hover) {
  .face:hover,
  .face:focus-visible {
    background: var(--cube-face);
    outline: none;
  }
}

.face:focus-visible {
  background: var(--cube-face);
  outline: none;
}

.face-front {
  color: transparent;
  background-color: #ffffff;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

/* Logo-to-text reveal only on real hover devices — prevents sticky image-flash on tap. */
@media (hover: hover) {
  .face-front:hover,
  .face-front:focus-visible {
    background-image: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9));
    color: var(--cube-front-text);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  }
}

.face-front:focus-visible {
  background-image: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9));
  color: var(--cube-front-text);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.face-front  { transform: translateZ(calc(var(--cube-size) / 2)); }
.face-back   { transform: rotateY(180deg) translateZ(calc(var(--cube-size) / 2)); }
.face-right  { transform: rotateY(90deg) translateZ(calc(var(--cube-size) / 2)); }
.face-left   { transform: rotateY(-90deg) translateZ(calc(var(--cube-size) / 2)); }
.face-top    { transform: rotateX(90deg) translateZ(calc(var(--cube-size) / 2)); }
.face-bottom { transform: rotateX(-90deg) translateZ(calc(var(--cube-size) / 2)); }

/* Logo-backed front faces with a light overlay so text stays readable. */
.cube-wrapper:nth-child(1) .face-front { background-image: url("../files/Logos/Global-Reslience-Council.png"); }
.cube-wrapper:nth-child(2) .face-front { background-image: url("../files/Logos/Democrat.jpg"); }
.cube-wrapper:nth-child(3) .face-front { background-image: url("../files/Logos/Katoikos.png"); }
.cube-wrapper:nth-child(4) .face-front { background-image: url("../files/Logos/PRG.png"); }
.cube-wrapper:nth-child(5) .face-front { background-image: url("../files/Hexalogue.png"); }
.cube-wrapper:nth-child(6) .face-front { background-image: url("../files/Logos/GSPNLogo.jpg"); }
.cube-wrapper:nth-child(7) .face-front { background-image: url("../files/Logos/FOGGS-Open-Consultation-Mondays.png"); }
.cube-wrapper:nth-child(8) .face-front { background-image: url("../files/Logos/ProjectCASA.jpg"); }
.cube-wrapper:nth-child(9) .face-front { background-image: url("../files/Logos/COVIDEA.png"); }

/* Show 3D cubes only when JS marks the page as enhanced. */
body.js-enabled .cube-shell { display: block; }
body.js-enabled .cube-fallback { display: none; }

/* Responsive tweaks */
@media (max-width: 600px) {
  :root { --cube-size: 130px; --cube-gap: 2rem; }
}