/* ════════════════════════════════════════════════════════════
   HOMEPAGE OVERRIDES
   - Hide tags below the Works slider (only the brand name remains)
   - Works slider: full opacity on hover (no dimmed state)
   - Need More (Directory): taller tiles
   - IN-LAB cards: no borders
   - IN-LAB: remove pulsing red dot in top-right corner
   - IN-LAB: animated radial gradient background (@property)
   - RND-TAG: enlarged + per-segment hover wipe + solid divider
   ════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────
   SECTION STANDARD — unified padding + no inter-section borders
   Rule: every main section uses 6.5rem 0 (4rem 0 mobile).
   Section separation comes from different solid grey tones only.
   ──────────────────────────────────────────────────────────── */
.s-works,
.s-services,
.s-brands,
.s-about,
.s-culture,
.s-inlab,
.s-inlab-portal,
.s-directory,
.s-luckpitch,
.s-luckpitch--cta,
.s-indna {
  padding: 6.5rem 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
}
@media (max-width: 768px) {
  .s-works,
  .s-services,
  .s-brands,
  .s-about,
  .s-culture,
  .s-inlab,
  .s-inlab-portal,
  .s-directory,
  .s-luckpitch,
  .s-luckpitch--cta,
  .s-indna {
    padding: 4rem 0 !important;
  }
}

.s-works .wi-tags,
.s-works .wi-tags span,
.work-slide .wi-tags,
.work-slide .wi-tags span { display: none !important; }

/* full opacity on hover for dimmed slides */
.work-slide:hover,
.work-slide:not(.is-active):hover { opacity: 1 !important; }

/* Keep Going — tile height aligned with other home sections so the
   block doesn't visually overflow taller than its neighbours. */
.s-directory .dir-tile { height: 360px !important; }
@media (max-width: 768px) {
  .s-directory .dir-tile { height: 300px !important; }
}
@media (max-width: 480px) {
  .s-directory .dir-tile { height: 260px !important; }
}

/* Keep Going — header-to-content gap aligned with site Section Standard */
.s-directory .dir-hd,
.s-directory .s-directory__head {
  margin-bottom: 3.5rem !important;
}
@media (max-width: 768px) {
  .s-directory .dir-hd,
  .s-directory .s-directory__head {
    margin-bottom: 2.5rem !important;
  }
}

/* ────────────────────────────────────────────────────────────
   MOBILE: KEEP GOING (Directory tiles) → simple list view.
   Hide background images, stack tiles vertically, show only
   the tag + name as a tight typographic list.
   ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .s-directory .dir-tiles {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    border-top: 1px solid rgba(255,255,255,.08);
  }
  .s-directory .dir-tile,
  .s-directory .dir-tile--w1,
  .s-directory .dir-tile--w2,
  .s-directory .dir-tile--w3 {
    height: auto !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
    background: transparent !important;
    filter: none !important;
    transform: none !important;
    box-shadow: none !important;
    border-bottom: 1px solid rgba(255,255,255,.08);
    padding: 1.1rem 0;
  }
  .s-directory .dir-tile:hover { transform: none !important; box-shadow: none !important; }
  .s-directory .dir-tile:hover ~ .dir-tile { transform: none !important; }
  /* Hide the photo and the dark shade overlay */
  .s-directory .dir-tile__img,
  .s-directory .dir-tile__shade { display: none !important; }
  /* Pull the body out of absolute positioning */
  .s-directory .dir-tile__body {
    position: static !important;
    inset: auto !important;
    padding: 0 !important;
    gap: .35rem !important;
  }
  .s-directory .dir-tile__tag {
    font-size: .55rem !important;
    letter-spacing: .3em !important;
  }
  .s-directory .dir-tile__name {
    font-size: 1.6rem !important;
    line-height: 1 !important;
  }
}

