/* Homepage type consistency. Scoped to visible portfolio content so the
   original Webflow layouts and their animations remain untouched. */
.hero_heading {
  font-family: Vollkorn, Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.02;
  text-wrap: balance;
}

/* The Webflow hero is fixed so its scroll interaction can animate it. Enforce
   its actual section boundary as well, including immediately after a browser
   restores a mid-page scroll position. */
.home-hero-out-of-range .hero-section {
  visibility: hidden !important;
  pointer-events: none !important;
}

.case-study-3-imagery .entry-title,
.case-study-1-imagery-gawker .entry-title,
.case-study-1-imagery .entry-title-extended {
  font-family: Vollkorn, Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.02;
}

.folllowup_cta .heading-2-copy-copy,
.folllowup_cta .heading-2-copy-copy .bold-text-15,
.folllowup_cta .heading-2-copy-copy-copy {
  font-family: Vollkorn, Georgia, serif;
  font-weight: 400;
  line-height: 1.15;
}

.folllowup_cta .paragraph-9,
.case-study-02-consultias .paragraph-2,
.case-study-1-info-gawker .paragraph-2,
.case-study-1-info-extended .paragraph-2 {
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.01em;
}

.case-study-02-consultias .heading-gati-bullpoints-3,
.case-study-1-info-gawker .heading-gati-bullpoints-3,
.case-study-1-info-extended .heading-gati-bullpoints-3 {
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: 0.01em;
}

/* The journey pages now carry the detailed project galleries. Keep the home
   case-study listings focused on their primary preview, summary and CTA. */
.case-study-02-consultias > .f-gallery-two-column-s,
.case-study-02-consultias > .gallery-slider,
.case-study-02-consultias > .f-section-large,
.case-study-1-info-gawker > .f-section-large {
  display: none;
}

/* Retire the two legacy homepage listings. Their assets remain in the project
   history, but the live page now continues directly to the wider client list. */
.case-study-1-imagery-gawker:not(.listing--consultias),
.case-study-1-imagery-gawker:not(.listing--consultias) + .case-study-1-info-gawker,
#CS01i,
#CS01i + .case-study-1-info-extended {
  display: none !important;
}

/* Keep the hand-off from each case study to the next on one consistent
   vertical rhythm. Webflow gives the e92plus imagery 25% top padding while
   Consultias starts at 4em, which created visibly different gaps. */
.midenntry {
  min-height: clamp(290px, 24vw, 390px);
  padding-block: clamp(90px, 9vw, 140px);
  display: grid;
  place-items: center;
}

.midenntry .div-block-6,
.midenntry .ctb,
.midenntry .find-out {
  margin-block: 0;
}

.midenntry + .case-study-3-imagery,
.midenntry + .case-study-1-imagery-gawker {
  padding-top: clamp(64px, 6vw, 96px);
}

.midenntry + .case-study-3-imagery .entry-title,
.midenntry + .case-study-1-imagery-gawker .entry-title {
  top: 0;
}

/* Stronger homepage case-study invitations. */
.case-study-02-consultias .paragraph-2,
.case-study-1-info-gawker .paragraph-2 {
  max-width: 760px;
  color: #fff;
  font-size: clamp(18px, 1.35vw, 23px);
  font-weight: 400;
  line-height: 1.48;
}

/* Echo the case-study artwork's scroll-to-focus treatment on the two social
   images, without inheriting any of its movement or opacity animation. Bind
   it directly to the root scroll timeline so every scroll position maps to a
   blur value immediately, including inside the existing sticky composition. */
@keyframes work-image-scroll-focus {
  from {
    filter: blur(100px);
  }

  to {
    filter: blur(0);
  }
}

#aboutMe .work_img {
  animation: work-image-scroll-focus linear both;
  animation-timeline: scroll(root block);
  animation-range: 0 100svh;
  will-change: filter;
  backface-visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  #aboutMe .work_img {
    animation: none;
    filter: none;
    will-change: auto;
  }
}

/* Homepage hand-off into the featured case studies. This is the same horizon
   construction used by the journey pages, scoped here so those modules remain
   untouched. */
.home-theme-bridge {
  --home-paper: #f3f0e7;
  --bridge-full-height: clamp(690px, 100vh, 1120px);
  --bridge-leading-crop: clamp(260px, 36vh, 420px);
  clear: both;
  position: relative;
  width: 100%;
  height: calc(var(--bridge-full-height) - var(--bridge-leading-crop));
  overflow: hidden;
  isolation: isolate;
  background: #050606;
}

