/* Mouse-reactive depth, shared by every page; native cursor remains visible. */
.screen-pointer-glow{position:fixed;left:0;top:0;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(55,114,255,.115),rgba(102,145,255,.035) 43%,transparent 70%);pointer-events:none;z-index:35;opacity:0;transition:opacity .3s;will-change:transform;contain:strict}
.screen-pointer-glow.is-visible{opacity:1}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .pointer-halo{opacity:0;transition:opacity .2s,width .2s,height .2s,border-color .2s;will-change:transform}
  .pointer-halo.pointer-visible{opacity:1}
  body[data-design=studio] .service-card{position:relative;isolation:isolate;transition:transform .25s ease,border-color .25s,box-shadow .25s}
  body[data-design=studio] .service-card::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;opacity:0;background:radial-gradient(350px circle at var(--hover-x,50%) var(--hover-y,50%),#487aff16,transparent 65%);transition:opacity .25s}
  body[data-design=studio] .service-card.pointer-card-active{transform:perspective(1000px) rotateX(var(--hover-rx,0deg)) rotateY(var(--hover-ry,0deg)) translateY(-5px);border-color:#3e73e080;box-shadow:0 18px 44px #1b419014}
  body[data-design=studio] .service-card.pointer-card-active::after{opacity:1}
  body[data-design=studio] nav a{transition:color .2s,text-shadow .2s}
  body[data-design=studio] nav a:hover{text-shadow:0 0 20px #2862d93d}
}
@media(prefers-reduced-motion:reduce),(hover:none),(pointer:coarse){.screen-pointer-glow,.pointer-halo{display:none!important}}

/* TM-READABILITY-2026: accessible typography and responsive content */

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-size: 17px;
    line-height: 1.7;
}

p,
.prose p,
.seo-detail p,
.detail p,
.approach p,
.service-card p,
.solution-rows p,
.closing p,
.contact-item p {
    font-size: 17px;
    line-height: 1.8;
}

li {
    font-size: 16px;
    line-height: 1.8;
}

header .nav nav a,
.nav nav a,
footer .footer-top a,
footer .foot-bottom a {
    font-size: 14px;
    line-height: 1.7;
}

.button,
button,
input,
select,
textarea {
    font-size: 15px;
    line-height: 1.5;
}

label {
    font-size: 14px;
    line-height: 1.7;
}

.eyebrow,
.overline,
.solution-index,
.visual-caption,
.art-note,
.art-coordinate {
    font-size: 11px;
    line-height: 1.6;
}

.footer-top h3,
.seo-related h3,
.contact-item > span {
    font-size: 13px;
    line-height: 1.6;
}

input,
select,
textarea {
    padding: 14px;
    max-width: 100%;
    box-sizing: border-box;
}

img,
video,
canvas {
    max-width: 100%;
}

.wrap {
    min-width: 0;
}

body,
main,
section,
article,
aside,
footer,
header {
    overflow-wrap: anywhere;
}

@media (max-width: 850px) {
    body {
        font-size: 16px;
    }

    p,
    .prose p,
    .seo-detail p,
    .detail p,
    .approach p,
    .service-card p,
    .solution-rows p,
    .closing p,
    .contact-item p {
        font-size: 16px;
        line-height: 1.75;
    }

    li {
        font-size: 15px;
    }

    .nav nav a,
    footer .footer-top a,
    footer .foot-bottom a {
        font-size: 14px;
    }
}

@media (max-width: 600px) {
    body {
        font-size: 16px;
    }

    p,
    .prose p,
    .seo-detail p,
    .detail p,
    .approach p,
    .service-card p,
    .solution-rows p,
    .closing p,
    .contact-item p {
        font-size: 16px;
        line-height: 1.75;
    }

    li {
        font-size: 15px;
        line-height: 1.75;
    }

    .eyebrow,
    .overline,
    .solution-index {
        font-size: 11px;
    }

    input,
    select,
    textarea {
        width: 100%;
        min-width: 0;
    }
}

/* End TM-READABILITY-2026 */

/* TM-READABILITY-2026-V2: readable typography across the website */

html {
    font-size: 17px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-size: 18px !important;
    line-height: 1.75 !important;
}

p,
.prose p,
.seo-detail p,
.detail p,
.approach p,
.service-card p,
.solution-rows p,
.closing p,
.contact-item p {
    font-size: 18px !important;
    line-height: 1.8 !important;
}

li {
    font-size: 17px !important;
    line-height: 1.8 !important;
}

.lead {
    font-size: 20px !important;
    line-height: 1.75 !important;
}

header .nav nav a,
.nav nav a,
footer .footer-top a,
footer .foot-bottom a {
    font-size: 15px !important;
    line-height: 1.8 !important;
}

.button,
button {
    font-size: 16px !important;
    line-height: 1.55 !important;
}

label,
input,
select,
textarea {
    font-size: 16px !important;
    line-height: 1.6 !important;
}

.eyebrow,
.overline,
.solution-index,
.visual-caption,
.art-note,
.art-coordinate {
    font-size: 12px !important;
    line-height: 1.7 !important;
}

.footer-top h3,
.seo-related h3,
.contact-item > span {
    font-size: 15px !important;
    line-height: 1.7 !important;
}

img,
video,
canvas {
    max-width: 100%;
}

@media (max-width: 850px) {
    body {
        font-size: 17px !important;
    }

    p,
    .prose p,
    .seo-detail p,
    .detail p,
    .approach p,
    .service-card p,
    .solution-rows p,
    .closing p,
    .contact-item p {
        font-size: 17px !important;
        line-height: 1.8 !important;
    }

    .lead {
        font-size: 19px !important;
    }

    li {
        font-size: 16px !important;
    }
}

@media (max-width: 600px) {
    body {
        font-size: 16px !important;
    }

    p,
    .prose p,
    .seo-detail p,
    .detail p,
    .approach p,
    .service-card p,
    .solution-rows p,
    .closing p,
    .contact-item p {
        font-size: 16px !important;
        line-height: 1.8 !important;
    }

    .lead {
        font-size: 18px !important;
    }

    .nav nav a,
    footer .footer-top a,
    footer .foot-bottom a {
        font-size: 14px !important;
    }

    input,
    select,
    textarea {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* End TM-READABILITY-2026-V2 */

/* TM-LOGO-PROCESS-REPAIR-20261026 */
/* Preserve the original logo asset; correct its display geometry. */
body[data-design="studio"] .brand .logo-window {
    display: inline-flex;
    position: relative;
    flex: 0 0 auto;
    overflow: hidden;
    vertical-align: middle;
    background: #ffffff;
    border: 1px solid rgba(20, 35, 60, 0.10);
    border-radius: 10px;
    box-sizing: border-box;
    transform: none !important;
    margin-right: 0 !important;
}

body[data-design="studio"] .brand .logo-window img {
    position: absolute;
    display: block;
    width: 100% !important;
    height: 100% !important;
    left: 0 !important;
    top: 0 !important;
    object-fit: contain;
    object-position: center;
    max-width: none;
    transform: none !important;
}

/* Balanced header logo. */
body[data-design="studio"] .nav .brand .logo-window {
    width: 58px !important;
    height: 58px !important;
}

/* A larger, properly aligned footer logo. */
body[data-design="studio"] footer .brand .logo-window {
    width: 78px !important;
    height: 78px !important;
    margin: 0 0 12px !important;
}

/* Full-width process background with a centred content container. */
body[data-design="studio"] .process-section {
    position: relative;
    width: 100%;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: var(--panel);
    color: var(--text);
    box-sizing: border-box;
}

body[data-design="studio"] .process-section > .wrap.section {
    width: min(1240px, calc(100% - 48px));
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

body[data-design="studio"] .process-section .process-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

body[data-design="studio"] .process-section .process-step {
    min-width: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 900px) {
    body[data-design="studio"] .process-section .process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
}

@media (max-width: 600px) {
    body[data-design="studio"] .nav .brand .logo-window {
        width: 48px !important;
        height: 48px !important;
    }

    body[data-design="studio"] footer .brand .logo-window {
        width: 68px !important;
        height: 68px !important;
    }

    body[data-design="studio"] .process-section > .wrap.section {
        width: calc(100% - 36px);
    }

    body[data-design="studio"] .process-section .process-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }
}
/* END TM-LOGO-PROCESS-REPAIR-20261026 */

/* TM-CONSISTENT-INNER-PAGES-FINAL-20261027
   Shared hero, typography, cards and RTL alignment.
   Homepage is excluded. */

/* Consistent inner-page hero foundation. */
body[data-design="studio"].inner-page main .page-intro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-sizing: border-box;
  border-radius: 0;
  padding: clamp(32px, 5vw, 76px);
  background-color: #f5f8ff;
  background-image:
    radial-gradient(ellipse at 80% 45%,
      rgba(49, 100, 232, .12), transparent 48%),
    linear-gradient(135deg, #ffffff, #f1f5ff);
  color: #17243b;
}

body[data-design="studio"].inner-page main .page-intro h1,
body[data-design="studio"].inner-page main .page-intro h2,
body[data-design="studio"].inner-page main .page-intro h3 {
  color: #17243b !important;
  opacity: 1;
  visibility: visible;
  text-shadow: none;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

body[data-design="studio"].inner-page main .page-intro p,
body[data-design="studio"].inner-page main .page-intro .lead {
  color: #526783 !important;
  opacity: 1;
  visibility: visible;
  line-height: 1.9;
  text-shadow: none;
}

body[data-design="studio"].inner-page main .page-intro a {
  color: #2458d8;
}

/* Dark theme: use the same dark visual language as the homepage. */
html[data-theme="dark"]
body[data-design="studio"].inner-page main .page-intro {
  background-color: #0b1222;
  background-image:
    radial-gradient(ellipse at 75% 35%,
      rgba(49, 100, 232, .16), transparent 48%),
    linear-gradient(135deg, #101b31, #0b1222 75%);
  border: 1px solid rgba(132, 161, 211, .17);
}

html[data-theme="dark"]
body[data-design="studio"].inner-page main .page-intro h1,
html[data-theme="dark"]
body[data-design="studio"].inner-page main .page-intro h2,
html[data-theme="dark"]
body[data-design="studio"].inner-page main .page-intro h3 {
  color: #f0f4ff !important;
}

html[data-theme="dark"]
body[data-design="studio"].inner-page main .page-intro p,
html[data-theme="dark"]
body[data-design="studio"].inner-page main .page-intro .lead {
  color: #bdcbe2 !important;
}

html[data-theme="dark"]
body[data-design="studio"].inner-page main .page-intro a {
  color: #84a5ff;
}

/* Consistent card icon placement and text alignment. */
body[data-design="studio"].inner-page main .service-card .icon,
body[data-design="studio"].inner-page main .product-card .icon,
body[data-design="studio"].inner-page main .tm-v3-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  vertical-align: middle;
  line-height: 1;
}

body[data-design="studio"].inner-page main .service-card,
body[data-design="studio"].inner-page main .product-card,
body[data-design="studio"].inner-page main .tm-v3-service,
body[data-design="studio"].inner-page main .tm-v3-mini-card {
  min-width: 0;
  overflow-wrap: anywhere;
}

body[data-design="studio"].inner-page main .service-card h3,
body[data-design="studio"].inner-page main .product-card h3,
body[data-design="studio"].inner-page main .tm-v3-mini-card h3 {
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* RTL: use logical alignment, avoid forcing English-style icon order. */
html[dir="rtl"]
body[data-design="studio"].inner-page main .page-intro {
  text-align: start;
}

html[dir="rtl"]
body[data-design="studio"].inner-page main .page-intro h1 {
  line-height: 1.5;
}

html[dir="rtl"]
body[data-design="studio"].inner-page main .service-card,
html[dir="rtl"]
body[data-design="studio"].inner-page main .product-card,
html[dir="rtl"]
body[data-design="studio"].inner-page main .tm-v3-mini-card {
  text-align: start;
}

@media (max-width: 700px) {
  body[data-design="studio"].inner-page main .page-intro {
    padding: 28px 22px;
  }

  body[data-design="studio"].inner-page main .page-intro h1 {
    font-size: clamp(30px, 7vw, 46px);
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-design="studio"].inner-page main .page-intro,
  body[data-design="studio"].inner-page main .page-intro * {
    scroll-behavior: auto;
  }
}

/* END TM-CONSISTENT-INNER-PAGES-FINAL-20261027 */