/* ===========================================================
   TMT Framework
   Component: Theme / Dark-Light Mode
   Status: Active
   Version: 1.0 RC
   =========================================================== */

/* ===========================================================
   TMT Theme CSS
   Split from tmt-additional.min.css.
   Structural split only; no intentional visual changes.
   =========================================================== */

/* ===========================================================
   TMT light/dark theme system + 3D Sun/Moon switch
   =========================================================== */

/* Light baseline. These variables intentionally separate text and accent. */
:root,
html[data-tmt-theme="light"]{
  color-scheme:light;
  --tmt-bg:#ffffff;
  --tmt-bg-soft:#f9f9f9;
  --tmt-text:#1f2937;
  --tmt-text-strong:#0f172a;
  --tmt-muted:#6b7280;
  --tmt-border:rgba(0,0,0,.08);
  --tmt-shadow:0 10px 30px rgba(0,0,0,.08);
  --tmt-shadow-hover:0 10px 24px rgba(0,0,0,.14);
  --tmt-panel-a:#F4F5F7;
  --tmt-panel-b:#E8EAED;
  --tmt-panel-grad:linear-gradient(135deg,var(--tmt-panel-a) 30%,var(--tmt-panel-b) 70%);
  --tmt-card-text:#1f2937;
  --tmt-card-muted:#4b5563;
  --tmt-link:#111827;
  --tmt-link-hover:#000000;
  --tmt-accent:#000000;

  --text:var(--tmt-text);
  --muted:var(--tmt-muted);
  --border:#e5e7eb;
  --section-bg:var(--tmt-bg-soft);
  --panel:var(--tmt-bg-soft);
  --accent:var(--tmt-accent);
}

/* Dark mode is activated by JS and follows system until user clicks toggle. */
html[data-tmt-theme="dark"]{
  color-scheme:dark;
  --tmt-bg:#0f1115;
  --tmt-bg-soft:#141821;
  --tmt-text:#e7eaf0;
  --tmt-text-strong:#ffffff;
  --tmt-muted:#a8b0bd;
  --tmt-border:rgba(255,255,255,.12);
  --tmt-shadow:0 10px 30px rgba(0,0,0,.38);
  --tmt-shadow-hover:0 14px 30px rgba(0,0,0,.55);
  --tmt-panel-a:#1a1f2a;
  --tmt-panel-b:#11151d;
  --tmt-panel-grad:linear-gradient(135deg,var(--tmt-panel-a) 30%,var(--tmt-panel-b) 70%);
  --tmt-card-text:#e7eaf0;
  --tmt-card-muted:#c1c7d0;
  --tmt-link:#ffffff;
  --tmt-link-hover:#dbeafe;
  --tmt-accent:#ffffff;

  --text:var(--tmt-text);
  --muted:var(--tmt-muted);
  --border:rgba(255,255,255,.14);
  --section-bg:var(--tmt-bg-soft);
  --panel:var(--tmt-bg-soft);
  --accent:var(--tmt-accent);
}

html[data-tmt-theme] body{
  background:var(--tmt-bg) !important;
  color:var(--tmt-text) !important;
}

html[data-tmt-theme] .section,
html[data-tmt-theme] .site-main,
html[data-tmt-theme] .entry-content{
  background:var(--section-bg) !important;
  color:var(--tmt-text) !important;
}

html[data-tmt-theme] h1,
html[data-tmt-theme] h2,
html[data-tmt-theme] h3,
html[data-tmt-theme] h4,
html[data-tmt-theme] h5,
html[data-tmt-theme] h6{
  color:var(--tmt-text-strong) !important;
}

html[data-tmt-theme] p,
html[data-tmt-theme] li,
html[data-tmt-theme] figcaption,
html[data-tmt-theme] label,
html[data-tmt-theme] .tmt-title,
html[data-tmt-theme] .tmt-duration,
html[data-tmt-theme] .tmt-time,
html[data-tmt-theme] .tmt-cover-caption,
html[data-tmt-theme] .feature-content,
html[data-tmt-theme] .feature-content *{
  color:var(--tmt-card-text) !important;
}

html[data-tmt-theme] .site a,
html[data-tmt-theme] .entry-content a,
html[data-tmt-theme] .site-footer a,
html[data-tmt-theme] #sinatra-header a{
  color:var(--tmt-link);
}

html[data-tmt-theme] .site a:hover,
html[data-tmt-theme] .entry-content a:hover,
html[data-tmt-theme] .site-footer a:hover,
html[data-tmt-theme] #sinatra-header a:hover{
  color:var(--tmt-link-hover);
}

/* ===========================================================
   TMT card surface cleanup placeholder
   =========================================================== */

/* Card surface styling is handled by the later light/dark mode
   blocks below. This placeholder replaces an old malformed
   selector list that had no valid declaration block. */

html[data-tmt-theme] #tmtPlaylist .tmt-item[aria-selected="true"],
html[data-tmt-theme] #dualPlaylist .tmt-item[aria-selected="true"],
html[data-tmt-theme] #dualPlaylist .tmt-item.is-active{
  background:linear-gradient(90deg, color-mix(in srgb, var(--tmt-accent) 12%, transparent), transparent) !important;
}

html[data-tmt-theme] #tmtPlaylist .tmt-item[aria-selected="true"]::before,
html[data-tmt-theme] #dualPlaylist .tmt-item[aria-selected="true"]::before,
html[data-tmt-theme] #dualPlaylist .tmt-item.is-active::before{
  background:var(--tmt-accent) !important;
}

html[data-tmt-theme] .site input:not([type=submit]),
html[data-tmt-theme] .site textarea,
html[data-tmt-theme] .site select,
html[data-tmt-theme] .entry-content input:not([type=submit]),
html[data-tmt-theme] .entry-content textarea,
html[data-tmt-theme] .entry-content select{
  background:color-mix(in srgb, var(--tmt-bg) 88%, var(--tmt-text) 12%) !important;
  color:var(--tmt-text) !important;
  border-color:var(--tmt-border) !important;
}

html[data-tmt-theme] .site input::placeholder,
html[data-tmt-theme] .site textarea::placeholder,
html[data-tmt-theme] .entry-content input::placeholder,
html[data-tmt-theme] .entry-content textarea::placeholder{
  color:var(--tmt-muted) !important;
}

/* Dark footer/header surfaces */
html[data-tmt-theme="dark"] .site-footer,
html[data-tmt-theme="dark"] #sinatra-footer,
html[data-tmt-theme="dark"] #sinatra-copyright{
  background:#0b0d11 !important;
  color:var(--tmt-text) !important;
}

html[data-tmt-theme="dark"] .site-header,
html[data-tmt-theme="dark"] #sinatra-header,
html[data-tmt-theme="dark"] #sinatra-header-inner{
  background:#0b0d11 !important;
  color:var(--tmt-text) !important;
}

/* Keep hero overlay and info tooltips readable. */
html[data-tmt-theme] .tl-hero-slider .overlay-title,
html[data-tmt-theme] .site .tmt-info-box,
html[data-tmt-theme] .site .tmt-info-box *,
html[data-tmt-theme] .entry-content .tmt-info-box,
html[data-tmt-theme] .entry-content .tmt-info-box *{
  color:#fff !important;
}

