/*
 * Layout guardrails for the supplied Pencil-to-HTML page exports.
 *
 * These rules are deliberately scoped to .tng-design-export. The previous
 * implementation applied overrides to every flex row in WordPress, causing
 * desktop diagrams, cards, and the primary navigation to wrap unpredictably.
 */

/* The whole site shares one header and footer (template-parts/header/site-header
   and template-parts/footer/site-footer). The exported pages ship their own
   chrome inside the design, so hide theirs and let the shared one through --
   otherwise these three pages would show a different nav from every other page.
   Matching on the "… Footer" suffix covers S12/S13/S15 across the exports. */
body.tng-design-export-page [data-pencil-name="S1 Header"],
body.tng-design-export-page [data-pencil-name$=" Footer"] {
  display: none;
}

body.tng-design-export-page .site-main {
  display: block;
  width: 100%;
}

.tng-design-export {
  --tng-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tng-motion-ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
  width: 100%;
  max-width: 100%;
  overflow: clip;
  background: #f7f9ff;
  scroll-behavior: smooth;
}

.tng-design-export :is(
  [data-pencil-name^="S1"],
  [data-pencil-name^="S2"],
  [data-pencil-name^="S3"],
  [data-pencil-name^="S4"],
  [data-pencil-name^="S5"],
  [data-pencil-name^="S6"],
  [data-pencil-name^="S7"],
  [data-pencil-name^="S8"],
  [data-pencil-name^="S9"]
) > div {
  box-sizing: border-box;
  width: 100%;
  max-width: 1280px;
  margin-right: auto;
  margin-left: auto;
}

/* Prevent fixed-width export fragments from making the viewport scroll. */
.tng-design-export div[class*="w-["] {
  max-width: 100%;
}

/* The browser Tailwind runtime resolves `width: fit-content` incorrectly for
   nested flex items in these exports, making nav links and CTA buttons expand
   to the full row. An automatic width lets the flex item shrink to its actual
   content while retaining the export's `shrink-0` behaviour. */
.tng-design-export .w-fit {
  width: max-content !important;
  max-width: 100%;
}

.tng-design-export [data-tng-link] {
  cursor: pointer;
}

.tng-design-export [data-tng-link]:focus-visible {
  outline: 3px solid rgba(79, 70, 229, 0.36);
  outline-offset: 4px;
  border-radius: 12px;
}

.tng-design-export [data-tng-link][data-pencil-name="Logo"]:focus-visible,
.tng-design-export [data-tng-link][data-pencil-name="Services Link"]:focus-visible {
  border-radius: 16px;
}

.tng-design-export [data-tng-i18n-stable-size] {
  box-sizing: border-box !important;
}

.tng-design-export [data-pencil-name="S1 Header"] > [data-pencil-name="Header"] {
  border: 0 !important;
}

body.tng-design-export-page {
  top: 0 !important;
}

body.tng-design-export-page.tng-translate-loading .tng-design-export {
  cursor: progress;
}

.tng-design-export [data-pencil-name="Lang Selector"] {
  --tng-lang-index: 0;
  position: relative !important;
  isolation: isolate;
  overflow: hidden !important;
  border-radius: 9999px !important;
  background: linear-gradient(180deg, rgba(248, 250, 255, 0.96), rgba(243, 246, 255, 0.9)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(79, 70, 229, 0.12),
    0 10px 24px -18px rgba(44, 55, 103, 0.34) !important;
}

.tng-design-export[data-tng-language="en"] [data-pencil-name="Lang Selector"] {
  --tng-lang-index: 1;
}

.tng-design-export[data-tng-language="ja"] [data-pencil-name="Lang Selector"] {
  --tng-lang-index: 2;
}

.tng-design-export [data-pencil-name="Lang Selector"]::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  z-index: 0;
  width: calc((100% - 8px) / 3);
  border-radius: 9999px;
  background:
    radial-gradient(circle at 30% 15%, rgba(255, 255, 255, 0.42), transparent 34%),
    linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%);
  box-shadow:
    0 12px 28px -14px rgba(79, 70, 229, 0.72),
    inset 0 1px 0 rgba(255, 255, 255, 0.34);
  pointer-events: none;
  transform: translate3d(calc(var(--tng-lang-index) * 100%), 0, 0);
  transition:
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 280ms var(--tng-motion-ease);
}

.tng-design-export [data-pencil-name="Lang Selector"] [data-tng-lang-option] {
  position: relative !important;
  z-index: 1;
  cursor: pointer;
  transition:
    color 240ms var(--tng-motion-ease),
    transform 240ms var(--tng-motion-ease);
}

.tng-design-export [data-pencil-name="Lang Selector"] [data-tng-lang-option]:hover {
  transform: translate3d(0, -0.5px, 0);
}

.tng-design-export [data-pencil-name="Lang Selector"] [data-tng-lang-option]:focus-visible {
  outline: 2px solid rgba(79, 70, 229, 0.34);
  outline-offset: 2px;
}

.tng-design-export [data-pencil-name="Lang Selector"] [data-tng-lang-option] {
  background: transparent !important;
}

.tng-design-export [data-pencil-name="Lang Selector"] [data-tng-lang-option] [data-pencil-name="L"] {
  position: relative;
  z-index: 1;
  color: #667085 !important;
  font-weight: 700 !important;
  transition: color 240ms var(--tng-motion-ease);
}

