/* Gotek 1.9 — one authoritative mobile + tablet layer.
 * Loaded last. High-specificity rules beat the legacy cascade and
 * cache-plugin reordering. Desktop (≥1181px) is intentionally untouched.
 */

:root {
  --gt-nav-bp: 1180px;
  --gt-phone-bp: 820px;
  --gt-gutter: 16px;
  --gt-header-h: 60px;
}

/* Meaning-led lines: each .gt-line is one complete phrase. */
.gt-line {
  display: block;
  max-width: 100%;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

html[lang="vi"] .gt-line,
html[lang="vi"] :where(h1, h2, h3) {
  word-break: keep-all;
}

:where(h1, h2, h3) {
  text-wrap: balance;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

:where(p, li, address, figcaption) {
  text-wrap: pretty;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

@media (min-width: 1181px) {
  .mobile-nav-backdrop { display: none !important; }
}

/* -------------------------------------------------------------------------- */
/* Tablet + phone: hamburger navigation (≤1180)                                 */
/* -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  :root { --header-h: 76px; }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: calc(var(--header-h) + 12px);
  }

  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip !important;
  }

  img, video, iframe, canvas { max-width: 100%; }
  iframe { max-height: 70vh; }

  button, a, input, select, textarea, summary {
    touch-action: manipulation;
  }

  /* Fixed light header: logo + blue hamburger. Always visible. */
  html body .site-header,
  html body .site-header.is-contextual,
  html body .site-header.is-scrolled,
  html body .site-header.is-menu-open,
  html body.home .site-header,
  html body.home .site-header.is-contextual,
  html body.home .site-header.is-scrolled,
  html body.home .site-header.is-menu-open,
  html body:not(.home) .site-header,
  html body:not(.home) .site-header.is-menu-open {
    position: fixed !important;
    z-index: 400 !important;
    top: max(8px, env(safe-area-inset-top)) !important;
    right: max(10px, env(safe-area-inset-right)) !important;
    bottom: auto !important;
    left: max(10px, env(safe-area-inset-left)) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 48px !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
    height: 60px !important;
    min-height: 60px !important;
    padding: 6px 6px 6px 14px !important;
    overflow: visible !important;
    isolation: isolate;
    border: 1px solid rgba(10, 26, 79, .08) !important;
    border-radius: 18px !important;
    color: #0a1a4f !important;
    background: #fff !important;
    box-shadow: 0 10px 28px rgba(10, 26, 79, .1) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.1) !important;
    backdrop-filter: blur(16px) saturate(1.1) !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  body.admin-bar .site-header,
  body.admin-bar .site-header.is-contextual,
  body.admin-bar .site-header.is-scrolled,
  body.admin-bar .site-header.is-menu-open {
    top: calc(46px + max(8px, env(safe-area-inset-top))) !important;
  }

  html body .site-header::after { display: none !important; }

  html body .site-logo {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    width: 108px !important;
    height: 42px !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  html body .site-logo img {
    width: 108px !important;
    height: 42px !important;
    max-height: 42px !important;
    object-fit: contain !important;
    object-position: left center !important;
  }

  html body .site-logo__on-dark { display: none !important; }
  html body .site-logo__on-light {
    display: block !important;
    opacity: 1 !important;
    filter: none !important;
  }

  html body .desktop-nav,
  html body .header-tools {
    display: none !important;
  }

  /* Hamburger: blue tile, white bars — never white-on-white. */
  html body .site-header > .menu-toggle,
  html body .menu-toggle {
    position: relative !important;
    z-index: 420 !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: grid !important;
    place-items: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 14px !important;
    color: #fff !important;
    background: #0057e1 !important;
    box-shadow: none !important;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
  }

  html body .site-header > .menu-toggle::before,
  html body .site-header > .menu-toggle::after,
  html body .menu-toggle::before,
  html body .menu-toggle::after {
    content: none !important;
    display: none !important;
  }

  html body .site-header > .menu-toggle span,
  html body .menu-toggle span {
    position: absolute !important;
    left: 14px !important;
    display: block !important;
    width: 20px !important;
    height: 2px !important;
    margin: 0 !important;
    border-radius: 2px !important;
    background: #fff !important;
    transform: none !important;
    transform-origin: center !important;
    transition: transform .2s ease, top .2s ease, opacity .16s ease !important;
  }

  html body .site-header > .menu-toggle span:nth-child(1),
  html body .menu-toggle span:nth-child(1) { top: 17px !important; }
  html body .site-header > .menu-toggle span:nth-child(2),
  html body .menu-toggle span:nth-child(2) { top: 23px !important; }
  html body .site-header > .menu-toggle span:nth-child(3),
  html body .menu-toggle span:nth-child(3) { top: 29px !important; }

  html body .site-header.is-menu-open > .menu-toggle span:nth-child(1),
  html body.menu-open .site-header > .menu-toggle span:nth-child(1) {
    top: 23px !important;
    transform: rotate(45deg) !important;
  }
  html body .site-header.is-menu-open > .menu-toggle span:nth-child(2),
  html body.menu-open .site-header > .menu-toggle span:nth-child(2) {
    opacity: 0 !important;
  }
  html body .site-header.is-menu-open > .menu-toggle span:nth-child(3),
  html body.menu-open .site-header > .menu-toggle span:nth-child(3) {
    top: 23px !important;
    transform: rotate(-45deg) !important;
  }

  /* Backdrop sits under the drawer, above the page. */
  html body .mobile-nav-backdrop {
    position: fixed !important;
    z-index: 390 !important;
    inset: 0 !important;
    display: block !important;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    background: rgba(5, 20, 52, .34);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    transition: opacity .2s ease, visibility .2s ease;
  }

  html body.menu-open .mobile-nav-backdrop,
  html.menu-open body .mobile-nav-backdrop {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }

  html body.menu-open::before { display: none !important; }

  /* Light drawer. Open state is driven by aria-hidden + is-menu-open. */
  html body .mobile-menu {
    position: fixed !important;
    z-index: 410 !important;
    top: calc(max(8px, env(safe-area-inset-top)) + 70px) !important;
    right: max(10px, env(safe-area-inset-right)) !important;
    bottom: auto !important;
    left: max(10px, env(safe-area-inset-left)) !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    gap: 10px !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: calc(100dvh - 88px - env(safe-area-inset-top)) !important;
    padding: 14px 14px max(16px, env(safe-area-inset-bottom)) !important;
    overflow: hidden !important;
    border: 1px solid #dbe5f1 !important;
    border-radius: 18px !important;
    color: #0a1a4f !important;
    background: #fff !important;
    box-shadow: 0 24px 64px rgba(7, 26, 69, .18) !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-8px) !important;
    transform-origin: top right;
    transition: opacity .2s ease, transform .22s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .22s !important;
  }

  html body .site-header.is-menu-open .mobile-menu,
  html body .mobile-menu[aria-hidden="false"],
  html body .menu-toggle[aria-expanded="true"] + .mobile-menu {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    transition-delay: 0s !important;
  }

  html body.menu-open,
  html.menu-open body {
    overflow: hidden !important;
    overscroll-behavior: none;
    touch-action: none;
  }

  .mobile-language-switch {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    padding: 4px !important;
    border-radius: 13px !important;
    background: #eef4fb !important;
  }

  .mobile-language-switch a {
    display: grid !important;
    min-height: 40px !important;
    place-items: center !important;
    border-radius: 10px !important;
    color: #52637d !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
  }

  .mobile-language-switch a.active {
    color: #fff !important;
    background: #0057e1 !important;
  }

  html body .mobile-menu nav {
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #bfd0e5 transparent;
  }

  html body .mobile-menu .gt-nav-list,
  html body .mobile-menu .gt-nav-node,
  html body .mobile-menu .gt-nav-row,
  html body .mobile-menu .gt-nav-link {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  html body .mobile-menu .gt-nav-list {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  html body .mobile-menu .gt-nav-node { list-style: none !important; }

  html body .mobile-menu .gt-nav-row {
    display: flex !important;
    align-items: center !important;
    min-height: 48px !important;
    border-bottom: 1px solid #e7edf5 !important;
  }

  html body .mobile-menu nav .gt-nav-link {
    display: flex !important;
    flex: 1 !important;
    align-items: center !important;
    min-height: 48px !important;
    padding: 10px 10px !important;
    border: 0 !important;
    border-radius: 10px !important;
    color: #0a1a4f !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  html body .mobile-menu .gt-nav-link.active,
  html body .mobile-menu .gt-nav-link[aria-current="page"] {
    color: #0057e1 !important;
    background: #edf4ff !important;
  }

  html body .mobile-menu .gt-submenu-toggle {
    flex: 0 0 44px !important;
    display: grid !important;
    place-items: center !important;
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    color: #315173 !important;
    background: transparent !important;
  }

  html body .mobile-menu .gt-nav-node.is-submenu-open > .gt-nav-row .gt-submenu-toggle .gotek-icon {
    transform: rotate(180deg);
  }

  html body .mobile-menu .gt-submenu-shell {
    display: grid !important;
    grid-template-rows: 0fr !important;
    max-height: none !important;
    overflow: hidden !important;
    opacity: .55;
    transition: grid-template-rows .24s ease, opacity .2s ease !important;
  }

  html body .mobile-menu .gt-submenu-shell > .gt-submenu,
  html body .mobile-menu .gt-submenu-shell > ul {
    min-height: 0;
    overflow: hidden;
  }

  html body .mobile-menu .gt-nav-node.is-submenu-open > .gt-submenu-shell {
    grid-template-rows: 1fr !important;
    opacity: 1;
  }

  html body .mobile-menu .gt-submenu-depth-1 {
    padding: 4px 0 8px 8px !important;
  }

  html body .mobile-menu .gt-submenu-depth-1 > .gt-nav-node {
    margin: 4px 0 !important;
    border-radius: 11px !important;
    background: #f2f6fb !important;
  }

  html body .mobile-menu .gt-submenu-depth-1 .gt-nav-link {
    font-size: 14px !important;
    font-weight: 650 !important;
  }

  html body .mobile-menu .gt-submenu-depth-2 {
    padding: 0 8px 8px 12px !important;
  }

  html body .mobile-menu .gt-submenu-depth-2 .gt-nav-link {
    min-height: 42px !important;
    color: #52637d !important;
    font-size: 13px !important;
    font-weight: 500 !important;
  }

  html body .mobile-project-cta {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 50px !important;
    padding: 0 16px !important;
    border-radius: 14px !important;
    color: #fff !important;
    background: #0057e1 !important;
    font-size: 14px !important;
    font-weight: 650 !important;
    text-decoration: none !important;
  }

  html body .mobile-menu > p { display: none !important; }

  /* Shared shells */
  .page-shell,
  .about-wrap,
  .gotek-blog-shell,
  .article-shell {
    box-sizing: border-box;
    width: calc(100% - 32px) !important;
    max-width: none !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }

  main,
  main > section,
  .chapter,
  .contact-chapter,
  .gotek-footer-shell {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .chapter { min-height: 0 !important; }

  input, select, textarea {
    font-size: 16px !important; /* prevent iOS focus zoom */
  }
}

@media (max-width: 1180px) and (min-width: 783px) {
  body.admin-bar .site-header,
  body.admin-bar .site-header.is-menu-open {
    top: calc(32px + max(8px, env(safe-area-inset-top))) !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Phone layouts (≤820)                                                        */
/* -------------------------------------------------------------------------- */
@media (max-width: 820px) {
  :root {
    --header-h: 68px;
    --gt-gutter: 16px;
    --mobile-gutter: 16px;
  }

  html { scroll-snap-type: none; }

  body { font-size: 15px; }

  /* Compact first viewport — no 360svh cinematic scroll on a phone. */
  body.home .hero,
  body.home .hero-sequence {
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body.home .hero-stage {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 100svh !important;
    translate: none !important;
  }

  body.home .hero-media,
  body.home .hero-sequence .hero-media {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.home .hero-media img,
  body.home .hero-star-keyvisual {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 62% center !important;
  }

  body.home .hero-beat-bridge,
  body.home .hero-beat-global,
  body.home .hero-handoff,
  body.home .hero-journey-index,
  body.home .hero-brand-orbit,
  body.home .hero-scroll {
    display: none !important;
  }

  body.home .hero-beat-origin,
  body.home .hero-center {
    position: relative !important;
    z-index: 2;
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100svh !important;
    padding: calc(var(--header-h) + 28px) 16px 92px !important;
    align-content: end !important;
  }

  body.home .hero-kicker {
    margin: 0 0 10px !important;
    font-size: 11px !important;
    letter-spacing: .1em !important;
  }

  body.home .hero-sequence h1,
  body.home .hero-center h1 {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 12px !important;
    font-size: clamp(30px, 8.4vw, 40px) !important;
    line-height: 1.12 !important;
    letter-spacing: -.035em !important;
  }

  body.home .hero-title-base,
  body.home .hero-title-accent,
  body.home h1 .gt-line,
  body.home h2 .gt-line {
    display: block !important;
    max-width: none !important;
  }

  body.home .hero-intro,
  body.home .hero-center > p:not(.hero-kicker) {
    max-width: 38ch !important;
    margin: 0 0 20px !important;
    padding-left: 12px !important;
    border-left: 2px solid #0057e1;
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  body.home .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }

  body.home .hero-actions > a,
  body.home .hero-primary,
  body.home .hero-secondary {
    box-sizing: border-box !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 48px !important;
    padding-inline: 18px !important;
    font-size: 14px !important;
  }

  body.home .hero-sequence-status {
    left: 14px !important;
    right: 74px !important;
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
    width: auto !important;
    display: grid !important;
    grid-template-columns: auto minmax(28px, 1fr) auto !important;
    gap: 8px !important;
    padding: 8px 10px !important;
  }

  /* Partners */
  body.home .home-partners {
    padding: 22px 0 20px !important;
  }

  body.home .home-partners__heading {
    width: calc(100% - 32px) !important;
    display: grid !important;
    gap: 6px !important;
    margin: 0 auto 14px !important;
  }

  body.home .home-partners__heading p {
    margin: 0 !important;
    color: #0057e1 !important;
    font-size: 11px !important;
    letter-spacing: .12em !important;
  }

  body.home .home-partners__heading h2 {
    max-width: none !important;
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
  }

  body.home .home-partners__viewport {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  body.home .home-partners__track {
    display: flex !important;
    width: max-content !important;
    animation: gotek-partners-marquee 34s linear infinite !important;
  }

  body.home .home-partners__group {
    width: auto !important;
    flex: 0 0 auto !important;
    justify-content: flex-start !important;
    gap: 28px !important;
    padding: 0 28px 0 0 !important;
  }

  body.home .home-partner-card {
    width: 132px !important;
    flex: 0 0 132px !important;
    height: 48px !important;
  }

  /* Global follow-up band */
  body.home .hero-global-followup {
    min-height: 0 !important;
    height: auto !important;
  }

  body.home .hero-global-followup__content {
    padding: 200px 18px 48px !important;
  }

  body.home .hero-global-followup h2 {
    width: 100% !important;
    max-width: none !important;
    font-size: clamp(28px, 7.8vw, 36px) !important;
    line-height: 1.16 !important;
  }

  body.home .hero-global-followup__content > a {
    min-height: 48px !important;
  }

  /* Services + industry rail */
  body.home .services-chapter {
    padding: 56px 0 60px !important;
  }

  body.home .services-heading {
    width: calc(100% - 32px) !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin: 0 auto 22px !important;
  }

  body.home .services-heading h2 {
    max-width: none !important;
    font-size: clamp(28px, 8vw, 36px) !important;
    line-height: 1.16 !important;
  }

  body.home .services-heading > p {
    max-width: 42ch !important;
    margin: 0 !important;
    padding-left: 12px !important;
    border-left: 2px solid #0057e1;
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  body.home .industry-rail {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 0 8px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    touch-action: pan-x pan-y pinch-zoom !important;
    scroll-snap-type: x proximity !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.home .industry-track {
    animation: none !important;
    will-change: auto !important;
  }

  body.home .industry-card {
    flex: 0 0 min(78vw, 300px) !important;
    width: min(78vw, 300px) !important;
    height: clamp(340px, 100vw, 400px) !important;
    scroll-snap-align: start !important;
    border-radius: 18px !important;
  }

  body.home .industry-copy { padding: 20px 18px !important; }
  body.home .industry-copy h3 { font-size: 20px !important; }
  body.home .industry-copy p { font-size: 12px !important; }

  /* Proof / process / showcase / ecosystem / delivery / culture / resources */
  body.home .proof-heading,
  body.home .global-process__head,
  body.home .services-showcase__head,
  body.home .ecosystem-intro,
  body.home .resources-head {
    width: calc(100% - 32px) !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-inline: auto !important;
    text-align: left !important;
  }

  body.home .proof-heading h2,
  body.home .global-process__head h2,
  body.home .services-showcase__head h2,
  body.home .delivery-copy h2,
  body.home .culture-heading h2,
  body.home .resources-head h2,
  body.home .ecosystem-intro h2,
  body.home .metaads-feature-head h2 {
    max-width: none !important;
    font-size: clamp(26px, 7.4vw, 34px) !important;
    line-height: 1.18 !important;
  }

  body.home .proof-grid,
  body.home .global-process__layout,
  body.home .delivery-layout,
  body.home .delivery-grid,
  body.home .ecosystem-system-layout,
  body.home .resources-grid,
  body.home .values,
  body.home .culture-heading-copy,
  body.home .culture-working-signals {
    grid-template-columns: 1fr !important;
  }

  body.home .proof-card { grid-template-columns: 1fr !important; }

  body.home .global-process {
    padding: 56px 0 !important;
  }

  body.home .global-process__shell {
    width: calc(100% - 28px) !important;
    margin-inline: auto !important;
  }

  body.home .global-process__visual {
    order: -1;
    width: 100% !important;
    min-height: 210px !important;
    border-radius: 16px !important;
  }

  body.home .global-process__step {
    width: 100% !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    padding: 16px 0 !important;
    transform: none !important;
  }

  body.home .services-showcase__tabs {
    justify-content: flex-start !important;
    width: 100% !important;
    padding: 0 16px 8px !important;
    overflow-x: auto !important;
    scrollbar-width: none;
  }

  body.home .services-showcase__tabs > * { flex: 0 0 auto !important; }

  body.home .services-showcase__viewport {
    padding: 0 16px 36px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
  }

  body.home .services-product-card {
    flex: 0 0 calc(100vw - 48px) !important;
    width: calc(100vw - 48px) !important;
    max-width: 100% !important;
    scroll-snap-align: start;
  }

  body.home .services-product-card__content {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 20px 16px 22px !important;
  }

  body.home .metaads-feature-shell {
    width: calc(100% - 24px) !important;
    margin-inline: auto !important;
    padding: 22px 16px !important;
  }

  body.home .metaads-feature-row,
  body.home .metaads-feature-head {
    grid-template-columns: 1fr !important;
  }

  body.home .ecosystem-unit {
    grid-template-columns: minmax(0, 1fr) 20px !important;
    padding: 16px !important;
  }

  body.home .ecosystem-unit-logo {
    grid-column: 1 / -1 !important;
    justify-content: flex-start !important;
    height: 48px !important;
  }

  body.home .culture-image { min-height: 520px !important; }

  body.home .culture-heading {
    left: 16px !important;
    right: 16px !important;
    width: auto !important;
  }

  body.home .resource-card { min-height: 0 !important; }

  /* About */
  html body.gotek-about-page .about-hero {
    min-height: 0 !important;
    padding: 84px 0 0 !important;
    overflow: hidden !important;
  }

  html body.gotek-about-page .about-hero__grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    width: calc(100% - 32px) !important;
    margin-inline: auto !important;
  }

  html body.gotek-about-page .about-hero__copy {
    display: grid !important;
    position: relative !important;
    z-index: 3 !important;
    width: 100% !important;
    max-width: none !important;
    order: 2;
    padding: 22px 0 28px !important;
  }

  html body.gotek-about-page .about-hero__copy h1 {
    width: 100% !important;
    max-width: none !important;
    font-size: clamp(30px, 8.4vw, 38px) !important;
    line-height: 1.16 !important;
  }

  html body.gotek-about-page .about-hero__copy h1 strong {
    display: inline !important;
    white-space: normal !important;
  }

  html body.gotek-about-page .about-hero__actions {
    display: grid !important;
    width: 100% !important;
    gap: 10px !important;
  }

  html body.gotek-about-page .about-hero__actions .about-button {
    width: 100% !important;
    justify-content: center !important;
    min-height: 48px !important;
  }

  html body.gotek-about-page .about-hero__media {
    position: relative !important;
    inset: auto !important;
    z-index: 1 !important;
    order: 1;
    width: 100% !important;
    height: 240px !important;
    margin: 0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }

  html body.gotek-about-page .about-hero__media img {
    filter: none !important;
    transform: none !important;
    object-position: center !important;
  }

  html body.gotek-about-page .about-hero__wash,
  html body.gotek-about-page .about-hero__brand {
    display: none !important;
  }

  html body.gotek-about-page .about-intro-rail .about-wrap,
  html body.gotek-about-page .about-story__grid,
  html body.gotek-about-page .about-purpose__grid,
  html body.gotek-about-page .about-values__grid,
  html body.gotek-about-page .about-process__grid,
  html body.gotek-about-page .about-people__grid,
  html body.gotek-about-page .about-ecosystem__grid,
  html body.gotek-about-page .about-closing__grid {
    grid-template-columns: 1fr !important;
  }

  html body.gotek-about-page .about-section { padding-block: 42px !important; }

  html body.gotek-about-page .about-heading h2,
  html body.gotek-about-page .about-story h2,
  html body.gotek-about-page .about-people h2,
  html body.gotek-about-page .about-closing h2,
  html body.gotek-about-page .about-purpose h2 {
    max-width: none !important;
    font-size: clamp(26px, 7.2vw, 34px) !important;
    line-height: 1.18 !important;
  }

  html body.gotek-about-page .about-story__media,
  html body.gotek-about-page .about-closing figure {
    height: 240px !important;
  }

  html body.gotek-about-page .about-ecosystem article {
    display: flex !important;
    flex-direction: column !important;
    padding: 20px 16px !important;
  }

  html body.gotek-about-page .about-people__mosaic {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 160px 140px !important;
  }

  html body.gotek-about-page .about-people__mosaic img:first-child {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  /* Careers */
  .careers-main .page-shell { width: calc(100% - 28px) !important; }

  .careers-main .careers-hero.page-shell,
  .careers-hero {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin-top: 0 !important;
    padding: 100px 18px 36px !important;
  }

  .careers-hero__copy {
    width: 100% !important;
    text-align: left !important;
  }

  .careers-hero__copy h1 {
    font-size: clamp(30px, 8.4vw, 38px) !important;
    line-height: 1.1 !important;
  }

  .careers-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .careers-primary,
  .careers-secondary {
    width: 100% !important;
    min-height: 48px !important;
    justify-content: center !important;
  }

  .careers-principles,
  .careers-section-head,
  .careers-life,
  .careers-apply__shell,
  .careers-faq,
  .career-form__grid {
    grid-template-columns: 1fr !important;
  }

  .career-filters {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .career-filters button {
    min-height: 40px !important;
  }

  .career-role__trigger {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 10px !important;
    padding: 16px 0 !important;
  }

  .career-role__panel {
    padding: 16px !important;
  }

  .career-form__wide { grid-column: 1 !important; }

  .careers-life__media { height: 260px !important; }

  /* Contact */
  .contact-complete-hero { padding-top: 104px !important; }

  .contact-complete-hero h2 {
    font-size: clamp(30px, 8.6vw, 40px) !important;
  }

  .contact-complete-quick,
  .contact-complete-form-section,
  .contact-complete-form__grid,
  .contact-complete-office__card {
    grid-template-columns: 1fr !important;
  }

  .contact-complete-form input,
  .contact-complete-form select,
  .contact-complete-form textarea {
    min-height: 48px;
    font-size: 16px !important;
  }

  .contact-complete-form button[type="submit"] {
    width: 100%;
    min-height: 50px;
  }

  .contact-complete-office__map iframe {
    height: 280px !important;
    min-height: 280px !important;
  }

  .contact-complete-office__content {
    position: static !important;
    max-height: none !important;
    padding: 20px 16px !important;
    overflow: visible !important;
    transform: none !important;
  }

  /* Blog + article + search */
  .gotek-blog-intro { padding-top: 100px !important; }

  .gotek-blog-intro h1,
  .wp-insights-hero h1,
  .gotek-article-header h1 {
    font-size: clamp(28px, 8vw, 36px) !important;
    line-height: 1.16 !important;
  }

  .gotek-blog-intro-grid,
  .gotek-blog-lead,
  .gotek-blog-grid,
  .gotek-article-layout,
  .wp-insights-list,
  .wp-insight-row {
    grid-template-columns: 1fr !important;
  }

  .gotek-blog-topics {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .gotek-blog-topics a {
    flex: 0 0 auto !important;
    min-height: 40px !important;
    white-space: nowrap;
  }

  .gotek-blog-featured-media { height: 220px !important; }

  .gotek-article-tools,
  .gotek-article-summary { position: static !important; }

  .gotek-article-content :where(table, pre, iframe) {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }

  .gotek-share-list { grid-template-columns: 1fr 1fr !important; }

  .sitemap-hero,
  .sitemap-directory {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  .sitemap-hero {
    padding-top: 108px !important;
    padding-bottom: 36px !important;
  }

  .sitemap-hero h1 {
    font-size: clamp(30px, 8.4vw, 40px) !important;
    line-height: 1.1 !important;
  }

  .sitemap-product-list a,
  .sitemap-article-list {
    grid-template-columns: 1fr !important;
  }

  .sitemap-article-list a:nth-child(odd),
  .sitemap-article-list a:nth-child(even) {
    padding-inline: 0 !important;
    border-right: 0 !important;
  }

  .wp-page {
    padding-top: 108px !important;
    padding-bottom: 48px !important;
  }

  .wp-page h1 {
    font-size: clamp(28px, 8vw, 36px) !important;
    line-height: 1.16 !important;
  }

  .wp-page .entry-content :where(img, table, pre, iframe) {
    max-width: 100%;
  }

  .wp-page .entry-content :where(table, pre) {
    display: block;
    overflow-x: auto;
  }

  .wp-insights-hero { padding-top: 108px !important; }

  .wp-insight-row {
    display: grid !important;
    gap: 14px !important;
  }

  .wp-insight-image img { width: 100%; border-radius: 14px; }

  /* Products */
  .product-archive,
  .product-detail { padding-top: 0 !important; }

  .product-archive-hero,
  .product-detail-hero {
    padding: 108px 0 40px !important;
  }

  .product-archive-hero h1,
  .product-detail-hero h1 {
    font-size: clamp(30px, 8.4vw, 40px) !important;
  }

  .product-archive-grid,
  .product-detail-layout {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .product-detail-layout aside { position: static !important; }

  /* 404 + coming soon */
  .gotek-error-page,
  .coming-soon-page {
    min-height: 0 !important;
    padding: 120px 18px 48px !important;
  }

  .coming-soon-card {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    text-align: center;
  }

  .gotek-error-actions,
  .coming-soon-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .gotek-error-actions a,
  .coming-soon-actions a {
    justify-content: center !important;
    min-height: 48px !important;
  }

  /* Footer */
  html body .gotek-footer,
  html body .site-footer.gotek-footer {
    width: calc(100% - 20px) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    background: #fff !important;
  }

  .gotek-footer-cta {
    display: grid !important;
    justify-items: start !important;
    gap: 16px !important;
    min-height: 0 !important;
    padding: 28px 18px !important;
    text-align: left !important;
  }

  .gotek-footer-cta h2 {
    max-width: none !important;
    margin: 0 !important;
    font-size: clamp(24px, 6.8vw, 30px) !important;
    line-height: 1.2 !important;
    text-align: left !important;
  }

  .gotek-footer-cta > a {
    width: 100%;
    min-height: 50px;
    justify-content: space-between;
  }

  .gotek-footer-main {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 16px !important;
    padding: 24px 18px 16px !important;
  }

  .gotek-footer-brand {
    grid-column: 1 / -1 !important;
    padding-bottom: 18px;
  }

  .gotek-footer-column {
    padding: 16px 0 !important;
    border-top: 1px solid #e4eaf2 !important;
  }

  .gotek-footer-column > a {
    display: flex !important;
    align-items: center !important;
    min-height: 40px !important;
  }

  .gotek-footer-info { grid-column: 1 / -1 !important; }

  .gotek-footer-base {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 16px 18px max(20px, env(safe-area-inset-bottom)) !important;
  }

  .contact-chapter.wp-footer-only {
    padding: 20px 0 max(12px, env(safe-area-inset-bottom)) !important;
  }

  /* Chat launcher — compact, never overlaps header */
  #chat-gotek-root .chat-gotek-launcher-copy,
  #chat-gotek-root .chat-gotek-ai-tag,
  .chat-gotek-teaser-intro { display: none !important; }

  .chat-gotek {
    right: max(12px, env(safe-area-inset-right)) !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
  }

  :where(h1, h2, h3) .gt-line {
    display: block !important;
  }

  .careers-hero__copy h1 .gt-line,
  .careers-principles h2 .gt-line,
  .gotek-blog-intro h1 .gt-line,
  .contact-complete-hero h2 .gt-line,
  .product-archive-hero h1 .gt-line,
  .sitemap-hero h1 .gt-line,
  .coming-soon-copy h1 .gt-line,
  .gotek-error-card h1 .gt-line {
    display: block !important;
  }

  /* Kill leftover character-count locks that split Vietnamese phrases. */
  html body :where(h1, h2) {
    max-width: none !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }

  html[lang="vi"] body :where(h1, h2, h3, .gt-line) {
    word-break: keep-all !important;
  }

  /* Extra mobile containment for remaining templates. */
  .wp-insights-hero,
  .wp-insights-list,
  .gotek-blog-intro,
  .product-archive-hero,
  .product-detail-hero {
    padding-inline: 0 !important;
  }

  .career-form input,
  .career-form select,
  .career-form textarea,
  .career-upload {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 16px !important;
  }

  .careers-faq article button {
    width: 100% !important;
    text-align: left !important;
  }

  .gotek-article-breadcrumb {
    flex-wrap: wrap !important;
    white-space: normal !important;
  }

  .services-product-card {
    max-width: calc(100vw - 32px) !important;
  }
}

@media (max-width: 390px) {
  html body .site-header,
  html body .site-header.is-menu-open {
    left: max(8px, env(safe-area-inset-left)) !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    padding-left: 12px !important;
  }

  html body .site-logo,
  html body .site-logo img { width: 96px !important; }

  html body .mobile-menu {
    left: max(8px, env(safe-area-inset-left)) !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    padding: 12px !important;
  }

  html body .mobile-menu nav .gt-nav-link { font-size: 15px !important; }

  body.home .hero-sequence h1,
  body.home .hero-center h1 { font-size: 29px !important; }

  body.home .industry-card {
    flex-basis: calc(100vw - 40px) !important;
    width: calc(100vw - 40px) !important;
  }

  .gotek-footer-main { grid-template-columns: 1fr !important; }
}

@media (max-width: 820px) and (orientation: landscape) and (max-height: 500px) {
  body.home .hero-beat-origin,
  body.home .hero-center {
    min-height: 100svh !important;
    padding-top: 76px !important;
    padding-bottom: 56px !important;
    align-content: center !important;
  }

  html body .mobile-menu {
    max-height: calc(100dvh - 72px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .mobile-menu,
  html body .mobile-nav-backdrop,
  html body .menu-toggle span,
  body.home .home-partners__track,
  body.home .industry-track {
    animation: none !important;
    transition: none !important;
  }
}

@keyframes gotek-partners-marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}