/* 3D Sun/Moon switch */
.tmt-theme-toggle{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:2147483000;
  width:76px;
  height:40px;
  padding:0;
  border:0;
  border-radius:999px;
  background:transparent;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

.tmt-theme-toggle__track{
  position:relative;
  display:block;
  width:76px;
  height:40px;
  border-radius:999px;
  background:linear-gradient(180deg,#7ec8ff 0%,#dff4ff 100%);
  box-shadow:
    inset 0 2px 5px rgba(255,255,255,.8),
    inset 0 -4px 8px rgba(0,0,0,.12),
    0 7px 18px rgba(0,0,0,.22);
  overflow:hidden;
  transition:background .35s ease, box-shadow .35s ease;
}

.tmt-theme-toggle__orb{
  position:absolute;
  left:5px;
  top:5px;
  width:30px;
  height:30px;
  border-radius:50%;
  transform:translateX(0);
  transition:transform .38s cubic-bezier(.2,.9,.2,1), box-shadow .35s ease;
  box-shadow:
    0 3px 8px rgba(0,0,0,.28),
    inset -3px -4px 7px rgba(0,0,0,.12),
    inset 3px 3px 6px rgba(255,255,255,.8);
}

.tmt-theme-toggle__sun,
.tmt-theme-toggle__moon{
  position:absolute;
  inset:0;
  border-radius:50%;
  transition:opacity .25s ease, transform .35s ease;
}

.tmt-theme-toggle__sun{
  background:
    radial-gradient(circle at 35% 30%,#fff7ad 0 20%,#ffd95a 45%,#f59e0b 100%);
  opacity:1;
}

.tmt-theme-toggle__sun::before{
  content:"";
  position:absolute;
  inset:-5px;
  border-radius:50%;
  background:
    conic-gradient(from 0deg, transparent 0 10deg, rgba(255,216,90,.85) 10deg 20deg, transparent 20deg 45deg);
  filter:blur(.2px);
  opacity:.8;
}

.tmt-theme-toggle__moon{
  background:
    radial-gradient(circle at 35% 30%,#ffffff 0 22%,#dbe5f2 58%,#9aa8bd 100%);
  opacity:0;
  transform:rotate(-25deg) scale(.88);
}

.tmt-theme-toggle__moon::before,
.tmt-theme-toggle__moon::after{
  content:"";
  position:absolute;
  border-radius:50%;
  background:rgba(120,130,150,.38);
}

.tmt-theme-toggle__moon::before{
  width:7px;
  height:7px;
  left:9px;
  top:8px;
}

.tmt-theme-toggle__moon::after{
  width:5px;
  height:5px;
  right:8px;
  bottom:9px;
}

.tmt-theme-toggle__stars{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .25s ease;
}

.tmt-theme-toggle__stars i{
  position:absolute;
  width:3px;
  height:3px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 7px rgba(255,255,255,.9);
}

.tmt-theme-toggle__stars i:nth-child(1){left:18px;top:10px}
.tmt-theme-toggle__stars i:nth-child(2){left:32px;top:26px;width:2px;height:2px}
.tmt-theme-toggle__stars i:nth-child(3){left:55px;top:12px;width:2px;height:2px}

html[data-tmt-theme="dark"] .tmt-theme-toggle__track{
  background:linear-gradient(180deg,#111827 0%,#273449 100%);
  box-shadow:
    inset 0 2px 5px rgba(255,255,255,.08),
    inset 0 -4px 8px rgba(0,0,0,.35),
    0 7px 18px rgba(0,0,0,.45);
}

html[data-tmt-theme="dark"] .tmt-theme-toggle__orb{
  transform:translateX(36px);
}

html[data-tmt-theme="dark"] .tmt-theme-toggle__sun{
  opacity:0;
  transform:rotate(50deg) scale(.8);
}

html[data-tmt-theme="dark"] .tmt-theme-toggle__moon{
  opacity:1;
  transform:rotate(0deg) scale(1);
}

html[data-tmt-theme="dark"] .tmt-theme-toggle__stars{
  opacity:1;
}

.tmt-theme-toggle:focus-visible{
  outline:3px solid color-mix(in srgb, var(--tmt-accent) 60%, transparent);
  outline-offset:4px;
}

@media (max-width:768px){
  .tmt-theme-toggle{
    right:12px;
    bottom:12px;
    transform:scale(.88);
    transform-origin:right bottom;
  }
}

/* ===========================================================
   TMT safe light-mode visual refinement v2
   Scope: visual only. Does not touch global .container/navigation/layout.
   =========================================================== */

html[data-tmt-theme="light"]{
  --tmt-bg:#f4f2ee;
  --tmt-bg-soft:#f4f2ee;

  --tmt-panel-a:#e5e6e8;
  --tmt-panel-b:#d9dbde;
  --tmt-panel-grad:linear-gradient(135deg,var(--tmt-panel-a) 30%,var(--tmt-panel-b) 70%);

  --tmt-text:#20242b;
  --tmt-text-strong:#111418;
  --tmt-card-text:#20242b;
  --tmt-card-muted:#515761;

  --tmt-link:#3f4650;
  --tmt-link-hover:#000000;
  --tmt-footer-link:#666d76;
  --tmt-footer-link-hover:#111418;

  --section-bg:var(--tmt-bg-soft);
  --panel:var(--tmt-bg-soft);
}

/* Warm off-white page/section background, not pure white */
html[data-tmt-theme="light"] body,
html[data-tmt-theme="light"] .site-main,
html[data-tmt-theme="light"] .entry-content,
html[data-tmt-theme="light"] .section{
  background:var(--tmt-bg-soft) !important;
}

/* Keep cards grey with shadow */
html[data-tmt-theme="light"] #about .container > .card,
html[data-tmt-theme="light"] #services .container > .grid,
html[data-tmt-theme="light"] .feature-section .container > .feature-item,
html[data-tmt-theme="light"] #portfolio .container > .card,
html[data-tmt-theme="light"] #tmt-single-player .card,
html[data-tmt-theme="light"] #tmt-dual-player .card{
  background:var(--tmt-panel-grad) !important;
  color:var(--tmt-card-text) !important;
  border-color:rgba(0,0,0,.08) !important;
}

/* Remove only the extra white/tray feeling around Services, without touching .container */
html[data-tmt-theme="light"] #services{
  background:var(--tmt-bg-soft) !important;
}

html[data-tmt-theme="light"] #services .container{
  background:transparent !important;
}

/* Service grid/card keeps its own shadow and hover */
html[data-tmt-theme="light"] #services .container > .grid{
  box-shadow:0 4px 10px rgba(0,0,0,.10) !important;
}

@media (hover:hover){
  html[data-tmt-theme="light"] #services .container > .grid:hover{
    transform:translateY(calc(-1 * var(--tmt-hover-lift))) !important;
    box-shadow:0 10px 24px rgba(0,0,0,.14) !important;
  }
}

/* Fix reversed heading/link colors */
html[data-tmt-theme="light"] h2 a,
html[data-tmt-theme="light"] h3 a,
html[data-tmt-theme="light"] .section h2 a,
html[data-tmt-theme="light"] .section h3 a,
html[data-tmt-theme="light"] .card a,
html[data-tmt-theme="light"] #services .grid a,
html[data-tmt-theme="light"] .feature-item a,
html[data-tmt-theme="light"] #portfolio a{
  color:var(--tmt-link) !important;
  text-decoration:none !important;
  transition:color .2s ease, opacity .2s ease, transform .2s ease;
}

html[data-tmt-theme="light"] h2 a:hover,
html[data-tmt-theme="light"] h3 a:hover,
html[data-tmt-theme="light"] .section h2 a:hover,
html[data-tmt-theme="light"] .section h3 a:hover,
html[data-tmt-theme="light"] .card a:hover,
html[data-tmt-theme="light"] #services .grid a:hover,
html[data-tmt-theme="light"] .feature-item a:hover,
html[data-tmt-theme="light"] #portfolio a:hover{
  color:var(--tmt-link-hover) !important;
}

/* TMT Media Germany / China cards: text follows hover */
html[data-tmt-theme="light"] #about a p,
html[data-tmt-theme="light"] #about .card p a{
  transition:color .2s ease;
}

html[data-tmt-theme="light"] #about a:hover p,
html[data-tmt-theme="light"] #about .card p a:hover{
  color:var(--tmt-link-hover) !important;
}

/* More links */
html[data-tmt-theme="light"] #services .more a,
html[data-tmt-theme="light"] .more a{
  color:var(--tmt-link) !important;
  text-decoration:none !important;
  font-weight:600;
  transition:color .2s ease, transform .2s ease, opacity .2s ease;
}

html[data-tmt-theme="light"] #services .more a:hover,
html[data-tmt-theme="light"] .more a:hover{
  color:var(--tmt-link-hover) !important;
  opacity:1 !important;
}

/* Footer copyright links: softer default */
html[data-tmt-theme="light"] #sinatra-copyright,
html[data-tmt-theme="light"] #sinatra-copyright .si-copyright-widget__text{
  color:var(--tmt-card-muted) !important;
}

html[data-tmt-theme="light"] #sinatra-copyright a,
html[data-tmt-theme="light"] #sinatra-copyright .cookie-settings-link{
  color:var(--tmt-footer-link) !important;
  text-decoration:none !important;
  transition:color .2s ease, opacity .2s ease;
}