.tng-design-export [data-pencil-name="Lang Selector"] [data-tng-lang-current] {
  background: transparent !important;
}

.tng-design-export [data-pencil-name="Lang Selector"] [data-tng-lang-current] [data-pencil-name="L"] {
  color: #FFFFFF !important;
}

body.tng-design-export-page {
  opacity: 1;
}

body.tng-design-export-page .tng-fab {
  position: fixed;
  right: clamp(18px, 3vw, 36px);
  bottom: clamp(18px, 3vw, 36px);
  z-index: 2147482999;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 142px;
  min-width: 142px;
  max-width: 142px;
  height: 56px;
  min-height: 56px;
  padding: 0 18px;
  border: 0;
  border-radius: 9999px;
  color: #fff;
  font-family: "Be Vietnam Pro", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  box-shadow:
    0 22px 50px -18px rgba(79, 70, 229, 0.62),
    0 8px 18px -10px rgba(16, 24, 40, 0.28);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 18px, 0) scale(0.94);
  transition:
    opacity 320ms var(--tng-motion-ease-soft),
    visibility 320ms var(--tng-motion-ease-soft),
    transform 360ms var(--tng-motion-ease-soft),
    box-shadow 280ms var(--tng-motion-ease);
}

body.tng-design-export-page .tng-fab.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0) scale(1);
}

body.tng-design-export-page .tng-fab:hover {
  transform: translate3d(0, -4px, 0) scale(1.02);
  box-shadow:
    0 28px 62px -20px rgba(79, 70, 229, 0.72),
    0 10px 20px -10px rgba(16, 24, 40, 0.3);
}

body.tng-design-export-page .tng-fab:active {
  transform: translate3d(0, -1px, 0) scale(0.98);
}

body.tng-design-export-page .tng-fab:focus-visible {
  outline: 3px solid rgba(79, 70, 229, 0.32);
  outline-offset: 5px;
}

body.tng-design-export-page .tng-fab svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

@media (min-width: 1024px) {
  .tng-design-export [data-pencil-name="S1 Header"] > [data-pencil-name="Header"] {
    display: grid !important;
    grid-template-columns: 231px minmax(0, 1fr) 323px !important;
    column-gap: 24px !important;
    align-items: center !important;
    padding: 18px 24px !important;
  }

  .tng-design-export [data-pencil-name="S1 Header"] [data-pencil-name="Logo"] {
    width: 231px !important;
    min-width: 0 !important;
    justify-self: start !important;
  }

  .tng-design-export [data-pencil-name="S1 Header"] [data-pencil-name="Nav"] {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
    gap: 26px !important;
    justify-self: stretch !important;
  }

  .tng-design-export [data-pencil-name="S1 Header"] [data-pencil-name="Nav"] > [data-pencil-name] {
    flex-shrink: 0 !important;
    color: #667085 !important;
    font-weight: 600 !important;
    transition: color 220ms var(--tng-motion-ease), transform 220ms var(--tng-motion-ease);
  }

  .tng-design-export [data-pencil-name="S1 Header"] [data-pencil-name="Nav"] > [data-pencil-name="Services Link"] {
    width: 88px !important;
    flex-basis: 88px !important;
  }

  .tng-design-export [data-pencil-name="S1 Header"] [data-pencil-name="Nav"] > [data-pencil-name="Industries"] {
    width: 72px !important;
    flex-basis: 72px !important;
  }

  .tng-design-export [data-pencil-name="S1 Header"] [data-pencil-name="Nav"] > [data-pencil-name="Case Studies"] {
    width: 48px !important;
    flex-basis: 48px !important;
  }

  .tng-design-export [data-pencil-name="S1 Header"] [data-pencil-name="Nav"] > [data-pencil-name="Process"] {
    width: 64px !important;
    flex-basis: 64px !important;
  }

  .tng-design-export [data-pencil-name="S1 Header"] [data-pencil-name="Nav"] > [data-pencil-name="Company"] {
    width: 58px !important;
    flex-basis: 58px !important;
  }

  .tng-design-export [data-pencil-name="S1 Header"] [data-pencil-name="Nav"] > [data-tng-current] {
    color: #4F46E5 !important;
  }

  .tng-design-export [data-pencil-name="S1 Header"] [data-pencil-name="Nav"] > [data-pencil-name] > [data-pencil-name="Label"],
  .tng-design-export [data-pencil-name="S1 Header"] [data-pencil-name="Nav"] > [data-pencil-name] svg path {
    color: inherit !important;
    fill: currentColor !important;
    font-weight: inherit !important;
  }

  .tng-design-export [data-pencil-name="S1 Header"] [data-pencil-name="Actions"] {
    width: 323px !important;
    min-width: 0 !important;
    justify-content: flex-end !important;
    justify-self: end !important;
  }

  .tng-design-export [data-pencil-name="S1 Header"] [data-pencil-name="Actions"] > [data-pencil-name="CTA"] {
    width: 188px !important;
    flex-basis: 188px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    align-items: center !important;
    overflow: hidden !important;
  }
}

@media (min-width: 1101px) {
  .tng-design-export [data-pencil-name="S1 Header"] [data-pencil-name="Nav"] {
    width: 628px !important;
    flex-basis: 628px !important;
    justify-self: center !important;
  }
}

