/* HumTum V98 — unified subpage opening and consistently legible dark CTAs.
   Keeps the V97 page content, video cards, icons, mobile header and slider behavior.
   No change to the VFX green brand hue or to the homepage showreel. */

/* V97 had an overly broad at-rest rule that made dark buttons' text nearly black.
   These are dark filled buttons, NOT light CTAs: white in every state. */
html body a.v27-button.ht-action:any-link,
html body a.v27-button.ht-action:not(:hover):not(:focus-visible),
html body a.v27-button.v34-dark-cta:any-link,
html body a.v27-button.v27-button-secondary.ht-action:any-link {
  background-color:#181d21!important;
  border-color:#777f86!important;
  color:#f7f8f9!important;
  -webkit-text-fill-color:#f7f8f9!important;
}
html body a.v27-button.ht-action:any-link :is(span,strong,small,i),
html body a.v27-button.v34-dark-cta:any-link :is(span,strong,small,i) {
  color:#f7f8f9!important;
  -webkit-text-fill-color:#f7f8f9!important;
}
html body a.v27-button.ht-action:is(:hover,:focus-visible),
html body a.v27-button.v34-dark-cta:is(:hover,:focus-visible) {
  background-color:#30363b!important;
  border-color:var(--ht-qc-accent,#96ff32)!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}
html body a.v27-button.ht-action:is(:hover,:focus-visible) :is(span,strong,small,i),
html body a.v27-button.v34-dark-cta:is(:hover,:focus-visible) :is(span,strong,small,i) {
  color:#fff!important;-webkit-text-fill-color:#fff!important;
}

/* Shared editorial opening across ALL inner pages, including What We Do and Our Work.
   Align the top of the kicker, heading, copy and common left edge. */
@media (min-width:801px) {
  html body main > section.ht-page-hero,
  html body:has(#capabilities) main > section.hero.ht-page-hero,
  html body main > section.v20-work-intro.ht-page-hero {
    height:auto!important;
    min-height:410px!important;
    max-height:none!important;
    padding:0!important;
    display:flex!important;
    align-items:stretch!important;
    overflow:visible!important;
    box-sizing:border-box!important;
    background:linear-gradient(112deg,#08090a 0%,#111418 72%,#0a0b0d 100%)!important;
    border-bottom:1px solid #272b2e!important;
  }
  html body main > section.ht-page-hero > :is(.v9-hero-inner,.hero-inner,.v20-work-wrap),
  html body:has(#capabilities) main > section.hero.ht-page-hero > .hero-inner,
  html body main > section.v20-work-intro.ht-page-hero > .v20-work-wrap {
    width:90%!important;
    max-width:none!important;
    height:auto!important;
    min-height:410px!important;
    max-height:none!important;
    margin:0 auto!important;
    padding:43px 0 39px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:flex-start!important;
    box-sizing:border-box!important;
    overflow:visible!important;
    gap:0!important;
  }
  html body main > section.ht-page-hero .v30-page-kicker {
    display:block!important;
    margin:0 0 13px!important;
    padding:0!important;
    font-size:12px!important;
    line-height:1.45!important;
    color:#bfc2c6!important;
  }
  html body main > section.ht-page-hero h1,
  html body:has(#capabilities) main > section.hero.ht-page-hero h1,
  html body main > section.v20-work-intro.ht-page-hero h1 {
    width:auto!important;
    max-width:min(21ch,100%)!important;
    min-height:2.13em!important;
    height:auto!important;
    font-size:clamp(44px,4.15vw,64px)!important;
    font-weight:800!important;
    line-height:1.065!important;
    letter-spacing:-.055em!important;
    margin:0 0 9px!important;
    padding:0!important;
    text-align:left!important;
    text-wrap:balance!important;
  }
  html body main > section.ht-page-hero :is(.v9-subtitle,.lead) {
    font-size:clamp(19px,1.5vw,23px)!important;
    font-weight:500!important;
    line-height:1.35!important;
    color:#e6e7e8!important;
    margin:0 0 9px!important;
    max-width:70ch!important;
  }
  html body main > section.ht-page-hero :is(.v9-lead,.intro,.v20-work-lead) {
    font-size:clamp(15px,1.1vw,18px)!important;
    line-height:1.55!important;
    color:#bfc3c7!important;
    max-width:74ch!important;
    margin:0!important;
  }
  html body main > section.ht-page-hero .v9-scroll {
    margin:15px 0 0!important;
    align-self:flex-start!important;
  }
  html body main > section.ht-page-hero .v9-feature-number {
    opacity:.5!important;
  }
}
/* Mobile/tablet: identical gutters, type hierarchy and section start.
   Natural content height prevents clipping on long headings and translations. */
@media (max-width:800px) {
  html body main > section.ht-page-hero,
  html body:has(#capabilities) main > section.hero.ht-page-hero,
  html body main > section.v20-work-intro.ht-page-hero {
    min-height:0!important;
    max-height:none!important;
    height:auto!important;
    padding:0!important;
    display:block!important;
    overflow:visible!important;
    background:linear-gradient(112deg,#08090a,#111418)!important;
    border-bottom:1px solid #272b2e!important;
  }
  html body main > section.ht-page-hero > :is(.v9-hero-inner,.hero-inner,.v20-work-wrap),
  html body:has(#capabilities) main > section.hero.ht-page-hero > .hero-inner,
  html body main > section.v20-work-intro.ht-page-hero > .v20-work-wrap {
    width:calc(100% - 40px)!important;
    max-width:none!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    padding:42px 0 44px!important;
    margin:0 auto!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:flex-start!important;
    box-sizing:border-box!important;
    overflow:visible!important;
  }
  html body main > section.ht-page-hero .v30-page-kicker {
    font-size:11px!important;
    line-height:1.5!important;
    margin:0 0 14px!important;
  }
  html body main > section.ht-page-hero h1,
  html body:has(#capabilities) main > section.hero.ht-page-hero h1,
  html body main > section.v20-work-intro.ht-page-hero h1 {
    min-height:0!important;
    max-width:100%!important;
    font-size:clamp(37px,8.2vw,54px)!important;
    line-height:1.08!important;
    letter-spacing:-.05em!important;
    margin:0 0 16px!important;
    text-wrap:balance!important;
  }
  html body main > section.ht-page-hero :is(.v9-subtitle,.lead) {
    font-size:clamp(18px,4.3vw,22px)!important;
    line-height:1.36!important;
    margin:0 0 12px!important;
    color:#e6e7e8!important;
  }
  html body main > section.ht-page-hero :is(.v9-lead,.intro,.v20-work-lead) {
    font-size:clamp(15px,3.8vw,17px)!important;
    line-height:1.56!important;
    margin:0!important;
    color:#bfc3c7!important;
  }
  html body main > section.ht-page-hero .v9-scroll {margin:19px 0 0!important;}
  html body main > section.ht-page-hero .v9-feature-number {opacity:.3!important;}
}
/* What We Do inherited a viewport-height flex basis from the original home hero.
   Break that legacy 90svh dependency so this opening matches every inner page. */
@media (min-width:801px) {
  html body:has(#capabilities) main > section.hero.ht-page-hero {
    height:410px!important;
    min-height:410px!important;
    max-height:none!important;
  }
  html body:has(#capabilities) main > section.hero.ht-page-hero > .hero-inner {
    height:410px!important;
    min-height:410px!important;
    max-height:none!important;
  }
}
/* Budget Estimator had a separate 90%-width section wrapper with a top gap. */
html body:has(#lines) main > section.ht-page-hero {
  width:100%!important;
  max-width:100%!important;
  margin:0!important;
}