/* ────────────────────────────────────────────────────────────
   MOBILE: FOOTER tweaks
   - Hide the small "about" paragraph below the Interdi logo
   - Add breathing room above the contact info (Say Hello)
   - Shrink Instagram / Behance cards, enlarge their names
   ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Hide about text on mobile (logo only) */
  .site-footer .footer-about .footer-about-text { display: none !important; }
  .site-footer .footer-about { padding-bottom: 1rem !important; }

  /* Loosen the divider above the Say Hello / contact info column */
  .site-footer .footer-main-col.footer-contact-col {
    margin-top: 1.25rem !important;
    padding-top: 1.5rem !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
  }

  /* Smaller IG / Behance buttons — height matches headline block */
  .site-footer .fcsb {
    width: 150px !important;
    height: auto !important;
    align-self: stretch !important;
    padding: .75rem .9rem !important;
  }
  .site-footer .fcsb__ico { font-size: 1rem !important; }
  .site-footer .fcsb__ext { font-size: .55rem !important; }
  .site-footer .fcsb__sub {
    font-size: .42rem !important;
    letter-spacing: .28em !important;
  }
  .site-footer .fcsb__name {
    font-size: 1.1rem !important;
    letter-spacing: .03em !important;
  }
}

/* Footer spacing rules moved to css/style.css so all pages share the
   same footer layout (previously only loaded on index, causing in-dna
   and other pages to render the footer with mismatched margins). */

/* IN-LAB portal cards: remove all borders */
.s-inlab-portal .silp-card,
.s-inlab-portal .silp-card:hover {
  border: 0 !important;
  border-color: transparent !important;
}

/* IN-LAB: kill the pulsing red dot in the top-right corner */
.s-inlab-portal::after {
  content: none !important;
  display: none !important;
  animation: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* IN-LAB Portal: static solid background (all animated/decorative
   backgrounds removed — radial gradient, shader canvas, cipher canvas). */
.s-inlab-portal {
  background: #020202 !important;
}

/* ════════════════════════════════════════════════════════════
   IN-LAB CARDS — content area background = dark grey
   ════════════════════════════════════════════════════════════ */
.s-inlab-portal .silp-card__content {
  background: #0A0A0A !important;
}

/* ════════════════════════════════════════════════════════════
   RND-TAG (homepage random shortcut button)
   ════════════════════════════════════════════════════════════ */

/* 20% larger button */
.rnd-tag {
  --rnd-h: 106px !important;
  width: 552px !important;
  max-width: 100% !important;
}
.rnd-tag__meta {
  width: 115px !important;
  padding: 0 1.2rem !important;
  border-right: 1px solid var(--line) !important;
  background: var(--red) !important;
}
/* Meta default text colors on red */
.rnd-tag .rnd-tag__code   { color: var(--white) !important; }
.rnd-tag .rnd-tag__meta-k { color: rgba(255,255,255,.85) !important; }
/* Sizes reduced by ~15% for visual balance */
.rnd-tag__code     { font-size: 2.04rem !important; }
.rnd-tag__meta-k   { font-size: .56rem !important; }
.rnd-tag__hint     { font-size: .56rem !important; }
/* Body label matches DEST code size for typographic consistency */
.rnd-tag__label    { font-size: 2.04rem !important; line-height: 1 !important; }
.rnd-tag__body     { padding: 0 1.5rem !important; }
.rnd-tag__go       {
  padding: 0 1.7rem !important;
  font-size: .74rem !important;
}
.rnd-tag__go i     { font-size: .94rem !important; }

/* Mobile */
@media (max-width: 560px) {
  .rnd-tag { width: 100% !important; --rnd-h: 92px !important; }
  .rnd-tag__meta { width: 94px !important; padding: 0 .95rem !important; }
  .rnd-tag__code { font-size: 1.92rem !important; }
  .rnd-tag__body { padding: 0 1.05rem !important; }
  .rnd-tag__label { font-size: 1.44rem !important; }
  .rnd-tag__go { padding: 0 1.05rem !important; font-size: .66rem !important; }
  .rnd-tag__go i { font-size: .84rem !important; }
}

/* Hide the dashed separator (replaced by solid divider on meta) */
.rnd-tag .rnd-tag__sep { display: none !important; }

/* Hover: keep border color stable (no color change on hover) */
.rnd-tag:hover .rnd-tag__meta {
  border-right-color: var(--line) !important;
}
.rnd-tag:hover .rnd-tag__go {
  border-left-color: var(--line) !important;
}
.rnd-tag,
.rnd-tag:hover {
  border-color: var(--line) !important;
}

/* Disable the global ::before wipe — per-segment fills are used */
.rnd-tag::before { display: none !important; }
.rnd-tag:hover::before { display: none !important; }

/* GO segment removed — body now spans the rest with new-window icon at right */
.rnd-tag__go { display: none !important; }
.rnd-tag .rnd-tag__body {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
}
.rnd-tag__body-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  flex: 1 1 auto;
}
.rnd-tag__newwin {
  flex-shrink: 0;
  font-size: 1rem;
  color: rgba(255,255,255,.7);
  transition: transform .35s cubic-bezier(.22,1,.36,1), color .35s ease;
  margin-left: .5rem;
}
.rnd-tag:hover .rnd-tag__newwin {
  transform: translateX(6px);
  color: var(--white);
}