html[data-tmt-theme="light"] #sinatra-copyright a:hover,
html[data-tmt-theme="light"] #sinatra-copyright .cookie-settings-link:hover{
  color:var(--tmt-footer-link-hover) !important;
}

/* ===========================================================
   TMT light mode v3 frame and link polish
   Scope: visual only. Keeps layout/container behavior intact.
   =========================================================== */

html[data-tmt-theme="light"]{
  --tmt-header-footer:#e3e0da;
  --tmt-content-bg:#f4f2ee;
  --tmt-link:#3f4650;
  --tmt-link-hover:#000000;
  --section-bg:var(--tmt-content-bg);
  --panel:var(--tmt-content-bg);
}

/* Center content surface */
html[data-tmt-theme="light"] body,
html[data-tmt-theme="light"] .site-main,
html[data-tmt-theme="light"] .entry-content,
html[data-tmt-theme="light"] .section{
  background:var(--tmt-content-bg) !important;
}

/* Header/footer frame */
html[data-tmt-theme="light"] #sinatra-header,
html[data-tmt-theme="light"] .site-header,
html[data-tmt-theme="light"] #sinatra-header-inner,
html[data-tmt-theme="light"] .si-header-container{
  background:rgba(227,224,218,.92) !important;
}

@supports ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))){
  html[data-tmt-theme="light"] #sinatra-header{
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
  }
}

html[data-tmt-theme="light"] #sinatra-footer,
html[data-tmt-theme="light"] .site-footer,
html[data-tmt-theme="light"] #sinatra-copyright,
html[data-tmt-theme="light"] .si-copyright{
  background:var(--tmt-header-footer) !important;
}

/* Footer/copyright text in white */
html[data-tmt-theme="light"] #sinatra-footer,
html[data-tmt-theme="light"] #sinatra-footer p,
html[data-tmt-theme="light"] #sinatra-footer li,
html[data-tmt-theme="light"] #sinatra-copyright,
html[data-tmt-theme="light"] #sinatra-copyright .si-copyright-widget__text,
html[data-tmt-theme="light"] .si-copyright-widget__text{
  color:#fff !important;
}

html[data-tmt-theme="light"] #sinatra-footer a,
html[data-tmt-theme="light"] #sinatra-copyright a,
html[data-tmt-theme="light"] #sinatra-copyright .cookie-settings-link,
html[data-tmt-theme="light"] .si-copyright-widget__text a{
  color:#fff !important;
  text-decoration:none !important;
}

/* Reuse Sinatra-like underline hover for content links, but not nav/buttons/player controls/toggle */
html[data-tmt-theme="light"] .entry-content a:not(.btn):not(.button):not([role="button"]):not(.lang-flag):not(.tmt-theme-toggle):hover,
html[data-tmt-theme="light"] .card a:not(.btn):not(.button):not([role="button"]):hover,
html[data-tmt-theme="light"] .more a:hover,
html[data-tmt-theme="light"] #services .grid a:hover,
html[data-tmt-theme="light"] .feature-item a:hover,
html[data-tmt-theme="light"] #about a:hover,
html[data-tmt-theme="light"] #portfolio a:hover,
html[data-tmt-theme="light"] #sinatra-footer a:hover,
html[data-tmt-theme="light"] #sinatra-copyright a:hover,
html[data-tmt-theme="light"] #sinatra-copyright .cookie-settings-link:hover{
  text-decoration:underline !important;
  text-decoration-thickness:1px !important;
  text-underline-offset:4px !important;
}

/* Explicitly keep navigation and player controls free of underlines */
html[data-tmt-theme="light"] #sinatra-header a:hover,
html[data-tmt-theme="light"] .main-navigation a:hover,
html[data-tmt-theme="light"] .sinatra-primary-nav a:hover,
html[data-tmt-theme="light"] #tmt-single-player .tmt-transport button:hover,
html[data-tmt-theme="light"] #tmt-dual-player .tmt-transport button:hover,
html[data-tmt-theme="light"] .tmt-theme-toggle:hover{
  text-decoration:none !important;
}

/* Normal content link colors */
html[data-tmt-theme="light"] .entry-content a:not(.btn):not(.button):not([role="button"]):not(.lang-flag),
html[data-tmt-theme="light"] .card a:not(.btn):not(.button):not([role="button"]),
html[data-tmt-theme="light"] .more a,
html[data-tmt-theme="light"] #services .grid a,
html[data-tmt-theme="light"] .feature-item a,
html[data-tmt-theme="light"] #about a,
html[data-tmt-theme="light"] #portfolio a{
  color:var(--tmt-link) !important;
  transition:color .2s ease, opacity .2s ease, transform .2s ease;
}

html[data-tmt-theme="light"] .entry-content a:not(.btn):not(.button):not([role="button"]):not(.lang-flag):hover,
html[data-tmt-theme="light"] .card a:not(.btn):not(.button):not([role="button"]):hover,
html[data-tmt-theme="light"] .more a:hover,
html[data-tmt-theme="light"] #services .grid a:hover,
html[data-tmt-theme="light"] .feature-item a:hover,
html[data-tmt-theme="light"] #about a:hover,
html[data-tmt-theme="light"] #portfolio a:hover{
  color:var(--tmt-link-hover) !important;
}

/* TMT Media Germany / China paragraph hover inherits link hover */
html[data-tmt-theme="light"] #about a p{
  transition:color .2s ease;
}

html[data-tmt-theme="light"] #about a:hover p{
  color:var(--tmt-link-hover) !important;
}

/* ===========================================================
   TMT light mode v4 header footer dropdown
   =========================================================== */

html[data-tmt-theme="light"]{
  /* darker than cards, but still soft */
  --tmt-header-footer:#cfcac1;
  --tmt-header-footer-rgba:rgba(207,202,193,.94);
  --tmt-content-bg:#f4f2ee;
}

/* Header + footer slightly darker than the cards */
html[data-tmt-theme="light"] #sinatra-header,
html[data-tmt-theme="light"] .site-header,
html[data-tmt-theme="light"] #sinatra-header-inner,
html[data-tmt-theme="light"] .si-header-container{
  background:var(--tmt-header-footer-rgba) !important;
}

html[data-tmt-theme="light"] #sinatra-footer,
html[data-tmt-theme="light"] .site-footer,
html[data-tmt-theme="light"] #sinatra-copyright,
html[data-tmt-theme="light"] .si-copyright{
  background:var(--tmt-header-footer) !important;
}

/* Make sure dropdowns sit above hero/slider/images */
#sinatra-header,
#sinatra-header-inner,
#sinatra-header .si-header-container,
.site-header,
.si-header-container{
  position:relative !important;
  z-index:999999 !important;
}

#sinatra-header .sub-menu,
#sinatra-header .children,
#sinatra-header .dropdown-menu,
#sinatra-header .menu-item:hover > .sub-menu,
#sinatra-header .menu-item:focus-within > .sub-menu,
.main-navigation .sub-menu,
.sinatra-primary-nav .sub-menu{
  z-index:1000001 !important;
}

.tl-hero-slider,
.tl-hero-slider *,
.hero,
.hero *,
#hero,
#hero *,
.wp-block-cover,
.wp-block-cover *,
.wp-block-image,
.wp-block-image *{
  z-index:auto;
}

/* ===========================================================
   TMT light mode v5 dropdown stack and matched frame tint
   =========================================================== */

html[data-tmt-theme="light"]{
  /* Same grey family as cards, only slightly darker */
  --tmt-header-footer:#d2d4d6;
  --tmt-header-footer-rgba:rgba(210,212,214,.96);
}

/* Header/footer same tint family as cards */
html[data-tmt-theme="light"] #sinatra-header,
html[data-tmt-theme="light"] .site-header,
html[data-tmt-theme="light"] #sinatra-header-inner,
html[data-tmt-theme="light"] .si-header-container{
  background:var(--tmt-header-footer-rgba) !important;
}

html[data-tmt-theme="light"] #sinatra-footer,
html[data-tmt-theme="light"] .site-footer,
html[data-tmt-theme="light"] #sinatra-copyright,
html[data-tmt-theme="light"] .si-copyright{
  background:var(--tmt-header-footer) !important;
}

/* Dropdown fix: header must be a high visible stacking context */
#sinatra-header,
.site-header{
  position:relative !important;
  z-index:2147480000 !important;
  overflow:visible !important;
  isolation:isolate !important;
}