/* The rising arch has already completed its transition before the bottom of
   its SVG stage. Crop that empty paper tail so the first study sits within the
   bowl rather than beginning far beneath it. The reverse bookend is unchanged. */
.home-theme-bridge:not(.home-theme-bridge--reverse) {
  height: calc(
    var(--bridge-full-height) - var(--bridge-leading-crop) -
      clamp(150px, 18vh, 220px)
  );
}

.home-theme-bridge .bridge-horizon {
  position: absolute;
  z-index: 2;
  top: calc(-1 * var(--bridge-leading-crop));
  left: 0;
  width: 100%;
  height: var(--bridge-full-height);
  overflow: visible;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent var(--bridge-leading-crop),
    #000 calc(var(--bridge-leading-crop) + 250px)
  );
  mask-image: linear-gradient(
    to bottom,
    transparent var(--bridge-leading-crop),
    #000 calc(var(--bridge-leading-crop) + 250px)
  );
}

.home-theme-bridge .horizon-fill {
  fill: var(--home-paper);
  filter: url(#home-horizon-feather);
}

.home-theme-bridge .horizon-haze {
  fill: none;
  stroke: rgba(83, 161, 209, .7);
  stroke-width: 115;
  filter: url(#home-horizon-haze);
}

.home-bridge-speckles {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  transform: translate3d(0, var(--speckle-y, 0), 0) scale(1.08);
}

.home-bridge-speckles--dark {
  opacity: .36;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 20%, transparent 82%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 20%, transparent 82%);
}

.home-bridge-speckles--light {
  filter: invert(1);
  mix-blend-mode: multiply;
  opacity: .28;
  -webkit-mask-image: linear-gradient(to bottom, transparent 22%, #000 56%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 22%, #000 56%, transparent 100%);
}

.home-theme-bridge .bridge-grain {
  position: absolute;
  z-index: 4;
  inset: 0;
  background: url("/graphic-lab/assets/gradient-grain.svg") repeat;
  background-size: 190px 190px;
  opacity: .19;
  mix-blend-mode: soft-light;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 83%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 83%, transparent);
  pointer-events: none;
}

.home-theme-bridge::after {
  content: "";
  position: absolute;
  z-index: 5;
  inset: auto 0 0;
  height: clamp(150px, 22vh, 240px);
  background: linear-gradient(to bottom, transparent, var(--home-paper));
  pointer-events: none;
}

.home-theme-bridge--reverse {
  background: var(--home-paper);
}

.home-theme-bridge--reverse .horizon-fill {
  fill: #050606;
  filter: url(#home-horizon-feather-reverse);
}

.home-theme-bridge--reverse .horizon-haze {
  filter: url(#home-horizon-haze-reverse);
}

.home-theme-bridge--reverse .home-bridge-speckles--light {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 20%, transparent 66%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 20%, transparent 66%);
}

.home-theme-bridge--reverse .home-bridge-speckles--dark {
  -webkit-mask-image: linear-gradient(to bottom, transparent 22%, #000 56%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 22%, #000 56%, transparent 100%);
}

.home-theme-bridge--reverse::after {
  background: linear-gradient(to bottom, transparent, #050606);
}

/* Light featured-work environment. A sticky inverted speckle layer continues
   through all three project-specific gradients. */
.home-case-studies-light {
  --home-paper: #f3f0e7;
  position: relative;
  display: flow-root;
  isolation: isolate;
  background: var(--home-paper);
  color: #17191a;
  overflow: clip;
}

.home-listing-speckles {
  position: sticky;
  z-index: 1;
  top: 0;
  display: block;
  width: 100%;
  height: 100vh;
  margin-bottom: -100vh;
  object-fit: cover;
  filter: invert(1);
  mix-blend-mode: multiply;
  opacity: .18;
  pointer-events: none;
}

.home-case-studies-light > :not(.home-listing-speckles) {
  position: relative;
  z-index: 2;
}

.home-case-studies-light .case-study-3-imagery,
.home-case-studies-light .case-study-1-imagery-gawker {
  padding-top: clamp(76px, 7vw, 118px);
}

.home-case-studies-light .case-study-3-imagery .div-block-30,
.home-case-studies-light .case-study-1-imagery-gawker .div-block-30 {
  box-shadow: 0 6px 10px rgba(0, 0, 0, .16);
}

.home-case-studies-light .case-study-3-imagery .div-block-30 > img,
.home-case-studies-light .case-study-1-imagery-gawker .div-block-30 > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.home-case-studies-light .listing--tmw.case-study-3-imagery {
  background: linear-gradient(180deg, #f3f0e7 0%, rgba(112, 174, 200, .42) 100%);
  padding-top: clamp(28px, 3vw, 48px);
}

.home-case-studies-light .listing--tmw.case-study-02-consultias {
  background: linear-gradient(180deg, rgba(112, 174, 200, .42) 0%, #f3f0e7 100%);
}

.home-case-studies-light .listing--e92.case-study-3-imagery {
  background: linear-gradient(180deg, #f3f0e7 0%, rgba(255, 22, 72, .18) 100%);
}

.home-case-studies-light .listing--e92.case-study-02-consultias {
  background: linear-gradient(180deg, rgba(255, 22, 72, .18) 0%, #f3f0e7 100%);
}

.home-case-studies-light .listing--consultias.case-study-1-imagery-gawker {
  background: linear-gradient(180deg, #f3f0e7 0%, rgba(71, 190, 204, .26) 100%);
}

.home-case-studies-light .listing--consultias.case-study-1-info-gawker {
  background: linear-gradient(180deg, rgba(71, 190, 204, .26) 0%, #f3f0e7 100%);
  margin-bottom: 0;
  padding-bottom: clamp(90px, 10vw, 160px);
}

.home-case-studies-light .midenntry {
  background: var(--home-paper);
}

.home-case-studies-light .entry-title,
.home-case-studies-light .paragraph-2,
.home-case-studies-light .heading-gati-bullpoints-3,
.home-case-studies-light .date-gati,
.home-case-studies-light .find-out {
  color: #17191a;
  text-shadow: none;
}

.home-case-studies-light .paragraph-2 {
  color: #25292a;
}

.home-case-studies-light .paragraph-11,
.home-case-studies-light .bold-text-17 {
  color: #ff1648;
}

.home-case-studies-light .listing-facts-card {
  box-sizing: border-box;
  width: 100%;
  padding: clamp(24px, 2.5vw, 38px);
  border: 1px solid rgba(23, 25, 26, .32);
  border-radius: clamp(22px, 2vw, 32px);
}

.home-case-studies-light .listing-facts-card > .date-gati {
  float: none;
  margin: 1em 0 0;
}

@media (max-width: 600px) {
  .home-theme-bridge {
    --bridge-full-height: 760px;
    --bridge-leading-crop: 240px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-bridge-speckles,
  .home-listing-speckles {
    display: none;
  }
}

.case-study-02-consultias .paragraph-11,
.case-study-1-info-gawker .paragraph-11 {
  max-width: 800px;
  margin-top: .55em;
  padding-right: 0;
  font-size: clamp(27px, 2.15vw, 39px);
  line-height: 1.22;
  text-wrap: wrap;
}

.home-case-studies-light .listing-copy-pair {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  box-sizing: border-box;
  width: 90%;
  max-width: 800px;
  padding-left: 2em;
}

.home-case-studies-light .columns-4 > .column-3 {
  box-sizing: border-box;
  padding-left: 2em;
}

.home-case-studies-light .listing-copy-pair .paragraph-2,
.home-case-studies-light .listing-copy-pair .paragraph-11 {
  display: block;
  float: none;
  clear: none;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin-left: 0;
  padding-right: 0;
}

.case-study-02-consultias .onwards-link-2,
.case-study-1-info-gawker .onwards-link-2 {
  float: none;
  cursor: pointer;
  display: inline-flex;
  align-self: flex-start;
  margin: 0;
  padding: 0;
  line-height: 1;
}

.home-case-studies-light .div-block-25 {
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  width: 100%;
  padding-top: 1.25em;
  padding-bottom: clamp(28px, 2.5vw, 40px);
  overflow: visible;
}

.case-study-02-consultias .onwards-link-2:focus-visible,
.case-study-1-info-gawker .onwards-link-2:focus-visible {
  outline: none;
}

.home-case-studies-light .case-study-02-consultias {
  padding-bottom: clamp(86px, 8vw, 126px);
}

.case-study-02-consultias .behance,
.case-study-1-info-gawker .behance {
  position: relative;
  top: auto;
  left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: auto;
  min-height: 44px;
  padding: .72em 1.15em;
  border: 1px solid #ff1648 !important;
  border-radius: 999px;
  background: #ff1648 !important;
  box-shadow: 0 8px 22px rgba(255, 22, 72, .18);
  color: #fff !important;
  font-size: clamp(16px, 1.15vw, 20px);
  font-weight: 400;
  line-height: 1.2;
  transition: transform .2s ease, background .2s ease,
    border-color .2s ease, box-shadow .2s ease;
}

.case-study-02-consultias .cta-label-primary,
.case-study-1-info-gawker .cta-label-primary {
  display: block;
  opacity: 1;
  transform: translateY(0);
  transition: opacity .18s ease, transform .2s ease;
}

.case-study-02-consultias .cta-label-hover,
.case-study-1-info-gawker .cta-label-hover {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: inherit;
  color: #fff;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity .18s ease, transform .2s ease;
}

.case-study-02-consultias .onwards-link-2:hover .behance,
.case-study-02-consultias .onwards-link-2:focus-visible .behance,
.case-study-1-info-gawker .onwards-link-2:hover .behance,
.case-study-1-info-gawker .onwards-link-2:focus-visible .behance {
  border-color: #e9003b !important;
  background: #e9003b !important;
  box-shadow: 0 10px 28px rgba(233, 0, 59, .24);
  transform: translateY(-2px);
}

.case-study-02-consultias .onwards-link-2:focus-visible .behance,
.case-study-1-info-gawker .onwards-link-2:focus-visible .behance {
  outline: 2px solid rgba(23, 25, 26, .72);
  outline-offset: 3px;
}

.case-study-02-consultias .onwards-link-2:hover .cta-label-primary,
.case-study-02-consultias .onwards-link-2:focus-visible .cta-label-primary,
.case-study-1-info-gawker .onwards-link-2:hover .cta-label-primary,
.case-study-1-info-gawker .onwards-link-2:focus-visible .cta-label-primary {
  opacity: 0;
  transform: translateY(-5px);
}

.case-study-02-consultias .onwards-link-2:hover .cta-label-hover,
.case-study-02-consultias .onwards-link-2:focus-visible .cta-label-hover,
.case-study-1-info-gawker .onwards-link-2:hover .cta-label-hover,
.case-study-1-info-gawker .onwards-link-2:focus-visible .cta-label-hover {
  opacity: 1;
  transform: translateY(0);
}

/* Editorial statement between the introduction and the case-study work. */
.folllowup_cta {
  position: relative;
  overflow: hidden;
  min-height: min(78svh, 820px);
  display: grid;
  place-items: center;
  padding: clamp(110px, 13vw, 190px) clamp(24px, 7vw, 120px);
  isolation: isolate;
}

.folllowup_cta::after {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 20% 8%;
  background: radial-gradient(ellipse at center, #ff164817 0%, transparent 68%);
  pointer-events: none;
}

.folllowup_cta .followup_cta_div,
.folllowup_cta .followup_cta_body_part01,
.folllowup_cta .followup_cta_body_part02 {
  width: min(1180px, 100%);
}

.folllowup_cta .followup_cta_body_part01,
.folllowup_cta .followup_cta_body_part02 {
  margin-inline: auto;
  text-align: center;
}

.folllowup_cta .followup_cta_body_part02 {
  display: none !important;
}

.folllowup_cta .heading-2-copy-copy,
.folllowup_cta .heading-2-copy-copy .bold-text-15,
.folllowup_cta .heading-2-copy-copy-copy {
  max-width: 1160px;
  margin: 0 auto;
  color: #f7f4ee;
  font: 400 clamp(40px, 4.4vw, 74px)/1.02 Vollkorn, Georgia, serif;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.folllowup_cta .heading-2-copy-copy em {
  color: #ff1648;
  font-weight: 400;
}

.folllowup_cta .paragraph-9 {
  max-width: 820px;
  margin: clamp(34px, 4vw, 58px) auto 0;
  color: #d9d9d9;
  font: 450 clamp(17px, 1.35vw, 22px)/1.65 "Work Sans", sans-serif;
  letter-spacing: 0;
  text-wrap: balance;
}

@media (max-width: 700px) {
  .folllowup_cta {
    min-height: 700px;
    padding-block: 100px;
  }

  .folllowup_cta .heading-2-copy-copy,
  .folllowup_cta .heading-2-copy-copy .bold-text-15,
  .folllowup_cta .heading-2-copy-copy-copy {
    font-size: clamp(38px, 10.5vw, 56px);
  }
}