/* No glow behind the button — clean outline only */
.rnd-tag {
  box-shadow: none !important;
  animation: none !important;
  transition:
    background-color .25s ease,
    border-color .25s ease !important;
}
.rnd-tag:hover {
  box-shadow: none !important;
  animation: none !important;
}

/* Shimmer wrapper kept for layout but inactive (no animation) */
.rnd-tag-shimmer { display: none !important; }

/* Each segment becomes its own positioning context with its own wipe */
.rnd-tag__meta,
.rnd-tag__body,
.rnd-tag__go {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.rnd-tag__meta > *,
.rnd-tag__body > *,
.rnd-tag__go  > * {
  position: relative;
  z-index: 1;
}

/* ============================================================
   RND-TAG — outline button (matches Full Directory CTA styling)
   Idle:  transparent background, thin white border, no animation.
   Hover: only the DEST (left) segment fills with solid red.
          Body & GO stay transparent. Border color stays the same.
   ============================================================ */

/* Disable any halo, neon, or pseudo layers */
.rnd-tag::before,
.rnd-tag::after,
.rnd-tag:hover::before,
.rnd-tag:hover::after {
  content: none !important;
  display: none !important;
  background: none !important;
  animation: none !important;
  filter: none !important;
  opacity: 0 !important;
}

.rnd-tag {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  transition: background-color .25s ease, border-color .25s ease !important;
}
.rnd-tag:hover {
  border-color: rgba(255,255,255,.18) !important;
  background: transparent !important;
}

/* All inner segments transparent by default; relative for ::after fills */
.rnd-tag__meta,
.rnd-tag__body,
.rnd-tag__go {
  background: transparent !important;
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
}
.rnd-tag__meta > *,
.rnd-tag__body > *,
.rnd-tag__go  > * {
  position: relative;
  z-index: 1;
}

/* Animated fill layers per segment (idle: collapsed, hover: expanded) */
.rnd-tag__meta::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  background: var(--red) !important;
  transform: scaleX(0) !important;
  transform-origin: left center !important;
  transition: transform .55s cubic-bezier(.22,1,.36,1) !important;
  z-index: 0 !important;
  pointer-events: none !important;
  animation: none !important;
  opacity: 1 !important;
  filter: none !important;
}
.rnd-tag__body::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  background: #050505 !important;
  transform: scaleX(0) !important;
  transform-origin: left center !important;
  transition: transform .55s cubic-bezier(.22,1,.36,1) .05s !important;
  z-index: 0 !important;
  pointer-events: none !important;
  animation: none !important;
  opacity: 1 !important;
  filter: none !important;
}
.rnd-tag__go::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  background: #0C0C0C !important;
  transform: scaleX(0) !important;
  transform-origin: left center !important;
  transition: transform .55s cubic-bezier(.22,1,.36,1) .1s !important;
  z-index: 0 !important;
  pointer-events: none !important;
  animation: none !important;
  opacity: 1 !important;
  filter: none !important;
}

/* Hover: each segment fills in sequence (left -> right) */
.rnd-tag:hover .rnd-tag__meta::after,
.rnd-tag:hover .rnd-tag__body::after,
.rnd-tag:hover .rnd-tag__go::after {
  transform: scaleX(1) !important;
}

/* Keep base segment backgrounds transparent on hover (fill comes from ::after) */
.rnd-tag:hover .rnd-tag__meta,
.rnd-tag:hover .rnd-tag__body,
.rnd-tag:hover .rnd-tag__go {
  background: transparent !important;
}

/* Internal dividers — same color/opacity as the outer button border */
.rnd-tag__meta,
.rnd-tag:hover .rnd-tag__meta {
  border-right: 1px solid rgba(255,255,255,.18) !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
}
.rnd-tag__body {
  border-left: 0 !important;
  border-right: 0 !important;
}
.rnd-tag__go,
.rnd-tag:hover .rnd-tag__go {
  border-left: 1px solid rgba(255,255,255,.18) !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  border-right: 0 !important;
}

