/* INTER CONNECT: neural light, human scale, editorial typography.
   #task extends the reference composition with live, responsive typography. */
.cinematic {
  --blue: #458eff;
  --muted: #aab5c8;
  --line: #22324a;
  background: #000;
}
.cinematic .container {
  width: min(1220px, calc(100% - 120px));
}
.cinematic .section {
  border: 0;
  padding: 130px 0;
}
.cinematic h2 {
  font-size: clamp(38px, 4.25vw, 64px);
  line-height: 1.6;
  letter-spacing: 0.035em;
}
.cinematic h3 {
  letter-spacing: 0.025em;
}
.cinematic .eyebrow {
  font-size: 12px;
  letter-spacing: 0.19em;
  color: #8aa9d5;
  margin-bottom: 32px;
}
.cinematic .note {
  font-size: 13px;
  line-height: 1.9;
  color: #9daec4;
}
.cinematic p {
  line-height: 2.15;
}
.cinematic .site-header {
  height: 88px;
  border-bottom: 1px solid #132036;
  padding-inline: clamp(24px, 4.2vw, 80px);
}
.cinematic .brand img {
  width: 185px;
  filter: brightness(1.6);
}
.cinematic .desktop-nav {
  font-size: 14px;
  gap: 32px;
}
.cinematic .login {
  font-size: 14px;
}
.cinematic .button {
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: 0.1em;
  min-width: 250px;
  justify-content: center;
  padding: 19px 32px;
  border: 1px solid #367dd7;
  background: linear-gradient(110deg, #0c315f, #12477f 60%, #1258a0);
  box-shadow:
    inset 0 1px 0 #78b8ff35,
    0 0 34px #0b61c826;
  transition:
    background 0.25s,
    box-shadow 0.25s,
    border-color 0.25s;
}
.cinematic .button:hover {
  background: linear-gradient(110deg, #124574, #1569ae);
  border-color: #88c5ff;
  box-shadow: 0 0 40px #2b83ec45;
}
.cinematic .button.small {
  font-family: var(--sans);
  font-size: 13px;
  min-width: 145px;
  min-height: 42px;
  padding: 12px 20px;
  letter-spacing: 0.03em;
}
.cinematic .text-link {
  font: 14px/1.9 var(--sans);
  letter-spacing: 0.06em;
  border-color: #546e92;
  padding: 4px 0 8px;
}
.sp-only {
  display: none;
}
/* An oversized title spans a field of the original light, rather than a card. */
.cinematic .intro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 130px 0 145px;
  text-align: center;
}
.manifesto {
  position: relative;
  z-index: 2;
}
.cinematic .manifesto h1 {
  font-size: clamp(65px, 7.9vw, 114px);
  line-height: 1.48;
  letter-spacing: 0.09em;
}
.cinematic .manifesto-lead {
  font-size: 28px;
  letter-spacing: 0.06em;
  margin-top: 38px;
  color: #ecf1fb;
}
.cinematic .manifesto-body {
  font-size: 17px;
  margin-top: 24px;
  color: #abbad0;
}
.manifesto .button {
  margin-top: 38px;
}
.manifesto-ribbon {
  position: absolute;
  z-index: 0;
  inset: 10% -10% -8%;
  background: url("../img/designs/taskh-streaka-pc.webp") center bottom/contain no-repeat;
  opacity: 0.3;
  pointer-events: none;
}
.cinematic .disclosure {
  border-top: 1px solid #17243a;
  font-size: 12px;
  padding: 26px 0;
  color: #97a6bd;
}
.cinematic .disclosure .ap_en {
  font-size: 12px;
}
.cinematic .clients {
  width: min(1100px, calc(100% - 120px));
  padding: 50px 0 100px;
  gap: 60px;
}
.cinematic .clients img {
  height: 65px;
}
/* Scene 01: the image and its text share one black canvas. */
.cinematic .conversation {
  padding: 0;
}
.conversation-stage {
  position: relative;
  isolation: isolate;
  min-height: 780px;
  width: min(1800px, 100%);
  margin: auto;
  overflow: hidden;
}
.scene-art {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  pointer-events: none;
}
.scene-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  max-width: 100%;
}
.conversation-stage > .scene-art {
  mask-image: linear-gradient(#000 85%, transparent);
  -webkit-mask-image: linear-gradient(#000 85%, transparent);
}
.conversation-copy {
  margin-left: 52%;
  width: 48%;
  padding: 100px 0 145px;
}
.cinematic .conversation-copy h2 {
  font-size: clamp(36px, 3.75vw, 56px);
}
.cinematic .scene-lead {
  font-size: 20px;
  color: #e2eaf6;
  line-height: 2.1;
  margin-top: 28px;
}
.conversation-copy > p:not(.eyebrow):not(.scene-lead) {
  font-size: 16px;
  color: #aebbd1;
  margin-top: 24px;
  max-width: 470px;
}
.conversation-tags {
  display: flex;
  gap: 32px;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid #274360;
}
.conversation-tags span {
  font-size: 17px;
  color: #e2eaff;
}
.conversation-tags small {
  display: block;
  font: 12px/1.8 var(--sans);
  letter-spacing: 0.16em;
  color: #5c9fed;
  margin-top: 8px;
}
.introduction {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 90px;
  padding: 70px 0 120px;
}
.cinematic .introduction h3 {
  font-size: 42px;
  line-height: 1.75;
}
.introduction-copy {
  padding-top: 25px;
}
.introduction-copy > p {
  font-size: 17px;
  color: #c0ccdd;
}
.publication-flow {
  list-style: none;
  margin: 35px 0 24px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid #2e527d;
}
.publication-flow li {
  position: relative;
  padding-top: 22px;
  font-size: 18px;
}
.publication-flow li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #77b3fc;
  position: absolute;
  top: -3px;
  left: 0;
  box-shadow: 0 0 12px #548ffe;
}
.publication-flow small {
  display: block;
  font: 12px/1.6 var(--sans);
  color: #658ab7;
  letter-spacing: 0.14em;
  margin-bottom: 12px;
}
/* Scene 02: two human presences, one reciprocal connection. */
.cinematic .matching {
  padding: 0 0 120px;
  background: #000;
}
.matching-stage {
  position: relative;
  isolation: isolate;
  min-height: 950px;
  overflow: hidden;
  margin: auto;
  width: min(1800px, 100%);
}
.matching-stage .scene-art {
  top: 90px;
  mask-image: linear-gradient(#000 85%, transparent);
  -webkit-mask-image: linear-gradient(#000 85%, transparent);
}
.matching-stage .scene-art img {
  object-fit: contain;
  object-position: center bottom;
}
.matching-title {
  text-align: center;
  padding-top: 55px;
}
.cinematic .matching-title h2 {
  font-size: clamp(48px, 5.1vw, 76px);
}
.cinematic .matching-title .scene-lead {
  font-size: 17px;
  margin-top: 22px;
  color: #a8b8cf;
}
.connection-caption {
  position: absolute;
  bottom: 65px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 60px;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: #b1c5e3;
}
.connection-caption span {
  border-bottom: 1px solid #2a4e79;
  padding-bottom: 14px;
}
.matching-explanation {
  text-align: center;
  margin: 15px auto 65px;
}
.matching-explanation .eyebrow {
  margin-bottom: 16px;
}
.matching-explanation > p:last-child {
  font-size: 22px;
  color: #d1dced;
}
.cinematic .principles {
  gap: 48px;
}
.cinematic .principles article {
  padding-top: 26px;
  border-image: linear-gradient(90deg, #3d74b1, #182335) 1;
}
.cinematic .principles .index {
  font-size: 12px;
  color: #7999c5;
  margin-bottom: 23px;
}
.cinematic .principles h3 {
  font-size: 22px;
  line-height: 1.7;
}
.cinematic .principles p {
  font-size: 16px;
  color: #a8b6ca;
}
.cinematic .numbers {
  grid-template-columns: repeat(3, 1fr);
  margin-top: 90px;
  border: 0;
  background: linear-gradient(180deg, #06132760, transparent);
}
.cinematic .numbers > div {
  padding: 42px 20px 30px;
}
.cinematic .numbers > div + div {
  border-left: 1px solid #203553;
}
.cinematic .numbers strong {
  font-size: 90px;
  line-height: 1.2;
  color: #74aaff;
  text-shadow: 0 0 40px #2666c52b;
}
.cinematic .numbers small {
  font-size: 28px;
}
.cinematic .numbers p {
  font-size: 14px;
  line-height: 1.9;
  color: #b7c8e0;
  margin-top: 22px;
}
.number-note {
  text-align: center;
}
/* A quiet, legible process after the image-led scenes. */
.cinematic #how {
  position: relative;
  background: linear-gradient(#000, #020710 50%, #000);
}
.how-heading {
  text-align: center;
}
.how-heading > p:last-child {
  font-size: 18px;
  color: #acbbd1;
  margin-top: 25px;
}
.cinematic .steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 55px;
  margin: 70px 0 75px;
}
.cinematic .steps li {
  display: block;
  position: relative;
  border-top: 1px solid #2f537e;
  padding: 22px 0 0;
}
.cinematic .steps li::before {
  content: "";
  position: absolute;
  left: 0;
  top: -3px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #8ac1ff;
  box-shadow: 0 0 15px #378aff;
}
.cinematic .steps .index {
  font: 80px/1.2 var(--serif);
  color: #2760a2;
  margin: 0 0 32px;
}
.step-label {
  display: block;
  font: 12px/1.7 var(--sans);
  letter-spacing: 0.16em;
  color: #89a5cb;
  margin-bottom: 14px;
}
.cinematic .steps h3 {
  font-size: 25px;
  margin-bottom: 17px;
}
.cinematic .steps p {
  font-size: 16px;
  color: #b2bfd2;
}
.cinematic .meeting {
  border-top: 1px solid #263b56;
  padding: 42px 0;
  gap: 90px;
  grid-template-columns: 0.8fr 1.2fr;
}
.cinematic .meeting h3 {
  font-size: 33px;
  line-height: 1.7;
}
.cinematic .meeting p {
  font-size: 16px;
}
.cinematic .meeting .note {
  font-size: 13px;
}
.center-action {
  text-align: center;
  margin-top: 25px;
}
/* The three requested pricing blocks use the same light, type and edge treatment. */
.cinematic #pricing {
  position: relative;
  padding-top: 100px;
}
.cinematic #pricing h2 {
  font-size: clamp(34px, 3.5vw, 50px);
}
.cinematic #pricing .split {
  grid-template-columns: 1.25fr 0.75fr;
  gap: 70px;
}
.cinematic #pricing .section-lead {
  font-size: 17px;
  color: #acbad0;
  margin-top: 30px;
}
.cinematic .price-grid {
  margin-top: 65px;
  gap: 24px;
  grid-template-columns: 1fr 1fr 0.83fr;
}
.cinematic .price-card {
  background: linear-gradient(145deg, #0a152480, #000);
  border: 1px solid #273b57;
  padding: 34px 30px;
  position: relative;
}
.cinematic .price-card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #679dde, transparent);
}
.cinematic .price-card .eyebrow {
  color: #809fc6;
  letter-spacing: 0.14em;
  margin-bottom: 24px;
}
.cinematic .price-card h3 {
  font-size: 22px;
}
.cinematic .price-card .price {
  font-size: 85px;
  margin: 30px 0 15px;
  line-height: 1.3;
}
.cinematic .price small {
  font-size: 23px;
}
.cinematic .price-card ul {
  font-size: 15px;
  line-height: 2.5;
  margin: 28px 0;
}
.cinematic .price-card p {
  font-size: 15px;
}
.cinematic .price-card .note {
  font-size: 13px;
}
.cinematic .price-card .button {
  min-width: 0;
  font-size: 17px;
  padding: 17px 12px;
}
.cinematic .price-card.standard {
  background: radial-gradient(ellipse at 100% 0, #143c6955, transparent 65%), #030912;
  border-color: #385f8e;
}
.cinematic .application {
  background: #000;
  border-color: #1f2c3e;
}
.cinematic .application h3 {
  margin-bottom: 35px;
}
.cinematic .application .text-link {
  margin-top: 30px;
}
.cinematic #information {
  padding-top: 40px;
}
.cinematic #information h2 {
  font-size: clamp(34px, 3.6vw, 52px);
}
.cinematic .info-list article {
  padding: 28px 0;
  border-color: #21334c;
}
.cinematic .info-list article:first-child {
  padding-top: 0;
}
.cinematic .info-list h3 {
  font-size: 22px;
}
.cinematic .info-list p {
  font-size: 16px;
}
.cinematic #faq {
  padding-top: 50px;
  padding-bottom: 130px;
}
.cinematic .faq-layout {
  grid-template-columns: 0.7fr 1.3fr;
  gap: 80px;
}
.cinematic #faq h2 {
  font-size: 42px;
}
.cinematic summary {
  font-size: 18px;
  padding: 27px 0;
}
.cinematic details {
  border-color: #25344b;
}
.cinematic details > p {
  font-size: 16px;
}
/* Scene 03: an open horizon, then the final invitation. */
.cinematic .mission {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  text-align: left;
  padding: 145px 0 100px;
  background: #000;
}
.mission > .scene-art {
  inset: 0 0 auto;
  height: 900px;
  mask-image: linear-gradient(#000 70%, transparent);
  -webkit-mask-image: linear-gradient(#000 70%, transparent);
}
.mission > .scene-art img {
  object-position: center top;
}
.cinematic .mission h2 {
  font-size: clamp(42px, 4.8vw, 70px);
  line-height: 1.7;
}
.cinematic .mission > .container > p:not(.eyebrow) {
  font-size: 18px;
  color: #b8c6d9;
  line-height: 2.25;
  max-width: 760px;
  text-shadow: 0 2px 18px #000;
}
.mission > .container > .text-link {
  margin-top: 35px;
}
.mission-invitation {
  text-align: center;
  padding-top: 235px;
}
.cinematic .mission-invitation h3 {
  font-size: 44px;
  color: #eef4ff;
}
.cinematic .mission-invitation > p:not(.eyebrow):not(.note) {
  font-size: 18px;
  margin-top: 25px;
}
.mission-invitation .button {
  margin-top: 30px;
  min-width: 300px;
}
.cinematic .mission-invitation .note {
  font-size: 13px;
  margin-top: 18px;
}
.mission-invitation > .text-link {
  display: table;
  margin: 25px auto 0;
}
.cinematic .google-data {
  padding: 60px 0;
  border-top: 1px solid #162236;
}
.cinematic .google-data h2 {
  font-size: 24px;
}
.cinematic .gd_card {
  font-size: 13px;
}
.cinematic .gd_en {
  font-size: 12px;
}
.cinematic .site-footer {
  padding: 55px 60px 30px;
  background: #000;
}
.cinematic .site-footer nav {
  font-size: 13px;
}
.cinematic .copyright {
  font-size: 12px;
}
.cinematic .company-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #000;
  padding: 150px 0 190px;
}
.company-hero .scene-art {
  opacity: 0.75;
}
.cinematic .company-hero h1 {
  font-size: clamp(40px, 5vw, 74px);
}
.cinematic .company-hero .section-lead {
  font-size: 19px;
  margin-top: 40px;
}
.cinematic .company-table .co_row {
  font-size: 16px;
  padding: 28px 0;
}
.cinematic .final-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #000;
}
.cinematic .final-cta .scene-art {
  opacity: 0.4;
}
.cinematic .final-cta .button {
  min-width: 280px;
}
@media (min-width: 1800px) {
  .conversation-copy {
    padding-top: 130px;
    padding-bottom: 200px;
  }
  .matching-stage {
    min-height: 1080px;
  }
}
@media (max-width: 1100px) and (min-width: 769px) {
  .cinematic .container {
    width: calc(100% - 80px);
  }
  .cinematic .desktop-nav {
    gap: 18px;
    font-size: 13px;
  }
  .cinematic .header-actions {
    gap: 15px;
  }
  .cinematic .brand img {
    width: 150px;
  }
  .conversation-stage {
    min-height: 740px;
  }
  .conversation-copy {
    padding-top: 65px;
  }
  .conversation-copy h2 {
    font-size: 38px !important;
  }
  .conversation-copy > p {
    font-size: 16px !important;
  }
  .introduction {
    gap: 50px;
  }
  .cinematic .introduction h3 {
    font-size: 35px;
  }
  .matching-stage {
    min-height: 830px;
  }
  .cinematic .steps {
    gap: 28px;
  }
  .cinematic .steps h3 {
    font-size: 21px;
  }
  .cinematic .price-grid {
    grid-template-columns: 1fr 1fr;
  }
  .cinematic .price-grid .application {
    grid-column: 1/-1;
  }
  .cinematic .clients {
    gap: 30px;
  }
}
@media (max-width: 768px) {
  .cinematic .container {
    width: calc(100% - 48px);
  }
  .cinematic .section {
    padding: 78px 0;
  }
  .cinematic .site-header {
    height: 72px;
    padding-inline: 20px;
  }
  .cinematic .brand img {
    width: 132px;
  }
  .cinematic .button.small {
    min-width: 116px;
    font-size: 12px;
    padding: 11px 12px;
    min-height: 40px;
  }
  .cinematic .button {
    font-size: 17px;
    min-height: 58px;
    min-width: 240px;
  }
  .cinematic .eyebrow {
    font-size: 12px;
    letter-spacing: 0.12em;
    margin-bottom: 25px;
  }
  .cinematic h2 {
    font-size: 36px;
    line-height: 1.7;
  }
  .cinematic .note {
    font-size: 13px;
  }
  .sp-only {
    display: block;
  }
  .cinematic .intro {
    padding: 78px 0 86px;
  }
  .cinematic .manifesto h1 {
    font-size: 58px;
    line-height: 1.65;
    letter-spacing: 0.055em;
  }
  .cinematic .manifesto-lead {
    font-size: 20px;
    line-height: 2.05;
    margin-top: 28px;
  }
  .cinematic .manifesto-body {
    font-size: 16px;
    margin-top: 24px;
  }
  .manifesto-ribbon {
    inset: 15% -100% -5%;
    opacity: 0.25;
    background-size: cover;
  }
  .cinematic .disclosure {
    font-size: 12px;
    padding: 25px 0;
  }
  .cinematic .clients {
    width: calc(100% - 48px);
    padding: 32px 0 65px;
    gap: 20px;
    grid-template-columns: repeat(3, 1fr);
  }
  .cinematic .clients img {
    height: 42px;
  }
  .cinematic .conversation {
    padding: 0;
  }
  .conversation-stage {
    min-height: 0;
    overflow: visible;
  }
  .conversation-stage > .scene-art {
    position: relative;
    inset: auto;
    height: 360px;
    z-index: 0;
    mask-image: linear-gradient(#000 70%, transparent);
    -webkit-mask-image: linear-gradient(#000 70%, transparent);
  }
  .conversation-stage > .scene-art img {
    object-position: left center;
  }
  .conversation-copy {
    margin-left: 0;
    width: 100%;
    padding: 0 0 35px;
    position: relative;
    margin-top: -15px;
  }
  .cinematic .conversation-copy h2 {
    font-size: 35px;
  }
  .cinematic .scene-lead {
    font-size: 17px;
    margin-top: 22px;
  }
  .conversation-copy > p:not(.eyebrow):not(.scene-lead) {
    font-size: 16px;
  }
  .conversation-tags {
    gap: 25px;
    margin-top: 27px;
    padding-top: 18px;
  }
  .conversation-tags span {
    font-size: 16px;
  }
  .conversation-tags small {
    font-size: 12px;
  }
  .introduction {
    grid-template-columns: 1fr;
    gap: 25px;
    padding: 45px 0 75px;
  }
  .cinematic .introduction h3 {
    font-size: 34px;
  }
  .introduction-copy {
    padding-top: 0;
  }
  .introduction-copy > p {
    font-size: 16px;
  }
  .introduction-copy > p br {
    display: none;
  }
  .publication-flow {
    margin: 28px 0 22px;
  }
  .publication-flow li {
    font-size: 15px;
    padding-top: 16px;
  }
  .publication-flow small {
    font-size: 12px;
    margin-bottom: 9px;
  }
  .cinematic .matching {
    padding: 0 0 65px;
  }
  .matching-stage {
    min-height: 620px;
  }
  .matching-title {
    padding-top: 30px;
  }
  .cinematic .matching-title h2 {
    font-size: 40px;
  }
  .cinematic .matching-title .scene-lead {
    font-size: 15px;
    margin-top: 20px;
    line-height: 2.1;
  }
  .matching-stage .scene-art {
    top: 270px;
    bottom: 80px;
    mask-image: linear-gradient(#000 75%, transparent);
    -webkit-mask-image: linear-gradient(#000 75%, transparent);
  }
  .matching-stage .scene-art img {
    object-fit: contain;
    object-position: center;
  }
  .connection-caption {
    bottom: 15px;
    gap: 9px;
    flex-direction: column;
    align-items: center;
    font-size: 13px;
  }
  .connection-caption span {
    border: 0;
    padding: 0;
  }
  .matching-explanation {
    margin: 35px auto 40px;
  }
  .matching-explanation > p:last-child {
    font-size: 18px;
  }
  .cinematic .principles {
    gap: 30px;
  }
  .cinematic .principles h3 {
    font-size: 22px;
    margin-bottom: 14px;
  }
  .cinematic .principles p {
    font-size: 16px;
  }
  .cinematic .principles .index {
    margin-bottom: 14px;
  }
  .cinematic .numbers {
    margin-top: 50px;
    grid-template-columns: repeat(3, 1fr);
  }
  .cinematic .numbers > div {
    padding: 28px 5px 20px;
  }
  .cinematic .numbers > div:nth-child(n) {
    border-top: 0;
  }
  .cinematic .numbers > div + div {
    border-left: 1px solid #203553;
  }
  .cinematic .numbers strong {
    font-size: 49px;
  }
  .cinematic .numbers small {
    font-size: 17px;
    margin-left: 3px;
  }
  .cinematic .numbers p {
    font-size: 12px;
    line-height: 1.9;
    margin-top: 14px;
  }
  .number-note {
    text-align: left;
  }
  .number-note br {
    display: none;
  }
  .how-heading {
    text-align: left;
  }
  .how-heading > p:last-child {
    font-size: 16px;
  }
  .cinematic .steps {
    display: block;
    margin: 40px 0 35px;
  }
  .cinematic .steps li {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 20px;
    padding: 30px 0;
  }
  .cinematic .steps .index {
    font-size: 40px;
    margin: 0;
    color: #4b81bc;
  }
  .step-label {
    font-size: 12px;
    letter-spacing: 0.1em;
    margin-bottom: 9px;
  }
  .cinematic .steps h3 {
    font-size: 22px;
    margin-bottom: 12px;
  }
  .cinematic .steps p {
    font-size: 16px;
  }
  .cinematic .meeting {
    grid-template-columns: 1fr;
    gap: 25px;
    padding: 30px 0;
  }
  .cinematic .meeting h3 {
    font-size: 31px;
  }
  .cinematic .meeting p {
    font-size: 16px;
  }
  .cinematic .meeting .note {
    font-size: 13px;
  }
  .center-action .button {
    width: 100%;
  }
  .cinematic #pricing {
    padding-top: 65px;
  }
  .cinematic #pricing .split {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .cinematic #pricing h2 {
    font-size: 32px;
  }
  .cinematic #pricing .section-lead {
    font-size: 16px;
    margin-top: 10px;
  }
  .cinematic .price-grid {
    grid-template-columns: 1fr;
    gap: 26px;
    margin-top: 35px;
  }
  .cinematic .price-card {
    padding: 30px 26px;
  }
  .cinematic .price-card .price {
    font-size: 76px;
    margin-top: 25px;
  }
  .cinematic .price-card h3 {
    font-size: 23px;
  }
  .cinematic .price-card ul {
    font-size: 16px;
  }
  .cinematic .price-card p {
    font-size: 16px;
  }
  .cinematic .price-card .note {
    font-size: 13px;
  }
  .cinematic #information {
    padding-top: 20px;
  }
  .cinematic #information h2 {
    font-size: 35px;
  }
  .cinematic #information .split {
    gap: 42px;
  }
  .cinematic .info-list h3 {
    font-size: 21px;
  }
  .cinematic .info-list p {
    font-size: 16px;
  }
  .cinematic #faq {
    padding: 25px 0 85px;
  }
  .cinematic .faq-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .cinematic #faq h2 {
    font-size: 35px;
  }
  .cinematic summary {
    font-size: 17px;
    padding: 23px 0;
    gap: 12px;
  }
  .cinematic details > p {
    font-size: 16px;
    padding-right: 0;
  }
  .cinematic .mission {
    padding: 70px 0 80px;
  }
  .mission > .scene-art {
    height: 760px;
    inset: 160px 0 auto;
    opacity: 0.85;
    mask-image: linear-gradient(transparent, #000 20%, #000 65%, transparent);
    -webkit-mask-image: linear-gradient(transparent, #000 20%, #000 65%, transparent);
  }
  .mission > .scene-art img {
    object-position: 65% center;
  }
  .cinematic .mission h2 {
    font-size: 35px;
    line-height: 1.8;
  }
  .cinematic .mission > .container > p:not(.eyebrow) {
    font-size: 16px;
    background: linear-gradient(90deg, #000b, transparent);
    line-height: 2.2;
  }
  .cinematic .mission > .container > p br {
    display: none;
  }
  .mission-invitation {
    padding-top: 195px;
  }
  .cinematic .mission-invitation h3 {
    font-size: 30px;
  }
  .cinematic .mission-invitation > p:not(.eyebrow):not(.note) {
    font-size: 16px;
  }
  .mission-invitation .button {
    min-width: 0;
    width: 100%;
    margin-top: 30px;
  }
  .cinematic .mission-invitation .note {
    font-size: 13px;
    line-height: 1.8;
  }
  .cinematic .google-data {
    padding: 45px 0;
  }
  .cinematic .google-data h2 {
    font-size: 21px;
  }
  .cinematic .gd_card {
    font-size: 13px;
  }
  .cinematic .site-footer {
    padding: 40px 24px 25px;
  }
  .cinematic .site-footer nav {
    font-size: 13px;
  }
  .cinematic .copyright {
    font-size: 12px;
    flex-wrap: wrap;
  }
  .cinematic .company-hero {
    padding: 75px 0 180px;
  }
  .cinematic .company-hero h1 {
    font-size: 34px;
  }
  .cinematic .company-hero .scene-art img {
    object-position: 65% center;
  }
  .cinematic .company-hero .section-lead {
    font-size: 16px;
    margin-top: 25px;
  }
  .cinematic .company-table .co_row {
    font-size: 15px;
    gap: 20px;
  }
  .cinematic .final-cta h2 {
    font-size: 34px;
  }
  .cinematic .final-cta .button {
    min-width: 0;
  }
}
@media (max-width: 359px) {
  .cinematic .container {
    width: calc(100% - 36px);
  }
  .cinematic .brand img {
    width: 108px;
  }
  .cinematic .button.small {
    min-width: 106px;
  }
  .cinematic .manifesto h1 {
    font-size: 49px;
  }
  .cinematic .conversation-copy h2,
  .cinematic .mission h2 {
    font-size: 31px;
  }
  .cinematic .matching-title h2 {
    font-size: 36px;
  }
  .cinematic .numbers strong {
    font-size: 42px;
  }
  .cinematic .steps li {
    grid-template-columns: 40px 1fr;
    gap: 14px;
  }
  .cinematic .steps h3 {
    font-size: 20px;
  }
}
@media (min-width: 769px) {
  .conversation-stage > .scene-art img {
    object-fit: contain;
    object-position: left center;
  }
}
/* Reference scene finish: live typography, one responsive semantic composition. */
.cinematic #task.memory-scene {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #000;
  padding: 110px 0 90px;
  min-height: 920px;
}
.memory-art {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.memory-art picture {
  position: absolute;
  display: block;
}
.memory-art img {
  display: block;
  width: 100%;
  height: auto;
}
.memory-head {
  width: 88%;
  right: -18%;
  top: 0;
  transform-origin: 72% 40%;
  animation: memory-breathe 14s ease-in-out infinite;
}
.memory-stream {
  width: 93%;
  left: 24%;
  top: 13%;
  mask-image: linear-gradient(90deg, transparent, #000 40%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%);
}
.memory-stream-back {
  opacity: 0.48;
}
.memory-stream-front {
  opacity: 0.46;
}
.memory-particles {
  width: 94%;
  left: 23%;
  top: 13%;
  opacity: 0.38;
  mask-image: linear-gradient(90deg, transparent, #000 55%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 55%);
}
.memory-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, #000, transparent 16%),
    linear-gradient(90deg, #0008, transparent 65%);
}
.memory-content {
  position: relative;
}
.cinematic .memory-eyebrow {
  color: #6c8cb6;
  letter-spacing: 0.2em;
  font-size: 12px;
  margin-bottom: 35px;
}
.cinematic .memory-heading {
  font-size: clamp(40px, 3.4vw, 56px);
  line-height: 1.55;
  letter-spacing: 0.035em;
  color: #f5f6fa;
  font-weight: 400;
  width: max-content;
  max-width: 100%;
}
.memory-opening {
  display: block;
  font-size: 1.2em;
  margin-bottom: 20px;
}
.memory-statement {
  display: flex;
  align-items: baseline;
  gap: 0.05em;
  white-space: nowrap;
}
.memory-statement em {
  font-size: 1.62em;
  line-height: 1.35;
  letter-spacing: 0;
  color: #328cff;
  background: linear-gradient(180deg, #79b4ff, #0475f8);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.memory-copy {
  margin-top: 40px;
  max-width: 810px;
  width: 68%;
}
.cinematic .memory-copy p {
  font-size: clamp(17px, 1.55vw, 23px);
  line-height: 2.1;
  letter-spacing: 0.06em;
  color: #d4dce7;
  margin: 0;
  text-shadow:
    0 2px 18px #000,
    0 0 5px #000;
}
.cinematic .memory-copy p + p {
  margin-top: 25px;
}
.cinematic .memory-copy .memory-context {
  font-size: clamp(16px, 1.4vw, 21px);
  color: #aab9ce;
  margin-bottom: 30px;
  letter-spacing: 0.08em;
}
.cinematic .memory-copy .memory-key {
  margin-top: 30px;
  font-size: clamp(19px, 1.7vw, 25px);
  color: #e9edf5;
}
.memory-copy em {
  color: #5399ff;
}
.cinematic .memory-copy .memory-close {
  margin-top: 33px;
  line-height: 2.3;
  color: #c3cedf;
}
.memory-mobile-break {
  display: none;
}
.memory-next {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  margin-top: 45px;
  color: #8ca7cb;
  font: 12px/1.9 var(--sans);
  letter-spacing: 0.12em;
  padding: 8px 0;
}
.memory-next span {
  display: inline-block;
  height: 27px;
  width: 1px;
  background: linear-gradient(#4a8ddc, transparent);
}
@keyframes memory-breathe {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.008);
  }
}
@media (min-width: 1800px) {
  .cinematic #task.memory-scene {
    min-height: 1030px;
    padding-top: 140px;
  }
  .memory-head {
    max-width: 1600px;
    right: calc((100vw - 1800px) / 2 - 250px);
  }
  .memory-stream,
  .memory-particles {
    max-width: 1700px;
    left: calc((100vw - 1800px) / 2 + 400px);
  }
}
@media (min-width: 769px) and (max-width: 1100px) {
  .cinematic #task.memory-scene {
    padding-top: 85px;
    min-height: 820px;
  }
  .cinematic .memory-heading {
    font-size: 3.8vw;
  }
  .memory-head {
    top: 45px;
    right: -22%;
    width: 98%;
  }
  .memory-copy {
    width: 75%;
  }
  .cinematic .memory-copy p {
    font-size: 17px;
  }
  .cinematic .memory-copy .memory-context {
    font-size: 16px;
  }
  .memory-stream,
  .memory-particles {
    top: 23%;
  }
}
@media (max-width: 768px) {
  .cinematic #task.memory-scene {
    padding: 48px 0 55px;
    min-height: 0;
  }
  .cinematic .memory-eyebrow {
    font-size: 12px;
    letter-spacing: 0.12em;
    margin-bottom: 25px;
  }
  .cinematic .memory-heading {
    font-size: clamp(28px, 7.2vw, 43px);
    line-height: 1.7;
    letter-spacing: 0.02em;
    width: 100%;
  }
  .memory-opening {
    font-size: 1.16em;
    margin-bottom: 15px;
  }
  .memory-statement {
    display: block;
    white-space: normal;
    max-width: 100%;
    line-height: 1.65;
  }
  .memory-statement > span:first-child {
    display: inline;
  }
  .memory-statement em {
    font-size: 1.5em;
    white-space: nowrap;
  }
  .memory-statement > span:last-child {
    display: block;
    font-size: 0.95em;
  }
  .memory-head {
    width: 158%;
    right: -70%;
    top: 80px;
    opacity: 0.88;
  }
  .memory-stream {
    width: 190%;
    left: -12%;
    top: 120px;
    opacity: 0.35;
  }
  .memory-particles {
    width: 180%;
    left: 0;
    top: 130px;
    opacity: 0.23;
  }
  .memory-art::after {
    background:
      linear-gradient(0deg, #000 3%, #000d 40%, transparent 66%),
      linear-gradient(90deg, #0009, transparent 80%);
  }
  .memory-copy {
    width: 100%;
    max-width: none;
    margin-top: 235px;
  }
  .cinematic .memory-copy p {
    font-size: 16px;
    letter-spacing: 0.035em;
    line-height: 2.15;
  }
  .cinematic .memory-copy p + p {
    margin-top: 23px;
  }
  .cinematic .memory-copy .memory-context {
    font-size: 14px;
    letter-spacing: 0.025em;
    line-height: 2;
    margin-bottom: 25px;
  }
  .memory-context > span {
    display: none;
  }
  .memory-mobile-break {
    display: block;
  }
  .cinematic .memory-copy .memory-key {
    font-size: 18px;
    margin-top: 25px;
    line-height: 2.1;
  }
  .cinematic .memory-copy .memory-close {
    font-size: 16px;
    line-height: 2.2;
    margin-top: 28px;
  }
  .memory-next {
    margin-top: 25px;
  }
  .memory-statement em {
    -webkit-text-fill-color: #4595ff;
    background: none;
  }
}
@media (max-width: 359px) {
  .cinematic .memory-heading {
    font-size: 27px;
  }
  .memory-copy {
    margin-top: 210px;
  }
  .cinematic .memory-copy p {
    font-size: 16px;
  }
  .memory-mobile-break {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .memory-head {
    animation: none;
  }
}