@media (min-width: 900px) and (max-width: 1100px) {
  .tng-design-export [data-pencil-name="S1 Header"] > [data-pencil-name="Header"] {
    grid-template-columns: 220px minmax(0, 1fr) 188px !important;
    column-gap: 18px !important;
  }

  .tng-design-export [data-pencil-name="S1 Header"] [data-pencil-name="Logo"] {
    width: 220px !important;
  }

  .tng-design-export [data-pencil-name="S1 Header"] [data-pencil-name="Nav"] {
    gap: 16px !important;
  }

  .tng-design-export [data-pencil-name="S1 Header"] [data-pencil-name="Actions"] {
    width: 188px !important;
  }

  .tng-design-export [data-pencil-name="S1 Header"] [data-pencil-name="Lang Selector"] {
    display: none !important;
  }
}

@media (min-width: 900px) and (max-width: 1023px) {
  .tng-design-export [data-pencil-name="S1 Header"] [data-pencil-name="Nav"] {
    display: none !important;
  }
}

@media (min-width: 768px) and (max-width: 899px) {
  .tng-design-export [data-pencil-name="S1 Header"] > [data-pencil-name="Header"] {
    display: grid !important;
    grid-template-columns: 220px 188px !important;
    column-gap: 18px !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 16px 24px !important;
  }

  .tng-design-export [data-pencil-name="S1 Header"] [data-pencil-name="Logo"] {
    width: 220px !important;
    min-width: 0 !important;
  }

  .tng-design-export [data-pencil-name="S1 Header"] [data-pencil-name="Nav"],
  .tng-design-export [data-pencil-name="S1 Header"] [data-pencil-name="Lang Selector"] {
    display: none !important;
  }

  .tng-design-export [data-pencil-name="S1 Header"] [data-pencil-name="Actions"] {
    width: 188px !important;
    justify-content: flex-end !important;
  }

  .tng-design-export [data-pencil-name="S1 Header"] [data-pencil-name="Actions"] > [data-pencil-name="CTA"] {
    width: 188px !important;
    flex-basis: 188px !important;
  }
}

.tng-design-export [data-pencil-name="Technology Tags"],
.tng-design-export [data-pencil-name="Application Tags"],
.tng-design-export [data-pencil-name="Tags"] > div {
  flex-wrap: wrap;
  gap: 8px;
}

/* Keep repeated card groups optically even on the exported homepage. Pencil
   mixed `h-fit` and fixed heights, which made cards in the same row drift. */
.tng-design-export [data-pencil-name="S6 Industries"] [data-pencil-name^="Industry Row"] {
  align-items: stretch !important;
}

.tng-design-export [data-pencil-name="S6 Industries"] [data-pencil-name^="Industry Row"] > div {
  height: 228px !important;
  min-height: 228px !important;
}

.tng-design-export [data-pencil-name="S8 Case Studies"] [data-pencil-name="Case Studies Row"] {
  align-items: stretch !important;
}

.tng-design-export [data-pencil-name="S8 Case Studies"] [data-pencil-name="Case Studies Row"] > [data-pencil-name$=" Card"] {
  height: 540px !important;
}

.tng-design-export [data-pencil-name="S8 Case Studies"] [data-pencil-name="Case Studies Row"] > [data-pencil-name$=" Card"] > [data-pencil-name="Body"] {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 340px !important;
}

.tng-design-export [data-pencil-name="S8 Case Studies"] [data-pencil-name="Body"] > [data-pencil-name="Title"] {
  min-height: 50px;
}

.tng-design-export [data-pencil-name="S8 Case Studies"] [data-pencil-name="Body"] > [data-pencil-name="Description"] {
  min-height: 110px;
}

.tng-design-export [data-pencil-name="S8 Case Studies"] [data-pencil-name="Body"] > [data-pencil-name="Metrics"] {
  align-items: flex-start !important;
}

.tng-design-export [data-pencil-name="S8 Case Studies"] [data-pencil-name="Body"] > [data-pencil-name="Link"] {
  margin-top: auto;
}

.tng-design-export [data-pencil-name="S9 Technology Stack"] [data-pencil-name="Explorer Body"] {
  align-items: stretch !important;
  gap: 12px !important;
  padding: 16px !important;
}

.tng-design-export [data-pencil-name="S9 Technology Stack"] [data-pencil-name="Category Nav"] {
  flex: 0 0 336px !important;
  height: auto !important;
  min-height: 100% !important;
}

.tng-design-export [data-pencil-name="S9 Technology Stack"] [data-tech-content] {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 32px !important;
}

.tng-design-export :is(
  [data-pencil-name^="Type Row"],
  [data-pencil-name^="Capability Row"],
  [data-pencil-name^="Technology Row"],
  [data-pencil-name^="Value Row"],
  [data-pencil-name^="Role Row"],
  [data-pencil-name^="Gallery Row"],
  [data-pencil-name="Mission Vision Cards"],
  [data-pencil-name="Statistic Cards"],
  [data-pencil-name="Leadership Cards"],
  [data-pencil-name="Certification Placeholder Grid"],
  [data-pencil-name="Soft Technical Grid"],
  [data-pencil-name="FAQ Accordion"],
  [data-pencil-name="Culture Points"]
) {
  align-items: stretch !important;
}

