/* Panorama v1 — four business pages only.
   Natural-ratio photography, calm editorial hierarchy, and in-flow contact panels.
   Authentication, account navigation and the separate chess runtime are untouched. */
#business-readable.panorama-layout {
  background: #f5f3ec;
  --panorama-line: #cbd3c5;
  --panorama-shadow: 0 6px 14px #233e2f05, 0 24px 54px #233e2f0c;
}

/* A shared alignment line and generous, consistent breathing room. */
#business-readable.panorama-layout .top-contact-area {
  width: 90%; max-width: 1360px; margin: 0 auto;
  padding: 24px 0 0; background: transparent;
}
#business-readable.panorama-layout .priority-contact-row { max-width: none; gap: 24px; }
#business-readable.panorama-layout .priority-contact {
  border-radius: 18px; box-shadow: 0 8px 24px #203b3008;
}
#business-readable.panorama-layout .home-first-screen {
  width: 90%; max-width: 1360px; margin: 0 auto;
  padding: 48px 0 72px; background: none;
}
#business-readable.panorama-layout .home-introduction {
  display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr);
  align-items: end; gap: 40px; margin-bottom: 36px;
}
#business-readable.panorama-layout .home-introduction h1 {
  font-size: clamp(38px,3.7vw,54px)!important; line-height: 1.2!important;
}
#business-readable.panorama-layout .home-introduction > p {
  max-width: 43ch; margin: 0; color: #4b5c50;
}
#business-readable.panorama-layout .home-first-screen .field-cards {
  grid-template-columns: repeat(2,minmax(0,1fr)); gap: 32px;
}
#business-readable.panorama-layout .home-first-screen .entry-card {
  display: flex; flex-direction: column; min-width: 0;
  border-width: 1px; border-radius: 22px; box-shadow: var(--panorama-shadow);
}
#business-readable.panorama-layout .home-first-screen .entry-card:hover {
  transform: translateY(-3px); box-shadow: 0 12px 28px #233e2f09, 0 28px 60px #233e2f14;
}
#business-readable.panorama-layout .home-first-screen .entry-card .card-image {
  display: block; position: relative; flex-shrink: 0; width: 100%;
  height: auto; min-height: 0; max-height: none; aspect-ratio: 16 / 9;
  padding: 0; border-radius: 0; background: #e9e6dc;
}
#business-readable.panorama-layout .home-first-screen .entry-card .card-image > img {
  display: block; width: 100%; height: 100%; max-width: 100%; max-height: none;
  margin: 0; padding: 0; object-fit: contain; object-position: center; border-radius: 0;
}
#business-readable.panorama-layout .home-first-screen .entry-card .platform-brand-art {
  background: #071f33; /* The panorama is an actual image, not a cropped background. */
}
#business-readable.panorama-layout .home-first-screen .entry-card .platform-brand-art > .platform-logo {
  position: absolute; left: 20px; bottom: 20px; width: 25%; max-width: 156px;
  height: auto; aspect-ratio: 1145 / 1026; padding: 4px;
  object-fit: contain; border-radius: 12px; background: #fff;
  box-shadow: 0 6px 22px #00132240;
}
#business-readable.panorama-layout .home-first-screen .entry-card .chess-card-art {
  background: #e9dcc1;
}
#business-readable.panorama-layout .home-first-screen .entry-card .chess-card-art > img {
  padding: 22px 0 12px;
}
#business-readable.panorama-layout .home-first-screen .entry-card .number {
  display: block; top: 14px; left: 16px; max-width: calc(100% - 32px);
  padding: 5px 10px; border-radius: 7px; background: #fffdf4f2;
  color: #263f32; font-size: 14px!important; line-height: 1.6!important;
}
#business-readable.panorama-layout .home-first-screen .entry-card .media-caption {
  display: block; left: 16px; bottom: 14px; max-width: calc(100% - 32px);
  font-size: 14px!important;
}
#business-readable.panorama-layout .home-first-screen .entry-card .card-copy {
  display: flex; flex: 1; flex-direction: column; justify-content: flex-start;
  padding: 28px 30px 26px; min-height: 0;
}
#business-readable.panorama-layout .home-first-screen .card-copy > .eyebrow { display: block; }
#business-readable.panorama-layout .home-first-screen .card-copy h3 {
  font-size: 28px!important; line-height: 1.35!important;
}
#business-readable.panorama-layout .home-first-screen .entry-card .entry-link {
  margin-top: auto; padding-top: 18px; border-top: 1px solid #cbd3c5;
}

/* The wording is intentional: the two service promises share a line,
   with the trust promise centered below. Very narrow containers stack whole
   phrases rather than shrinking text or leaving a separator on its own line. */