#sinatra-header-inner,
#sinatra-header .si-header-container,
.site-header .si-header-container,
.si-header-container,
#sinatra-header .si-header-row,
#sinatra-header .si-header-column,
#sinatra-header .si-header-element,
#sinatra-header .site-navigation,
#sinatra-header .main-navigation,
#sinatra-header .sinatra-primary-nav{
  overflow:visible !important;
  z-index:2147480001 !important;
}

/* Dropdown itself */
#sinatra-header .sub-menu,
#sinatra-header .children,
#sinatra-header .dropdown-menu,
#sinatra-header .menu-item:hover > .sub-menu,
#sinatra-header .menu-item:focus-within > .sub-menu,
.main-navigation .sub-menu,
.sinatra-primary-nav .sub-menu{
  position:absolute !important;
  z-index:2147480002 !important;
}

/* Hero/slider should never sit above navigation */
.tl-hero-slider,
.tl-hero-slider .slides,
.tl-hero-slider .slide,
.tl-hero-slider img,
.hero,
#hero,
.wp-block-cover{
  position:relative;
  z-index:0 !important;
}

/* If the hero overlay has its own z-index, keep it below menu */
.tl-hero-slider *,
.hero *,
#hero *,
.wp-block-cover *{
  z-index:auto !important;
}

/* Admin bar still wins when logged in */
#wpadminbar{
  z-index:2147483647 !important;
}

/* ===========================================================
   TMT dark mode charcoal studio pass v2
   Stronger contrast, no navy/blue tint, white menu/text.
   Players only lightly normalized; detailed player pass later.
   =========================================================== */

html[data-tmt-theme="dark"]{
  color-scheme:dark;

  --tmt-bg:#050505;
  --tmt-bg-soft:#0a0a0a;

  --tmt-header-footer:#070707;
  --tmt-header-footer-rgba:rgba(7,7,7,.96);

  --tmt-panel-a:#1e1e1e;
  --tmt-panel-b:#171717;
  --tmt-panel-grad:linear-gradient(135deg,var(--tmt-panel-a) 15%,var(--tmt-panel-b) 85%);

  --tmt-text:#f3f3f3;
  --tmt-text-strong:#ffffff;
  --tmt-card-text:#f3f3f3;
  --tmt-card-muted:#d0d0d0;
  --tmt-muted:#d0d0d0;

  --tmt-link:#ffffff;
  --tmt-link-hover:#ffffff;
  --tmt-card-link:#ffffff;
  --tmt-card-link-hover:#ffffff;
  --tmt-accent:#ffffff;

  --tmt-border:rgba(255,255,255,.12);
  --tmt-shadow:0 14px 36px rgba(0,0,0,.58);
  --tmt-shadow-hover:0 18px 46px rgba(0,0,0,.75);

  --text:var(--tmt-text);
  --muted:var(--tmt-muted);
  --border:var(--tmt-border);
  --section-bg:var(--tmt-bg-soft);
  --panel:var(--tmt-bg-soft);
  --accent:var(--tmt-accent);
}

/* Main surfaces: true charcoal/near-black, no blue */
html[data-tmt-theme="dark"],
html[data-tmt-theme="dark"] body,
html[data-tmt-theme="dark"] .site,
html[data-tmt-theme="dark"] .site-content,
html[data-tmt-theme="dark"] #content,
html[data-tmt-theme="dark"] #primary,
html[data-tmt-theme="dark"] #main,
html[data-tmt-theme="dark"] .site-main,
html[data-tmt-theme="dark"] .entry-content,
html[data-tmt-theme="dark"] .section{
  background:var(--tmt-bg-soft) !important;
  color:var(--tmt-text) !important;
}

/* Header/footer frame */
html[data-tmt-theme="dark"] #sinatra-header,
html[data-tmt-theme="dark"] .site-header,
html[data-tmt-theme="dark"] #sinatra-header-inner,
html[data-tmt-theme="dark"] .si-header-container,
html[data-tmt-theme="dark"] #sinatra-footer,
html[data-tmt-theme="dark"] .site-footer,
html[data-tmt-theme="dark"] #sinatra-copyright,
html[data-tmt-theme="dark"] .si-copyright{
  background:var(--tmt-header-footer) !important;
  color:#ffffff !important;
}

@supports ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))){
  html[data-tmt-theme="dark"] #sinatra-header{
    background:var(--tmt-header-footer-rgba) !important;
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
  }
}

/* Force header/menu text white */
html[data-tmt-theme="dark"] #sinatra-header,
html[data-tmt-theme="dark"] #sinatra-header *,
html[data-tmt-theme="dark"] .site-header,
html[data-tmt-theme="dark"] .site-header *,
html[data-tmt-theme="dark"] .main-navigation,
html[data-tmt-theme="dark"] .main-navigation *,
html[data-tmt-theme="dark"] .sinatra-primary-nav,
html[data-tmt-theme="dark"] .sinatra-primary-nav *,
html[data-tmt-theme="dark"] #sinatra-primary-nav,
html[data-tmt-theme="dark"] #sinatra-primary-nav *{
  color:#ffffff !important;
}

/* Dropdowns */
html[data-tmt-theme="dark"] #sinatra-header .sub-menu,
html[data-tmt-theme="dark"] .main-navigation .sub-menu,
html[data-tmt-theme="dark"] .sinatra-primary-nav .sub-menu{
  background:#101010 !important;
  border-color:rgba(255,255,255,.12) !important;
  box-shadow:0 12px 32px rgba(0,0,0,.7) !important;
}

/* Global typography */
html[data-tmt-theme="dark"] h1,
html[data-tmt-theme="dark"] h2,
html[data-tmt-theme="dark"] h3,
html[data-tmt-theme="dark"] h4,
html[data-tmt-theme="dark"] h5,
html[data-tmt-theme="dark"] h6,
html[data-tmt-theme="dark"] p,
html[data-tmt-theme="dark"] li,
html[data-tmt-theme="dark"] span,
html[data-tmt-theme="dark"] figcaption,
html[data-tmt-theme="dark"] label,
html[data-tmt-theme="dark"] strong,
html[data-tmt-theme="dark"] b,
html[data-tmt-theme="dark"] .card,
html[data-tmt-theme="dark"] .card *,
html[data-tmt-theme="dark"] #services .grid,
html[data-tmt-theme="dark"] #services .grid *,
html[data-tmt-theme="dark"] .feature-item,
html[data-tmt-theme="dark"] .feature-item *{
  color:var(--tmt-text) !important;
}

/* Links white, hover underline */
html[data-tmt-theme="dark"] a,
html[data-tmt-theme="dark"] .entry-content a,
html[data-tmt-theme="dark"] .card a,
html[data-tmt-theme="dark"] .more a,
html[data-tmt-theme="dark"] #services .grid a,
html[data-tmt-theme="dark"] .feature-item a,
html[data-tmt-theme="dark"] #about a,
html[data-tmt-theme="dark"] #portfolio a,
html[data-tmt-theme="dark"] #sinatra-footer a,
html[data-tmt-theme="dark"] #sinatra-copyright a{
  color:#ffffff !important;
}

html[data-tmt-theme="dark"] .entry-content a:hover,
html[data-tmt-theme="dark"] .card a:hover,
html[data-tmt-theme="dark"] .more a:hover,
html[data-tmt-theme="dark"] #services .grid a:hover,
html[data-tmt-theme="dark"] .feature-item a:hover,
html[data-tmt-theme="dark"] #about a:hover,
html[data-tmt-theme="dark"] #portfolio a:hover,
html[data-tmt-theme="dark"] #sinatra-footer a:hover,
html[data-tmt-theme="dark"] #sinatra-copyright a:hover{
  color:#ffffff !important;
  text-decoration:underline !important;
  text-decoration-thickness:1px !important;
  text-underline-offset:4px !important;
  opacity:.92;
}

/* Cards: brighter charcoal than background for clear contrast */
html[data-tmt-theme="dark"] #about .container > .card,
html[data-tmt-theme="dark"] #services .container > .grid,
html[data-tmt-theme="dark"] .feature-section .container > .feature-item,
html[data-tmt-theme="dark"] #portfolio .container > .card,
html[data-tmt-theme="dark"] .team__card,
html[data-tmt-theme="dark"] html[data-tmt-theme="dark"] #tmt-single-player .card,
html[data-tmt-theme="dark"] #tmt-dual-player .card{
  background:var(--tmt-panel-grad) !important;
  border:1px solid var(--tmt-border) !important;
  color:var(--tmt-card-text) !important;
  box-shadow:var(--tmt-shadow) !important;
}