.tng-design-export :is(
  [data-pencil-name^="Type Row"],
  [data-pencil-name^="Capability Row"],
  [data-pencil-name^="Technology Row"],
  [data-pencil-name^="Value Row"],
  [data-pencil-name^="Role Row"],
  [data-pencil-name^="Gallery Row"],
  [data-pencil-name="Mission Vision Cards"],
  [data-pencil-name="Statistic Cards"],
  [data-pencil-name="Leadership Cards"],
  [data-pencil-name="Certification Placeholder Grid"],
  [data-pencil-name="Soft Technical Grid"],
  [data-pencil-name="FAQ Accordion"],
  [data-pencil-name="Culture Points"]
) > div {
  height: auto !important;
  min-width: 0 !important;
}

.tng-design-export :is(
  [data-pencil-name^="Type Row"],
  [data-pencil-name^="Capability Row"],
  [data-pencil-name^="Technology Row"],
  [data-pencil-name^="Value Row"],
  [data-pencil-name^="Role Row"],
  [data-pencil-name^="Gallery Row"],
  [data-pencil-name="Mission Vision Cards"],
  [data-pencil-name="Statistic Cards"],
  [data-pencil-name="Leadership Cards"],
  [data-pencil-name="Certification Placeholder Grid"]
) > div {
  flex: 1 1 0 !important;
}

.tng-design-export [data-pencil-name^="Technology Row"] :is(
  [data-pencil-name="Tags"],
  [data-pencil-name="Technology Tags"],
  [data-pencil-name="Use Case Tags"],
  [data-pencil-name="Application Tags"]
) {
  min-width: 0 !important;
  flex-wrap: wrap !important;
}

.tng-design-export [data-pencil-name^="Technology Row"] [data-pencil-name="Tag Text"] {
  white-space: normal !important;
}

.tng-design-export :is(
  [data-pencil-name^="Type Row"],
  [data-pencil-name="Engagement Cards"],
  [data-pencil-name="Mission Vision Cards"]
) > div {
  display: flex !important;
  flex-direction: column !important;
}

.tng-design-export :is(
  [data-pencil-name^="Type Row"],
  [data-pencil-name="Engagement Cards"],
  [data-pencil-name="Mission Vision Cards"]
) [data-pencil-name*="CTA"] {
  margin-top: auto;
}

.tng-design-export.tng-motion-ready [data-tng-reveal] {
  opacity: 0;
  transform: translate3d(0, 28px, 0) scale(0.985);
  transition:
    opacity 760ms var(--tng-motion-ease-soft),
    transform 860ms var(--tng-motion-ease-soft);
  transition-delay: var(--tng-reveal-delay, 0ms);
  will-change: opacity, transform;
}

.tng-design-export.tng-motion-ready [data-tng-reveal].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  will-change: auto;
}

.tng-design-export [data-tech-target],
.tng-design-export [data-tech-target] [data-pencil-name="Icon Box"],
.tng-design-export [data-tech-target] svg path {
  transition:
    transform 420ms var(--tng-motion-ease),
    background-color 420ms var(--tng-motion-ease),
    box-shadow 420ms var(--tng-motion-ease),
    fill 420ms var(--tng-motion-ease),
    color 420ms var(--tng-motion-ease);
}

.tng-design-export [data-tech-content] {
  transition:
    opacity 520ms var(--tng-motion-ease-soft),
    transform 560ms var(--tng-motion-ease-soft);
}

.tng-design-export [data-tech-content].tng-tech-enter {
  animation: tng-panel-enter 560ms var(--tng-motion-ease-soft) both;
}

.tng-design-export [data-pencil-name^="Glow"] {
  animation: tng-float-glow 7200ms var(--tng-motion-ease-soft) infinite alternate;
}

.tng-design-export [data-pencil-name="Glow B"] {
  animation-duration: 8800ms;
  animation-direction: alternate-reverse;
}