#business-readable.panorama-layout .tingtingvac-slogan {
  container-type: inline-size; width: 100%; max-width: none!important;
  font-family: 'Be Vietnam Pro',Arial,sans-serif;
  text-align: center; text-wrap: initial!important; overflow-wrap: normal!important;
}
#business-readable.panorama-layout .home-first-screen .entry-card .card-copy > p.tingtingvac-slogan {
  display: flex!important; flex-direction: column; gap: 5px; align-items: center;
  margin: 18px 0 2px; padding: 16px 0; color: #183f55;
  border-block: 1px solid #c5d9e1; font-size: 19px!important; line-height: 1.5!important;
}
#business-readable.panorama-layout .tingtingvac-slogan :is(.slogan-pair,.slogan-line,.slogan-phrase,.slogan-dot) {
  font-size: inherit!important; line-height: 1.5!important; letter-spacing: normal!important;
}
#business-readable.panorama-layout .tingtingvac-slogan .slogan-pair {
  display: flex; flex-wrap: nowrap; align-items: center; justify-content: center;
  width: 100%; column-gap: .3em;
}
#business-readable.panorama-layout .tingtingvac-slogan .slogan-phrase { white-space: nowrap; }
#business-readable.panorama-layout .tingtingvac-slogan .slogan-line { display: block; width: 100%; }
#business-readable.panorama-layout.tech-detail .tingtingvac-slogan-band {
  width: 94%; max-width: 1360px; margin: 0 auto 32px; padding: 26px 24px;
  border: 1px solid #b7ccd6; border-radius: 18px; background: #f7fafb;
  box-shadow: 0 10px 28px #183f5507;
}
#business-readable.panorama-layout.tech-detail .tingtingvac-slogan-band > .tingtingvac-slogan {
  display: flex; flex-direction: column; gap: 6px;
  font-size: clamp(20px,2vw,27px)!important; font-weight: 700;
}
@container (max-width: 350px) {
  #business-readable.panorama-layout .tingtingvac-slogan :is(.slogan-pair,.slogan-line) {
    font-size: 16px!important;
  }
}
@container (max-width: 265px) {
  #business-readable.panorama-layout .tingtingvac-slogan .slogan-pair {
    flex-direction: column; gap: 3px;
  }
  #business-readable.panorama-layout .tingtingvac-slogan .slogan-dot { display: none; }
}

/* Editorial service heroes: heading, complete photograph, then readable copy.
   No text panel or opaque overlay covers the photography. */
#business-readable.panorama-layout :is(.network-hero,.crafted-hero) {
  display: block; width: 94%; max-width: 1360px; min-height: 0;
  margin: 24px auto 32px; padding: 0!important; overflow: hidden;
  border: 1px solid var(--panorama-line); border-radius: 24px;
  box-shadow: var(--panorama-shadow); background: #fffcf5;
}
#business-readable.panorama-layout .network-hero { background: #102e40; border-color: #2d5366; }
#business-readable.panorama-layout .panorama-hero-heading {
  padding: 30px clamp(20px,4vw,60px) 34px; text-align: center;
}
#business-readable.panorama-layout .panorama-hero-heading .breadcrumbs {
  justify-content: center; margin: 0 0 22px;
}
#business-readable.panorama-layout .panorama-hero-heading .eyebrow {
  max-width: none; margin: 0 0 16px;
}
#business-readable.panorama-layout .panorama-hero-heading h1 {
  max-width: none!important; margin: 0 auto; font-size: clamp(36px,4.5vw,64px)!important;
  line-height: 1.2!important; letter-spacing: -1.4px!important; text-shadow: none;
}
#business-readable.panorama-layout .panorama-photo { display: block; margin: 0; width: 100%; }
#business-readable.panorama-layout .panorama-photo > img {
  display: block; width: 100%; height: auto; max-height: none;
  object-fit: contain; object-position: center; filter: none; transform: none;
}
#business-readable.panorama-layout :is(.crafted-hero,.network-hero) .panorama-caption {
  position: static; display: block; width: 100%; max-width: none;
  margin: 0; padding: 12px 24px; background: #eeeadd;
  color: #40503e!important; text-align: center; font-size: 14px!important;
  line-height: 1.6!important; border-bottom: 1px solid #d6d9cd;
}
#business-readable.panorama-layout .network-hero .panorama-caption {
  background: #15374a; color: #e2eef3!important; border-bottom-color: #315366;
}
#business-readable.panorama-layout .service-hero-grid {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(410px,.95fr);
  align-items: center; gap: 44px; padding: 36px 4.5% 40px;
}
#business-readable.panorama-layout .service-hero-copy .division-intro {
  max-width: 54ch!important; margin: 0 0 26px!important;
}
#business-readable.panorama-layout .service-hero-copy :is(.network-actions,.crafted-hero-actions) {
  justify-content: flex-start; gap: 12px;
}
#business-readable.panorama-layout .hero-company-contact {
  display: grid; grid-template-columns: minmax(0,1fr) 148px;
  gap: 20px; max-width: 620px; margin: 0; padding: 22px;
  border: 1px solid #d4ddce; border-radius: 18px; background: #fffdf6;
  box-shadow: 0 8px 26px #193e3310;
}
#business-readable.panorama-layout .hero-qr img { width: 148px; height: 148px; }
#business-readable.panorama-layout .hero-phone { padding-inline: 10px; }
#business-readable.panorama-layout .crafted-hero a:focus-visible,
#business-readable.panorama-layout .hero-company-contact a:focus-visible { outline-color: #075b9b; }
#business-readable.panorama-layout .detail-nav { margin: 0 auto; max-width: 1360px; gap: 12px; }
#business-readable.panorama-layout .detail-nav a { border-radius: 12px; }
#business-readable.panorama-layout .about {
  width: 94%; max-width: 1360px; margin: 0 auto 48px;
  padding: 64px 4.5%; border: 1px solid #ccd8c5; border-radius: 24px;
  background: #eaf0e3;
}
#business-readable.panorama-layout .contact-refined { padding-top: 64px; padding-bottom: 64px; }

