.RpljUIbL_QRIdnZShE9X {
  display: grid;
  grid-template-columns: minmax(260px, 0.85fr) 1.6fr;
  gap: 48px;
  align-items: stretch;
  width: 100%;
}

/* Left column — heading pinned to the top, list pinned to the bottom */
.f8dRYmUE7SLeqWyTKjPM {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  min-height: 0;
}

.rpNRQ6sH08teo7k6Fy9x {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.qtzIjNdDtRoL5pHujjRB {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--fow-font-mono);
  font-size: 0.8125rem;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fow-ink-soft);
}

.xpfiGtDeM4aexoj41TBg {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--fow-accent);
}

.GmJQ4o2Uw3xr3agAwRYQ {
  margin: 0;
  font-family: var(--fow-font-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 1.9rem + 2.6vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--fow-ink);
}

.bOaroUJNqqJB57tbrRYn {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

/* Right column — featured project card */
.sseKmTC4kBxCwc2HTqlQ {
  display: flex;
  min-width: 0;
}

.C5tCOndpuwZ7Y1ZgaBr8 {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 65 / 66;
  overflow: hidden;
  border-radius: var(--fow-radius);
  background: var(--fow-surface-alt);
  text-decoration: none;
  isolation: isolate;
}

.OEMcrRK5HKx5XyDnV7qV {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

/* Default blue "grid cloth" background when no Featured Image is supplied */
.OEMcrRK5HKx5XyDnV7qV[data-grid="true"] {
  background:
    repeating-linear-gradient(0deg, rgba(140, 190, 255, 0.1) 0 1px, transparent 1px 7%),
    repeating-linear-gradient(90deg, rgba(140, 190, 255, 0.1) 0 1px, transparent 1px 7%),
    radial-gradient(120% 80% at 18% 8%, #2a6ff0 0%, transparent 55%),
    radial-gradient(120% 90% at 85% 105%, #0b3aa6 0%, transparent 55%),
    linear-gradient(160deg, #0c2f8c 0%, #08205f 55%, #040f2c 100%);
}

.C5tCOndpuwZ7Y1ZgaBr8:hover .OEMcrRK5HKx5XyDnV7qV {
  transform: scale(1.03);
}

.WXggZumenIKy0VujeGH3 {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(5, 11, 13, 0.35) 0%,
    rgba(5, 11, 13, 0) 32%,
    rgba(5, 11, 13, 0) 68%,
    rgba(5, 11, 13, 0.45) 100%
  );
  pointer-events: none;
}

.dOc9k5ePR4x4ExLRJdMg {
  position: absolute;
  z-index: 3;
  top: 28px;
  left: 28px;
  right: 28px;
  font-family: var(--fow-font-body);
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.3;
  color: var(--fow-on-media);
  text-shadow: 0 1px 12px rgba(5, 11, 13, 0.35);
}

.F9_DBw6v9tl9qK4SwbbZ {
  position: absolute;
  z-index: 3;
  bottom: 28px;
  left: 28px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fow-font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1;
  color: var(--fow-on-media);
  text-shadow: 0 1px 12px rgba(5, 11, 13, 0.35);
}

.Gw6cB5dbShmPvVADPFCu {
  width: 18px;
  height: 18px;
  transition: transform 0.25s ease;
}

.C5tCOndpuwZ7Y1ZgaBr8:hover .Gw6cB5dbShmPvVADPFCu {
  transform: translate(2px, -2px);
}

.C5tCOndpuwZ7Y1ZgaBr8:focus-visible {
  outline: 2px solid var(--fow-accent);
  outline-offset: 3px;
}

/* Responsive — stack the card under the list on tablet and below */
@media (max-width: 991px) {
  .RpljUIbL_QRIdnZShE9X {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .f8dRYmUE7SLeqWyTKjPM {
    gap: 32px;
  }
  .C5tCOndpuwZ7Y1ZgaBr8 {
    aspect-ratio: 16 / 11;
  }
}

@media (prefers-reduced-motion: reduce) {
  .OEMcrRK5HKx5XyDnV7qV,
  .Gw6cB5dbShmPvVADPFCu {
    transition: none;
  }
  .C5tCOndpuwZ7Y1ZgaBr8:hover .OEMcrRK5HKx5XyDnV7qV {
    transform: none;
  }
}

/* Centered card image — sits above the background and scrim, below the
   title and CTA, contained within padding that clears both. */
.dDpR58iB5N59u5Xh22l7 {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 72px 28px;
  pointer-events: none;
}

.YHgIxghCmhLHknREUuOF {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/*
 * Fetchly brand tokens for the Our Work library.
 * Each token first reads the real Webflow site variable (verified against the
 * Fetchly site's Primitives / Color Schemes / Typography collections, which
 * resolve inside the component Shadow DOM) and falls back to the canonical
 * value from the Fetchly-GUIDES brand book. Component props can override any
 * of these via inline custom properties.
 */
.fow-root {
  --fow-bg: transparent;
  --fow-ink: var(--_primitives---colors--neutral-darkest, #050b0d);
  --fow-ink-soft: var(--_primitives---colors--neutral-dark, #505455);
  --fow-surface: var(--color-scheme-1--surface-1, #fffefa);
  --fow-surface-alt: var(--color-scheme-1--surface-2, #f6f5f1);
  --fow-line: var(--color-scheme-1--border, #e5e4df);
  --fow-accent: var(--_primitives---colors--malibu, #69e5fb);
  --fow-accent-ink: var(--_primitives---colors--malibu-darkest, #1f444b);
  --fow-on-media: #ffffff;
  --fow-radius: 24px;
  --fow-font-display: var(--_typography---font-styles--neo-heading, "Marjorie", Georgia, serif);
  --fow-font-body: var(--_typography---font-styles--neo-body, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  --fow-font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  position: relative;
  width: 100%;
  box-sizing: border-box;
  background: var(--fow-bg);
  color: var(--fow-ink);
  font-family: var(--fow-font-body);
}

.fow-root *,
.fow-root *::before,
.fow-root *::after {
  box-sizing: border-box;
}

.fow-root[data-theme="dark"] {
  --fow-ink: var(--_primitives---colors--neutral-lightest, #fffefa);
  --fow-ink-soft: #9ea6ab;
  --fow-surface: var(--_primitives---colors--neutral-darker, #1e2325);
  --fow-surface-alt: #2b2f31;
  --fow-line: var(--_primitives---opacity--white-15, rgba(255, 255, 255, 0.15));
  --fow-accent-ink: var(--_primitives---colors--malibu, #69e5fb);
}

