/* BrandFreak feature card — shared by the homepage and the case-study page.
   Moved out of style.css so /work/<slug>, which doesn't load style.css, can
   render the section without pulling in the whole homepage stylesheet. */

.feature {
  background: #fff;
  padding: 6rem 4.5rem 6rem;
}

.feature-card {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  min-height: clamp(340px, 40vw, 560px);
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: 6px;
  background: #e9e9f1;
  color: #1c2e42;
}

.feature-arrow {
  position: absolute;
  left: clamp(-13rem, -6vw, 2px);
  top: 58%;
  transform: translateY(-50%);
  width: clamp(340px, 64vw, 880px);
  height: auto;
  z-index: 1;
  pointer-events: none;
}
.feature-arrow__line,
.feature-arrow__head {
  fill: none;
  stroke: #ffffff;
  stroke-width: 30;
}
.feature-arrow__line {
  stroke-linecap: round;
  stroke-linejoin: round;
}
.feature-arrow__head {
  stroke-linecap: butt;
  stroke-linejoin: miter;
  stroke-miterlimit: 10;
}
/* line and arrowhead draw as one continuous stroke at a constant speed */
.feature-arrow__line { transition: stroke-dashoffset 1.6s linear; }
.feature-arrow__head { transition: stroke-dashoffset 0.2s linear 1.6s; }

.feature-copy {
  position: relative;
  z-index: 2;
  z-index: 2;
  padding: clamp(2.5rem, 5vw, 4.5rem);
  max-width: 60%;
}

.feature-wordmark {
  display: block;
  width: clamp(220px, 26vw, 360px);
  height: auto;
  margin-bottom: clamp(1rem, 2vw, 1.6rem);
}
/* BrandFreak logo replacing the "Strategy" eyebrow in the feature section */
.feature-eyebrow-logo {
  display: block;
  height: 58px;
  width: auto;
  margin-bottom: 1.4rem;
  opacity: 0.95;
}

.feature-eyebrow {
  color: #8a8a97;
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 2.2rem;
}

.feature-title {
  font-size: 3.2rem;
  line-height: 1.06;
  letter-spacing: -0.03em;
  font-weight: 500;
  margin-bottom: 1.75rem;
}

.feature-sub {
  font-size: 1.3rem;
  line-height: 1.55;
  font-weight: 500;
  max-width: 40ch;
  margin-bottom: 3.5rem;
}

.feature-link {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  padding-bottom: 0.4rem;
  color: #ff4844;
  font-size: 1.15rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid #ff4844;
}
.feature-link svg { transition: transform 0.25s ease; }
.feature-link:hover svg { transform: translateX(6px); }
/* the How It Works link under "Freak to Unique in a Week" shares this style */
.cap-intro .feature-link { align-self: flex-start; }

/* abstract 3D gradient shape on the right */
.feature-visual {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 55%;
  pointer-events: none;
  background: #e9e9f1;
}
/* flat placeholder to match the case-study images */
.feature-visual > * { display: none; }
/* the <picture> is a pass-through wrapper; let the <img> inside lay out as if
   it were a direct child so the positioning rules below still apply */
.feature-visual > picture { display: contents; }
.feature-visual .feature-report {
  display: block;
  position: absolute;
  top: 52%;
  right: -60px;
  transform: translateY(-50%);
  height: 140%;
  width: auto;
  max-width: none;
  object-fit: contain;
}

@media (max-width: 820px) {

  /* stack the card vertically so the report image sits below the copy
     in normal flow instead of overlapping it */
  .feature-card { min-height: 0; flex-direction: column; align-items: stretch; }
  .feature-copy { max-width: 100%; }
  .feature-visual {
    position: static;
    width: 100%;
    height: auto;
    padding: 0;
  }
  /* the image is already the final crop — show it full width at its natural
     ratio, sitting flush at the bottom of the card */
  .feature-visual .feature-report {
    position: static;
    transform: none;
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: fill;
  }
  .feature-arrow {
    left: -6vw;
    top: 20%;
  }
  .feature-title {
    font-size: 2rem;
    line-height: 1.2;
    font-weight: 400;
    margin-bottom: 1.25rem;
  }
}

/* Greycliff on the feature title (mirrors the grouped rule in style.css) */
.feature-title {
  font-family: "greycliff-cf", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

@media (max-width: 640px) {
  /* 4.5rem of section padding and 4.5rem again inside the card left 151px of
     the screen for the copy, so the heading broke a word to a line. */
  .feature { padding: 3.5rem 1.25rem 1rem; }
  /* the link belongs to the paragraph above it, not to the picture below */
  .feature-sub { margin-bottom: 1.25rem; }
  .feature-copy { padding: 2rem 1.5rem 2.25rem; }
  /* a fixed height made the wordmark wider than the card that clips it */
  .feature-eyebrow-logo {
    height: auto;
    width: 100%;
    max-width: 220px;
    margin-bottom: 1.1rem;
  }
  .feature-sub { font-size: 1rem; margin-bottom: 1.25rem; }
}