/* --- Hero (Content Section Yankee) — tinted section, highlighted heading, navy paragraph card --- */
.join-hero {
  padding-block: var(--space-2xl) var(--space-3xl);
  background: var(--color-primary-tint);
}

.join-hero__grid {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: 1fr;
  align-items: start;
  margin-bottom: var(--space-l);
  position: relative;
}

@media (min-width: 900px) {
  .join-hero__grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "heading"
      "content";
    row-gap: var(--space-l);
  }
  .join-hero__heading-wrap {
    grid-area: heading;
    padding-right: 48%;   /* reserves space for the floating image on the right */
  }
  .join-hero__content {
    grid-area: content;
    width: 65%;           /* narrower than full width so image can overlap on the right */
    position: relative;
    z-index: 1;
  }
  /* Image floats absolutely on the right and overlaps the navy content card */
  .join-hero__media {
    position: absolute;
    top: 0;
    right: 0;
    width: 44%;
    aspect-ratio: 3 / 4;   /* fixed portrait ratio — determines its own height */
    z-index: 1;
    margin: 0;
  }
  .join-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-m);
    display: block;
  }
}

/* White highlighted heading — each rendered line gets its own rounded rectangle
   via display:inline on the inner span + box-decoration-break: clone. */
.join-hero__heading {
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  line-height: 1.5;                     /* extra space between lines so highlights don't touch */
  color: var(--color-primary-dark);
  margin: 0 0 var(--space-l);
  background: transparent;
  /* Heading itself stays block; only the inner span carries the highlight */
}

.join-hero__heading-hl {
  display: inline;
  background-color: #fff;
  padding: 0.15em 0.4em;
  border-radius: 0.28em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  /* small vertical spacer trick — extends the background slightly beyond descenders */
}

.join-hero__heading-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-l);
}

.join-hero__media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-m);
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

/* Dark navy content box for the 2 paragraphs */
.join-hero__content {
  background: var(--color-primary-dark);
  color: #fff;
  padding: var(--space-xl);
  border-radius: var(--radius-m);
  display: grid;
  gap: var(--space-l);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .join-hero__content { grid-template-columns: 1fr 1fr; }
}
.join-hero__content p {
  margin: 0;
  color: rgba(255,255,255,0.94);
  line-height: 1.65;
  font-size: 1rem;
}

/* --- Value cards (borderless, separated by vertical dividers) --- */
.values-grid {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  padding-block: var(--space-l) 0;
}
@media (min-width: 700px) {
  .values-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.value-block {
  background: transparent;
  border-radius: 0;
  padding: var(--space-l) var(--space-xl);
  border-left: none;
  text-align: center;
  border-right: 1px solid rgba(32, 61, 96, 0.15);
}
.value-block:last-child { border-right: none; }
@media (max-width: 700px) {
  .value-block { border-right: none; border-bottom: 1px solid rgba(32,61,96,0.15); }
  .value-block:last-child { border-bottom: none; }
}
.value-block__heading {
  font-family: var(--font-heading);
  font-size: var(--text-l);
  font-weight: 700;
  color: var(--color-primary-dark);
  margin: 0 0 var(--space-s);
  line-height: 1.2;
}
.value-block__body {
  margin: 0;
  color: var(--color-text);
  line-height: 1.6;
}

/* --- Why work section (Feature Section Romeo) — asymmetric: text left, cards right --- */
.why-work-section {
  padding-block: var(--space-3xl);
}
.why-work-section .section__intro {
  text-align: left;
  max-width: none;
  margin-bottom: 0;
}

.feature-romeo-layout {
  display: grid;
  gap: var(--space-2xl);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px) {
  .feature-romeo-layout {
    grid-template-columns: 4fr 7fr;
    gap: var(--space-2xl);
  }
}

.feature-romeo-intro__heading {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  line-height: 1.2;
  color: var(--color-primary-dark);
  margin: 0 0 var(--space-l);
}
.feature-romeo-intro__body {
  color: var(--color-text);
  line-height: 1.65;
  margin: 0 0 var(--space-l);
}

/* Expanding-on-hover accordion (matches Bricks fr-feature-card-romeo). */
.feature-romeo-grid {
  display: flex;
  gap: var(--space-m);
}

.feature-romeo-card {
  position: relative;
  border-radius: var(--radius-m);
  overflow: hidden;
  min-height: 24em;
  color: #fff;
  isolation: isolate;
  /* Collapsed by default. flex-grow so 3 cards fill the row equally. */
  flex: 1 1 20%;
  transition: flex 0.4s ease-in-out;
  cursor: pointer;
  outline: none;
}
.feature-romeo-card:focus-visible { box-shadow: 0 0 0 3px var(--color-primary-light); }

/* On hover/focus one card expands; the others get squeezed */
.feature-romeo-card:hover,
.feature-romeo-card:focus-visible {
  flex: 5 1 20%;
}

.feature-romeo-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.feature-romeo-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(32, 61, 96, 0.2) 0%, rgba(32, 61, 96, 0.85) 100%);
  z-index: -1;
  transition: background 0.4s ease;
}
.feature-romeo-card:hover .feature-romeo-card__overlay,
.feature-romeo-card:focus-visible .feature-romeo-card__overlay {
  background: linear-gradient(180deg, rgba(32, 61, 96, 0.35) 0%, rgba(32, 61, 96, 0.75) 100%);
}