@media (hover:hover){
  html[data-tmt-theme="dark"] #about .container > .card:hover,
  html[data-tmt-theme="dark"] #services .container > .grid:hover,
  html[data-tmt-theme="dark"] .feature-section .container > .feature-item:hover,
  html[data-tmt-theme="dark"] #portfolio .container > .card:hover,
  html[data-tmt-theme="dark"] #tmt-single-player .card:hover,
  html[data-tmt-theme="dark"] #tmt-dual-player .card:hover{
    box-shadow:var(--tmt-shadow-hover) !important;
  }
}

/* Header logo white in dark mode */
html[data-tmt-theme="dark"] #sinatra-header .sinatra-logo img,
html[data-tmt-theme="dark"] #sinatra-header .custom-logo,
html[data-tmt-theme="dark"] .site-header .custom-logo{
  filter:brightness(0) invert(1) !important;
}

/* Keep flags/social icons untouched */
html[data-tmt-theme="dark"] #sinatra-header .lang-flag img,
html[data-tmt-theme="dark"] #sinatra-header .menu-item-lang-flag img,
html[data-tmt-theme="dark"] .social-icons img,
html[data-tmt-theme="dark"] .social-icons-de img,
html[data-tmt-theme="dark"] .social-icons-zh img,
html[data-tmt-theme="dark"] .social-icons-en img{
  filter:none !important;
}

/* Footer/copyright */
html[data-tmt-theme="dark"] #sinatra-footer,
html[data-tmt-theme="dark"] #sinatra-footer *,
html[data-tmt-theme="dark"] .site-footer,
html[data-tmt-theme="dark"] .site-footer *,
html[data-tmt-theme="dark"] #sinatra-copyright,
html[data-tmt-theme="dark"] #sinatra-copyright *,
html[data-tmt-theme="dark"] .si-copyright-widget__text,
html[data-tmt-theme="dark"] .si-copyright-widget__text *{
  color:#ffffff !important;
}