@media (hover: hover) and (pointer: fine) {
  .tng-design-export :is(
    [data-pencil-name^="Service Row"],
    [data-pencil-name^="Industry Row"],
    [data-pencil-name="Case Studies Row"],
    [data-pencil-name^="Project Row"],
    [data-pencil-name="Engagement Cards"],
    [data-pencil-name^="Type Row"],
    [data-pencil-name^="Capability Row"],
    [data-pencil-name^="Technology Row"],
    [data-pencil-name^="Value Row"],
    [data-pencil-name^="Role Row"],
    [data-pencil-name="Mission Vision Cards"],
    [data-pencil-name="Statistic Cards"],
    [data-pencil-name="Leadership Cards"],
    [data-pencil-name="Certification Placeholder Grid"],
    [data-pencil-name="Soft Technical Grid"],
    [data-pencil-name="FAQ Accordion"],
    [data-pencil-name="Culture Points"]
  ) > div {
    transition:
      transform 460ms var(--tng-motion-ease),
      box-shadow 460ms var(--tng-motion-ease),
      border-color 460ms var(--tng-motion-ease);
  }

  .tng-design-export :is(
    [data-pencil-name^="Service Row"],
    [data-pencil-name^="Industry Row"],
    [data-pencil-name="Case Studies Row"],
    [data-pencil-name^="Project Row"],
    [data-pencil-name="Engagement Cards"],
    [data-pencil-name^="Type Row"],
    [data-pencil-name^="Capability Row"],
    [data-pencil-name^="Technology Row"],
    [data-pencil-name^="Value Row"],
    [data-pencil-name^="Role Row"],
    [data-pencil-name="Mission Vision Cards"],
    [data-pencil-name="Statistic Cards"],
    [data-pencil-name="Leadership Cards"],
    [data-pencil-name="Certification Placeholder Grid"],
    [data-pencil-name="Soft Technical Grid"],
    [data-pencil-name="FAQ Accordion"],
    [data-pencil-name="Culture Points"]
  ) > div:hover {
    transform: translate3d(0, -6px, 0);
    box-shadow: 0 24px 56px -22px rgba(79, 70, 229, 0.34) !important;
  }

  .tng-design-export :is(
    [data-pencil-name="CTA"],
    [data-pencil-name="Start Your Project"],
    [data-pencil-name="Start Project"],
    [data-pencil-name="Card CTA"],
    [data-pencil-name="View All Button"],
    [data-pencil-name="Send Requirements"],
    [data-pencil-name="Book Consultation"]
  ) {
    transition:
      transform 360ms var(--tng-motion-ease),
      box-shadow 360ms var(--tng-motion-ease),
      filter 360ms var(--tng-motion-ease);
  }

  .tng-design-export :is(
    [data-pencil-name="CTA"],
    [data-pencil-name="Start Your Project"],
    [data-pencil-name="Start Project"],
    [data-pencil-name="Card CTA"],
    [data-pencil-name="View All Button"],
    [data-pencil-name="Send Requirements"],
    [data-pencil-name="Book Consultation"]
  ):hover {
    transform: translate3d(0, -2px, 0);
    filter: saturate(1.05);
  }

  .tng-design-export :is(
    [data-pencil-name="CTA"],
    [data-pencil-name="Start Your Project"],
    [data-pencil-name="Start Project"],
    [data-pencil-name="Card CTA"],
    [data-pencil-name="View All Button"],
    [data-pencil-name="Send Requirements"],
    [data-pencil-name="Book Consultation"]
  ):active {
    transform: translate3d(0, 0, 0) scale(0.985);
  }

  .tng-design-export [data-tech-target]:hover {
    transform: translate3d(4px, 0, 0);
  }

  .tng-design-export [data-pencil-name="Technology Tags"] > div,
  .tng-design-export [data-pencil-name="Use Case Tags"] > div,
  .tng-design-export [data-pencil-name="Application Tags"] > div {
    transition:
      transform 340ms var(--tng-motion-ease),
      box-shadow 340ms var(--tng-motion-ease),
      border-color 340ms var(--tng-motion-ease);
  }

  .tng-design-export [data-pencil-name="Technology Tags"] > div:hover,
  .tng-design-export [data-pencil-name="Use Case Tags"] > div:hover,
  .tng-design-export [data-pencil-name="Application Tags"] > div:hover {
    transform: translate3d(0, -3px, 0);
    box-shadow: 0 12px 26px -16px rgba(79, 70, 229, 0.38) !important;
  }
}

