.tc-w-hero {
  position: relative;
  display: block;
  min-height: var(--tc-hero, 900px);
  height: var(--tc-hero, 900px);
  overflow: hidden;
  text-decoration: none;
  box-shadow: none;
  filter: none;
}

/*
 * about.html “03 / ABOUT” — exact Figma:
 * 1440×720, pt 128 / gap 24 / pb 30 / px 48
 * kicker 14/20/-0.84px  title 112/0.9/-8.96px  body 24/30/-0.72px w485
 */
.tc-w-hero--about {
  --tc-hero: 720px;
  min-height: var(--tc-hero);
  height: var(--tc-hero);
}

.tc-w-hero--about .tc-w-hero__copy {
  inset: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  justify-content: flex-start;
  gap: 24px;
}

/* Beat Elementor copy_padding flat 48px — keep content on the 1440 canvas.
   Phones use Overlay copy → Copy padding (tablet / mobile) instead. */
@media (min-width: 768px) {
  .tc-w-hero--about .tc-w-hero__copy {
    padding: 128px max(48px, calc((100% - 1440px) / 2 + 48px)) 30px !important;
  }
}

body.tangerine-theme .elementor .tc-w-hero--about .tc-w-hero__kicker,
.tc-w-hero--about .tc-w-hero__kicker {
  margin: 0;
  max-width: 1344px;
  width: 100%;
  font-family: Inter, Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.84px;
  font-weight: 400;
  text-transform: uppercase;
  color: #fff9f5;
}



body.tangerine-theme .elementor .tc-w-hero--about .tc-w-hero__text,
.tc-w-hero--about .tc-w-hero__text {
  margin: 0;
  width: 485px;
  max-width: min(485px, 100%);
  font-family: Inter, Arial, sans-serif;
  font-weight: 400;
  color: #fff9f5;
  display: flex;
  flex-direction: column;
  gap: var(--tc-para-gap, 0px);
}

.tc-w-hero__para {
  display: block;
}

.tc-w-hero__media {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  box-shadow: none;
  filter: none;
}

.tc-w-hero__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  box-shadow: none;
}



/* Inner widths live in theme CSS — not Elementor max-width. */
.tc-w-hero__copy {
  position: absolute;
  z-index: 3;
  left: 0;
  right: auto;
  bottom: 96px;
  top: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  text-align: left;
  transform: none;
  box-sizing: border-box;
  max-width: none;
  width: 100%;
}

/* About: copy fills the banner like Figma flex column — rules live above with exact type */

/* Media layout: same 48px side margin on the 1440 canvas as other sections. */
@media (min-width: 901px) {
  .tc-w-hero--left:not(.tc-w-hero--about) .tc-w-hero__copy,
  .tc-w-hero--right:not(.tc-w-hero--about) .tc-w-hero__copy {
    padding-left: max(48px, calc((100% - 1440px) / 2 + 48px));
    padding-right: max(48px, calc((100% - 1440px) / 2 + 48px));
  }
}

/* Horizontal */
.tc-w-hero--center .tc-w-hero__copy {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  text-align: center;
  align-items: center;
  padding-left: 48px;
  padding-right: 48px;
  width: auto;
}

.tc-w-hero--center .tc-w-hero__text {
  margin-left: auto;
  margin-right: auto;
}

.tc-w-hero--right .tc-w-hero__copy {
  left: auto;
  right: 0;
  text-align: right;
  align-items: flex-end;
}

.tc-w-hero--right .tc-w-hero__text {
  margin-left: auto;
}

/* Vertical (media layout) */
.tc-w-hero--v-top:not(.tc-w-hero--about) .tc-w-hero__copy {
  top: 128px;
  bottom: auto;
}

.tc-w-hero--v-middle:not(.tc-w-hero--about) .tc-w-hero__copy {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}

.tc-w-hero--center.tc-w-hero--v-middle:not(.tc-w-hero--about) .tc-w-hero__copy {
  transform: translate(-50%, -50%);
}

.tc-w-hero--v-bottom:not(.tc-w-hero--about) .tc-w-hero__copy {
  top: auto;
  bottom: 96px;
}

.tc-w-hero__kicker {
  margin: 0;
  max-width: 1344px;
  width: 100%;
  color: #fff9f5;
}

.tc-w-hero__title {
  margin: 0;
  max-width: 1116px;
  width: 100%;
  font-size: clamp(56px, 7.78vw, 112px);
  line-height: 0.9;
  text-transform: uppercase;
  font-weight: 400;
  color: #fff9f5;
}

.tc-w-hero__text {
  margin: 0;
  max-width: 485px;
  box-sizing: border-box;
  font-size: 24px;
  line-height: 30px;
  letter-spacing: -0.03em;
  color: #fff9f5;
  display: flex;
  flex-direction: column;
  gap: var(--tc-para-gap, 0px);
}