/* Theme toggle: no blue tint */
html[data-tmt-theme="dark"] .tmt-theme-toggle__track{
  background:linear-gradient(180deg,#0d0d0d 0%,#202020 100%) !important;
}

/* ===========================================================
   TMT Phase 3B v2: Footer text + submenu hover polish
   =========================================================== */

/* Light mode footer: force every footer text/link item black */
html[data-tmt-theme="light"] body footer,
html[data-tmt-theme="light"] body footer *,
html[data-tmt-theme="light"] body #sinatra-footer,
html[data-tmt-theme="light"] body #sinatra-footer *,
html[data-tmt-theme="light"] body .site-footer,
html[data-tmt-theme="light"] body .site-footer *,
html[data-tmt-theme="light"] body #colophon,
html[data-tmt-theme="light"] body #colophon *,
html[data-tmt-theme="light"] body #sinatra-copyright,
html[data-tmt-theme="light"] body #sinatra-copyright *,
html[data-tmt-theme="light"] body .si-copyright,
html[data-tmt-theme="light"] body .si-copyright *,
html[data-tmt-theme="light"] body .si-copyright-widget__text,
html[data-tmt-theme="light"] body .si-copyright-widget__text *,
html[data-tmt-theme="light"] body .tmt-footer-stack,
html[data-tmt-theme="light"] body .tmt-footer-stack *,
html[data-tmt-theme="light"] body .tmt-footer-copyright-row,
html[data-tmt-theme="light"] body .tmt-footer-copyright-row *,
html[data-tmt-theme="light"] body .tmt-footer-sitelock-row,
html[data-tmt-theme="light"] body .tmt-footer-sitelock-row *{
  color:#000000 !important;
  -webkit-text-fill-color:#000000 !important;
}

html[data-tmt-theme="light"] body footer a,
html[data-tmt-theme="light"] body #sinatra-footer a,
html[data-tmt-theme="light"] body .site-footer a,
html[data-tmt-theme="light"] body #colophon a,
html[data-tmt-theme="light"] body #sinatra-copyright a,
html[data-tmt-theme="light"] body .si-copyright-widget__text a,
html[data-tmt-theme="light"] body .tmt-footer-copyright-row a,
html[data-tmt-theme="light"] body a.cookie-settings-link,
html[data-tmt-theme="light"] body .cookie-settings-link{
  color:#000000 !important;
  -webkit-text-fill-color:#000000 !important;
  text-decoration:none !important;
}

html[data-tmt-theme="light"] body footer a:hover,
html[data-tmt-theme="light"] body #sinatra-footer a:hover,
html[data-tmt-theme="light"] body .site-footer a:hover,
html[data-tmt-theme="light"] body #colophon a:hover,
html[data-tmt-theme="light"] body #sinatra-copyright a:hover,
html[data-tmt-theme="light"] body .si-copyright-widget__text a:hover,
html[data-tmt-theme="light"] body .tmt-footer-copyright-row a:hover,
html[data-tmt-theme="light"] body a.cookie-settings-link:hover,
html[data-tmt-theme="light"] body .cookie-settings-link:hover{
  color:#000000 !important;
  -webkit-text-fill-color:#000000 !important;
  text-decoration:underline !important;
  text-decoration-thickness:1px !important;
  text-underline-offset:4px !important;
  opacity:.86;
}

/* Keep SiteLock image normal */
html[data-tmt-theme="light"] body .tmt-footer-sitelock-img,
html[data-tmt-theme="light"] body footer img,
html[data-tmt-theme="light"] body .site-footer img{
  -webkit-text-fill-color:initial !important;
  filter:none !important;
}

/* Dark mode footer: force every footer text/link item white */
html[data-tmt-theme="dark"] body footer,
html[data-tmt-theme="dark"] body footer *,
html[data-tmt-theme="dark"] body #sinatra-footer,
html[data-tmt-theme="dark"] body #sinatra-footer *,
html[data-tmt-theme="dark"] body .site-footer,
html[data-tmt-theme="dark"] body .site-footer *,
html[data-tmt-theme="dark"] body #colophon,
html[data-tmt-theme="dark"] body #colophon *,
html[data-tmt-theme="dark"] body #sinatra-copyright,
html[data-tmt-theme="dark"] body #sinatra-copyright *,
html[data-tmt-theme="dark"] body .si-copyright,
html[data-tmt-theme="dark"] body .si-copyright *,
html[data-tmt-theme="dark"] body .si-copyright-widget__text,
html[data-tmt-theme="dark"] body .si-copyright-widget__text *,
html[data-tmt-theme="dark"] body .tmt-footer-stack,
html[data-tmt-theme="dark"] body .tmt-footer-stack *,
html[data-tmt-theme="dark"] body .tmt-footer-copyright-row,
html[data-tmt-theme="dark"] body .tmt-footer-copyright-row *,
html[data-tmt-theme="dark"] body .tmt-footer-sitelock-row,
html[data-tmt-theme="dark"] body .tmt-footer-sitelock-row *{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}

html[data-tmt-theme="dark"] body footer a,
html[data-tmt-theme="dark"] body #sinatra-footer a,
html[data-tmt-theme="dark"] body .site-footer a,
html[data-tmt-theme="dark"] body #colophon a,
html[data-tmt-theme="dark"] body #sinatra-copyright a,
html[data-tmt-theme="dark"] body .si-copyright-widget__text a,
html[data-tmt-theme="dark"] body .tmt-footer-copyright-row a,
html[data-tmt-theme="dark"] body a.cookie-settings-link,
html[data-tmt-theme="dark"] body .cookie-settings-link{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  text-decoration:none !important;
}

html[data-tmt-theme="dark"] body footer a:hover,
html[data-tmt-theme="dark"] body #sinatra-footer a:hover,
html[data-tmt-theme="dark"] body .site-footer a:hover,
html[data-tmt-theme="dark"] body #colophon a:hover,
html[data-tmt-theme="dark"] body #sinatra-copyright a:hover,
html[data-tmt-theme="dark"] body .si-copyright-widget__text a:hover,
html[data-tmt-theme="dark"] body .tmt-footer-copyright-row a:hover,
html[data-tmt-theme="dark"] body a.cookie-settings-link:hover,
html[data-tmt-theme="dark"] body .cookie-settings-link:hover{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  text-decoration:underline !important;
  text-decoration-thickness:1px !important;
  text-underline-offset:4px !important;
  opacity:.92;
}

/* Submenu/dropdown: remove hover overlay/background, keep underline only */
html[data-tmt-theme] #sinatra-header .sub-menu a,
html[data-tmt-theme] #sinatra-header .children a,
html[data-tmt-theme] #sinatra-header .dropdown-menu a,
html[data-tmt-theme] .main-navigation .sub-menu a,
html[data-tmt-theme] .sinatra-primary-nav .sub-menu a{
  background:transparent !important;
  box-shadow:none !important;
  text-decoration:none !important;
}

html[data-tmt-theme] #sinatra-header .sub-menu a::before,
html[data-tmt-theme] #sinatra-header .sub-menu a::after,
html[data-tmt-theme] #sinatra-header .children a::before,
html[data-tmt-theme] #sinatra-header .children a::after,
html[data-tmt-theme] #sinatra-header .dropdown-menu a::before,
html[data-tmt-theme] #sinatra-header .dropdown-menu a::after,
html[data-tmt-theme] .main-navigation .sub-menu a::before,
html[data-tmt-theme] .main-navigation .sub-menu a::after,
html[data-tmt-theme] .sinatra-primary-nav .sub-menu a::before,
html[data-tmt-theme] .sinatra-primary-nav .sub-menu a::after{
  display:none !important;
  content:none !important;
  background:transparent !important;
  box-shadow:none !important;
}

html[data-tmt-theme="light"] #sinatra-header .sub-menu a,
html[data-tmt-theme="light"] #sinatra-header .children a,
html[data-tmt-theme="light"] #sinatra-header .dropdown-menu a,
html[data-tmt-theme="light"] .main-navigation .sub-menu a,
html[data-tmt-theme="light"] .sinatra-primary-nav .sub-menu a{
  color:#000000 !important;
  -webkit-text-fill-color:#000000 !important;
}

html[data-tmt-theme="dark"] #sinatra-header .sub-menu a,
html[data-tmt-theme="dark"] #sinatra-header .children a,
html[data-tmt-theme="dark"] #sinatra-header .dropdown-menu a,
html[data-tmt-theme="dark"] .main-navigation .sub-menu a,
html[data-tmt-theme="dark"] .sinatra-primary-nav .sub-menu a{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}

html[data-tmt-theme="light"] #sinatra-header .sub-menu a:hover,
html[data-tmt-theme="light"] #sinatra-header .sub-menu a:focus-visible,
html[data-tmt-theme="light"] #sinatra-header .children a:hover,
html[data-tmt-theme="light"] #sinatra-header .children a:focus-visible,
html[data-tmt-theme="light"] #sinatra-header .dropdown-menu a:hover,
html[data-tmt-theme="light"] #sinatra-header .dropdown-menu a:focus-visible,
html[data-tmt-theme="light"] .main-navigation .sub-menu a:hover,
html[data-tmt-theme="light"] .main-navigation .sub-menu a:focus-visible,
html[data-tmt-theme="light"] .sinatra-primary-nav .sub-menu a:hover,
html[data-tmt-theme="light"] .sinatra-primary-nav .sub-menu a:focus-visible{
  color:#000000 !important;
  -webkit-text-fill-color:#000000 !important;
  background:transparent !important;
  box-shadow:none !important;
  text-decoration:underline !important;
  text-decoration-thickness:1px !important;
  text-underline-offset:4px !important;
}

html[data-tmt-theme="dark"] #sinatra-header .sub-menu a:hover,
html[data-tmt-theme="dark"] #sinatra-header .sub-menu a:focus-visible,
html[data-tmt-theme="dark"] #sinatra-header .children a:hover,
html[data-tmt-theme="dark"] #sinatra-header .children a:focus-visible,
html[data-tmt-theme="dark"] #sinatra-header .dropdown-menu a:hover,
html[data-tmt-theme="dark"] #sinatra-header .dropdown-menu a:focus-visible,
html[data-tmt-theme="dark"] .main-navigation .sub-menu a:hover,
html[data-tmt-theme="dark"] .main-navigation .sub-menu a:focus-visible,
html[data-tmt-theme="dark"] .sinatra-primary-nav .sub-menu a:hover,
html[data-tmt-theme="dark"] .sinatra-primary-nav .sub-menu a:focus-visible{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  background:transparent !important;
  box-shadow:none !important;
  text-decoration:underline !important;
  text-decoration-thickness:1px !important;
  text-underline-offset:4px !important;
}


/* ===========================================================
   TMT Phase 8E — Logo / service-icon theme polish
   =========================================================== */

/* Header logo black in light mode */
html[data-tmt-theme="light"] #sinatra-header .sinatra-logo img,
html[data-tmt-theme="light"] #sinatra-header .custom-logo,
html[data-tmt-theme="light"] .site-header .custom-logo{
  filter:brightness(0) invert(0) !important;
}

/* Header logo white in dark mode */
html[data-tmt-theme="dark"] #sinatra-header .sinatra-logo img,
html[data-tmt-theme="dark"] #sinatra-header .custom-logo,
html[data-tmt-theme="dark"] .site-header .custom-logo{
  filter:brightness(0) invert(1) !important;
}

/* Do not invert language flags/social icons */
html[data-tmt-theme="light"] #sinatra-header .lang-flag img,
html[data-tmt-theme="light"] #sinatra-header .menu-item-lang-flag img,
html[data-tmt-theme="dark"] #sinatra-header .lang-flag img,
html[data-tmt-theme="dark"] #sinatra-header .menu-item-lang-flag img,
html[data-tmt-theme="light"] .social-icons img,
html[data-tmt-theme="dark"] .social-icons img,
html[data-tmt-theme="light"] .social-icons-de img,
html[data-tmt-theme="dark"] .social-icons-de img,
html[data-tmt-theme="light"] .social-icons-zh img,
html[data-tmt-theme="dark"] .social-icons-zh img,
html[data-tmt-theme="light"] .social-icons-en img,
html[data-tmt-theme="dark"] .social-icons-en img{
  filter:none !important;
}

/* If service icons are monochrome/dark artwork, make them white in dark mode */
html[data-tmt-theme="dark"] img.service-icon{
  filter:brightness(0) invert(1) !important;
}

/* Dark mode breadcrumb bar only */
html[data-tmt-theme="dark"] .page-header.si-has-breadcrumbs{
  background:#121212 !important;
  border-top:1px solid rgba(255,255,255,.08) !important;
}

/* Keep the actual breadcrumb text area transparent */
html[data-tmt-theme="dark"] .page-header.si-has-breadcrumbs .si-container,
html[data-tmt-theme="dark"] .page-header.si-has-breadcrumbs .si-breadcrumbs,
html[data-tmt-theme="dark"] .page-header.si-has-breadcrumbs .breadcrumb-trail,
html[data-tmt-theme="dark"] .page-header.si-has-breadcrumbs .breadcrumbs{
  background:transparent !important;
}
/* Video player cards */
html[data-tmt-theme] .tmt-video-card{
  background:var(--tmt-panel-grad) !important;
  border:1px solid var(--tmt-border) !important;
  color:var(--tmt-card-text) !important;
  box-shadow:var(--tmt-shadow) !important;
  border-radius:18px;
  padding:clamp(16px, 2.5vw, 28px);
}

@media (hover:hover){
  html[data-tmt-theme] .tmt-video-card:hover{
    box-shadow:var(--tmt-shadow-hover) !important;
  }
}

.tmt-video-card .compare-player,
.tmt-video-card .tmt-single-video-player{
  max-width:1100px;
  margin:0 auto;
}


/* ===========================================================
   TMT Hover System v1.0 — about local safeguard
   =========================================================== */

.tmt-about-card{
  transform:var(--tmt-card-transform)!important;
  transition:transform var(--tmt-transition), box-shadow var(--tmt-transition), background-color var(--tmt-transition)!important;
  will-change:transform;
}

@media (hover:hover){
  .tmt-about-card:hover{
    transform:var(--tmt-card-transform-hover)!important;
    box-shadow:var(--tmt-shadow-hover)!important;
    filter:none!important;
  }
}

.tmt-about-card:hover *{
  filter:none!important;
}


/* ===========================================================
   TMT Hover System v1.1 — about card depth correction
   =========================================================== */

.tmt-about-card{
  transform:translateY(0)!important;
  box-shadow:var(--tmt-shadow)!important;
  transition:transform var(--tmt-transition), box-shadow var(--tmt-transition)!important;
}

@media (hover:hover){
  .tmt-about-card:hover{
    transform:translateY(calc(-1 * var(--tmt-hover-lift, 5px)))!important;
    box-shadow:var(--tmt-shadow-hover)!important;
    filter:none!important;
  }
}

/* ===========================================================
   TMT about section layout and button theme
   =========================================================== */

/* Layout
   ----------------------------------------------------------- */

#about .about-flex{
  --about-btn-gap:1.25rem;
  --about-btn-bg:#000000;
  --about-btn-text:#ffffff;
  --about-btn-hover-bg:#ffffff;
  --about-btn-hover-text:#000000;

  display:grid !important;
  grid-template-columns:minmax(0, 1fr) minmax(220px, 300px) !important;
  column-gap:clamp(1.75rem, 3vw, 2.5rem) !important;
  row-gap:1.15rem !important;
  align-items:start !important;
}

