:root {
  --bg: #d1d1d1;          /* the original reloadmedia.com grey */
  --hover: #c8c8c8;
  --ink: #111;
  --muted: #4a4a4a;
  --grid: #a3a3a3;        /* grey grid lines */
  --hero: #0a0606;
  --red: #7a141a;
  --font: Futura, "Jost", "Century Gothic", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; border-radius: 0; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); line-height: 1.5; }
a { color: inherit; text-decoration: none; }

/* Hero: dark band with interactive stripes */
.hero {
  position: relative;
  height: clamp(320px, 52vh, 520px);
  margin-top: clamp(24px, 6vh, 64px);
  background: var(--hero);
  overflow: hidden;
  border-block: 1px solid #000;
}
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero__logo {
  position: absolute; left: 50%; top: 50%;
  width: 440px; height: 277px; max-width: 100%;
  translate: -50% -50%;
  pointer-events: none;
  /* screen blend drops the baked-in dark stripes, keeps logo + glow */
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent);
          mask-image: radial-gradient(closest-side, #000 55%, transparent);
  animation: fade 2.4s ease-out both;
}
.hero__logo img { width: 100%; height: 100%; object-fit: none; object-position: center; display: block; }
@keyframes fade { from { opacity: 0; } }

/* heartbeat on hover, same timing as the original reloadmedia.com logo */
.hero__hit { /* invisible circle over the (R), the logo box itself is much bigger */
  position: absolute; left: 50%; top: 50%; width: 130px; height: 130px;
  translate: -50% -62%; border-radius: 50%;
}
.hero:has(.hero__hit:hover) .hero__logo { animation: fade 2.4s ease-out both, heartbeat 1.1s linear infinite; }
@keyframes heartbeat {
  0%, 16%, 30%, 46%, 100% { scale: 1; }
  8%, 38% { scale: .9; }
}

main { max-width: 1080px; margin: 0 auto; padding: 0 16px; counter-reset: tile; }

.intro {
  font-size: clamp(15px, 1.6vw, 17px); font-weight: 400;
  text-align: center; max-width: 720px; margin: 32px auto 48px;
  text-wrap: balance;
}

/* Labels */
.eyebrow, .section-title, .tile__cta, .shot, .grid .tile::before {
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
}
.section-title { display: flex; justify-content: space-between; color: var(--muted); margin: 56px 0 0; padding: 0 0 10px; border-bottom: 1px solid var(--grid); }
.section-title::after { content: "06"; }

/* Tiles: square, separated by 1px grey grid lines */
.tile {
  position: relative; display: flex; flex-direction: column; gap: 6px; height: 100%;
  padding: 24px; background: var(--bg);
}
.tile::after { /* red marker on hover */
  content: ""; position: absolute; left: 0; top: 1px; height: 2px; width: 100%; background: var(--red);
  transform: scaleX(0); transform-origin: left; transition: transform .3s ease;
}
a.tile:hover::after, a.tile:focus-visible::after { transform: scaleX(1); }
a.tile:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }

.grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  background: var(--grid); border: 1px solid var(--grid); border-top: 0;
}
.grid .tile { counter-increment: tile; padding-top: 44px; }
.grid .tile::before { content: counter(tile, decimal-leading-zero); position: absolute; top: 16px; left: 24px; color: var(--muted); }