/* Idle text colors — softer for outline look */
.rnd-tag .rnd-tag__code   { color: var(--white) !important; }
.rnd-tag .rnd-tag__meta-k { color: rgba(255,255,255,.55) !important; }
.rnd-tag .rnd-tag__hint   { color: rgba(255,255,255,.55) !important; }
.rnd-tag .rnd-tag__label  { color: var(--white) !important; }
.rnd-tag .rnd-tag__go     { color: rgba(255,255,255,.85) !important; }

/* Hover text colors — DEST text turns full white on red fill */
.rnd-tag:hover .rnd-tag__code   { color: var(--white) !important; }
.rnd-tag:hover .rnd-tag__meta-k { color: rgba(255,255,255,.85) !important; }



/* Borders never change color — keep solid line color across all states. NO dashed. */
.rnd-tag,
.rnd-tag:hover,
.rnd-tag:focus,
.rnd-tag:active {
  border: 1px solid var(--line) !important;
  border-style: solid !important;
}
.rnd-tag__meta,
.rnd-tag:hover .rnd-tag__meta {
  border-right: 1px solid var(--line) !important;
  border-style: solid !important;
}
.rnd-tag__go,
.rnd-tag:hover .rnd-tag__go {
  border-left: 1px solid var(--line) !important;
  border-style: solid !important;
}
.rnd-tag__sep,
.rnd-tag .rnd-tag__sep { display: none !important; border: 0 !important; }

/* GO icon: completely static on hover */
.rnd-tag__go i,
.rnd-tag:hover .rnd-tag__go i {
  transform: none !important;
  transition: none !important;
}

/* Hover text colors */
.rnd-tag:hover .rnd-tag__code   { color: var(--white) !important; }
.rnd-tag:hover .rnd-tag__meta-k { color: rgba(255,255,255,.75) !important; }
.rnd-tag:hover .rnd-tag__hint   { color: rgba(255,255,255,.85) !important; }
.rnd-tag:hover .rnd-tag__label  { color: var(--white) !important; }
.rnd-tag:hover .rnd-tag__go     { color: var(--white) !important; }

/* ============================================================
   NEED MORE -- header polish (no structural change to tiles)
   - Title: bigger, no underline accent
   - No red bar on tile hover
   - Two-column header: left title, right lead + CTA
   - Tile body: gentle lift on hover
   - Tag: turns white on hover for contrast pop
   - Smoother bottom shade gradient
   ============================================================ */

/* Section padding -- match IN-LAB / Brands spacing standard */
.s-directory {
  padding: 6.5rem 0 !important;
}
/* Use the site-wide container padding so Keep Going aligns
   horizontally with all other home sections. */
.s-directory > .container {
  padding-left: var(--px) !important;
  padding-right: var(--px) !important;
}

/* Header-to-content gap matches Brands section (3.5rem) */
.s-directory .dir-hd--split {
  margin: 0 0 3.5rem 0 !important;
}

/* Equal width tiles, consistent gap, edge-to-edge inside container */
.s-directory .dir-tiles {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
}
@media (max-width: 768px) {
  .s-directory { padding: 4rem 0 !important; }
  .s-directory .dir-hd--split { margin-bottom: 2.5rem !important; }
  .s-directory .dir-tiles { gap: 0 !important; }
}

/* Two-column header layout — title left, CTA pinned far right & aligned with title baseline */
.s-directory .dir-hd--split {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 2rem !important;
  flex-wrap: nowrap !important;
}

.s-directory .dir-hd__left {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1 1 auto;
  min-width: 0;
}
/* Optical alignment: large SF title has negative top space due to line-height:.92
   so the visible eyebrow-to-title gap matches other sections (.s-luckpitch, .silp). */
.s-directory .dir-hd__left .dir-hd__eyebrow {
  margin-bottom: .55rem;
  line-height: 1;
}
.s-directory .dir-hd__left .dir-hd__title {
  margin-top: 0;
}

.s-directory .dir-hd__right {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: .9rem;
  flex: 0 0 auto;
  margin-left: auto;
}

/* Bigger NEED MORE title */
.s-directory .dir-hd__title {
  font-size: clamp(2.6rem, 5vw, 4.2rem) !important;
  letter-spacing: .005em !important;
  line-height: 1.05 !important;
}

