/* Variant (grid3.html): Work as three columns of square close-up teasers. Loads after styles.css. */
.grid.g3 { grid-template-columns: repeat(3, 1fr); gap: 40px 18px; }
.g3 .card-vis { aspect-ratio: 1; }
.g3 .card-poster { object-fit: cover; }
.g3 .card-meta { grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; padding: 0 0 14px; }
.g3 .card-meta .row-logo { width: 36px; height: 36px; border-radius: 8px; }
.g3 .card-meta h3 { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; min-width: 0; }
.g3 .card-meta .yr { font-size: 14px; font-weight: 400; color: var(--muted); opacity: .6; font-variant-numeric: tabular-nums; white-space: nowrap; }
.g3 .card-meta .row-text p { font-size: 14px; }
.g3 .card-link { margin: 0; grid-column: auto; align-self: center; width: 34px; height: 34px; padding: 0; border-radius: 50%;
  display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 10%, transparent); transition: background .25s; }
.g3 .card-link:hover { opacity: 1; background: color-mix(in srgb, var(--c) 17%, transparent); }
.g3 .card:hover .card-link .arr { transform: none; } /* styles.css nudges the old arrow span; this one moves inside */

/* Subber: the claim widget tilted in perspective, like a product shot on a flat lavender ground.
   Its contents render at 2x and are scaled down inside the tilt, so text and edges stay crisp. */
.g3 .tilt-card { background: #E6E0F8; }
.g3 .tilt {
  position: absolute; left: 50%; top: 50%; width: 64%; aspect-ratio: 420 / 580;
  transform: translate(-50%, -50%) perspective(1400px) rotateX(12deg) rotateY(-18deg) rotateZ(3deg);
  border-radius: 18px; overflow: hidden;
  outline: 1px solid transparent; /* smooths the transformed edge */
  backface-visibility: hidden;
  box-shadow: -26px 34px 40px -22px rgba(40, 20, 80, .55), -6px 8px 14px -6px rgba(40, 20, 80, .25);
  transition: transform .9s var(--ease-out);
}
.g3 .tilt > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; transform: none; }
.g3 .tilt > iframe { position: absolute; left: 0; top: 0; right: auto; bottom: auto; width: 200%; height: 200%; transform: scale(.5); transform-origin: 0 0; border: 0; }
.g3 a.tilt-card:hover { transform: none; }
.g3 a.tilt-card:hover .tilt { transform: translate(-50%, -50%) perspective(1400px) rotateX(7deg) rotateY(-10deg) rotateZ(1.5deg); }

@media (max-width: 960px) { .grid.g3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .grid.g3 { grid-template-columns: 1fr; gap: 32px; } }

/* No background feed on this variant, so the soft page-colour wash behind the intro text isn't needed
   (it also showed as a blob while the theme cross-fades). */
.intro-text::before { display: none; }

/* Subber's card sits above the page grain (body::after, z-index 100) so its lavender stays flat */
.g3 .tilt-card { z-index: 101; }


/* One width for everything: header, intro and Work all sit on the 1180px grid used by the case study home.html pages */
.header { padding-left: max(32px, 50vw - 590px); padding-right: max(32px, 50vw - 590px); }
.main { margin-left: max(32px, 50vw - 590px); }
.g3-work { width: min(1180px, 100vw - 64px); }
.g3-work .grid.g3 { gap: 16px; }