@keyframes tng-panel-enter {
  from {
    opacity: 0;
    transform: translate3d(14px, 10px, 0) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes tng-float-glow {
  from {
    transform: translate3d(-8px, -6px, 0) scale(1);
  }

  to {
    transform: translate3d(10px, 8px, 0) scale(1.05);
  }
}

@media (max-width: 1280px) {
  .tng-design-export :is(
    [data-pencil-name^="S1"],
    [data-pencil-name^="S2"],
    [data-pencil-name^="S3"],
    [data-pencil-name^="S4"],
    [data-pencil-name^="S5"],
    [data-pencil-name^="S6"],
    [data-pencil-name^="S7"],
    [data-pencil-name^="S8"],
    [data-pencil-name^="S9"]
  ) > div {
    padding-right: 24px;
    padding-left: 24px;
  }

  .tng-design-export [data-pencil-name="S1 Header"] > div {
    padding-top: 18px;
    padding-bottom: 18px;
  }
}

@media (min-width: 1281px) {
  /* Every exported section was designed on a 1280px content canvas. Keeping
     that canvas centered fixes the left-edge drift across the entire page. */
  .tng-design-export :is(
    [data-pencil-name^="S1"],
    [data-pencil-name^="S2"],
    [data-pencil-name^="S3"],
    [data-pencil-name^="S4"],
    [data-pencil-name^="S5"],
    [data-pencil-name^="S6"],
    [data-pencil-name^="S7"],
    [data-pencil-name^="S8"],
    [data-pencil-name^="S9"]
  ) > div {
    width: 1280px !important;
    max-width: calc(100% - 112px) !important;
  }
}

@media (max-width: 767px) {
  body.tng-design-export-page .tng-fab {
    right: 16px;
    bottom: 16px;
    width: 56px;
    height: 56px;
    padding: 0;
  }

  body.tng-design-export-page .tng-fab__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .tng-design-export :is(
    [data-pencil-name^="S1"],
    [data-pencil-name^="S2"],
    [data-pencil-name^="S3"],
    [data-pencil-name^="S4"],
    [data-pencil-name^="S5"],
    [data-pencil-name^="S6"],
    [data-pencil-name^="S7"],
    [data-pencil-name^="S8"],
    [data-pencil-name^="S9"]
  ) > div {
    padding-right: 16px;
    padding-left: 16px;
  }

  /* Keep one compact header rather than a wrapped desktop navigation. */
  .tng-design-export [data-pencil-name="S1 Header"] [data-pencil-name="Nav"],
  .tng-design-export [data-pencil-name="S1 Header"] [data-pencil-name="Lang Selector"] {
    display: none !important;
  }

  .tng-design-export [data-pencil-name="S1 Header"] [data-pencil-name="Header"] {
    flex-wrap: nowrap !important;
    gap: 12px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  .tng-design-export [data-pencil-name="S1 Header"] [data-pencil-name="Wordmark"] {
    font-size: 18px !important;
  }

  .tng-design-export [data-pencil-name="S1 Header"] [data-pencil-name="CTA"] {
    padding: 10px 12px !important;
  }

  .tng-design-export [data-pencil-name="S1 Header"] [data-pencil-name="CTA"] [data-pencil-name="Label"] {
    font-size: 12px !important;
  }

  /* The exported page is desktop-first. Collapse structural rows only below
     the mobile breakpoint, never at tablet widths. */
  .tng-design-export div[class*="flex-row"] {
    flex-wrap: wrap !important;
  }

  .tng-design-export [data-pencil-name="S2 Hero"] [data-pencil-name="Hero Content"],
  .tng-design-export [data-pencil-name="S2 Hero - Website Design"] [data-pencil-name="Hero Content"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .tng-design-export [class*="white-space:nowrap"] {
    white-space: normal !important;
  }

  .tng-design-export [class*="text-[50px]"],
  .tng-design-export [class*="text-[48px]"],
  .tng-design-export [class*="text-[46px]"] {
    font-size: clamp(2rem, 9vw, 3rem) !important;
    line-height: 1.15 !important;
  }

  .tng-design-export [data-pencil-name="CTA Row"],
  .tng-design-export [data-pencil-name="Trust Microcopy"] {
    width: 100% !important;
  }

  .tng-design-export [data-pencil-name="S6 Industries"] [data-pencil-name^="Industry Row"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .tng-design-export [data-pencil-name="S6 Industries"] [data-pencil-name^="Industry Row"] > div {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .tng-design-export [data-pencil-name="S8 Case Studies"] [data-pencil-name="Case Studies Row"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .tng-design-export [data-pencil-name="S8 Case Studies"] [data-pencil-name="Case Studies Row"] > [data-pencil-name$=" Card"] {
    width: 100% !important;
    height: auto !important;
  }

  .tng-design-export [data-pencil-name="S8 Case Studies"] [data-pencil-name="Case Studies Row"] > [data-pencil-name$=" Card"] > [data-pencil-name="Body"],
  .tng-design-export [data-pencil-name="S8 Case Studies"] [data-pencil-name="Body"] > [data-pencil-name="Title"],
  .tng-design-export [data-pencil-name="S8 Case Studies"] [data-pencil-name="Body"] > [data-pencil-name="Description"] {
    min-height: 0 !important;
  }

  .tng-design-export :is(
    [data-pencil-name^="Type Row"],
    [data-pencil-name^="Capability Row"],
    [data-pencil-name^="Technology Row"],
    [data-pencil-name^="Value Row"],
    [data-pencil-name^="Role Row"],
    [data-pencil-name^="Gallery Row"],
    [data-pencil-name="Mission Vision Cards"],
    [data-pencil-name="Statistic Cards"],
    [data-pencil-name="Leadership Cards"],
    [data-pencil-name="Certification Placeholder Grid"],
    [data-pencil-name="Soft Technical Grid"],
    [data-pencil-name="FAQ Accordion"],
    [data-pencil-name="Culture Points"]
  ) {
    flex-direction: column !important;
  }

  .tng-design-export :is(
    [data-pencil-name^="Type Row"],
    [data-pencil-name^="Capability Row"],
    [data-pencil-name^="Technology Row"],
    [data-pencil-name^="Value Row"],
    [data-pencil-name^="Role Row"],
    [data-pencil-name^="Gallery Row"],
    [data-pencil-name="Mission Vision Cards"],
    [data-pencil-name="Statistic Cards"],
    [data-pencil-name="Leadership Cards"],
    [data-pencil-name="Certification Placeholder Grid"],
    [data-pencil-name="Soft Technical Grid"],
    [data-pencil-name="FAQ Accordion"],
    [data-pencil-name="Culture Points"]
  ) > div {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .tng-design-export [data-pencil-name="S9 Technology Stack"] [data-pencil-name="Explorer Body"] {
    height: auto !important;
    flex-direction: column !important;
    gap: 16px !important;
    padding: 16px !important;
  }

  .tng-design-export [data-pencil-name="S9 Technology Stack"] [data-pencil-name="Category Nav"],
  .tng-design-export [data-pencil-name="S9 Technology Stack"] [data-tech-content] {
    width: 100% !important;
    flex-basis: auto !important;
    min-height: 0 !important;
  }

  .tng-design-export [data-pencil-name="S9 Technology Stack"] [data-tech-content] {
    height: auto !important;
    padding: 20px !important;
  }

}

/* --------------------------------------------------------------------------
   Structural, name-agnostic responsive card grids.

   The Pencil exports lay every card grid out as a fixed desktop flex-row,
   frequently with hard-coded `w-[NNNpx]` children. The original mobile rules
   listed each grid by `data-pencil-name`, which silently missed several real
   grids (Service Row, Project Row, Hero Grid, the process Top/Bottom columns,
   Engagement Cards, ...) so they stayed multi-column and clipped on phones.

   These rules match card grids by the export's naming convention instead
   (anything ending in "Row"/"Cards"/"Grid", plus the known generic groups),
   so newly added sections that follow the same convention adapt for free.
   -------------------------------------------------------------------------- */

/* Tablet and below: allow fixed-width card rows to wrap and share the width
   evenly instead of overflowing a rigid desktop row. */
@media (max-width: 1024px) {
  .tng-design-export :is(
    [data-pencil-name$=" Row"],
    [data-pencil-name*=" Row "],
    [data-pencil-name$=" Cards"],
    [data-pencil-name$=" Grid"],
    [data-pencil-name="Grid"],
    [data-pencil-name="Engagement Cards"],
    [data-pencil-name="Hero Grid"],
    [data-pencil-name*="Featured"],
    [data-pencil-name="Why Layout"],
    [data-pencil-name="Why Stats"],
    [data-pencil-name="Process Timeline"]
  ) {
    flex-wrap: wrap !important;
  }

  .tng-design-export :is(
    [data-pencil-name$=" Row"],
    [data-pencil-name*=" Row "],
    [data-pencil-name$=" Cards"],
    [data-pencil-name$=" Grid"],
    [data-pencil-name="Grid"],
    [data-pencil-name="Engagement Cards"],
    [data-pencil-name="Hero Grid"],
    [data-pencil-name*="Featured"],
    [data-pencil-name="Why Layout"],
    [data-pencil-name="Why Stats"],
    [data-pencil-name="Process Timeline"]
  ) > div {
    flex: 1 1 260px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* Phones: collapse every card grid to a single column so cards get the full
   viewport width instead of three ~220px columns crammed into ~390px. */
@media (max-width: 767px) {
  .tng-design-export :is(
    [data-pencil-name$=" Row"],
    [data-pencil-name*=" Row "],
    [data-pencil-name$=" Cards"],
    [data-pencil-name$=" Grid"],
    [data-pencil-name="Grid"],
    [data-pencil-name="Engagement Cards"],
    [data-pencil-name="Hero Grid"],
    [data-pencil-name*="Featured"],
    [data-pencil-name="Why Layout"],
    [data-pencil-name="Why Stats"],
    [data-pencil-name="Process Timeline"],
    [data-pencil-name="Top"],
    [data-pencil-name="Bottom"]
  ) {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
  }

  .tng-design-export :is(
    [data-pencil-name$=" Row"],
    [data-pencil-name*=" Row "],
    [data-pencil-name$=" Cards"],
    [data-pencil-name$=" Grid"],
    [data-pencil-name="Grid"],
    [data-pencil-name="Engagement Cards"],
    [data-pencil-name="Hero Grid"],
    [data-pencil-name*="Featured"],
    [data-pencil-name="Why Layout"],
    [data-pencil-name="Why Stats"],
    [data-pencil-name="Process Timeline"],
    [data-pencil-name="Top"],
    [data-pencil-name="Bottom"]
  ) > div {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
  }

  /* Hero node-graph ("TNG SOFT / Technology Delivery Core" with its
     orbiting cards) is a fixed 600x560 canvas with absolutely-positioned
     children. Forcing it to 100% width would clip those children, so instead
     keep the canvas intact and scale the whole component down to fit the
     phone. `zoom` reflows the layout box (unlike `transform`), so the shrunk
     graph centres and takes only its scaled space. */
  .tng-design-export [data-pencil-name="Hero Grid"] [data-pencil-name="Hero Visual - TNG Collaboration Ecosystem"] {
    width: 600px !important;
    max-width: 600px !important;
    zoom: 0.55;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Home hero (S2 Hero): the text column "Hero Left" is a fixed ~718px block
     (with an equally-wide headline/subhead), so on phones the heading and
     paragraph were cut off on the right edge. Constrain the text column and
     its contents to the viewport so the copy wraps instead of clipping. */
  .tng-design-export [data-pencil-name="S2 Hero"] [data-pencil-name="Hero Left"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .tng-design-export [data-pencil-name="S2 Hero"] [data-pencil-name="Hero Left"] * {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  /* The home hero dashboard mock-up ("Hero Visual") is a fixed ~520px canvas
     with absolutely-positioned children, so — like the node-graph — scale it
     down to fit rather than forcing its width (which would clip the children). */
  .tng-design-export [data-pencil-name="S2 Hero"] [data-pencil-name="Hero Visual"] {
    zoom: 0.62;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* "Why Choose Us" dashboard illustration ("Why Visual") is a 487px canvas
     whose absolutely-positioned dashboard card overflows and clips a corner on
     phones. Keep the canvas intact and scale it to fit (the grid rule would
     otherwise force it to 100% width and clip the absolute children). */
  .tng-design-export [data-pencil-name="Why Layout"] [data-pencil-name="Why Visual"] {
    width: 487px !important;
    max-width: 487px !important;
    zoom: 0.6;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Desktop-canvas composites — timelines, featured showcases, decorative
   illustration diagrams, the logo strip and the CTA banner — are laid out on a
   fixed >=1025px canvas (often with absolutely-positioned children at hard-coded
   coordinates) and therefore break on tablets too, not just phones. Their fixes
   run through the whole sub-desktop range (iPad Air is 820px). */
@media (max-width: 1024px) {
  /* Company Journey timeline: the milestone cards are absolutely positioned
     on a fixed desktop canvas (hard-coded left/top), so they clip off-screen
     on phones. Reflow the absolute children into a normal vertical stack. */
  .tng-design-export :is([data-pencil-name="Company Timeline"], [data-pencil-name="Desktop Timeline"]) {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    height: auto !important;
    width: 100% !important;
    overflow: visible !important;
  }

  .tng-design-export :is([data-pencil-name="Company Timeline"], [data-pencil-name="Desktop Timeline"]) > * {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    inset: auto !important;
    transform: none !important;
  }

  /* The decorative wavy connector line only makes sense on the horizontal
     desktop canvas; hide it once the milestones stack. */
  .tng-design-export :is([data-pencil-name="Company Timeline"], [data-pencil-name="Desktop Timeline"]) > [data-pencil-name="Timeline Line"] {
    display: none !important;
  }

  /* Featured showcase blocks (company leader, featured project, website
     mockups) are content laid out with nested absolute positioning on a
     desktop canvas. Deep-reflow every descendant to a normal vertical flow so
     the content stays readable on phones instead of spilling off-screen. */
  .tng-design-export [data-pencil-name*="Featured"],
  .tng-design-export [data-pencil-name*="Featured"] * {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    max-width: 100% !important;
  }

  .tng-design-export [data-pencil-name*="Featured"],
  .tng-design-export [data-pencil-name*="Featured"] [class*="flex-row"] {
    flex-direction: column !important;
    align-items: stretch !important;
    height: auto !important;
  }

  /* Purely-decorative desktop illustration canvases (abstract capability /
     collaboration diagrams built from dozens of absolutely-positioned chips at
     hard-coded coordinates). They convey no unique content beyond the adjacent
     copy and cannot reflow cleanly, so hide them on phones. */
  .tng-design-export [data-pencil-name="Team Capability Visual"],
  .tng-design-export [data-pencil-name="Client Collaboration Visual"],
  .tng-design-export [data-pencil-name="Overview Visual"] {
    display: none !important;
  }

  /* "Trusted by" client-logo strip: a single desktop row of six ~68px
     placeholders with a fixed 72px height. On phones each box is too narrow
     for the "[Logo đối tác]" label (it wrapped one letter per line) and the
     fixed height made it spill over the markets block below. Let the boxes
     wrap into a readable grid and grow to fit their label. */
  .tng-design-export [data-pencil-name="Client Logos"] {
    height: auto !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  .tng-design-export [data-pencil-name="Client Logos"] > * {
    flex: 1 1 140px !important;
    min-width: 140px !important;
    height: auto !important;
    justify-content: center !important;
  }

  /* Final CTA / booking banner ("Hãy cùng nhau bắt đầu"): the banner has a
     fixed desktop height with overflow:hidden. On phones the wrapped heading,
     subtitle and stacked action buttons are taller than that, so the lower
     button and microcopy were clipped. Let the banner grow to its content and
     stretch the decorative grid backdrop to match. */
  .tng-design-export [data-pencil-name$="Final CTA"] [data-pencil-name="Banner"],
  .tng-design-export [data-pencil-name$="Final CTA"] [data-pencil-name="CTA Banner"] {
    height: auto !important;
  }

  .tng-design-export [data-pencil-name$="Final CTA"] [data-pencil-name="Banner"] > [data-pencil-name="Grid"] {
    height: 100% !important;
  }
}

/* Very narrow phones (iPhone SE, 375px and below). The English header CTA
   ("Book a consultation", ~171px) plus the "TNG SOFT" wordmark (~188px)
   are wider than the viewport, so the button was clipped on the right. Tighten
   the header padding/gap, shrink the wordmark, and drop the CTA's leading
   calendar icon to buy back the needed width. */
@media (max-width: 420px) {
  .tng-design-export [data-pencil-name="S1 Header"] [data-pencil-name="Header"] {
    padding-left: 12px !important;
    padding-right: 12px !important;
    gap: 8px !important;
  }

  .tng-design-export [data-pencil-name="S1 Header"] [data-pencil-name="Wordmark"] {
    font-size: 16px !important;
  }

  .tng-design-export [data-pencil-name="S1 Header"] [data-pencil-name="CTA"] {
    padding: 10px 12px !important;
    gap: 6px !important;
  }

  .tng-design-export [data-pencil-name="S1 Header"] [data-pencil-name="CTA"] [data-pencil-name="Icon"] {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.tng-design-export-page .tng-design-export,
  body.tng-design-export-page .tng-fab {
    animation: none !important;
    transition-duration: 0.01ms !important;
    transform: none !important;
    filter: none !important;
  }

  .tng-design-export.tng-motion-ready [data-tng-reveal],
  .tng-design-export.tng-motion-ready [data-tng-reveal].is-visible {
    opacity: 1 !important;
    transform: none !important;
  }

  .tng-design-export *,
  .tng-design-export *::before,
  .tng-design-export *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}