/*
 * QC Devworks cinematic hero system.
 * One visual language, deliberately different compositions by page intent.
 */

:root {
  --qe-cinema-navy: #04152d;
  --qe-cinema-navy-2: #08213f;
  --qe-cinema-blue: #075cff;
  --qe-cinema-ice: #eef4ff;
  --qe-cinema-shift: 0px;
}

.qe-cinema-home,
.qe-cinema-hero {
  isolation: isolate;
  position: relative;
}

.qe-cinema-home {
  background: var(--qe-cinema-navy);
  padding: 0;
}

.qe-home-hero__stage {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  min-height: clamp(670px, 53vw, 790px);
  overflow: hidden;
  position: relative;
}

.qe-cinema-home .qe-home-hero__copy {
  align-self: center;
  color: #fff;
  max-width: 820px;
  padding: 96px clamp(56px, 7vw, 118px) 96px clamp(118px, 11vw, 190px);
  z-index: 3;
}

.qe-cinema-home .qe-home-hero__copy::before {
  background: var(--qe-cinema-blue);
  content: "";
  height: 2px;
  left: clamp(118px, 11vw, 190px);
  position: absolute;
  top: calc(50% - 234px);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .9s .2s var(--qe-ease);
  width: 72px;
}

.qe-cinema-home.is-cinema-visible .qe-home-hero__copy::before {
  transform: scaleX(1);
}

.qe-cinema-home .qe-home-hero h1 {
  color: #fff;
  font-size: clamp(62px, 5.4vw, 84px);
  letter-spacing: -.065em;
  line-height: .98;
}

.qe-cinema-home .qe-home-hero__copy > p {
  color: #c3cfdf;
  font-size: clamp(18px, 1.4vw, 22px);
  max-width: 610px;
}

.qe-cinema-home .qe-button--outline {
  border-color: #7f91a9;
  color: #fff;
}

.qe-cinema-home .qe-button--outline:hover,
.qe-cinema-home .qe-button--outline:focus-visible {
  background: #fff;
  border-color: #fff;
  color: var(--qe-cinema-navy);
}