html[data-tmt-theme="dark"] #about .about-flex,
html:not([data-tmt-theme]) #about .about-flex{
  --about-btn-bg:#ffffff;
  --about-btn-text:#000000;
  --about-btn-hover-bg:#000000;
  --about-btn-hover-text:#ffffff;
}

html[data-tmt-theme="light"] #about .about-flex{
  --about-btn-bg:#000000;
  --about-btn-text:#ffffff;
  --about-btn-hover-bg:#ffffff;
  --about-btn-hover-text:#000000;
}

#about .about-text{
  grid-column:1 !important;
  grid-row:1 !important;
  min-width:0 !important;
}

#about .about-text > :first-child{
  margin-top:0 !important;
}

#about .about-image{
  grid-column:2 !important;
  grid-row:1 !important;
  align-self:start !important;
  justify-self:center !important;
  width:100% !important;
  max-width:300px !important;
  margin:0 !important;
  text-align:center !important;
}

#about .about-image img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  margin:0 auto !important;
  border-radius:12px !important;
  box-shadow:0 4px 12px rgba(0,0,0,.18) !important;
}

#about .about-image figcaption{
  display:block !important;
  margin-top:.65rem !important;
  text-align:center !important;
  color:var(--tmt-text-muted, var(--muted)) !important;
  -webkit-text-fill-color:var(--tmt-text-muted, var(--muted)) !important;
}

/* Button structure
   ----------------------------------------------------------- */

#about .about-cta{
  grid-column:1 / -1 !important;
  grid-row:2 !important;
  justify-content:center !important;
  min-height:56px !important;
  margin-top:.25rem !important;
  margin-bottom:var(--about-btn-gap) !important;
  padding:.75rem 1.25rem !important;
}

#about .about-links{
  grid-column:1 / -1 !important;
  grid-row:3 !important;
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:var(--about-btn-gap) !important;
  width:100% !important;
  margin:0 !important;
}

#about .about-links > a{
  justify-content:flex-start !important;
  gap:.85rem !important;
  min-height:64px !important;
  padding:.85rem 1rem !important;
}

#about .about-cta,
#about .about-links > a{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  width:100% !important;
  border-radius:12px !important;
  background:var(--about-btn-bg) !important;
  color:var(--about-btn-text) !important;
  -webkit-text-fill-color:var(--about-btn-text) !important;
  border:1px solid transparent !important;
  outline:0 !important;
  box-shadow:var(--tmt-shadow) !important;
  text-align:center !important;
  text-decoration:none !important;
  overflow:hidden !important;
  isolation:isolate !important;
  opacity:1 !important;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background-color .18s ease,
    color .18s ease,
    border-color .18s ease !important;
}

/* Button typography
   ----------------------------------------------------------- */

#about .about-cta,
#about .about-links > a,
#about .about-btn-label{
  font-family:inherit !important;
  font-size:1rem !important;
  font-weight:700 !important;
  line-height:1.25 !important;
  letter-spacing:0 !important;
}

/* Button label cleanup
   ----------------------------------------------------------- */

#about .about-cta *,
#about .about-links > a *{
  text-decoration:none !important;
}

#about .about-btn-label{
  position:relative !important;
  display:inline-block !important;
  width:auto !important;
  max-width:max-content !important;
  background:transparent !important;
  color:inherit !important;
  -webkit-text-fill-color:currentColor !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  text-decoration:none !important;
}

/* Button hover / focus behavior
   ----------------------------------------------------------- */

#about .about-cta:hover,
#about .about-links > a:hover,
#about .about-cta:focus-visible,
#about .about-links > a:focus-visible{
  background:var(--about-btn-hover-bg) !important;
  color:var(--about-btn-hover-text) !important;
  -webkit-text-fill-color:var(--about-btn-hover-text) !important;
  border-color:transparent !important;
  outline:0 !important;
  transform:translateY(-2px) !important;
  box-shadow:var(--tmt-shadow-hover) !important;
  text-decoration:none !important;
  opacity:1 !important;
}

#about .about-cta:hover .about-btn-label,
#about .about-links > a:hover .about-btn-label,
#about .about-cta:focus-visible .about-btn-label,
#about .about-links > a:focus-visible .about-btn-label{
  background:transparent !important;
  color:var(--about-btn-hover-text) !important;
  -webkit-text-fill-color:currentColor !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
}

/* Compatibility override for older broad theme rules
   ----------------------------------------------------------- */

html[data-tmt-theme] #about .about-flex .about-cta,
html[data-tmt-theme] #about .about-flex .about-links > a,
html[data-tmt-theme] #about .about-flex .about-cta:hover,
html[data-tmt-theme] #about .about-flex .about-links > a:hover,
html[data-tmt-theme] #about .about-flex .about-cta:focus-visible,
html[data-tmt-theme] #about .about-flex .about-links > a:focus-visible{
  text-decoration:none !important;
  border-color:transparent !important;
  outline:0 !important;
}

html[data-tmt-theme="dark"] #about .about-flex .about-cta,
html[data-tmt-theme="dark"] #about .about-flex .about-links > a{
  background:#ffffff !important;
  color:#000000 !important;
  -webkit-text-fill-color:#000000 !important;
}

html[data-tmt-theme="dark"] #about .about-flex .about-cta:hover,
html[data-tmt-theme="dark"] #about .about-flex .about-links > a:hover,
html[data-tmt-theme="dark"] #about .about-flex .about-cta:focus-visible,
html[data-tmt-theme="dark"] #about .about-flex .about-links > a:focus-visible{
  background:#000000 !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}

html[data-tmt-theme="light"] #about .about-flex .about-cta,
html[data-tmt-theme="light"] #about .about-flex .about-links > a{
  background:#000000 !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}

html[data-tmt-theme="light"] #about .about-flex .about-cta:hover,
html[data-tmt-theme="light"] #about .about-flex .about-links > a:hover,
html[data-tmt-theme="light"] #about .about-flex .about-cta:focus-visible,
html[data-tmt-theme="light"] #about .about-flex .about-links > a:focus-visible{
  background:#ffffff !important;
  color:#000000 !important;
  -webkit-text-fill-color:#000000 !important;
}

html[data-tmt-theme] #about .about-flex .about-btn-label,
html[data-tmt-theme] #about .about-flex .about-cta:hover .about-btn-label,
html[data-tmt-theme] #about .about-flex .about-links > a:hover .about-btn-label,
html[data-tmt-theme] #about .about-flex .about-cta:focus-visible .about-btn-label,
html[data-tmt-theme] #about .about-flex .about-links > a:focus-visible .about-btn-label{
  background:transparent !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  text-decoration:none !important;
}


#about .about-links img{
  display:block !important;
  width:36px !important;
  height:auto !important;
  flex:0 0 auto !important;
  background:transparent !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  filter:none !important;
}

/* Mobile layout
   ----------------------------------------------------------- */

@media (max-width:760px){
  #about .about-flex{
    --about-btn-gap:.85rem;
    grid-template-columns:1fr !important;
  }

  #about .about-text,
  #about .about-image,
  #about .about-cta,
  #about .about-links{
    grid-column:1 !important;
  }

  #about .about-text{
    grid-row:1 !important;
  }

  #about .about-image{
    grid-row:2 !important;
    max-width:360px !important;
    margin-top:.5rem !important;
  }

  #about .about-cta{
    grid-row:3 !important;
    margin-top:.5rem !important;
  }

  #about .about-links{
    grid-row:4 !important;
    grid-template-columns:1fr !important;
  }

  #about .about-cta,
  #about .about-links > a{
    min-height:52px !important;
  }
}