/* A project row: header (logo, name, years, role, link on the far right) above three teasers */
.prow + .prow, .prow + .trio, .trio + .prow { margin-top: 64px; }
.prow-h { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 12px; padding-bottom: 14px; }
.prow-h .row-logo { width: 36px; height: 36px; border-radius: 8px; }
.prow-h h3 { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.prow-h h3 a { text-decoration: none; }
.prow-h .yr { font-size: 14px; font-weight: 400; color: var(--muted); opacity: .6; font-variant-numeric: tabular-nums; }
.prow-h .row-text p { font-size: 14px; }
/* "View case study": a pill tinted with the company color, with an up-right arrow whose head is a sharp corner.
   On hover the arrow leaves through the corner and a fresh one slides in behind it. */
.prow-link { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 15px; border-radius: 99px;
  font-size: 14px; font-weight: 500; color: var(--c); text-decoration: none; white-space: nowrap;
  background: color-mix(in srgb, var(--c) 10%, transparent); transition: background .25s; }
.prow-link:hover { background: color-mix(in srgb, var(--c) 17%, transparent); }
.arr { position: relative; display: inline-block; width: 14px; height: 14px; overflow: hidden; flex: none; }
/* A soft in-out curve over .6s, each arrow on its own layer so the thin stroke glides instead of snapping
   pixel to pixel; the fresh arrow starts a beat after the old one leaves. */
.arr svg { position: absolute; inset: 0; width: 100%; height: 100%; will-change: transform; backface-visibility: hidden;
  transform: translate3d(0, 0, 0); transition: transform .6s cubic-bezier(.65, 0, .35, 1); }
.arr svg + svg { transform: translate3d(-110%, 110%, 0); }
.prow:hover .arr svg:first-child, .card:hover .arr svg:first-child { transform: translate3d(110%, -110%, 0); }
.prow:hover .arr svg + svg, .card:hover .arr svg + svg { transform: translate3d(0, 0, 0); transition-delay: .08s; }
.trio .card-meta { padding-bottom: 14px; }

/* Battuta: the same loafer in tan and black; the black one slowly fades in, holds, and fades back out */
.bt-black { opacity: 0; animation: bt-swap 14s ease-in-out infinite; }
@keyframes bt-swap { 0%, 32% { opacity: 0; } 50%, 82% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .bt-black { animation: none; } }

/* Freelance: a vivid mesh-gradient tile. The colors drift slowly under a glossy sheen and hairline edge,
   with a small four-point sparkle in the middle so it reads as a mark, not a swatch. */
.row-logo.grad { display: block; position: relative; overflow: hidden; box-shadow: var(--shadow);
  background:
    radial-gradient(70% 70% at 18% 18%, #ff3d6e 0%, rgba(255, 61, 110, 0) 72%),
    radial-gradient(65% 65% at 85% 15%, #ffa31a 0%, rgba(255, 163, 26, 0) 72%),
    radial-gradient(70% 70% at 85% 85%, #1f6bff 0%, rgba(31, 107, 255, 0) 72%),
    radial-gradient(65% 65% at 15% 85%, #10d39c 0%, rgba(16, 211, 156, 0) 72%),
    #7a2cff;
  background-size: 130% 130%; animation: fl-drift 14s ease-in-out infinite alternate; }
.row-logo.grad::before { content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(160deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, 0) 46%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), inset 0 -6px 10px -6px rgba(20, 0, 60, .45); }
.row-logo.grad::after { content: ''; position: absolute; left: 50%; top: 50%; width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; background: #fff;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  opacity: .95; }
@keyframes fl-drift { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }
@media (prefers-reduced-motion: reduce) { .row-logo.grad { animation: none; } }

@media (max-width: 900px) {
  .header { padding-left: 16px; padding-right: 16px; }
  .main { margin-left: 16px; width: calc(100vw - 32px); }
  .g3-work { width: calc(100vw - 32px); }
  .prow + .prow, .prow + .trio, .trio + .prow { margin-top: 48px; }
}
@media (max-width: 600px) { .prow-h { grid-template-columns: 36px 1fr; } .prow-link { grid-column: 2; justify-self: start; } }

/* Freelance: a slow marquee of teasers, moved by marquee.js. Each copy of the track is the same width (items carry their own
   right margin), so it loops by exactly one copy. Hover pauses it; the edge arrows speed it up either way. Past the grid's
   edges the cards curve toward you like the inside of a drum (marquee.js sets each card's transform), so .mq-free gets
   extra room above and below for the cards that grow, and a soft, eased 140px fade at the window edges hides where they leave. */
.mq-wrap { position: relative; }
.mq-free { margin: -90px calc(-1 * max(32px, 50vw - 590px)); padding: 90px 0; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, rgba(0,0,0,.06) 20px, rgba(0,0,0,.24) 45px, rgba(0,0,0,.5) 70px, rgba(0,0,0,.76) 95px, rgba(0,0,0,.94) 120px, #000 140px, #000 calc(100% - 140px), rgba(0,0,0,.94) calc(100% - 120px), rgba(0,0,0,.76) calc(100% - 95px), rgba(0,0,0,.5) calc(100% - 70px), rgba(0,0,0,.24) calc(100% - 45px), rgba(0,0,0,.06) calc(100% - 20px), transparent);
  mask-image: linear-gradient(90deg, transparent, rgba(0,0,0,.06) 20px, rgba(0,0,0,.24) 45px, rgba(0,0,0,.5) 70px, rgba(0,0,0,.76) 95px, rgba(0,0,0,.94) 120px, #000 140px, #000 calc(100% - 140px), rgba(0,0,0,.94) calc(100% - 120px), rgba(0,0,0,.76) calc(100% - 95px), rgba(0,0,0,.5) calc(100% - 70px), rgba(0,0,0,.24) calc(100% - 45px), rgba(0,0,0,.06) calc(100% - 20px), transparent); }
.mq-track { display: flex; width: max-content; padding-left: max(32px, 50vw - 590px); will-change: transform; }
.mq-item { width: calc((min(1180px, 100vw - 64px) - 32px) / 3); margin-right: 16px; flex: none; position: relative; will-change: transform; pointer-events: auto; }
.mq-vis { aspect-ratio: 1; }
.mq-live { position: absolute; inset: 0; }
.mq-arrow { position: absolute; z-index: 2; top: 50%; width: 44px; height: 44px; margin-top: -22px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 50%; color: var(--text); cursor: pointer;
  background: color-mix(in srgb, var(--bg) 55%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 12%, transparent);
  transition: transform .4s var(--ease-out), background .2s; }
.mq-arrow svg { width: 18px; height: 18px; }
.mq-arrow.prev { left: -22px; }
.mq-arrow.next { right: -22px; }
.mq-arrow:hover { transform: scale(1.08); background: color-mix(in srgb, var(--bg) 75%, transparent); }
.mq-arrow:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
@media (max-width: 900px) { .mq-free { margin: 0 -16px; padding: 0; -webkit-mask-image: none; mask-image: none; } .mq-track { padding-left: 16px; } .mq-item { width: 72vw; } .mq-arrow { display: none; } }

/* Intro links (#goodmake …) land with some room above the project's header */
.g3-work [id] { scroll-margin-top: 72px; }

/* Footer spans the same width as Work, like the case study footers */
.footer { width: min(1180px, 100vw - 64px); }
@media (max-width: 900px) { .footer { width: calc(100vw - 32px); } }