.qe-cinema-home .qe-home-hero__media {
  border-radius: 0;
  clip-path: polygon(9% 0, 100% 0, 100% 100%, 0 96%);
  height: auto;
  margin: 0;
  min-height: 100%;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

.qe-cinema-home .qe-home-hero__media::after {
  background: linear-gradient(90deg, rgb(4 21 45 / 26%), transparent 30%);
  clip-path: none;
  height: 100%;
  inset: 0;
  width: 100%;
}

.qe-cinema-home .qe-home-hero__media img {
  height: calc(100% + 34px);
  object-fit: cover;
  transform: translate3d(var(--qe-cinema-x, 0px), calc(-17px + var(--qe-cinema-shift)), 0) scale(1.025);
  transition: filter .8s var(--qe-ease), transform .25s linear;
  width: calc(100% + 24px);
}

.qe-cinema-home .qe-home-hero__media figcaption,
.qe-cinema-hero figure figcaption {
  align-items: center;
  bottom: 26px;
  color: #fff;
  display: flex;
  font-size: 11px;
  font-weight: 620;
  gap: 22px;
  justify-content: space-between;
  left: 34px;
  letter-spacing: .07em;
  position: absolute;
  right: 32px;
  text-transform: uppercase;
  z-index: 3;
}

.qe-home-hero__rail {
  align-items: center;
  color: #7588a3;
  display: flex;
  flex-direction: column;
  font-size: 11px;
  gap: 10px;
  left: clamp(30px, 3vw, 54px);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
}

.qe-home-hero__rail span:first-child {
  color: #4f8cff;
}

.qe-home-hero__rail i {
  background: #465a75;
  display: block;
  height: 48px;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .6s var(--qe-ease);
  width: 1px;
}

.qe-cinema-home.is-cinema-visible .qe-home-hero__rail i {
  transform: scaleY(1);
}

.qe-cinema-home.is-cinema-visible .qe-home-hero__rail i:nth-of-type(2) { transition-delay: .12s; }
.qe-cinema-home.is-cinema-visible .qe-home-hero__rail i:nth-of-type(3) { transition-delay: .24s; }

/* Shared inner-page cinema frame. */
.qe-cinema-hero {
  border: 0;
  overflow: hidden;
  padding: 0;
}

.qe-cinema-hero .qe-page-hero__grid {
  align-items: center;
  gap: clamp(48px, 7vw, 112px);
  min-height: clamp(610px, 48vw, 730px);
  padding-bottom: clamp(80px, 7vw, 112px);
  padding-top: clamp(80px, 7vw, 112px);
  position: relative;
}

.qe-cinema-hero .qe-page-hero__copy {
  position: relative;
  z-index: 3;
}

.qe-cinema-hero .qe-page-hero__copy h1 {
  position: relative;
}

.qe-cinema-hero .qe-page-hero__copy h1::after {
  background: var(--qe-cinema-blue);
  bottom: -24px;
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .8s .15s var(--qe-ease);
  width: 82px;
}

.qe-cinema-hero.is-cinema-visible .qe-page-hero__copy h1::after {
  transform: scaleX(1);
}

.qe-cinema-hero .qe-page-hero__copy > p {
  margin-top: 52px;
}

.qe-cinema-hero figure {
  border-radius: 3px;
  height: clamp(430px, 38vw, 590px);
  margin: 0;
  overflow: hidden;
  position: relative;
}

.qe-cinema-hero figure::after {
  background: linear-gradient(180deg, transparent 64%, rgb(4 21 45 / 56%));
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.qe-cinema-hero figure img {
  height: calc(100% + 26px);
  object-fit: cover;
  transform: translate3d(0, calc(-13px + var(--qe-cinema-shift)), 0) scale(1.015);
  transition: transform .25s linear;
  width: 100%;
}

/* Service detail: dark editorial field and diagonal documentary still. */
.qe-cinema-hero--service {
  background: var(--qe-cinema-navy);
  color: #fff;
}

.qe-cinema-hero--service .qe-page-hero__grid {
  grid-template-columns: minmax(0, .92fr) minmax(460px, 1.08fr);
  width: min(1440px, calc(100vw - 64px));
}

.qe-cinema-hero--service .qe-page-hero__copy h1,
.qe-cinema-hero--service .qe-page-hero__copy > p {
  color: #fff;
}

.qe-cinema-hero--service .qe-page-hero__copy > p { color: #bdc9d8; }
.qe-cinema-hero--service .qe-button--outline { border-color: #6e8199; color: #fff; }
.qe-cinema-hero--service figure { clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 94%); }

/* Services index: open typography with a cinematic diagonal image sweep. */
.qe-cinema-hero--services {
  background: #fff;
}

.qe-cinema-hero--services .qe-page-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  padding-bottom: 0;
  width: min(1440px, calc(100vw - 64px));
}

.qe-cinema-hero--services .qe-page-hero__copy {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, .72fr);
  column-gap: clamp(70px, 10vw, 170px);
}

.qe-cinema-hero--services .qe-page-hero__copy h1,
.qe-cinema-hero--services .qe-page-hero__copy > p,
.qe-cinema-hero--services .qe-page-hero__copy > .qe-actions {
  grid-column: 1;
}

.qe-cinema-hero--services .qe-page-hero__copy h1 {
  font-size: clamp(72px, 7.5vw, 112px);
  max-width: 760px;
}

.qe-hero-index {
  align-self: center;
  border-top: 1px solid var(--qe-line);
  grid-column: 2;
  grid-row: 1 / 5;
  list-style: none;
  margin: 0;
  padding: 0;
}

.qe-hero-index li {
  align-items: center;
  border-bottom: 1px solid var(--qe-line);
  display: grid;
  grid-template-columns: 58px 1fr;
  min-height: 70px;
}

.qe-hero-index span {
  color: var(--qe-cinema-blue);
  font-size: 22px;
  font-weight: 650;
}

.qe-hero-index strong {
  font-size: 15px;
  font-weight: 570;
}

.qe-cinema-hero--services figure {
  clip-path: polygon(30% 0, 100% 0, 100% 100%, 5% 100%);
  height: clamp(300px, 30vw, 450px);
  margin-left: 8%;
  width: 92%;
}

/* Work: one dramatic product frame, no fake metric chrome. */
.qe-cinema-hero--work {
  background: var(--qe-cinema-navy);
  color: #fff;
}

.qe-cinema-hero--work .qe-page-hero__grid {
  grid-template-columns: minmax(280px, .62fr) minmax(0, 1.38fr);
  width: min(1440px, calc(100vw - 64px));
}

.qe-cinema-hero--work .qe-page-hero__copy h1,
.qe-cinema-hero--work .qe-page-hero__copy > p { color: #fff; }
.qe-cinema-hero--work .qe-page-hero__copy > p { color: #bdc9d8; }
.qe-cinema-hero--work figure {
  border: 1px solid #45617f;
  box-shadow: 42px 32px 0 -18px #0a294d, var(--qe-shadow);
  height: clamp(420px, 36vw, 560px);
}

/* Process: typographic sequence and a low, panoramic establishing shot. */
.qe-cinema-hero--process {
  background: #fff;
}

.qe-cinema-hero--process .qe-page-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  padding-bottom: 0;
  width: min(1440px, calc(100vw - 64px));
}

.qe-cinema-hero--process .qe-page-hero__copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(430px, .9fr);
  column-gap: clamp(60px, 9vw, 150px);
}

.qe-cinema-hero--process .qe-page-hero__copy h1,
.qe-cinema-hero--process .qe-page-hero__copy > p,
.qe-cinema-hero--process .qe-page-hero__copy > .qe-actions {
  grid-column: 1;
}

.qe-cinema-hero--process .qe-page-hero__copy h1 {
  font-size: clamp(58px, 5.2vw, 76px);
}

.qe-hero-sequence {
  align-self: center;
  grid-column: 2;
  grid-row: 1 / 5;
  list-style: none;
  margin: 0;
  padding: 0;
}

.qe-hero-sequence li {
  align-items: center;
  display: grid;
  grid-template-columns: 140px 1fr;
  min-height: 94px;
}

.qe-hero-sequence span {
  color: var(--qe-cinema-blue);
  font-size: clamp(68px, 6.5vw, 104px);
  font-weight: 650;
  letter-spacing: -.075em;
  line-height: .8;
}

.qe-hero-sequence strong {
  border-left: 2px solid #a7c2f5;
  font-size: 17px;
  font-weight: 600;
  padding: 14px 0 14px 24px;
}

.qe-cinema-hero--process figure {
  clip-path: polygon(23% 0, 100% 0, 100% 100%, 0 100%);
  height: clamp(260px, 27vw, 390px);
  margin-left: 5%;
  width: 95%;
}

/* Place: a genuine establishing shot with one sharp editorial wedge. */
.qe-cinema-hero--place {
  background: var(--qe-cinema-navy);
  min-height: clamp(610px, 47vw, 720px);
}

.qe-cinema-hero--place .qe-page-hero__grid {
  min-height: inherit;
  padding: 0;
  width: 100%;
}

.qe-cinema-hero--place .qe-page-hero__copy {
  align-self: stretch;
  background: linear-gradient(110deg, #04152d 0%, #061d39 78%, transparent 78.2%);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(82px, 8vw, 126px) clamp(78px, 8vw, 132px);
  width: 115%;
  z-index: 3;
}

.qe-cinema-hero--place .qe-page-hero__copy h1,
.qe-cinema-hero--place .qe-page-hero__copy > p { color: #fff; max-width: 650px; }
.qe-cinema-hero--place .qe-page-hero__copy > p { color: #c5d1df; }
.qe-cinema-hero--place .qe-button--outline { border-color: #71849d; color: #fff; }
.qe-cinema-hero--place figure {
  border-radius: 0;
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%;
  z-index: 1;
}
.qe-cinema-hero--place figure img { height: calc(100% + 28px); }
.qe-cinema-hero--place figure figcaption { left: auto; width: 320px; }

/* Insights: magazine masthead with live article rail. */
.qe-cinema-hero--insights {
  background: #fff;
}

.qe-cinema-hero--insights .qe-page-hero__grid {
  grid-template-columns: minmax(0, 1.6fr) minmax(300px, .7fr);
  width: min(1440px, calc(100vw - 64px));
}

.qe-cinema-hero--insights .qe-page-hero__copy {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(280px, .72fr);
  column-gap: clamp(50px, 7vw, 110px);
}

.qe-cinema-hero--insights .qe-page-hero__copy h1,
.qe-cinema-hero--insights .qe-page-hero__copy > p,
.qe-cinema-hero--insights .qe-page-hero__copy > .qe-actions {
  grid-column: 1;
}

.qe-cinema-hero--insights .qe-page-hero__copy h1 {
  font-size: clamp(92px, 10vw, 154px);
  max-width: none;
}

.qe-hero-articles {
  align-self: center;
  border-left: 1px solid #aac5f2;
  grid-column: 2;
  grid-row: 1 / 5;
  padding-left: 26px;
}

.qe-hero-articles a {
  border-bottom: 1px solid #aac5f2;
  display: block;
  padding: 18px 0;
  text-decoration: none;
}

.qe-hero-articles span {
  color: var(--qe-cinema-blue);
  display: block;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .06em;
  margin-bottom: 7px;
  text-transform: uppercase;
}

.qe-hero-articles strong {
  display: block;
  font-size: 16px;
  font-weight: 590;
  line-height: 1.25;
}

.qe-cinema-hero--insights figure { height: clamp(370px, 31vw, 480px); }

/* Contact: the real form becomes the hero, without a floating card. */
.qe-cinema-hero--contact {
  background: radial-gradient(circle at 88% 100%, #0b315d 0, var(--qe-cinema-navy) 42%);
  color: #fff;
}

.qe-cinema-hero--contact .qe-page-hero__grid {
  grid-template-columns: minmax(0, .82fr) minmax(480px, 1.18fr);
  min-height: 720px;
  width: min(1440px, calc(100vw - 64px));
}

.qe-cinema-hero--contact .qe-page-hero__copy h1,
.qe-cinema-hero--contact .qe-page-hero__copy > p { color: #fff; }
.qe-cinema-hero--contact .qe-page-hero__copy h1 { font-size: clamp(56px, 4.5vw, 68px); }
.qe-cinema-hero--contact .qe-page-hero__copy > p { color: #bdc9d8; }
.qe-page-hero__form { position: relative; z-index: 3; }
.qe-page-hero__form .qcdw-contact-form { background: transparent; border: 0; box-shadow: none; margin: 0; max-width: none; padding: 0; }
.qe-page-hero__form .qcdw-contact-form__head { display: none; }
.qe-page-hero__form .qcdw-contact-form form { display: grid; gap: 22px; grid-template-columns: 1fr 1fr; margin: 0; }
.qe-page-hero__form .qcdw-contact-form label { color: #c5d1df; display: grid; font-size: 12px; gap: 7px; }
.qe-page-hero__form .qcdw-contact-form .qcdw-hp {
  height: 1px !important;
  left: -10000px !important;
  overflow: hidden !important;
  position: absolute !important;
  top: auto !important;
  width: 1px !important;
}
.qe-page-hero__form .qcdw-contact-form label:has(textarea),
.qe-page-hero__form .qcdw-contact-form button,
.qe-page-hero__form .qcdw-form-notice { grid-column: 1 / -1; }
.qe-page-hero__form .qcdw-contact-form input,
.qe-page-hero__form .qcdw-contact-form textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid #71849d;
  border-radius: 0;
  color: #fff;
  outline: 0;
  padding: 13px 0;
  width: 100%;
}
.qe-page-hero__form .qcdw-contact-form textarea { min-height: 104px; resize: vertical; }
.qe-page-hero__form .qcdw-contact-form input:focus,
.qe-page-hero__form .qcdw-contact-form textarea:focus { border-color: #7ba9ff; box-shadow: none; }
.qe-page-hero__form .qcdw-contact-form button {
  background: var(--qe-cinema-blue);
  border: 0;
  border-radius: 3px;
  color: #fff;
  cursor: pointer;
  font-weight: 650;
  min-height: 52px;
}

/* Industry and utility variants share the system without repeating service pages. */
.qe-cinema-hero--industry .qe-page-hero__grid { grid-template-columns: minmax(0, .78fr) minmax(520px, 1.22fr); }
.qe-cinema-hero--industry figure { clip-path: polygon(0 5%, 100% 0, 100% 94%, 8% 100%); }
.qe-cinema-hero--utility { background: var(--qe-cinema-ice); }
.qe-cinema-hero--utility figure { clip-path: polygon(6% 0, 100% 7%, 94% 100%, 0 94%); }

/* Initial masks; JS releases them when the hero enters. */
.qe-cinema-hero figure,
.qe-cinema-home .qe-home-hero__media {
  opacity: .01;
  transition: clip-path 1s var(--qe-ease), opacity .65s var(--qe-ease);
}

.qe-cinema-hero.is-cinema-visible figure,
.qe-cinema-home.is-cinema-visible .qe-home-hero__media { opacity: 1; }

@media (max-width: 1080px) {
  .qe-cinema-home .qe-home-hero__copy { padding-left: 92px; padding-right: 52px; }
  .qe-cinema-home .qe-home-hero__copy::before { left: 92px; }
  .qe-cinema-home .qe-home-hero h1 { font-size: clamp(54px, 6vw, 68px); }
  .qe-cinema-hero .qe-page-hero__grid,
  .qe-cinema-hero--service .qe-page-hero__grid,
  .qe-cinema-hero--work .qe-page-hero__grid,
  .qe-cinema-hero--contact .qe-page-hero__grid { gap: 48px; width: min(100% - 48px, 1280px); }
  .qe-cinema-hero--services .qe-page-hero__copy,
  .qe-cinema-hero--process .qe-page-hero__copy { column-gap: 54px; }
  .qe-hero-sequence li { grid-template-columns: 112px 1fr; }
  .qe-cinema-hero--insights .qe-page-hero__grid { grid-template-columns: 1.4fr .7fr; }
  .qe-cinema-hero--insights .qe-page-hero__copy { grid-template-columns: 1fr 280px; }
}

@media (max-width: 820px) {
  .qe-home-hero__stage { grid-template-columns: 1fr; min-height: auto; }
  .qe-cinema-home .qe-home-hero__copy { padding: 72px 40px 64px 64px; }
  .qe-cinema-home .qe-home-hero__copy::before { left: 64px; top: 46px; }
  .qe-home-hero__rail { left: 22px; }
  .qe-cinema-home .qe-home-hero__media { clip-path: polygon(0 9%, 100% 0, 100% 100%, 0 100%); min-height: 520px; }
  .qe-cinema-hero .qe-page-hero__grid,
  .qe-cinema-hero--service .qe-page-hero__grid,
  .qe-cinema-hero--work .qe-page-hero__grid,
  .qe-cinema-hero--industry .qe-page-hero__grid,
  .qe-cinema-hero--insights .qe-page-hero__grid,
  .qe-cinema-hero--contact .qe-page-hero__grid { grid-template-columns: 1fr; min-height: auto; padding-bottom: 72px; padding-top: 72px; }
  .qe-cinema-hero--services .qe-page-hero__copy,
  .qe-cinema-hero--process .qe-page-hero__copy,
  .qe-cinema-hero--insights .qe-page-hero__copy { grid-template-columns: 1fr; }
  .qe-hero-index,
  .qe-hero-sequence,
  .qe-hero-articles { grid-column: 1; grid-row: auto; margin-top: 48px; }
  .qe-cinema-hero--services figure,
  .qe-cinema-hero--process figure { margin-left: 0; width: 100%; }
  .qe-cinema-hero--place .qe-page-hero__grid { padding: 0; width: 100%; }
  .qe-cinema-hero--place .qe-page-hero__copy { background: linear-gradient(180deg, #04152d 0%, rgb(4 21 45 / 92%) 76%, transparent 100%); min-height: 610px; padding: 76px 40px 170px; width: 100%; }
  .qe-cinema-hero--place figure figcaption { width: auto; }
  .qe-page-hero__form .qcdw-contact-form form { grid-template-columns: 1fr; }
  .qe-page-hero__form .qcdw-contact-form label,
  .qe-page-hero__form .qcdw-contact-form button { grid-column: 1; }
}

@media (max-width: 540px) {
  .qe-cinema-home .qe-home-hero__copy { padding: 62px 16px 54px 40px; }
  .qe-cinema-home .qe-home-hero__copy::before { left: 40px; top: 38px; width: 56px; }
  .qe-home-hero__rail { display: none; }
  .qe-cinema-home .qe-home-hero h1 { font-size: clamp(38px, 11.2vw, 45px); }
  .qe-cinema-home .qe-home-hero__copy > p { font-size: 17px; margin-top: 25px; }
  .qe-cinema-home .qe-home-hero__media { min-height: 380px; }
  .qe-cinema-home .qe-home-hero__media figcaption,
  .qe-cinema-hero figure figcaption { bottom: 18px; left: 18px; right: 18px; }
  .qe-cinema-hero .qe-page-hero__grid,
  .qe-cinema-hero--service .qe-page-hero__grid,
  .qe-cinema-hero--work .qe-page-hero__grid,
  .qe-cinema-hero--contact .qe-page-hero__grid { padding-bottom: 56px; padding-top: 56px; width: calc(100% - 32px); }
  .qe-cinema-hero .qe-page-hero__copy h1,
  .qe-cinema-hero--services .qe-page-hero__copy h1,
  .qe-cinema-hero--insights .qe-page-hero__copy h1 { font-size: clamp(42px, 12vw, 52px); }
  .qe-cinema-hero .qe-page-hero__copy > p { font-size: 17px; margin-top: 42px; }
  .qe-cinema-hero figure { height: 88vw; min-height: 320px; }
  .qe-cinema-hero--services figure,
  .qe-cinema-hero--process figure { clip-path: polygon(0 9%, 100% 0, 100% 100%, 0 100%); }
  .qe-hero-index li { min-height: 60px; }
  .qe-hero-sequence li { grid-template-columns: 88px 1fr; min-height: 78px; }
  .qe-hero-sequence span { font-size: 64px; }
  .qe-cinema-hero--place .qe-page-hero__copy { min-height: 560px; padding: 64px 24px 150px; }
  .qe-cinema-hero--place .qe-page-hero__grid { width: 100%; }
  .qe-cinema-hero--contact .qe-page-hero__grid { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .qe-cinema-home .qe-home-hero__media img,
  .qe-cinema-hero figure img { transform: none; transition: none; }
  .qe-cinema-hero figure,
  .qe-cinema-home .qe-home-hero__media { opacity: 1; transition: none; }
}