@media (min-width: 781px) and (max-width: 1240px) {
  #business-readable.panorama-layout .header { flex-direction: column; align-items: stretch; gap: 16px; }
  #business-readable.panorama-layout .masthead { flex: none; width: 100%; max-width: none; }
  #business-readable.panorama-layout .header nav {
    display: grid; grid-template-columns: repeat(5,minmax(0,1fr));
    width: 100%; max-width: none; gap: 10px; justify-content: stretch;
  }
  #business-readable.panorama-layout .header nav a {
    min-width: 0; min-height: 48px; justify-content: center;
    text-align: center; padding: 6px 2px;
  }
}
@media (max-width: 1100px) {
  #business-readable.panorama-layout .service-hero-grid { grid-template-columns: minmax(0,1fr); gap: 30px; }
  #business-readable.panorama-layout .hero-company-contact { justify-self: center; }
}
@media (max-width: 900px) {
  #business-readable.panorama-layout .home-first-screen .field-cards { grid-template-columns: minmax(0,1fr); gap: 28px; }
  #business-readable.panorama-layout .home-introduction { grid-template-columns: minmax(0,1fr); gap: 20px; }
  #business-readable.panorama-layout .home-introduction > p { max-width: 60ch; }
}
@media (min-width: 601px) {
  #business-readable.panorama-layout .priority-contact-row { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 600px) {
  #business-readable.panorama-layout .top-contact-area { padding-top: 18px; }
  #business-readable.panorama-layout.tech-detail .tingtingvac-slogan-band { padding: 24px 16px; }
  #business-readable.panorama-layout .priority-contact-row { gap: 14px; }
  #business-readable.panorama-layout .home-first-screen { padding-top: 32px; padding-bottom: 48px; }
  #business-readable.panorama-layout .home-introduction { margin-bottom: 26px; }
  #business-readable.panorama-layout .home-introduction h1 { font-size: 36px!important; }
  #business-readable.panorama-layout .home-first-screen .entry-card { border-radius: 18px; }
  #business-readable.panorama-layout .home-first-screen .entry-card .card-copy { padding: 22px 20px; }
  #business-readable.panorama-layout .home-first-screen .card-copy h3 { font-size: 26px!important; }
  #business-readable.panorama-layout .home-first-screen .entry-card .platform-brand-art > .platform-logo {
    left: 12px; bottom: 12px; width: 24%; max-width: 106px; padding: 3px; border-radius: 8px;
  }
  #business-readable.panorama-layout .home-first-screen .entry-card .number {
    top: 10px; left: 12px; max-width: calc(100% - 24px); padding: 4px 8px; font-size: 14px!important;
  }
  #business-readable.panorama-layout .home-first-screen .entry-card .media-caption {
    left: 12px; bottom: 10px; max-width: calc(100% - 24px); padding: 4px 7px; font-size: 14px!important;
  }
  #business-readable.panorama-layout :is(.network-hero,.crafted-hero) { margin-top: 18px; border-radius: 18px; }
  #business-readable.panorama-layout .panorama-hero-heading { padding: 24px 18px 28px; }
  #business-readable.panorama-layout .panorama-hero-heading h1 { font-size: 36px!important; letter-spacing: -1px!important; }
  #business-readable.panorama-layout :is(.crafted-hero,.network-hero) .panorama-caption { padding: 12px 16px; }
  #business-readable.panorama-layout .service-hero-grid { padding: 26px 18px; gap: 28px; }
  #business-readable.panorama-layout .hero-company-contact { grid-template-columns: minmax(0,1fr); gap: 12px; padding: 20px 16px; }
  #business-readable.panorama-layout .hero-qr img { width: 180px; height: 180px; }
  #business-readable.panorama-layout .about { padding: 42px 6%; border-radius: 20px; }
  #business-readable.panorama-layout .contact-refined { padding-top: 44px; padding-bottom: 44px; }
}
@media (max-width: 360px) {
  #business-readable.panorama-layout .home-first-screen .entry-card .card-copy > p.tingtingvac-slogan {
    width: calc(100% + 24px); margin-left: -12px; margin-right: -12px;
  }
  #business-readable.panorama-layout .home-introduction h1,
  #business-readable.panorama-layout .panorama-hero-heading h1 { font-size: 32px!important; }
}
@media (prefers-reduced-motion: reduce) {
  #business-readable.panorama-layout .home-first-screen .entry-card { transition: none; }
  #business-readable.panorama-layout .home-first-screen .entry-card:hover { transform: none; }
}