/* Right side: lead text + CTA */
.s-directory .dir-hd__lead {
  font-family: var(--pp);
  font-size: .82rem;
  line-height: 1.45;
  color: rgba(255,255,255,.62);
  text-align: right;
  margin: 0;
}

.s-directory .dir-hd__cta {
  font-family: var(--pp);
  font-size: .58rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--white);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .75rem 1.4rem;
  border: 1px solid rgba(255,255,255,.18);
  background: transparent;
  transition: color .25s ease, border-color .25s ease, background .25s ease;
  white-space: nowrap;
}
.s-directory .dir-hd__cta:hover {
  color: #fff;
  border-color: var(--red);
  background: rgba(233,32,56,.08);
}
.s-directory .dir-hd__cta i {
  font-size: .6rem;
  transition: transform .25s ease;
}
.s-directory .dir-hd__cta:hover i { transform: translateX(4px); }

/* Mobile: stack right block under left */
@media (max-width: 720px) {
  .s-directory .dir-hd--split {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .s-directory .dir-hd__right {
    align-items: flex-start;
    max-width: 100%;
  }
  .s-directory .dir-hd__lead { text-align: left; }
}

/* Tile hover: NO upward movement.
   Instead: bg image gently zooms in, a red vertical bar opens on
   the left edge, and the body slides slightly to the right. */

/* Equal-sized tiles: every tile takes the same width */
.s-directory .dir-tile,
.s-directory .dir-tile--w1,
.s-directory .dir-tile--w2,
.s-directory .dir-tile--w3 {
  flex: 1 1 0 !important;
  flex-grow: 1 !important;
}

/* Tile is now just a positioned wrapper. The image lives in
   .dir-tile__img which can be transformed independently with scale. */
.s-directory .dir-tile {
  background: var(--bg) !important;
  background-image: none !important;
  overflow: hidden !important;
  position: relative !important;
  transition:
    filter .4s ease,
    box-shadow .4s ease,
    z-index 0s linear .5s !important;
  transform: none !important;
}

/* Image layer fills the tile and uses transform: scale for the zoom */
.s-directory .dir-tile__img {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  transform: scale(1);
  transform-origin: center center;
  transition: transform 1.2s cubic-bezier(.22,1,.36,1);
  z-index: 0;
  will-change: transform;
  pointer-events: none;
  filter: grayscale(.45) brightness(.85);
}
.s-directory .dir-tile:hover .dir-tile__img {
  filter: grayscale(0) brightness(1);
}

/* On hover: continuous slow zoom for 20s (long enough to feel infinite) */
.s-directory .dir-tile:hover .dir-tile__img {
  animation: dirTileSlowZoom 20s linear forwards;
}

@keyframes dirTileSlowZoom {
  0%   { transform: scale(1); }
  100% { transform: scale(1.7); }
}

.s-directory .dir-tile:hover {
  filter: grayscale(0) brightness(.95) !important;
  transform: none !important;
  z-index: 5 !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.45) !important;
}

/* Stack order: image (0) -> shade (1) -> body (2) */
.s-directory .dir-tile__shade { z-index: 1 !important; }
.s-directory .dir-tile__body  { z-index: 2 !important; }

/* ============================================================
   Mobile: imageless list view
   - Hide background image, shade and tile pseudo-bars
   - Stack tiles vertically as text rows with thin divider
   - Tag (kicker) on top, name below, arrow on the right
   ============================================================ */