.tile--portfolio {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 24px;
  padding: 32px clamp(24px, 4vw, 40px);
  background: var(--hero); color: #eee; border: 1px solid #000;
  background-image: repeating-linear-gradient(45deg, transparent 0 7px, rgba(90,14,20,.35) 7px 8px);
}
.tile--portfolio .eyebrow { grid-column: 1; color: #a89c9c; }
.tile--portfolio .tile__title { grid-column: 1; font-size: clamp(20px, 2.6vw, 28px); font-weight: 400; letter-spacing: .01em; }
.tile--portfolio .arrow { grid-column: 2; grid-row: 1 / span 2; font-size: 28px; transition: transform .25s ease; }
.tile--portfolio:hover .arrow { transform: translateX(6px); }

.icon {
  width: 56px; height: 56px; margin-bottom: 14px;
  display: grid; place-items: center; color: #fff; font-size: 24px; font-weight: 500;
  background: linear-gradient(145deg, var(--c1), var(--c2));
}
.icon svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.shot {
  aspect-ratio: 16 / 10; margin-bottom: 14px; border: 1px solid #000;
  display: grid; place-items: center; color: #a89c9c;
  background: var(--hero) repeating-linear-gradient(45deg, transparent 0 7px, rgba(90,14,20,.4) 7px 8px);
}
.tile__name { font-size: 18px; font-weight: 500; }
.tile__desc { color: var(--muted); font-size: 15px; }
.tile__cta { margin-top: auto; padding-top: 12px; color: var(--red); }
.tile__cta--muted { color: #5f5f5f; }

.tile--more { align-items: center; justify-content: center; min-height: 160px; }
.tile--more .tile__name { color: var(--muted); font-weight: 400; }

/* Metal tilt: on hover a tile lifts like a brushed metal sheet and tilts toward the
   pointer; tilt.js sets --rx/--ry (tilt) and --mx/--my (where the light hits). */
/* --sheen (0..1) fades the whole metal surface in and out together with the lift.
   Gradients can't transition, but a registered number property can. */
@property --sheen { syntax: "<number>"; inherits: false; initial-value: 0; }

.tile {
  --sheen: 0;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  transform-style: preserve-3d;
  /* dropping back: slow, soft landing */
  transition: transform 1.3s cubic-bezier(.35, 0, .25, 1), box-shadow 1.2s ease, --sheen 1.2s ease;
  background:
    /* broad light falling on the sheet, centred on the pointer */
    radial-gradient(farthest-corner at var(--mx, 50%) var(--my, 30%),
      rgba(255,255,255, calc(.42 * var(--sheen))) 0%,
      rgba(255,255,255, calc(.16 * var(--sheen))) 45%,
      rgba(255,255,255, 0) 100%),
    /* brushed grain */
    repeating-linear-gradient(90deg, rgba(255,255,255, calc(.06 * var(--sheen))) 0 1px, rgba(0,0,0, calc(.035 * var(--sheen))) 1px 3px),
    /* metal tone */
    linear-gradient(160deg, rgba(255,255,255, calc(.22 * var(--sheen))), rgba(0,0,0, calc(.09 * var(--sheen))) 60%, rgba(255,255,255, calc(.08 * var(--sheen)))),
    var(--bg);
}
.tile:hover, .tile:focus-visible {
  --sheen: 1;
  z-index: 2;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(28px);
  transition-duration: .18s, .4s, .4s;
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 28px 40px -22px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.12);
}
.tile:active { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(8px); transition-duration: .08s; }

/* contents float slightly above the sheet for depth */
.icon, .shot, .tile--portfolio .arrow { transition: transform 1.3s cubic-bezier(.35, 0, .25, 1); }
.tile:hover .icon, .tile:hover .shot { transform: translateZ(22px); transition-duration: .25s; }

.tile--portfolio {
  background:
    radial-gradient(farthest-corner at var(--mx, 50%) var(--my, 50%),
      rgba(255,255,255, calc(.13 * var(--sheen))) 0%,
      rgba(255,255,255, calc(.04 * var(--sheen))) 40%,
      rgba(255,255,255, 0) 80%),
    repeating-linear-gradient(45deg, transparent 0 7px, rgba(90,14,20,.35) 7px 8px),
    var(--hero);
}
.tile--portfolio:hover, .tile--portfolio:focus-visible {
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 28px 40px -22px rgba(0,0,0,.7);
}
.tile--portfolio:hover .arrow { transform: translateZ(22px) translateX(6px); }

footer { text-align: center; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 64px 16px 40px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}