/* Vertical text label (visible when collapsed) */
.feature-romeo-card__vertical {
  position: absolute;
  bottom: var(--space-l);
  left: var(--space-l);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-l);
  line-height: 1.1;
  z-index: 1;
  transition: opacity 0.25s ease;
  pointer-events: none;
  white-space: nowrap;
}
.feature-romeo-card:hover .feature-romeo-card__vertical,
.feature-romeo-card:focus-visible .feature-romeo-card__vertical {
  opacity: 0;
}

/* Horizontal content (heading + body) — hidden by default, fade in on hover */
.feature-romeo-card__content {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--space-l);
  color: #fff;
  opacity: 0;
  transition: opacity 0.4s ease-in-out 0.1s;
  width: 30ch;
  max-width: calc(100% - var(--space-l) * 2);
}
.feature-romeo-card:hover .feature-romeo-card__content,
.feature-romeo-card:focus-visible .feature-romeo-card__content {
  opacity: 1;
}

.feature-romeo-card__heading {
  color: #fff;
  font-family: var(--font-heading);
  font-size: var(--text-l);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 var(--space-s);
}

.feature-romeo-card__body {
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
  line-height: 1.5;
  font-size: 0.92rem;
}

/* Mobile: revert to stacked cards, always-visible content, no expanding behavior */
@media (max-width: 900px) {
  .feature-romeo-grid { flex-direction: column; }
  .feature-romeo-card {
    flex: 1 1 auto;
    min-height: 22em;
  }
  .feature-romeo-card:hover,
  .feature-romeo-card:focus-visible { flex: 1 1 auto; }
  .feature-romeo-card__vertical { display: none; }
  .feature-romeo-card__content {
    opacity: 1;
    width: auto;
  }
}

/* --- Application form section --- */
.apply-section {
  padding-block: var(--space-3xl);
  background: var(--color-primary-tint);
}

.apply-section__grid {
  display: grid;
  gap: var(--space-2xl);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px) {
  .apply-section__grid {
    grid-template-columns: 5fr 6fr;
    gap: var(--space-3xl);
  }
}

.apply-section__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.095em;
  font-size: var(--text-s);
  font-weight: 400;
  color: var(--color-primary-dark);
  margin: 0 0 var(--space-m);
}

.apply-section__heading {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.15;
  color: var(--color-primary-dark);
  margin: 0 0 var(--space-l);
}

.apply-section__lede {
  color: var(--color-text);
  line-height: 1.65;
  margin: 0;
}

.apply-form { max-width: none; }

/* --- Final CTA Victor --- */
.cta-victor {
  padding-block: var(--space-3xl);
}
.cta-victor__card {
  background: var(--color-primary-dark);
  color: #fff;
  border-radius: var(--radius-m);
  padding: var(--space-2xl);
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
}
.cta-victor__heading {
  color: #fff;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  line-height: 1.2;
  margin: 0 0 var(--space-l);
}
.cta-victor__body {
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
  margin: 0 0 var(--space-l);
  max-width: 60ch;
  margin-inline: auto;
}