@media (max-width: 720px) {
  .s-directory .dir-tiles {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    border-top: 1px solid rgba(255,255,255,.10) !important;
  }

  .s-directory .dir-tile,
  .s-directory .dir-tile--w1,
  .s-directory .dir-tile--w2,
  .s-directory .dir-tile--w3 {
    flex: 1 1 100% !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    background: none !important;
    background-image: none !important;
    background-color: transparent !important;
    filter: none !important;
    box-shadow: none !important;
    padding: 1.4rem 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.10) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    overflow: visible !important;
    transition: color .25s ease !important;
  }

  /* Hide image layer on mobile (list view) */
  .s-directory .dir-tile__img { display: none !important; }

  .s-directory .dir-tile:hover {
    background: none !important;
    background-size: auto !important;
    box-shadow: none !important;
    transform: none !important;
  }

  /* Hide visual layers on mobile */
  .s-directory .dir-tile__shade { display: none !important; }
  .s-directory .dir-tile::before,
  .s-directory .dir-tile::after { display: none !important; }

  /* Body becomes a normal inline block in the row */
  .s-directory .dir-tile__body {
    position: static !important;
    transform: none !important;
    flex: 1 1 auto !important;
    gap: .25rem !important;
  }
  .s-directory .dir-tile:hover .dir-tile__body {
    transform: none !important;
  }

  .s-directory .dir-tile__tag {
    font-size: .55rem !important;
  }
  .s-directory .dir-tile__name {
    font-size: 1.6rem !important;
    line-height: 1 !important;
  }

  /* Right-aligned arrow indicator using pseudo */
  .s-directory .dir-tile__body::after {
    content: "\2192";
    color: rgba(255,255,255,.45);
    font-family: var(--pp);
    font-size: 1.1rem;
    margin-left: 1rem;
    transition: color .25s ease, transform .25s ease;
  }
  .s-directory .dir-tile:hover .dir-tile__name { color: var(--red) !important; }
  .s-directory .dir-tile:hover .dir-tile__body::after {
    color: var(--red);
    transform: translateX(4px);
  }
}

/* Neighboring tiles do not shift anymore */
.s-directory .dir-tile:hover ~ .dir-tile {
  transform: none !important;
}

/* Red horizontal bar on the BOTTOM edge (opens on hover) */
.s-directory .dir-tile::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .55s cubic-bezier(.22,1,.36,1);
  z-index: 3;
  pointer-events: none;
}
.s-directory .dir-tile:hover::after { transform: scaleX(1); }

/* Body slides slightly to the RIGHT on hover (no Y movement) */
.s-directory .dir-tile__body {
  transition: transform .45s cubic-bezier(.22,1,.36,1);
}
.s-directory .dir-tile:hover .dir-tile__body {
  transform: translateX(8px);
}

/* Tag: white + slight letter-spacing on hover */
.s-directory .dir-tile__tag {
  transition: color .35s ease, letter-spacing .35s ease;
}
.s-directory .dir-tile:hover .dir-tile__tag {
  color: var(--white);
  letter-spacing: .32em;
}

/* Title: turns red on hover */
.s-directory .dir-tile__name {
  transition: color .35s ease;
}
.s-directory .dir-tile:hover .dir-tile__name {
  color: var(--red);
}

/* Smoother bottom shade for richer photo presence */
.s-directory .dir-tile__shade {
  background: linear-gradient(
    180deg,
    rgba(2,2,2,0)   0%,
    rgba(2,2,2,.20) 45%,
    rgba(2,2,2,.62) 75%,
    rgba(2,2,2,.92) 100%
  ) !important;
}



/* ════════════════════════════════════════════════════════════
   #11 — HERO VIDEO EDGE VIGNETTE (DISABLED)
   Effect removed — video must remain fully visible.
   ════════════════════════════════════════════════════════════ */
.hero .hero-bg::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

/* ════════════════════════════════════════════════════════════
   #12 — WORKS SLIDER: Color reveal + index counter on hover
   Idle:  image stays grayscale (existing).
   Hover: image regains full color, scales subtly, and a thin red
          line slides up from the bottom edge revealing a faint
          red diagonal corner mark (top-right). Editorial, minimal.
   ════════════════════════════════════════════════════════════ */
.s-works .work-slide .work-img {
  position: relative;
  overflow: hidden;
  transition: filter .55s cubic-bezier(.22,1,.36,1) !important;
}

/* Disable any previous overlay/sweep/line/bracket effects */
.s-works .work-slide .work-img::after,
.s-works .work-slide .work-img::before {
  content: none !important;
  display: none !important;
  background: none !important;
  border: 0 !important;
  animation: none !important;
}

/* Hover state — only grayscale → color, no scale, no extra elements */
.s-works .work-slide:hover .work-img {
  filter: grayscale(0) brightness(1.02) contrast(1.05) !important;
  transform: none !important;
}

/* ════════════════════════════════════════════════════════════
   #14 — BRANDS GRID: Random Pulse (DISABLED)
   Effect removed by user request.
   ════════════════════════════════════════════════════════════ */
.brand-home-cell.brand-pulse,
.brand-home-cell.brand-pulse img {
  animation: none !important;
}