/* Line-reveal hero timing lives in frontend/motion.css (matches .landing-copy). */

@media (max-width: 900px) {
  .tc-w-hero,
  .tc-w-hero--about,
  .tc-w-hero__media {
    min-height: 520px;
    height: auto;
  }

  .tc-w-hero .tc-w-hero__copy,
  .tc-w-hero--about .tc-w-hero__copy,
  .tc-w-hero--center .tc-w-hero__copy,
  .tc-w-hero--right .tc-w-hero__copy,
  .tc-w-hero--v-top .tc-w-hero__copy,
  .tc-w-hero--v-middle .tc-w-hero__copy,
  .tc-w-hero--v-bottom .tc-w-hero__copy,
  .tc-w-hero--center.tc-w-hero--v-middle .tc-w-hero__copy {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    inset: auto;
    transform: none;
    width: auto;
    height: auto;
    max-width: none;
    /* Overlay copy → Copy padding (tablet / mobile) in Elementor. */
    padding: var(--tc-hero-copy-pad);
    /* --tc-hero-m-*: Content align (tablet / mobile). Unset keeps the old stacked layout. */
    text-align: var(--tc-hero-m-text, left);
    align-items: var(--tc-hero-m-items, flex-start);
  }

  .tc-w-hero--center .tc-w-hero__copy {
    align-items: var(--tc-hero-m-items, center);
    text-align: var(--tc-hero-m-text, center);
  }

  .tc-w-hero--center .tc-w-hero__text {
    margin-left: var(--tc-hero-m-text-mx, auto);
    margin-right: var(--tc-hero-m-text-mx, auto);
  }

  .tc-w-hero--right .tc-w-hero__text {
    margin-left: var(--tc-hero-m-text-mx, auto);
  }
}


/* Tablet and mobile layouts for this widget. */
@media (max-width: 900px) {
  body.tangerine-theme .tc-w-hero,
  body.tangerine-theme .tc-w-hero--about { position: relative;
    height: min(100svh, 850px);
    min-height: 620px; }

  body.tangerine-theme .tc-w-hero__media { position: absolute;
    inset: 0;
    width: 100%;
    height: 100% !important;
    min-height: 0 !important;
    object-fit: cover; }

  /* --tc-hero-m-justify: Content vertical (tablet / mobile). Unset = top, or middle for Middle. */
  body.tangerine-theme .tc-w-hero {
    display: flex;
    flex-direction: column;
    justify-content: var(--tc-hero-m-justify, flex-start);
  }

  /* As a flex item the empty fade span would take up its height and push the copy down. */
  body.tangerine-theme .tc-w-hero:not(.tc-w-hero--v-middle) > .tc-w-hero__fade {
    position: absolute;
  }

  body.tangerine-theme .tc-w-hero--v-middle:not(.tc-w-hero--about) {
    display: flex;
    flex-direction: column;
    justify-content: var(--tc-hero-m-justify, center);
  }

  body.tangerine-theme .tc-w-hero--about {
    height: auto;
    min-height: 420px;
  }

  body.tangerine-theme .tc-w-hero--about .tc-w-hero__copy {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  body.tangerine-theme .tc-w-hero--about .tc-w-hero__title,
  body.tangerine-theme .tc-w-hero--about .tc-w-hero__text {
    width: 100%;
    max-width: 100%;
  }

  body.tangerine-theme .tc-w-hero--about .tc-line-reveal > .tc-title-line {
    overflow: visible;
  }

  body.tangerine-theme .tc-w-hero--about .tc-w-hero__text { width: 100%;
    font-size: 18px;
    line-height: 1.25; }
}
@media (max-width: 600px) {
  body.tangerine-theme .tc-w-hero { height: 760px; min-height: min(100svh, 640px); }

  body.tangerine-theme .tc-w-hero--about { height: auto; min-height: 420px; }

  body.tangerine-theme .tc-w-hero--about .tc-w-hero__copy {
    width: 100%;
  }

  body.tangerine-theme .tc-w-hero--about .tc-w-hero__text { line-height: 1.25; }
}

/* Banner height → Height on small screens: "From padding". The copy padding sets the height.
   !important beats the Elementor Height control, which always prints a fixed height. */
@media (max-width: 900px) {
  .tc-w.tc-w-hero--fit-stack {
    height: auto !important;
    min-height: var(--tc-hero-fit-min, 0px) !important;
  }
}

@media (max-width: 767px) {
  .tc-w.tc-w-hero--fit-phone {
    height: auto !important;
    min-height: var(--tc-hero-fit-min, 0px) !important;
  }
}