/* ===========================================================
   TMT mobile menu dark-light theme behavior
   =========================================================== */

/* Mobile only. Desktop menu styling is intentionally untouched. */

@media (max-width:1024px){
  html[data-tmt-theme="light"] #sinatra-header .site-navigation.main-navigation,
  html[data-tmt-theme="light"] #sinatra-header .sinatra-primary-nav,
  html[data-tmt-theme="light"] #sinatra-primary-nav.menu,
  html[data-tmt-theme="light"] #sinatra-primary-nav.menu .sub-menu,
  html[data-tmt-theme="light"] #sinatra-primary-nav.menu .children,
  html[data-tmt-theme="light"] #sinatra-header .sub-menu,
  html[data-tmt-theme="light"] #sinatra-header .children{
    background:var(--tmt-header-footer, #d2d4d6) !important;
    color:#000000 !important;
    -webkit-text-fill-color:#000000 !important;
  }

  html[data-tmt-theme="dark"] #sinatra-header .site-navigation.main-navigation,
  html[data-tmt-theme="dark"] #sinatra-header .sinatra-primary-nav,
  html[data-tmt-theme="dark"] #sinatra-primary-nav.menu,
  html[data-tmt-theme="dark"] #sinatra-primary-nav.menu .sub-menu,
  html[data-tmt-theme="dark"] #sinatra-primary-nav.menu .children,
  html[data-tmt-theme="dark"] #sinatra-header .sub-menu,
  html[data-tmt-theme="dark"] #sinatra-header .children,
  html:not([data-tmt-theme]) #sinatra-header .site-navigation.main-navigation,
  html:not([data-tmt-theme]) #sinatra-header .sinatra-primary-nav,
  html:not([data-tmt-theme]) #sinatra-primary-nav.menu,
  html:not([data-tmt-theme]) #sinatra-primary-nav.menu .sub-menu,
  html:not([data-tmt-theme]) #sinatra-primary-nav.menu .children,
  html:not([data-tmt-theme]) #sinatra-header .sub-menu,
  html:not([data-tmt-theme]) #sinatra-header .children{
    background:var(--tmt-header-footer, #070707) !important;
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
  }

  html[data-tmt-theme="light"] #sinatra-header .site-navigation.main-navigation a,
  html[data-tmt-theme="light"] #sinatra-header .sinatra-primary-nav a,
  html[data-tmt-theme="light"] #sinatra-primary-nav.menu a,
  html[data-tmt-theme="light"] #sinatra-primary-nav.menu li > a,
  html[data-tmt-theme="light"] #sinatra-header .sub-menu a,
  html[data-tmt-theme="light"] #sinatra-header .children a{
    color:#000000 !important;
    -webkit-text-fill-color:#000000 !important;
    background:transparent !important;
    box-shadow:none !important;
    text-decoration:none !important;
  }

  html[data-tmt-theme="dark"] #sinatra-header .site-navigation.main-navigation a,
  html[data-tmt-theme="dark"] #sinatra-header .sinatra-primary-nav a,
  html[data-tmt-theme="dark"] #sinatra-primary-nav.menu a,
  html[data-tmt-theme="dark"] #sinatra-primary-nav.menu li > a,
  html[data-tmt-theme="dark"] #sinatra-header .sub-menu a,
  html[data-tmt-theme="dark"] #sinatra-header .children a,
  html:not([data-tmt-theme]) #sinatra-header .site-navigation.main-navigation a,
  html:not([data-tmt-theme]) #sinatra-header .sinatra-primary-nav a,
  html:not([data-tmt-theme]) #sinatra-primary-nav.menu a,
  html:not([data-tmt-theme]) #sinatra-primary-nav.menu li > a,
  html:not([data-tmt-theme]) #sinatra-header .sub-menu a,
  html:not([data-tmt-theme]) #sinatra-header .children a{
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
    background:transparent !important;
    box-shadow:none !important;
    text-decoration:none !important;
  }

  html[data-tmt-theme="light"] #sinatra-header .site-navigation.main-navigation a:hover,
  html[data-tmt-theme="light"] #sinatra-header .site-navigation.main-navigation a:focus-visible,
  html[data-tmt-theme="light"] #sinatra-primary-nav.menu a:hover,
  html[data-tmt-theme="light"] #sinatra-primary-nav.menu a:focus-visible{
    color:#000000 !important;
    -webkit-text-fill-color:#000000 !important;
    background:transparent !important;
    text-decoration:underline !important;
    text-decoration-thickness:1px !important;
    text-underline-offset:4px !important;
  }

  html[data-tmt-theme="dark"] #sinatra-header .site-navigation.main-navigation a:hover,
  html[data-tmt-theme="dark"] #sinatra-header .site-navigation.main-navigation a:focus-visible,
  html[data-tmt-theme="dark"] #sinatra-primary-nav.menu a:hover,
  html[data-tmt-theme="dark"] #sinatra-primary-nav.menu a:focus-visible,
  html:not([data-tmt-theme]) #sinatra-header .site-navigation.main-navigation a:hover,
  html:not([data-tmt-theme]) #sinatra-header .site-navigation.main-navigation a:focus-visible,
  html:not([data-tmt-theme]) #sinatra-primary-nav.menu a:hover,
  html:not([data-tmt-theme]) #sinatra-primary-nav.menu a:focus-visible{
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
    background:transparent !important;
    text-decoration:underline !important;
    text-decoration-thickness:1px !important;
    text-underline-offset:4px !important;
  }

  html[data-tmt-theme="light"] #sinatra-header .si-mobile-nav,
  html[data-tmt-theme="light"] #sinatra-header .si-header-toggle,
  html[data-tmt-theme="light"] #sinatra-header .si-nav-toggle,
  html[data-tmt-theme="light"] #sinatra-header .menu-toggle,
  html[data-tmt-theme="light"] #sinatra-header .mobile-toggle,
  html[data-tmt-theme="light"] #sinatra-header .hamburger{
    color:#000000 !important;
    -webkit-text-fill-color:#000000 !important;
  }

  html[data-tmt-theme="dark"] #sinatra-header .si-mobile-nav,
  html[data-tmt-theme="dark"] #sinatra-header .si-header-toggle,
  html[data-tmt-theme="dark"] #sinatra-header .si-nav-toggle,
  html[data-tmt-theme="dark"] #sinatra-header .menu-toggle,
  html[data-tmt-theme="dark"] #sinatra-header .mobile-toggle,
  html[data-tmt-theme="dark"] #sinatra-header .hamburger,
  html:not([data-tmt-theme]) #sinatra-header .si-mobile-nav,
  html:not([data-tmt-theme]) #sinatra-header .si-header-toggle,
  html:not([data-tmt-theme]) #sinatra-header .si-nav-toggle,
  html:not([data-tmt-theme]) #sinatra-header .menu-toggle,
  html:not([data-tmt-theme]) #sinatra-header .mobile-toggle,
  html:not([data-tmt-theme]) #sinatra-header .hamburger{
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
  }

  html[data-tmt-theme="light"] #sinatra-header .hamburger span,
  html[data-tmt-theme="light"] #sinatra-header .menu-toggle span,
  html[data-tmt-theme="light"] #sinatra-header .mobile-toggle span{
    background-color:#000000 !important;
  }

  html[data-tmt-theme="dark"] #sinatra-header .hamburger span,
  html[data-tmt-theme="dark"] #sinatra-header .menu-toggle span,
  html[data-tmt-theme="dark"] #sinatra-header .mobile-toggle span,
  html:not([data-tmt-theme]) #sinatra-header .hamburger span,
  html:not([data-tmt-theme]) #sinatra-header .menu-toggle span,
  html:not([data-tmt-theme]) #sinatra-header .mobile-toggle span{
    background-color:#ffffff !important;
  }

  #sinatra-header .site-navigation.main-navigation img,
  #sinatra-header .sinatra-primary-nav img,
  #sinatra-primary-nav.menu img{
    -webkit-text-fill-color:initial !important;
    filter:none !important;
  }
}