/* ===================================================================
   TTL Mobile Styles 2025 — v1 (CLEAN CONSOLIDATED: v1.12.1 · 2025-09-23)
   Scope: Mobile only (link media="(max-width:768px)")
   Layers: reset > base > components > utilities > overrides
   Brand:
     --ttl-primary:#f26822; --ttl-secondary:#183762;
     --ttl-text:#676c71;   --ttl-accent-blue:#0259a5;

   Notes:
   • Consolidated all navbar/mobile-menu patches (v1.6.0 → v1.11.x) into one source of truth.
   • Single logic for collapsible submenus (Bootstrap .show / .dropdown-menu.show).
   • Fixed “glass” header on mobile with iOS-safe fallbacks (no :has()).
   • Kept neutral “active pill + brand bar” state.
   • Removed duplicated rules & conflicting caret icons; preserved RTL support.
   =================================================================== */

/* ----------------------------- Layers ----------------------------- */
@layer reset, base, components, utilities, overrides;

/* ============================== RESET ============================= */
@layer reset {
  :root{
    --ttl-primary:#f26822;
    --ttl-secondary:#183762;
    --ttl-text:#676c71;
    --ttl-accent-blue:#0259a5;

    /* Mobile tokens */
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;

    --shadow-1: 0 1px 4px rgba(0,0,0,.08);
    --shadow-2: 0 6px 16px rgba(0,0,0,.10);

    --container-pad: 16px;
    --max-content: 720px;

    /* Header sizes */
    --hdr-h: 64px;
    --hdr-h-compact: 54px;
  }

  *,*::before,*::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  body {
    margin: 0;
    color: var(--ttl-text);
    background: #fff;
    line-height: 1.65;
  }
  img,svg,video,canvas { display:block; max-inline-size:100%; block-size:auto; }
  img { height:auto; }
  button,input,textarea,select { font: inherit; }
  ul,ol { margin: 0; padding: 0; list-style: none; }
  a { text-decoration: none; color: inherit; }
  :focus-visible { outline: 2px solid var(--ttl-accent-blue); outline-offset: 2px; }

  @media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    html { scroll-behavior: auto !important; }
  }
}

/* =============================== BASE ============================= */
@layer base {
  body {
    font-family: "Montserrat","Gilroy",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji";
    font-size: clamp(14px, 3.2vw, 16px);
    background: #fff;
  }

  h2 { font-weight: 700; line-height: 1.2;  margin: var(--space-6) 0 var(--space-3); font-size: clamp(20px, 4.8vw, 28px); color: #111; }
  h3 { font-weight: 700; line-height: 1.25; margin: var(--space-5) 0 var(--space-2); font-size: clamp(18px, 4.2vw, 24px); color: #111; }
  h4 { font-weight: 600; line-height: 1.3;  margin: var(--space-4) 0 var(--space-2); font-size: clamp(16px, 3.8vw, 20px); color: #111; }
  p  { margin: 0 0 var(--space-4); }

  .container,
  .container-fluid,
  .ttl-container {
    inline-size: 100%;
    max-inline-size: min(100%, var(--max-content));
    margin-inline: auto;
    padding-inline: var(--container-pad);
  }

  a.ttl-link { color: var(--ttl-accent-blue); text-decoration: underline; text-underline-offset: .18em; }
  a.ttl-link:hover { opacity: .85; }

  .btn, .button {
    display: inline-flex; align-items: center; justify-content: center;
    min-block-size: 44px;
    padding-inline: 16px; padding-block: 10px;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    background: var(--ttl-primary); color: #fff; font-weight: 600;
    box-shadow: var(--shadow-1);
  }
  .btn--secondary { background: var(--ttl-secondary); }
  .btn--ghost { background: transparent; color: var(--ttl-secondary); border-color: var(--ttl-secondary); }
  .btn:active { transform: translateY(1px); }
}

/* ============================ COMPONENTS ========================== */
@layer components {
  .ttl-header, header.navbar, .navbar {
    position: sticky; top: 0; inset-inline: 0;
    background: #fff; border-block-end: 1px solid rgba(0,0,0,.06); z-index: 1000;
  }
  .ttl-header__bar,
  .navbar .container, .navbar .container-fluid {
    display:flex; align-items:center; justify-content:space-between;
    gap: var(--space-3);
    padding-block: 10px; padding-inline: var(--container-pad);
  }
  .navbar-brand img, .ttl-brand img { inline-size: 120px; block-size: auto; }

  .ttl-nav-toggle, .navbar-toggler {
    inline-size: 44px; block-size: 44px;
    border-radius: 12px; border:1px solid rgba(0,0,0,.08);
    display:grid; place-items:center; background:#fff;
  }

  .ttl-hero {
    position: relative; display:grid; gap: var(--space-4);
    padding-block: clamp(16px, 6vw, 28px);
    padding-inline: var(--container-pad);
    background: linear-gradient(180deg, #fff 0%, #f8f9fb 100%);
  }
  .ttl-hero__media { border-radius: var(--radius-lg); overflow: clip; aspect-ratio: 16/9; box-shadow: var(--shadow-1); }
  .ttl-hero__img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .ttl-hero__kpis { display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  .ttl-kpi { padding: 12px; border-radius: var(--radius-md); background:#fff; box-shadow: var(--shadow-1); display:grid; gap: 4px; text-align:center; }
  .ttl-kpi__val { font-weight:700; font-size: clamp(18px,4.6vw,22px); color:#111; }
  .ttl-kpi__lbl { font-size: clamp(12px,3.4vw,14px); color:#475569; }

  .service-grid { display:grid; grid-template-columns: 1fr; gap: var(--space-4); }
  .service-card, .service-box { border-radius: var(--radius-lg); background:#fff; box-shadow: var(--shadow-1); overflow: clip; }
  .service-card__media, .service-box .image { aspect-ratio: 16/10; }
  .service-card__media img, .service-box .image img { inline-size:100%; block-size:100%; object-fit:cover; }
  .service-card__body, .service-box .content { padding: var(--space-4); display:grid; gap: var(--space-2); }
  .service-card__title, .service-box .title { font-weight:700; font-size: clamp(16px,4.2vw,20px); color:#111; }
  .service-card__desc, .service-box .desc { color:#4b5563; }
  .service-card__cta { margin-block-start: var(--space-2); }

  .blog-list { display:grid; gap: var(--space-4); }
  .blog-card, .post-item, .blog-box { background:#fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-1); overflow: clip; }
  .blog-card__media, .post-item .image, .blog-box .image { aspect-ratio: 16/10; }
  .blog-card__media img, .post-item .image img, .blog-box .image img { inline-size:100%; block-size:100%; object-fit:cover; }
  .blog-card__body, .post-item .content { padding:var(--space-4); display:grid; gap:var(--space-2); }
  .blog-card__title, .post-item .title { font-weight:700; color:#111; font-size: clamp(16px,4vw,20px); }
  .blog-card__meta, .post-item .meta { font-size: 12px; color:#64748b; }

  .form, form .form-grid { display:grid; gap: var(--space-3); }
  .field, .form-group { display:grid; gap:6px; }
  .field label, .form-group label { font-weight:600; font-size: 14px; color:#111; }
  .field input, .field select, .field textarea, .form-control {
    inline-size:100%; padding: 12px; border:1px solid rgba(0,0,0,.12); border-radius: 12px; background:#fff;
  }
  .form-control:focus, .field input:focus, .field select:focus, .field textarea:focus {
    border-color: var(--ttl-accent-blue); box-shadow: 0 0 0 3px rgba(2,89,165,.12);
  }

  .ttl-footer, footer.site-footer { margin-block-start: var(--space-8); padding-block: var(--space-6); background:#0f172a; color:#e2e8f0; }
  .ttl-footer .container, footer.site-footer .container { display:grid; gap: var(--space-4); }
  .ttl-foot__brand img { inline-size: 140px; filter: brightness(1.1); }
  .ttl-foot__links, .footer-links { display:grid; gap: 10px; }
  .ttl-foot__link, .footer-links a { color:#cbd5e1; }
  .ttl-foot__link:hover, .footer-links a:hover { color:#fff; }

  .whatsapp-ttl-btn {
    position: fixed; inset-inline-end: 16px; inset-block-end: 16px; z-index: 1200;
    display: inline-flex; align-items:center; gap:8px;
    min-block-size: 44px; padding: 10px 14px;
    background: #25D366; color: #fff; font-weight:700;
    border-radius: 999px; box-shadow: var(--shadow-2);
  }
  .whatsapp-ttl-btn i { font-size: 20px; }
}

/* ============================= UTILITIES ========================== */
@layer utilities {
  .grid { display:grid; gap: var(--space-4); }
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }

  .flex { display:flex; gap: var(--space-3); }
  .items-center { align-items: center; }
  .justify-between { justify-content: space-between; }
  .justify-center { justify-content: center; }
  .wrap { flex-wrap: wrap; }

  .p-2 { padding: var(--space-2); }
  .p-3 { padding: var(--space-3); }
  .p-4 { padding: var(--space-4); }
  .px-4 { padding-inline: var(--space-4); }
  .py-4 { padding-block: var(--space-4); }
  .mt-4 { margin-block-start: var(--space-4); }
  .mb-4 { margin-block-end: var(--space-4); }

  .card { background:#fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-1); }
  .shadow-0 { box-shadow: none; }
  .radius { border-radius: var(--radius-md); }

  .text-center { text-align: center; }
  .text-start { text-align: start; }
  .text-end { text-align: end; }

  .bg-primary { background: var(--ttl-primary); color: #fff; }
  .bg-secondary { background: var(--ttl-secondary); color: #fff; }
  .text-primary { color: var(--ttl-primary); }
  .text-secondary { color: var(--ttl-secondary); }

  .visually-hidden { position: absolute !important; block-size: 1px; inline-size: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; clip-path: inset(50%); }

  @media (max-width: 480px) {
    .card, .service-card, .service-box, .blog-card, .post-item, .blog-box { box-shadow: 0 2px 10px rgba(0,0,0,.08); }
  }
}

/* ============================= OVERRIDES ========================== */
@layer overrides {
  /* Sliders & misc */
  .ms-slide, .masterslider .ms-slide { height: clamp(360px, 80vh, 640px); }
  .owl-carousel .owl-dots { display:flex; gap:8px; justify-content:center; padding-block: 8px; }
  .owl-carousel .owl-dot span { inline-size: 8px; block-size: 8px; border-radius:999px; }
  .swiper-pagination-bullets { bottom: 8px !important; }
  .swiper-pagination-bullet { inline-size:8px; block-size:8px; }

  .readmore, .link-more { text-decoration: underline; text-underline-offset: .18em; }

  .service-box { height: auto; }
  .service-box .title { margin: 8px 0 4px; }
  .service-box .desc { font-size: clamp(14px,3.4vw,15px); }

  .subtitle::before {
    content:""; display:inline-block;
    inline-size: 28px; block-size: 3px; background: var(--ttl-primary);
    margin-inline-end: 8px; vertical-align: middle;
  }

  .dropdown-menu { inset-inline-start: 0; padding: 8px 10px; }

  .form-row, .row.g-3 { row-gap: 12px; }

  footer.site-footer .social a {
    inline-size: 40px; block-size: 40px; display:grid; place-items:center;
    border-radius:10px; background: rgba(255,255,255,.06);
  }

  [dir="rtl"] .text-start { text-align: start; }
  [dir="rtl"] .text-end { text-align: end; }

  .stats-item, .counter-box { padding: 12px; border-radius: var(--radius-md); box-shadow: var(--shadow-1); }

  /* =================== MOBILE NAVBAR & MENU (CONSOLIDATED) =================== */

  /* Header container — fixed “glass” header on mobile, sticky otherwise */
  @media (max-width: 768px) {
    .navbar, header.navbar, .ttl-header{
      position: fixed !important; top: 0 !important; inset-inline: 0 !important;
      z-index: 1100 !important;
      min-block-size: var(--hdr-h);
      width: 100%;
      background: rgba(255,255,255,.66);
      -webkit-backdrop-filter: saturate(160%) blur(14px);
              backdrop-filter: saturate(160%) blur(14px);
      border-block-end: 1px solid rgba(255,255,255,.35);
      box-shadow: 0 8px 24px rgba(0,0,0,.08);
      transition: min-block-size .18s ease, background-color .18s ease, backdrop-filter .18s ease, box-shadow .18s ease;
    }
    body{ padding-top: calc(var(--hdr-h) + env(safe-area-inset-top, 0px)) !important; }

    .navbar.is-compact,
    header.navbar.is-compact,
    .ttl-header.is-compact{
      min-block-size: var(--hdr-h-compact);
      background: rgba(255,255,255,.78);
      -webkit-backdrop-filter: saturate(160%) blur(16px);
              backdrop-filter: saturate(160%) blur(16px);
      box-shadow: 0 10px 28px rgba(0,0,0,.10);
    }

    /* When menu is open, use solid background for clarity */
    body.menu-open .navbar,
    body.menu-open header.navbar,
    body.menu-open .ttl-header{
      background: #fff !important;
      -webkit-backdrop-filter: none !important;
              backdrop-filter: none !important;
      box-shadow: 0 8px 20px rgba(0,0,0,.10) !important;
    }

    /* Neutralize headroom/theme “hide on scroll” behaviors */
    .headroom, .headroom--top, .headroom--not-top, .headroom--unpinned,
    .is-hidden, .is-up, .is-down {
      transform: none !important; opacity: 1 !important; visibility: visible !important;
    }
    .sticky-wrapper { height: 0 !important; min-height: 0 !important; margin: 0 !important; display: block !important; }
    .sticky-wrapper > .navbar { margin: 0 !important; }
  }

  /* iOS safety: enforce visible fixed header, disable transforms on wrappers */
  @supports (-webkit-touch-callout: none) {
    header.navbar, .ttl-header, .navbar{
      position: fixed !important; top: 0 !important; inset-inline: 0 !important;
      z-index: 1100 !important; transform: none !important; opacity: 1 !important; visibility: visible !important; width: 100% !important;
      background: rgba(255,255,255,.66) !important;
      -webkit-backdrop-filter: saturate(160%) blur(14px) !important;
              backdrop-filter: saturate(160%) blur(14px) !important;
    }
    .sticky-wrapper, .header-wrapper{ transform: none !important; }
    body{ padding-top: calc(var(--hdr-h) + env(safe-area-inset-top, 0px)) !important; }
  }

  /* Centered brand with side toggler */
  .navbar .container, .navbar .container-fluid {
    position: relative; display:flex; align-items:center; justify-content:center;
    gap: 12px; padding-block: 0;
    padding-inline: calc(var(--container-pad) + 52px);
  }
  .navbar-brand { margin-inline:auto !important; position:relative; z-index:2; }
  .navbar-brand img { max-inline-size: clamp(120px, 40vw, 160px); block-size:auto; transition: max-inline-size .18s ease; }
  .navbar.is-compact .navbar-brand img,
  header.navbar.is-compact .navbar-brand img,
  .ttl-header.is-compact .navbar-brand img{ max-inline-size: clamp(110px, 34vw, 140px); }

  .navbar .navbar-toggler{
    position:absolute !important; inset-block-start:50%; transform:translateY(-50%);
    inset-inline-start: var(--container-pad) !important; inset-inline-end:auto !important; z-index:3;
    inline-size: 44px; block-size: 44px;
    border-radius: 14px !important;
    background: #fff !important;
    border: 1px solid color-mix(in srgb, var(--ttl-accent-blue) 14%, transparent) !important;
    box-shadow: 0 1px 0 rgba(15,23,42,.04), 0 6px 16px rgba(0,0,0,.08);
    display: grid; place-items: center;
    transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .06s ease;
    -webkit-tap-highlight-color: transparent;
  }
  [dir="rtl"] .navbar .navbar-toggler{ inset-inline-end: var(--container-pad) !important; inset-inline-start:auto !important; }
  .navbar .navbar-toggler:hover{
    border-color: color-mix(in srgb, var(--ttl-accent-blue) 28%, transparent) !important;
    background: color-mix(in srgb, var(--ttl-accent-blue) 4%, #fff) !important;
  }
  .navbar .navbar-toggler:focus-visible{ outline: 2px solid var(--ttl-accent-blue); outline-offset: 2px; }
  .navbar .navbar-toggler:active { transform: translateY(1px); }

  /* Hamburger → X (no SVG) */
  .navbar .navbar-toggler .navbar-toggler-icon{
    background-image: none !important;
    position: relative; inline-size: 20px; block-size: 2px;
    background: var(--ttl-secondary);
    border-radius: 2px;
    transition: background-color .18s ease, transform .18s ease;
  }
  .navbar .navbar-toggler .navbar-toggler-icon::before,
  .navbar .navbar-toggler .navbar-toggler-icon::after{
    content: ""; position: absolute; left: 0; right: 0;
    inline-size: 20px; block-size: 2px; border-radius: 2px; background: var(--ttl-secondary);
    transition: transform .18s ease, top .18s ease, bottom .18s ease, opacity .18s ease, background-color .18s ease;
  }
  .navbar .navbar-toggler .navbar-toggler-icon::before{ top: -6px; }
  .navbar .navbar-toggler .navbar-toggler-icon::after { bottom: -6px; }
  .navbar .navbar-toggler[aria-expanded="true"]{
    border-color: color-mix(in srgb, var(--ttl-primary) 40%, transparent) !important;
    background: color-mix(in srgb, var(--ttl-primary) 8%, #fff) !important;
  }
  .navbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon{ background-color: transparent; }
  .navbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before{
    top: 0; transform: rotate(45deg); background: var(--ttl-primary);
  }
  .navbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after{
    bottom: 0; transform: rotate(-45deg); background: var(--ttl-primary);
  }

  /* Collapse panel: full-screen sheet on mobile */
  .navbar-collapse{
    position: fixed !important;
    top: var(--hdr-h) !important; left: 0 !important; right: 0 !important;
    margin: 0 !important; padding: 0 !important;
    inline-size: 100% !important; max-inline-size: 100% !important;
    height: calc(100dvh - var(--hdr-h)) !important;
    overflow-y: auto !important; -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain;
    background: linear-gradient(#fff, #fafbfc);
    box-shadow: 0 12px 24px rgba(0,0,0,.12);
    z-index: 2002;
    padding-bottom: max(96px, calc(96px + env(safe-area-inset-bottom))) !important;
    display: none !important; /* hidden until .show */
  }
  @supports (height: 1svh){ .navbar-collapse{ height: calc(100svh - var(--hdr-h)) !important; } }
  @supports (-webkit-touch-callout: none){ .navbar-collapse{ height: calc(100vh - var(--hdr-h)) !important; } }
  .navbar .navbar-collapse.show{ display: flex !important; flex-direction: column; gap: 8px; }

  /* Prevent background scroll when open */
  html, body { overflow-x:hidden !important; max-width:100% !important; }
  body.menu-open { position: fixed; inset: 0; width:100%; overflow:hidden !important; overscroll-behavior:none; }
  .whatsapp-ttl-btn { z-index:900; }
  body.menu-open .whatsapp-ttl-btn{ opacity:0; pointer-events:none; z-index:0; }

  /* Menu content */
  .navbar-collapse .container, .navbar-collapse .container-fluid{ max-width: none !important; inline-size: 100% !important; padding-inline: var(--container-pad) !important; padding-block: 10px !important; }
  .navbar-collapse > .navbar-nav{ display:grid; gap: 10px; padding-inline: var(--container-pad); padding-block: 4px; }

  /* Core link (pill) */
  .navbar-collapse .navbar-nav .nav-link{
    display:flex; align-items:center; gap:10px;
    padding: 12px 14px !important; border-radius: 12px !important;
    background:#fff !important; color:#0f172a !important;
    border:1px solid color-mix(in srgb, var(--ttl-accent-blue) 12%, transparent) !important;
    box-shadow: 0 1px 0 rgba(15,23,42,.04);
    line-height:1.25; text-align:start;
    transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
  }
  [dir="rtl"] .navbar-collapse .navbar-nav .nav-link{ text-align:end; }
  .navbar-collapse .navbar-nav .nav-link:hover{
    background: color-mix(in srgb, var(--ttl-accent-blue) 6%, #fff) !important;
    border-color: color-mix(in srgb, var(--ttl-accent-blue) 22%, transparent) !important;
  }
  .navbar-collapse .navbar-nav .nav-link:active{ transform: translateY(1px); }

  /* Active (neutral + brand bar) */
  .navbar-collapse .navbar-nav .nav-link.active,
  .navbar-collapse .navbar-nav .nav-link[aria-current="page"]{
    background:#fff !important;
    border-color: color-mix(in srgb, var(--ttl-accent-blue) 36%, transparent) !important;
    color:#0f172a !important;
    position: relative;
  }
  .navbar-collapse .navbar-nav .nav-link.active::before,
  .navbar-collapse .navbar-nav .nav-link[aria-current="page"]::before{
    content:""; position:absolute; inset-block: 8px; inline-size: 3px; inset-inline-start: 6px; background: var(--ttl-primary); border-radius: 2px;
  }
  [dir="rtl"] .navbar-collapse .navbar-nav .nav-link.active::before,
  [dir="rtl"] .navbar-collapse .navbar-nav .nav-link[aria-current="page"]::before{ inset-inline-start: auto; inset-inline-end: 6px; }

  /* Dropdowns: single source of truth (no carets) */
  .navbar-collapse .dropdown > a,
  .navbar-collapse .nav-link.dropdown-toggle,
  .navbar-collapse .dropdown-item { cursor: pointer; }
  .navbar-collapse .dropdown > a::after,
  .navbar-collapse .nav-link.dropdown-toggle::after { content: none !important; } /* remove carets */

  /* Show/hide logic */
  .navbar-collapse .dropdown-menu { 
    position: static !important; transform:none !important;
    display: none !important; /* default hidden */
    padding: 8px 10px !important; margin: 6px 0 8px !important;
    border: 0 !important; border-radius: 12px !important;
    background: #f8fafc !important; box-shadow: none !important;
  }
  .navbar-collapse .dropdown.show > .dropdown-menu,
  .navbar-collapse .dropdown-menu.show { display: block !important; }

  /* Visual affordance when open */
  .navbar-collapse .dropdown.show > a,
  .navbar-collapse .dropdown.show > .nav-link.dropdown-toggle{
    position: relative;
    border-color: color-mix(in srgb, var(--ttl-accent-blue) 30%, transparent) !important;
    background: color-mix(in srgb, var(--ttl-accent-blue) 6%, #fff) !important;
  }
  .navbar-collapse .dropdown.show > a::before,
  .navbar-collapse .dropdown.show > .nav-link.dropdown-toggle::before{
    content:""; position:absolute; inset-block: 8px; inline-size: 3px; inset-inline-start: 8px; background: var(--ttl-primary); border-radius: 2px;
  }
  [dir="rtl"] .navbar-collapse .dropdown.show > a::before,
  [dir="rtl"] .navbar-collapse .dropdown.show > .nav-link.dropdown-toggle::before{ inset-inline-start: auto; inset-inline-end: 8px; }

  /* Sub-levels */
  .navbar-collapse .dropdown-item{
    border-radius: 10px !important; padding: 10px 12px !important; color:#0f172a !important;
    transition: background-color .18s ease;
  }
  .navbar-collapse .dropdown-item:hover{ background: color-mix(in srgb, var(--ttl-accent-blue) 6%, #fff) !important; }
  .navbar-collapse .dropdown-menu .dropdown > a { padding-inline-start: 18px !important; }
  .navbar-collapse .dropdown-menu .dropdown-menu{
    margin-top: 6px !important; background: #f3f6f9 !important; border-radius: 10px !important;
  }

  /* Sticky bottom actions (e.g., Language + Get Quote) */
  .navbar-collapse :is(.nav-actions,.menu-actions,.header-right,.actions,.btn-group){
    margin-top: auto !important; padding: 8px var(--container-pad) !important;
    position: sticky; bottom: max(12px, env(safe-area-inset-bottom));
    background: linear-gradient(transparent, #fff 40%);
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px; z-index: 2;
  }
  .navbar-collapse :is(.btn,.button){
    border-radius: 14px !important; min-block-size: 46px !important; font-weight: 700;
    box-shadow: 0 6px 16px rgba(0,0,0,.10), 0 -1px 0 rgba(0,0,0,.05) !important;
  }
  .navbar-collapse .btn--ghost{
    background: transparent !important; color: var(--ttl-secondary) !important;
    border:1px solid color-mix(in srgb, var(--ttl-secondary) 42%, transparent) !important;
  }

  /* Accessible focus */
  .navbar-collapse :is(.nav-link,.dropdown-item,.btn):focus-visible{
    outline: 2px solid var(--ttl-accent-blue); outline-offset: 2px;
  }
}

/* mobile.css (آخر الملف) */
@layer overrides {
  .ttl-backtotop{
    position:fixed; inset-inline-end:16px; inset-block-end: calc(90px + env(safe-area-inset-bottom));
    z-index:950; display:none; align-items:center; gap:8px;
    min-height:44px; padding:10px 14px; border-radius:999px; border:1px solid rgba(0,0,0,.08);
    background:#fff; box-shadow:0 6px 16px rgba(0,0,0,.10);
    font-weight:700; color:#183762;
  }
  .ttl-backtotop.show{ display:inline-flex; }
  body.menu-open .ttl-backtotop{ display:none; } /* اخفِه وقت فتح القائمة */
}

@layer overrides {
  .navbar.needs-contrast,
  header.navbar.needs-contrast,
  .ttl-header.needs-contrast{
    background: rgba(255,255,255,.82);
    -webkit-backdrop-filter: saturate(160%) blur(18px);
            backdrop-filter: saturate(160%) blur(18px);
  }
}

@layer overrides {
  .has-bottom-fab { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
}

/*! TTL Mobile Patch: v1.6.10 — Menu action buttons (brand, contrast, states) — 2025-09-23 */
@layer overrides {
  /* صف الأزرار السفلي (لغة + Get a Quote) */
  .navbar-collapse .menu-actions,
  .navbar-collapse .nav-actions,
  .navbar-collapse .header-right{
    position: sticky;
    bottom: max(12px, env(safe-area-inset-bottom));
    padding: 10px var(--container-pad) 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    background: linear-gradient(transparent, #fff 40%);
    z-index: 2;
  }

  /* fallback لو مفيش wrapper: اعتبر آخر زرين هما الأكشنز */
  .navbar-collapse :is(.btn,.button):nth-last-of-type(2),
  .navbar-collapse :is(.btn,.button):last-of-type{
    min-block-size: 46px;
    border-radius: 14px;
    font-weight: 700;
    -webkit-tap-highlight-color: transparent;
  }
  /* لو مفيش wrapper خلّيهم جنب بعض */
  @supports not (selector(:has(*))) {
    .navbar-collapse :is(.btn,.button):nth-last-of-type(2),
    .navbar-collapse :is(.btn,.button):last-of-type{
      width: 100%;
      display: inline-flex;
    }
    .navbar-collapse :is(.btn,.button):nth-last-of-type(2){ margin-inline-end: 6px; }
    .navbar-collapse :is(.btn,.button):last-of-type{ margin-inline-start: 6px; }
  }

  /* زر اللغة — شبح (Outline) بألوان الهوية */
  .navbar-collapse :is(.btn,.button):nth-last-of-type(2){
    background: #fff !important;
    color: var(--ttl-secondary) !important;
    border: 1px solid color-mix(in srgb, var(--ttl-secondary) 55%, transparent) !important;
    box-shadow: 0 1px 0 rgba(15,23,42,.04);
  }
  .navbar-collapse :is(.btn,.button):nth-last-of-type(2):hover{
    background: color-mix(in srgb, var(--ttl-accent-blue) 6%, #fff) !important;
    border-color: color-mix(in srgb, var(--ttl-secondary) 70%, transparent) !important;
  }
  .navbar-collapse :is(.btn,.button):nth-last-of-type(2):active{ transform: translateY(1px); }

  /* زر Get a Quote — برتقالي مصمت مع ظلال خفيفة */
  .navbar-collapse :is(.btn,.button):last-of-type{
    background: var(--ttl-primary) !important;
    color: #fff !important;
    border: 1px solid transparent !important;
    box-shadow: 0 6px 16px rgba(242,104,34,.28);
  }
  .navbar-collapse :is(.btn,.button):last-of-type:hover{
    background: color-mix(in srgb, var(--ttl-primary) 92%, #000 8%) !important;
  }
  .navbar-collapse :is(.btn,.button):last-of-type:active{ transform: translateY(1px); }

  /* فوكس واضح ومتماسك */
  .navbar-collapse :is(.btn,.button):focus-visible{
    outline: 3px solid color-mix(in srgb, var(--ttl-accent-blue) 40%, transparent);
    outline-offset: 2px;
  }

  /* RTL ضبط أيقونة اللغة لو فيها مسافة */
  [dir="rtl"] .navbar-collapse :is(.btn,.button):nth-last-of-type(2) i{ margin-left: 6px; margin-right: 0; }
  :root:not([dir="rtl"]) .navbar-collapse :is(.btn,.button):nth-last-of-type(2) i{ margin-right: 6px; }
}
/* End Patch v1.6.10 */

/*! TTL Mobile Patch: v1.6.11 — Menu micro-polish (pills, caret, spacing) — 2025-09-23 */
@layer overrides{
  /* 1) حجم لمس موحّد وإحساس أكثر تماسكاً */
  .navbar-collapse > .navbar-nav{ gap: 12px; }
  .navbar-collapse .navbar-nav .nav-link{
    min-block-size: 52px;
    padding: 12px 16px !important;
    border-radius: 14px !important;
    font-weight: 600;
  }

  /* 2) شريط الحالة النشطة (محايد + براند) */
  .navbar-collapse .navbar-nav .nav-link.active,
  .navbar-collapse .navbar-nav .nav-link[aria-current="page"]{
    border-color: color-mix(in srgb, var(--ttl-accent-blue) 34%, transparent) !important;
  }
  .navbar-collapse .navbar-nav .nav-link.active::before,
  .navbar-collapse .navbar-nav .nav-link[aria-current="page"]::before{
    inline-size: 4px;
    inset-inline-start: 10px; /* LTR */
    border-radius: 3px;
  }
  [dir="rtl"] .navbar-collapse .navbar-nav .nav-link.active::before,
  [dir="rtl"] .navbar-collapse .navbar-nav .nav-link[aria-current="page"]::before{
    inset-inline-start: auto; inset-inline-end: 10px; /* RTL */
  }

  /* 3) إيماءة فتح خفيفة للروابط التي تحتها Submenu */
  .navbar-collapse .dropdown > a{
    position: relative; padding-inline-end: 32px !important;
  }
  .navbar-collapse .dropdown > a::after{
    content: "";
    position: absolute; inset-block-start: 50%; inset-inline-end: 12px;
    transform: translateY(-50%);
    border: 6px solid transparent; border-top-color: color-mix(in srgb, var(--ttl-secondary) 82%, #000 0%);
    opacity: .7; transition: transform .2s ease, opacity .2s ease;
  }
  .navbar-collapse .dropdown.show > a::after{
    transform: translateY(-50%) rotate(180deg);
    opacity: 1;
  }

  /* 4) توازن أزرار الأسفل */
  .navbar-collapse .menu-actions{ grid-template-columns: 1fr 1fr; gap: 12px; }
  .navbar-collapse .menu-actions .btn{ width: 100%; }

  /* 5) تقليل فراغ أعلى القائمة تحت اللوجو */
  .navbar-collapse .container,
  .navbar-collapse .container-fluid{ padding-block-start: 6px !important; }
}

/*! TTL Mobile Patch: v1.6.12 — Contrast polish (iOS tuned) — 2025-09-23 */
@layer overrides {
  /* 1) حدود الكبسولات: زود السماكة البصرية بدون تغيير الهوية */
  .navbar-collapse .navbar-nav .nav-link{
    border-color: color-mix(in srgb, var(--ttl-accent-blue) 18%, transparent) !important; /* كان ~12% */
    box-shadow: 0 1px 0 rgba(15,23,42,.06); /* نقرة وضوح أخف */
  }

  /* 2) الحالة النشطة/الحالية: حدة أعلى للحدود */
  .navbar-collapse .navbar-nav .nav-link.active,
  .navbar-collapse .navbar-nav .nav-link[aria-current="page"]{
    border-color: color-mix(in srgb, var(--ttl-accent-blue) 40%, transparent) !important; /* كان ~34–36% */
  }

  /* 3) قائمة فرعية مفتوحة: خلفية أفتح قليلًا لتمييز المستوى */
  .navbar-collapse .dropdown-menu{
    background: #f5f7fb !important; /* بدلاً من #f8fafc */
  }

  /* 4) سهم الـ submenu: لون أوضح */
  .navbar-collapse .dropdown > a::after{
    border-top-color: #183762 !important; /* var(--ttl-secondary) */
  }

  /* 5) أزرار الأسفل:
     - زر اللغة (ghost) يحتاج حدّة أكبر للحد/النص
     - زر Get a Quote كما هو (برتقالي صريح) */
  .navbar-collapse .menu-actions .btn:first-child{
    color: #183762 !important;
    border-color: color-mix(in srgb, var(--ttl-secondary) 52%, transparent) !important; /* كان ~42% */
    background: color-mix(in srgb, var(--ttl-secondary) 3%, #fff) !important; /* لمسة خفيفة جداً */
  }

  /* 6) تركيز الوصول: 3px أوضح (AA ≥ 3:1) */
  .navbar-collapse :is(.nav-link,.dropdown-item,.btn):focus-visible{
    outline: 3px solid var(--ttl-accent-blue);
    outline-offset: 3px;
  }
}
/*! TTL Mobile Patch: v1.13.7 — HERO (glass CTAs, lifted copy, brand-tinted Quote) — 2025-09-24 */
/* Scope: mobile only — full HERO section */
@layer overrides {
  @media (max-width:768px){

    /* =============== HERO: layout + readability =============== */
    .hero-static{
      position: relative;
      min-height: 84dvh;                  /* stable dynamic viewport on mobile */
      display: grid;
      align-content: start;
    }
    .hero-img{
      position:absolute; inset:0;
      width:100%; height:100%;
      object-fit:cover;
    }
    .hero-static::after{
      content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
      /* Lift contrast under copy & CTAs without crushing the artwork */
      background:
        radial-gradient(100% 60% at 50% 100%, rgba(8,14,24,.55) 0%, rgba(8,14,24,0) 60%),
        linear-gradient(180deg, rgba(8,14,24,0) 0%, rgba(8,14,24,.28) 45%, rgba(8,14,24,.58) 100%);
    }

    /* Lift copy without colliding with header */
    .hero-overlay{
      position: relative; z-index:2;
      padding-inline: var(--container-pad);
      padding-top: clamp(calc(8px + env(safe-area-inset-top)), 5vh, 40px);
      padding-bottom: clamp(12px, 5vh, 40px);
      max-width: 42ch;                     /* shorter lines = easier reading */
      text-align: start;
      text-shadow: 0 2px 18px rgba(0,0,0,.35);
    }

    .hero-eyebrow{
      letter-spacing:.12em; text-transform:uppercase;
      font-weight:700; opacity:.9; margin:0 0 8px;
      font-size: clamp(11px, 3.2vw, 12px);
      color: rgba(255,255,255,.88);
    }
    .hero-title{
      margin:0 0 6px; color:#fff;
      font-weight:800; line-height:1.15;
      font-size: clamp(30px, 7.6vw, 38px);
    }
    .hero-desc{
      margin:0 0 10px;
      font-size: clamp(14px, 4vw, 16px);
      line-height:1.55;
      color: rgba(255,255,255,.92);
      max-width:48ch;
    }

    /* =============== CTAs row =============== */
    .hero-ctas,
    .hero-cta-row{                          /* alias — use either in markup */
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:12px;
      margin-top:8px;                       /* tighter to lift buttons */
      position: relative; z-index:1000;     /* keep above floaters */
    }
    @media (max-width:380px){
      .hero-ctas, .hero-cta-row{ grid-template-columns:1fr; }
    }

    /* =============== Base glass button (override any .btn defaults) =============== */
    .hero-static .btn--glass{
      all: unset;
      display:inline-flex; align-items:center; justify-content:center; gap:10px;
      min-height:54px; padding:14px 20px; border-radius:16px;
      color:#fff !important; font-weight:800; letter-spacing:.01em; cursor:pointer; text-decoration:none;
      background: rgba(8,14,24,.28) !important;
      border:1px solid rgba(255,255,255,.30) !important;
      -webkit-backdrop-filter: saturate(160%) blur(12px) !important;
              backdrop-filter: saturate(160%) blur(12px) !important;
      box-shadow: 0 12px 28px rgba(0,0,0,.30), inset 0 1px 1px rgba(255,255,255,.16) !important;
      transition: transform .08s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
      text-shadow: 0 1px 10px rgba(0,0,0,.28);
    }
    .hero-static .btn--glass i{ font-size:1.08em; opacity:.95; }
    .hero-static .btn--glass:active{ transform: translateY(1px); }
    .hero-static .btn--glass:focus-visible{ outline:2px solid rgba(255,255,255,.95); outline-offset:2px; }

    /* =============== Primary CTA: Request Quote (brand-tinted glass) =============== */
    .hero-static .btn--quote{
      position: relative;
      color:#fff !important;

      /* Fallback for older engines */
      background: linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.08) 100%) !important;
      border: 1px solid rgba(242,104,34,.55) !important;
      box-shadow:
        0 14px 30px rgba(242,104,34,.30),
        inset 0 1px 1px rgba(255,255,255,.16) !important;

      /* Modern tint (if color-mix supported) */
      background: color-mix(in srgb, #f26822 26%, rgba(255,255,255,.10)) !important;
      background-image:
        linear-gradient(180deg,
          color-mix(in srgb, #f26822 26%, rgba(255,255,255,.10)),
          color-mix(in srgb, #f26822 18%, rgba(255,255,255,.06))) !important;
      border-color: color-mix(in srgb, #f26822 78%, rgba(255,255,255,.22)) !important;
    }
    .hero-static .btn--quote::before{
      content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
      background: linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 42%);
      mix-blend-mode: screen; opacity:.9;               /* top sheen */
    }
    .hero-static .btn--quote:hover,
    .hero-static .btn--quote:focus-visible{
      background-image:
        linear-gradient(180deg,
          color-mix(in srgb, #f26822 34%, rgba(255,255,255,.14)),
          color-mix(in srgb, #f26822 24%, rgba(255,255,255,.08))) !important;
      border-color: color-mix(in srgb, #f26822 90%, #ffffff 10%) !important;
      box-shadow:
        0 16px 34px rgba(242,104,34,.36),
        inset 0 1px 1px rgba(255,255,255,.18) !important;
      transform: translateY(-1px);
      outline: 2px solid rgba(255,255,255,.95);
      outline-offset: 2px;
    }
    .hero-static .btn--quote:active{
      transform: translateY(0);
      box-shadow:
        0 8px 20px rgba(242,104,34,.28),
        inset 0 1px 1px rgba(255,255,255,.14) !important;
    }
    .hero-static .btn--quote i{ font-size:1.08em; opacity:.95; }

    /* =============== Secondary CTA (navy/blue glass) =============== */
    .hero-static .btn--wa{
      color:#fff !important;
      background: color-mix(in srgb, var(--ttl-secondary) 36%, rgba(8,14,24,.18)) !important; /* #183762 */
      border-color: color-mix(in srgb, var(--ttl-accent-blue) 70%, rgba(255,255,255,.28)) !important; /* #0259a5 */
      box-shadow: 0 10px 24px rgba(2,89,165,.28), inset 0 1px 1px rgba(255,255,255,.14) !important;
    }
    .hero-static .btn--wa:hover{
      background: color-mix(in srgb, var(--ttl-secondary) 46%, rgba(8,14,24,.18)) !important;
    }

    /* =============== Optional scroll hint =============== */
    .scroll-indicator{
      text-align:center; margin-top:14px; opacity:.9;
      filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
    }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce){
      .hero-static .btn--glass,
      .hero-static .btn--quote,
      .hero-static .btn--wa{ transition: none !important; }
    }
  }
}
/* End HERO Patch v1.13.7 */

/* TTL Patch — WhatsApp FAB: force visible, fixed, glass brand-orange */
@layer overrides {
  .whatsapp-ttl-btn,
  .hero-static .whatsapp-ttl-btn{
    all: unset;                               /* نظّف أي ستايل موروث من .btn */
    position: fixed;                          /* اخرج من أي stacking context */
    right: clamp(12px, 3vw, 20px);
    bottom: clamp(14px, 4vh, 28px);
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;

    min-width: 52px; min-height: 52px;       /* حجم واضح للمس */
    padding: 12px 16px;
    border-radius: 16px;
    cursor: pointer; text-decoration: none !important;

    z-index: 9999 !important;                 /* أعلى من أي عناصر عائمة */
    color:#fff !important;

    /* GLASS + برتقالي الهوية */
    background: rgba(242,104,34,.26) !important;               /* fallback */
    border: 1px solid rgba(255,255,255,.32) !important;
    -webkit-backdrop-filter: saturate(160%) blur(12px);
            backdrop-filter: saturate(160%) blur(12px);
    box-shadow:
      0 12px 28px rgba(242,104,34,.30),
      inset 0 1px 1px rgba(255,255,255,.14) !important;

    /* لو color-mix مدعوم */
    background: color-mix(in srgb, #f26822 28%, rgba(8,14,24,.12)) !important;
    border-color: color-mix(in srgb, #f26822 70%, rgba(255,255,255,.26)) !important;

    transition: transform .12s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
  }

  .whatsapp-ttl-btn i,
  .whatsapp-ttl-btn svg{ color:#fff !important; fill:#fff !important; font-size:1.05em; }

  .whatsapp-ttl-btn:hover,
  .whatsapp-ttl-btn:focus-visible{
    background: color-mix(in srgb, #f26822 36%, rgba(8,14,24,.10)) !important;
    border-color: color-mix(in srgb, #f26822 86%, #ffffff 14%) !important;
    box-shadow:
      0 14px 32px rgba(242,104,34,.36),
      inset 0 1px 1px rgba(255,255,255,.18) !important;
    transform: translateY(-1px);
    outline: 2px solid rgba(255,255,255,.95); outline-offset: 2px;
  }
  .whatsapp-ttl-btn:active{ transform: translateY(0); }

  /* لو فيه سكربت بيحط ستايل inline يخالفنا */
  .whatsapp-ttl-btn[style*="background"]{
    background: color-mix(in srgb, #f26822 28%, rgba(8,14,24,.12)) !important;
  }

  /* تقليل الحركة */
  @media (prefers-reduced-motion: reduce){
    .whatsapp-ttl-btn{ transition: none !important; }
  }
}
/* End TTL Patch — WhatsApp FAB */

/*! TTL Mobile Patch: v1.17.0 — About TTL (light-only, centered card & features, no-crop media, orange glass Read More, RTL/LTR, skeleton) — 2025-09-24 */
@layer overrides {

  /* ================= Base (mobile only) ================= */
  @media (max-width:768px){

    /* Section (force LIGHT) */
    .ttl-about-m{
      color-scheme: light;
      background-color: #f8fafc !important;

      --pad-inline: clamp(16px, 4vw, 20px);
      --pad-block:  clamp(24px, 6vw, 40px);
      --radius-lg:  16px;
      --radius-md:  12px;

      --card-bg: #fff;
      --text-1: #111;
      --text-2: #475569;
      --text-3: #64748b;
      --border-subtle: 1px solid color-mix(in srgb, var(--ttl-accent-blue, #0259a5) 14%, transparent);

      padding-block: var(--pad-block);
      padding-inline: var(--pad-inline);
      padding-bottom: max(var(--pad-block), env(safe-area-inset-bottom));
      display:block !important;
    }

    /* Center card inside container */
    .ttl-about-m .container-xl{ width:100% !important; }
    .ttl-about-m .ttl-about-m__card{
      background: var(--card-bg) !important;
      border: var(--border-subtle) !important;
      border-radius: var(--radius-lg);
      overflow: clip;
      box-shadow: 0 1px 10px rgba(0,0,0,.06) !important;

      max-width: 720px !important;              /* اضبطها حسب رغبتك */
      margin-inline: auto !important;

      display: grid;
      grid-template-rows: auto 1fr;
    }

    /* ===== Media (no crop) ===== */
    .ttl-about-m__media{ position:relative; isolation:isolate; background: linear-gradient(180deg, rgba(2,89,165,.06), rgba(2,89,165,0)); }
    .ttl-about-m__media img{
      display:block;
      inline-size:100% !important;
      block-size:auto !important;
      aspect-ratio:auto !important;            /* كان 16/9 */
      object-fit: contain !important;          /* لا تقص الصورة */
      object-position: center !important;
      background: transparent;
    }

    /* ===== Body ===== */
    .ttl-about-m__body{ padding:16px; display:grid; gap:10px; }

    /* ===== Typography ===== */
    .ttl-about-m .eyebrow{
      font: 700 12px/1.2 Montserrat, system-ui, sans-serif;
      letter-spacing:.12em; text-transform:uppercase;
      color: color-mix(in srgb, var(--ttl-secondary, #183762) 70%, #000 30%) !important;
      opacity:.9;
    }
    html[dir="rtl"] .ttl-about-m .eyebrow{ text-transform:none; letter-spacing:.02em; }

    .ttl-about-m .title{ font-size:clamp(20px,5.6vw,28px); line-height:1.2; margin:4px 0 6px; color:var(--text-1) !important; text-wrap:balance; }
    .ttl-about-m .lead { color:var(--text-2); text-wrap:pretty; }

    /* ===== Features: center group, full-width items, start-aligned text ===== */
    .ttl-about-m .ttl-about-m__features{
      display:flex !important;
      flex-direction:column !important;
      align-items:center !important;
      gap:10px !important;

      inline-size:min(560px,100%) !important;  /* غيّر 520/480 إذا حبيت */
      margin-inline:auto !important;
      list-style:none; padding:0; margin-top:8px;
    }
    .ttl-about-m .ttl-about-m__features li{
      box-sizing:border-box !important;
      inline-size:100% !important;
      margin:0 !important;

      display:flex !important; align-items:center !important; justify-content:flex-start !important;
      text-align:start !important;

      background:var(--card-bg) !important;
      border:var(--border-subtle) !important;
      border-radius:var(--radius-md) !important;
      padding:12px 14px !important; color:#0f172a;
    }
    .ttl-about-m .ttl-about-m__features svg{
      color: var(--ttl-primary, #f26822);
      margin-top:2px; flex:0 0 18px; inline-size:18px; block-size:18px;
    }

    /* ===== KPIs ===== */
    .ttl-about-m__kpis{
      display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:10px;
      inline-size:min(560px,100%); margin-inline:auto;
    }
    .ttl-about-m__kpis .kpi{
      background:var(--card-bg) !important; border:var(--border-subtle) !important;
      border-radius:var(--radius-md); padding:10px 12px; text-align:center;
    }
    .ttl-about-m__kpis .kpi strong{ display:block; font-weight:800; color:var(--text-1); font-size:clamp(14px,4.6vw,18px); }
    .ttl-about-m__kpis .kpi span{ display:block; color:var(--text-3); font-size:12px; }

    /* ===== Actions (centered) + Read More orange glass ===== */
    .ttl-about-m__actions{
      display:flex !important; justify-content:center !important; align-items:center !important;
      gap:10px; flex-wrap:wrap; margin-top:8px; margin-bottom:20px; /* مسافة أمان من زر واتساب */
    }
    .ttl-about-m .btn--readmore,
    .ttl-about-m .btn--glass-secondary{
      all:unset; display:inline-flex; align-items:center; gap:.5rem; cursor:pointer; text-decoration:none !important;
      min-height:44px; padding:12px 14px; border-radius:12px; font-weight:800; color:#fff !important;

      /* Orange glass (متسق مع زر واتساب) */
      background: rgba(242,104,34,.26) !important;
      border: 1px solid rgba(255,255,255,.30) !important;
      -webkit-backdrop-filter: saturate(160%) blur(10px);
              backdrop-filter: saturate(160%) blur(10px);
      box-shadow: 0 12px 28px rgba(242,104,34,.28), inset 0 1px 1px rgba(255,255,255,.14) !important;

      /* لو color-mix مدعوم */
      background: color-mix(in srgb, #f26822 28%, rgba(8,14,24,.12)) !important;
      border-color: color-mix(in srgb, #f26822 70%, rgba(255,255,255,.26)) !important;

      transition: transform .08s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
      width: fit-content; margin-inline:auto;
    }
    .ttl-about-m .btn--readmore:hover,
    .ttl-about-m .btn--glass-secondary:hover{
      background: color-mix(in srgb, #f26822 36%, rgba(8,14,24,.10)) !important;
      border-color: color-mix(in srgb, #f26822 86%, #ffffff 14%) !important;
      box-shadow: 0 14px 32px rgba(242,104,34,.34), inset 0 1px 1px rgba(255,255,255,.18) !important;
      transform: translateY(-1px);
    }
    .ttl-about-m .btn--readmore:active,
    .ttl-about-m .btn--glass-secondary:active{ transform: translateY(0); }
    html[dir="rtl"] .ttl-about-m .btn--readmore .chev,
    html[dir="rtl"] .ttl-about-m .btn--glass-secondary .chev{ transform:scaleX(-1); display:inline-block; }

    /* ===== Skeleton ===== */
    .ttl-about-m__card.is-loading *{ color:transparent !important; }
    .ttl-about-m__card.is-loading .ttl-about-m__media{
      background: linear-gradient(90deg,#eee 25%,#f5f5f5 37%,#eee 63%);
      background-size: 400% 100%; animation: ttl-skel 1.2s ease-in-out infinite; min-block-size:160px;
    }
    .ttl-about-m__card.is-loading .ttl-about-m__body > *{
      border-radius:6px; background:#eee; min-block-size:12px; animation: ttl-skel 1.2s ease-in-out infinite;
    }
    @keyframes ttl-skel{ 0%{background-position:100% 50%} 100%{background-position:0% 50%} }

    /* Reduced motion */
    @media (prefers-reduced-motion:reduce){
      .ttl-about-m *{ transition:none !important; animation:none !important; }
    }
  }

  /* ===== Hidden anchor ===== */
  .visually-hidden{
    position:absolute !important; width:1px; height:1px; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); clip-path: inset(50%);
  }

  /* ===== Ignore system dark mode for this section only ===== */
  @media (prefers-color-scheme:dark){
    .ttl-about-m{
      color-scheme: light;
      --card-bg:#fff; --text-1:#111; --text-2:#475569; --text-3:#64748b;
      --border-subtle: 1px solid color-mix(in srgb, var(--ttl-accent-blue, #0259a5) 14%, transparent);
      background-color:#f8fafc !important;
    }
    .ttl-about-m__card{ box-shadow:0 1px 10px rgba(0,0,0,.06) !important; }
    .ttl-about-m__features li, .ttl-about-m__kpis .kpi{
      background:#fff !important; border:1px solid color-mix(in srgb, var(--ttl-accent-blue, #0259a5) 14%, transparent) !important;
    }
  }
}


/*! TTL Mobile Patch: v1.20.1 — Services (mobile polish: card, lazy-bg, orange glass CTA, RTL/a11y) — 2025-09-24 */
@layer overrides {
  @media (max-width:768px){

    /* ===== Section spacing ===== */
    #services.section-padding{
      --pad-inline: clamp(16px, 4vw, 22px);
      --pad-block:  clamp(24px, 6vw, 40px);
      padding: var(--pad-block) var(--pad-inline);
      background: #f8fafc; /* كانت gray-bg */
    }

    /* ===== Heading ===== */
    #services .section-heading{
      margin: 0 0 14px;
    }
    #services .section-heading .subtitle{
      font: 700 12px/1.2 Montserrat, system-ui, sans-serif;
      letter-spacing: .12em; text-transform: uppercase;
      color: color-mix(in srgb, var(--ttl-secondary,#183762) 70%, #000 30%);
      opacity:.9; display:inline-block; margin-bottom:6px;
    }
    html[dir="rtl"] #services .section-heading .subtitle{
      text-transform:none; letter-spacing:.02em;
    }
    #services .section-heading .title{
      font-size: clamp(20px, 6vw, 26px); line-height:1.2; color:#0f172a; margin:0 0 6px;
      text-wrap: balance;
    }
    #services .section-heading p{
      color:#475569; margin:0; text-wrap: pretty;
    }

    /* ===== Grid -> 1 column ===== */
    #services .row{
      display:grid; grid-template-columns: 1fr; gap: 12px;
      margin: 16px 0 0; padding: 0;
    }
    #services .row > [class*="col-"]{ padding: 0 !important; }

    /* ===== Card ===== */
    #services .service-box{
      background:#fff; border:1px solid rgba(2,89,165,.10);
      border-radius:16px; overflow:clip; box-shadow: 0 1px 10px rgba(0,0,0,.06);
    }

    /* ===== Lazy background image ===== */
    #services .service-box__bg{
      display:block; inline-size:100%; block-size:auto;
      aspect-ratio: 16/9;                 /* تقدر تغيّرها 3/2 حسب صورك */
      background-image: var(--lazy-bg);
      background-size: cover; background-position: center;
      position: relative; isolation:isolate;
    }
    /* تدرّج بسيط لرفع التباين فوق الصورة */
    #services .service-box__bg::after{
      content:""; position:absolute; inset:0;
      background: linear-gradient(180deg, rgba(8,14,24,0) 55%, rgba(8,14,24,.18) 100%);
      pointer-events:none;
    }

    /* ===== Content ===== */
    #services .service-box__content{ padding: 14px; display:grid; gap:10px; }

    #services .service-box__header i{
      font-size: 20px; color: var(--ttl-primary, #f26822);
      filter: drop-shadow(0 1px 3px rgba(0,0,0,.08));
    }
    #services .service-title{
      margin: 6px 0 2px; font-weight: 800; color:#111;
      font-size: clamp(16px, 4.8vw, 20px);
      text-wrap: balance;
    }

    #services .service-box__body p{
      color:#475569; margin: 0;
      display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    }

    /* ===== CTA: Read More (orange glass) ===== */
    #services .service-box__body .readmore{
      display:inline-flex; align-items:center; gap:.5rem;
      min-height:44px; padding:10px 14px; margin-top:8px;
      border-radius:12px; font-weight:800; color:#fff !important; text-decoration:none;

      background: color-mix(in srgb, #f26822 28%, rgba(8,14,24,.12));
      border:1px solid color-mix(in srgb, #f26822 70%, rgba(255,255,255,.26));
      -webkit-backdrop-filter: saturate(160%) blur(10px);
              backdrop-filter: saturate(160%) blur(10px);
      box-shadow: 0 10px 24px rgba(242,104,34,.28), inset 0 1px 1px rgba(255,255,255,.12);
      transition: transform .08s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
      width: fit-content;
    }
    #services .service-box__body .readmore:hover{
      transform: translateY(-1px);
      background: color-mix(in srgb, #f26822 36%, rgba(8,14,24,.10));
      border-color: color-mix(in srgb, #f26822 86%, #ffffff 14%);
      box-shadow: 0 12px 28px rgba(242,104,34,.34), inset 0 1px 1px rgba(255,255,255,.14);
    }
    #services .service-box__body .readmore:active{ transform: translateY(0); }
    #services .service-box__body .readmore:focus-visible{ outline:2px solid rgba(255,255,255,.95); outline-offset:2px; }
    html[dir="rtl"] #services .service-box__body .readmore i{ transform: scaleX(-1); }

    /* ===== Reduced motion ===== */
    @media (prefers-reduced-motion: reduce){
      #services *{ animation: none !important; transition: none !important; }
    }
  }
}

/*! TTL Mobile Patch: v1.21.4 — Blog Preview (mobile 1-col, crisp cards, 3:2 media top-focus, orange glass CTA, RTL/a11y) — 2025-09-24 */
@layer overrides {
  @media (max-width:768px){

    /* ===== Wrapper & spacing ===== */
    section[aria-labelledby="home-blog-title"]{
      --pad-inline: clamp(16px,4vw,22px);
      --pad-block:  clamp(24px,6vw,40px);
      padding: var(--pad-block) var(--pad-inline) !important;
      background: #fff !important;
    }

    /* ===== Heading ===== */
    #home-blog-title{
      font-size: clamp(20px, 6vw, 26px);
      line-height: 1.2; margin: 0 0 6px; color:#0f172a;
      text-wrap: balance;
    }
    section[aria-labelledby="home-blog-title"] .section-heading{
      margin: 0 0 14px !important;
    }
    section[aria-labelledby="home-blog-title"] .section-heading .subtitle{
      font: 700 12px/1.2 Montserrat, system-ui, sans-serif;
      letter-spacing: .12em; text-transform: uppercase;
      color: color-mix(in srgb, var(--ttl-secondary,#183762) 70%, #000 30%);
      opacity: .9; display:inline-block; margin-bottom:6px;
    }
    html[dir="rtl"] section[aria-labelledby="home-blog-title"] .section-heading .subtitle{
      text-transform: none; letter-spacing: .02em;
    }

    /* ===== Grid -> 1 column ===== */
    section[aria-labelledby="home-blog-title"] .row.g-4{
      display: grid !important;
      grid-template-columns: 1fr !important;
      gap: 12px !important;
      margin: 16px 0 0 !important;
    }
    section[aria-labelledby="home-blog-title"] .row.g-4 > [class*="col-"]{
      padding: 0 !important;
    }

    /* ===== Card ===== */
    section[aria-labelledby="home-blog-title"] .blog-card{
      background:#fff;
      border:1px solid rgba(2,89,165,.14) !important;   /* تباين أعلى للحدود */
      border-radius:16px !important;
      overflow:hidden !important;                        /* Safari radius fix */
      box-shadow:
        0 1px 0 rgba(2,89,165,.06),
        0 8px 18px rgba(8,14,24,.06) !important;
      position:relative; /* للـ stretched-link */
      display:grid; grid-template-rows:auto 1fr;
    }
    @media (hover:hover){
      section[aria-labelledby="home-blog-title"] .blog-card:hover{
        box-shadow: 0 10px 24px rgba(0,0,0,.10);
        transform: translateY(-1px);
        transition: box-shadow .18s ease, transform .08s ease;
      }
    }

    /* ===== Image (3:2 cover + top focus) ===== */
    section[aria-labelledby="home-blog-title"] .blog-card__image{
      position: relative; background:#f1f5f9;
    }
    section[aria-labelledby="home-blog-title"] .blog-card__image img{
      display:block; inline-size:100%; block-size:auto;
      aspect-ratio: 3 / 2 !important;             /* أقل قص من 16:9 */
      object-fit: cover !important;
      object-position: 50% 22% !important;        /* فوكس مرفوع لأعلى */
    }
    section[aria-labelledby="home-blog-title"] .blog-card__image::after{
      content:""; position:absolute; inset:0;
      background: linear-gradient(180deg, rgba(8,14,24,0) 55%, rgba(8,14,24,.14) 100%);
      pointer-events:none;
    }

    /* ===== Body ===== */
    section[aria-labelledby="home-blog-title"] .blog-card .card-body{
      padding: 14px !important; display: grid; gap: 8px;
    }
    section[aria-labelledby="home-blog-title"] .blog-card .card-body h3{
      margin: 0; color:#111; font-weight:800;
      font-size: clamp(16px, 4.8vw, 20px);
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
      text-wrap: balance;
    }
    section[aria-labelledby="home-blog-title"] .blog-card .card-body p{
      color:#475569 !important; margin: 0;
      display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    }

    /* ===== Stretched link focus ring ===== */
    section[aria-labelledby="home-blog-title"] .blog-card .stretched-link:focus-visible{
      outline: 2px solid var(--ttl-accent-blue, #0259a5);
      outline-offset: 3px; border-radius: 12px;
    }

    /* ===== View All CTA (orange glass, centered) ===== */
    section[aria-labelledby="home-blog-title"] .btn.btn-view-all{
      display:inline-flex !important; align-items:center; gap:.5rem;
      min-height: 44px; padding: 10px 14px; margin-top: 16px;
      margin-inline: auto !important;
      border-radius: 12px; font-weight: 800; color:#fff !important; text-decoration:none !important;
      background: color-mix(in srgb, #f26822 28%, rgba(8,14,24,.12)) !important;
      border:1px solid color-mix(in srgb, #f26822 70%, rgba(255,255,255,.26)) !important;
      -webkit-backdrop-filter: saturate(160%) blur(10px);
              backdrop-filter: saturate(160%) blur(10px);
      box-shadow: 0 10px 24px rgba(242,104,34,.28), inset 0 1px 1px rgba(255,255,255,.12) !important;
      transition: transform .08s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
      z-index:1;
    }
    section[aria-labelledby="home-blog-title"] .btn.btn-view-all:hover{
      transform: translateY(-1px);
      background: color-mix(in srgb, #f26822 36%, rgba(8,14,24,.10)) !important;
      border-color: color-mix(in srgb, #f26822 86%, #ffffff 14%) !important;
      box-shadow: 0 12px 28px rgba(242,104,34,.34), inset 0 1px 1px rgba(255,255,255,.14) !important;
    }
    section[aria-labelledby="home-blog-title"] .btn.btn-view-all:active{ transform: translateY(0); }
    section[aria-labelledby="home-blog-title"] .btn.btn-view-all:focus-visible{ outline:2px solid rgba(255,255,255,.95); outline-offset:2px; }
    html[dir="rtl"] section[aria-labelledby="home-blog-title"] .btn.btn-view-all .fa-angle-right{ transform: scaleX(-1); }

    /* مسافة أمان من زر واتساب العائم */
    section[aria-labelledby="home-blog-title"] .text-center{ padding-bottom: 18px !important; }
  }

  /* ===== Optional: skeleton state (أضِف .is-loading على .blog-card) ===== */
  .blog-card.is-loading *{ color: transparent !important; }
  .blog-card.is-loading .blog-card__image{
    background: linear-gradient(90deg, #eee 25%, #f5f5f5 37%, #eee 63%);
    background-size: 400% 100%; min-height: 160px;
    position: relative; overflow: hidden;
  }
  .blog-card.is-loading .card-body > *{
    border-radius: 6px; background: #eee; min-height: 12px;
    animation: ttl-skel 1.2s ease-in-out infinite;
  }
  @keyframes ttl-skel{
    0%{ background-position: 100% 50%; } 100%{ background-position: 0% 50%; }
  }
}

/*! TTL Mobile Patch: v1.22.1 — Events Preview (mobile: 1-col, crisp card, 3:2 media top-focus, RTL/a11y) — 2025-09-24 */
@layer overrides {
  @media (max-width:768px){

    /* ===== Wrapper & heading ===== */
    .section-padding.bg-light{
      --pad-inline: clamp(16px,4vw,22px);
      --pad-block:  clamp(24px,6vw,40px);
      padding: var(--pad-block) var(--pad-inline) !important;
    }
    .section-padding.bg-light .title{
      font-size: clamp(20px,6vw,26px);
      line-height: 1.2; margin: 0 0 6px;
      text-wrap: balance;
    }
    .section-padding.bg-light .subtitle{
      font: 700 12px/1.2 Montserrat, system-ui, sans-serif;
      letter-spacing:.12em; text-transform:uppercase;
      color: color-mix(in srgb, var(--ttl-secondary,#183762) 70%, #000 30%);
      opacity:.9; display:inline-block; margin-bottom:6px;
    }
    html[dir="rtl"] .section-padding.bg-light .subtitle{
      text-transform:none; letter-spacing:.02em;
    }

    /* ===== Grid -> 1 column ===== */
    .section-padding.bg-light .row.justify-content-center{
      display:grid !important;
      grid-template-columns: 1fr !important;
      gap: 12px !important;
      margin: 16px 0 0 !important;
    }
    .section-padding.bg-light .row.justify-content-center > [class*="col-"]{
      padding: 0 !important;
    }

    /* ===== Card ===== */
    .section-padding.bg-light .event-card{
      background:#fff;
      border:1px solid rgba(2,89,165,.14) !important;
      border-radius:16px !important;
      overflow:hidden !important;                 /* Safari radius fix */
      box-shadow: 0 1px 0 rgba(2,89,165,.06),
                  0 8px 18px rgba(8,14,24,.06) !important;
      display:grid; grid-template-rows:auto 1fr;
      position:relative;
    }

    /* ===== Media (3:2 cover + top focus) ===== */
    .section-padding.bg-light .event-card .card-img-top{
      display:block; inline-size:100%; block-size:auto;
      aspect-ratio: 3 / 2;                       /* أقل قص من 16:9 */
      object-fit: cover; object-position: 50% 28%;
    }

    /* ===== Body ===== */
    .section-padding.bg-light .event-card .card-body{
      padding: 14px !important;
      display: grid; gap: 8px;
    }
    .section-padding.bg-light .event-card .card-body h5{
      font-size: clamp(16px,4.8vw,20px);
      margin: 0 0 4px; color:#111; font-weight:800;
      display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
      text-wrap: balance;
    }
    .section-padding.bg-light .event-card .card-body p{
      color:#475569 !important; margin:0;
      display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
    }

    /* ===== Reduced motion ===== */
    @media (prefers-reduced-motion: reduce){
      .section-padding.bg-light *{
        animation:none !important; transition:none !important;
      }
    }
  }
}

/*! TTL Mobile Patch: v1.23.4 — Stats (mobile: centered 2–2–1 SQUARE grid, crisp cards, RTL/a11y) — 2025-09-24 */
@layer overrides {
  @media (max-width:768px){

    /* ===== Section spacing ===== */
    #stats.section-padding{
      --pad-inline: clamp(16px,4vw,22px);
      --pad-block:  clamp(24px,6vw,40px);
      padding: var(--pad-block) var(--pad-inline) !important;
    }

    /* ===== Heading ===== */
    #stats .section-heading{ margin-bottom: 14px !important; }
    #stats #stats-title{
      font-size: clamp(20px,6vw,26px);
      line-height: 1.2; text-wrap: balance; margin: 0 0 6px;
    }
    #stats .section-heading p{
      margin: 8px auto 0; font-size: clamp(14px,4vw,16px);
      color:#cbd5e1; max-width:56ch; text-wrap: pretty;
    }

    /* ===== Grid (2–2–1) — كل المجموعة في منتصف الصفحة ===== */
    #stats .row.text-center{
      --sq: clamp(136px, 40vw, 176px);               /* مقاس كل مربع */
      display: grid !important;
      grid-template-columns: repeat(2, var(--sq)) !important;
      gap: 14px !important;
      justify-content: center !important;            /* يوسّط الشبكة ككل */
      justify-items: center !important;              /* يوسّط العناصر داخل خلاياها */
      align-items: center !important;
      margin: 16px auto 0 !important;
    }
    /* إزالة قيود أعمدة Bootstrap */
    #stats .row.text-center > [class*="col-"]{
      padding:0 !important; margin:0 !important; width:auto !important; max-width:none !important; flex:none !important;
    }
    /* آخر كارت = في صف لوحده ومتمركز */
    #stats .row.text-center > [class*="col-"]:last-child{
      grid-column: 1 / -1 !important;
      justify-self: center !important;
    }

    /* ===== Cards: مربعات موحّدة + حدود واضحة ===== */
    #stats .stats-item{
      width: var(--sq) !important;
      height: var(--sq) !important;
      aspect-ratio: auto !important;                 /* نلغي أي ratio قديم */
      display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
      padding:12px !important; overflow:hidden;

      background:#f8fafc !important; color:#0f172a !important;
      border:1px solid rgba(2,89,165,.14) !important;
      border-radius:16px !important;
      box-shadow: 0 1px 0 rgba(2,89,165,.06), 0 8px 18px rgba(8,14,24,.10) !important;
    }

    /* ===== Icon / Counter / Label ===== */
    #stats .stats-item i{
      font-size: clamp(20px,6.2vw,26px) !important;
      margin-bottom:2px !important; color: var(--ttl-primary, #f26822) !important; opacity:.95;
    }
    #stats .stats-item .counter{
      margin:0; font-weight:800; font-size:clamp(20px,6.8vw,26px);
      line-height:1; font-variant-numeric: tabular-nums; letter-spacing:.01em; text-align:center; color:#0b1220;
    }
    #stats .stats-item p{
      margin:0; color:#475569 !important; font-size:clamp(12px,3.6vw,14px);
      line-height:1.15; max-width:12ch; text-align:center; text-wrap:balance;
    }

    /* ===== RTL ===== */
    html[dir="rtl"] #stats .stats-item p,
    html[dir="rtl"] #stats .stats-item .counter{ text-align:center !important; }

    /* ===== Reduced motion ===== */
    @media (prefers-reduced-motion: reduce){
      #stats *{ animation:none !important; transition:none !important; }
    }
  }
}

/*! TTL Mobile Patch: v1.24.0 — Values/Strengths (mobile: 2-col grid, tidy cards, RTL/a11y) — 2025-09-24 */
@layer overrides {
  @media (max-width:768px){

    /* ===== Section spacing ===== */
    #values.section-padding{
      --pad-inline: clamp(16px,4vw,22px);
      --pad-block:  clamp(24px,6vw,40px);
      padding: var(--pad-block) var(--pad-inline) !important;
      background:#f8fafc !important; /* رمادي فاتح نظيف */
    }

    /* ===== Heading ===== */
    #values .section-heading{ margin-bottom: 14px !important; }
    #values .section-heading .title{
      font-size: clamp(20px,6vw,26px);
      line-height: 1.2; margin: 0 0 6px; color:#0f172a;
      text-wrap: balance;
    }
    #values .section-heading p{
      margin: 8px auto 0; color:#475569;
      font-size: clamp(14px,4vw,16px);
      max-width: 60ch; text-wrap: pretty;
    }
    #values .section-heading .subtitle{
      font: 700 12px/1.2 Montserrat, system-ui, sans-serif;
      letter-spacing:.12em; text-transform:uppercase;
      color: color-mix(in srgb, var(--ttl-secondary,#183762) 70%, #000 30%);
      opacity:.9; display:inline-block; margin-bottom:6px;
    }
    html[dir="rtl"] #values .section-heading .subtitle{
      text-transform:none; letter-spacing:.02em;
    }

    /* ===== Grid -> 2 columns (mobile) ===== */
    #values .row.mt-5.g-4{
      display:grid !important;
      grid-template-columns: repeat(2, minmax(0,1fr)) !important;
      gap: 12px !important;
      margin-top: 16px !important;
    }
    #values .row.mt-5.g-4 > [class*="col-"]{ padding:0 !important; margin:0 !important; }

    /* ===== Card ===== */
    #values .strength-card{
      height: 100%;
      background:#fff; color:#0f172a;
      border:1px solid rgba(2,89,165,.12);
      border-radius: 14px;
      box-shadow: 0 1px 0 rgba(2,89,165,.06), 0 8px 18px rgba(8,14,24,.06);
      padding: 14px; text-align:center;
      display:grid; gap:8px; align-content:start;
    }

    /* Icon inside a soft badge */
    #values .strength-icon{
      width: 48px; height: 48px; border-radius: 12px;
      display:grid; place-items:center; margin-inline:auto;
      background: color-mix(in srgb, var(--ttl-primary,#f26822) 10%, #ffffff);
      border: 1px solid color-mix(in srgb, var(--ttl-primary,#f26822) 28%, transparent);
      box-shadow: inset 0 1px 1px rgba(255,255,255,.35);
    }
    #values .strength-icon i{
      font-size: clamp(18px,5.2vw,22px);
      color: var(--ttl-primary,#f26822);
    }

    /* Text */
    #values .strength-card h5{
      margin:0; font-weight:800;
      font-size: clamp(14px,4.8vw,18px);
      text-wrap: balance;
    }
    #values .strength-card p{
      margin:0; color:#64748b; font-size: clamp(12px,3.6vw,14px);
    }

    /* Touch hover (subtle) */
    @media (hover:hover){
      #values .strength-card:hover{
        transform: translateY(-1px);
        box-shadow: 0 10px 24px rgba(8,14,24,.08);
        transition: transform .08s ease, box-shadow .18s ease;
      }
    }

    /* RTL small tweaks */
    html[dir="rtl"] #values .strength-card p,
    html[dir="rtl"] #values .strength-card h5{ text-align:center; }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce){
      #values *{ animation:none !important; transition:none !important; }
    }
  }
}

/*! TTL Mobile Patch: v1.25.0 — Testimonials (mobile: 1-col grid, tidy cards, RTL/a11y, crisp stars) — 2025-09-24 */
@layer overrides {
  @media (max-width:768px){

    /* ===== Section spacing ===== */
    #testimonials.section-padding{
      --pad-inline: clamp(16px,4vw,22px);
      --pad-block:  clamp(24px,6vw,40px);
      padding: var(--pad-block) var(--pad-inline) !important;
      background:#f8fafc !important;
    }

    /* ===== Heading ===== */
    #testimonials .section-heading{ margin-bottom: 14px !important; }
    #testimonials .section-heading .title{
      font-size: clamp(20px,6vw,26px);
      line-height: 1.2; margin: 0 0 6px; color:#0f172a; text-wrap: balance;
    }
    #testimonials .section-heading p{
      margin: 8px auto 0; max-width:60ch; color:#475569;
      font-size: clamp(14px,4vw,16px); text-wrap: pretty;
    }
    #testimonials .section-heading .subtitle{
      font: 700 12px/1.2 Montserrat, system-ui, sans-serif;
      letter-spacing:.12em; text-transform:uppercase;
      color: color-mix(in srgb, var(--ttl-secondary,#183762) 70%, #000 30%);
      opacity:.9; display:inline-block; margin-bottom:6px;
    }
    html[dir="rtl"] #testimonials .section-heading .subtitle{
      text-transform:none; letter-spacing:.02em;
    }

    /* ===== Grid -> 1 column ===== */
    #testimonials .row.mt-5.g-4{
      display:grid !important;
      grid-template-columns: 1fr !important;
      gap: 12px !important;
      margin-top: 16px !important;
    }
    #testimonials .row.mt-5.g-4 > [class*="col-"]{ padding:0 !important; margin:0 !important; }

    /* ===== Card ===== */
    #testimonials .testimonial-card{
      background:#fff !important; color:#0f172a !important;
      border:1px solid rgba(2,89,165,.12) !important;
      border-radius:14px !important;
      box-shadow: 0 1px 0 rgba(2,89,165,.06), 0 8px 18px rgba(8,14,24,.06) !important;
      padding:14px !important; position:relative; overflow:hidden;
    }

    /* Decorative quote mark */
    #testimonials .testimonial-card::before{
      content:"“"; position:absolute; inset:auto auto 6px 10px;
      font: 800 clamp(44px,16vw,72px)/.6 Georgia, "Times New Roman", serif;
      color: rgba(242,104,34,.10); pointer-events:none;
    }
    html[dir="rtl"] #testimonials .testimonial-card::before{
      content:"”"; inset:auto 10px 6px auto;
    }

    /* Quote text clamp */
    #testimonials .testimonial-card p{
      margin:0 0 10px !important; color:#475569 !important;
      display:-webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow:hidden;
      font-size: clamp(14px,4vw,16px);
    }

    /* Stars = برتقالي الهوية */
    #testimonials .testimonial-card .text-warning{
      color: var(--ttl-primary, #f26822) !important; letter-spacing:.12em;
    }

    /* Avatar row tweaks */
    #testimonials .testimonial-card img{
      width:50px !important; height:50px !important; object-fit:cover !important;
      border:1px solid rgba(2,89,165,.12);
    }
    #testimonials .testimonial-card strong{ font-weight:800; color:#0f172a; }
    #testimonials .testimonial-card small{ color:#64748b !important; }

    /* RTL alignment helpers (لأن العنصر عنده dir ديناميكي) */
    html[dir="rtl"] #testimonials .testimonial-card{ text-align: start; }
    html[dir="rtl"] #testimonials .testimonial-card .d-flex{ flex-direction: row-reverse !important; }
    html[dir="rtl"] #testimonials .testimonial-card img{ margin-left:.75rem !important; margin-right:0 !important; }

    /* Hover (للأجهزة اللي فيها hover) */
    @media (hover:hover){
      #testimonials .testimonial-card:hover{
        transform: translateY(-1px);
        box-shadow: 0 10px 24px rgba(8,14,24,.08);
        transition: transform .08s ease, box-shadow .18s ease;
      }
    }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce){
      #testimonials *{ animation:none !important; transition:none !important; }
    }
  }
}

/* ===== Optional skeleton state: أضف .is-loading على .testimonial-card ===== */
@layer overrides {
  .testimonial-card.is-loading *{ color:transparent !important; }
  .testimonial-card.is-loading{
    position:relative; background:#fff;
    overflow:hidden;
  }
  .testimonial-card.is-loading::after{
    content:""; position:absolute; inset:0;
    background: linear-gradient(90deg, #eee 25%, #f5f5f5 37%, #eee 63%);
    background-size: 400% 100%; animation: ttl-skel 1.2s ease-in-out infinite;
  }
  @keyframes ttl-skel{
    0%{ background-position: 100% 50%; } 100%{ background-position: 0% 50%; }
  }
}


/* ===== Footer base (logo blue) ===== */
.footer{
  --ttl-accent-blue: #0259a5;                    /* اللون الرسمي */
  --footer-bg-1: color-mix(in srgb, #0259a5 92%, #000 8%);
  --footer-bg-2: color-mix(in srgb, #0259a5 70%, #000 30%);
  --footer-border: color-mix(in srgb, #ffffff 14%, transparent);
  --footer-text-1:#e6edf6;                       /* نص أساسي */
  --footer-text-2:#cbd5e1;                       /* نص ثانوي */
  --footer-text-3:#94a3b8;                       /* نص خافت */

  color-scheme: dark;
  background: linear-gradient(180deg, var(--footer-bg-1) 0%, var(--footer-bg-2) 100%) !important;
  color: var(--footer-text-1);
}

/* ===== Top area spacing & grid ===== */
.footer .footer-top{
  --pad-inline: clamp(16px,4vw,22px);
  --pad-block:  clamp(24px,6vw,40px);
  padding: var(--pad-block) var(--pad-inline) !important;
}
.footer .footer-top .row{
  display:grid !important;
  grid-template-columns: 1fr !important;
  gap: 18px !important;
}
.footer .footer-top .row > [class*="col-"]{ padding:0 !important; margin:0 !important; }

/* ===== Widget titles ===== */
.footer .footer-widget__title{
  font-size: clamp(16px,5.2vw,18px);
  font-weight: 800;
  margin: 0 0 10px;
  color:#fff !important;
  text-wrap: balance;
}

/* ===== Brand block ===== */
.footer .footer-widget__about img{
  inline-size: clamp(160px, 44vw, 220px);
  height: auto;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.25));
}
.footer .footer-widget__about p{
  margin: 14px 0;
  color: var(--footer-text-2) !important;
  font-size: clamp(13px,3.8vw,14px);
  text-wrap: pretty;
}

/* ===== Quick links ===== */
.footer .footer-widget__links ul{ display:grid; gap: 8px; }
.footer .footer-widget__links a{
  display:inline-flex; align-items:center; min-height:36px;
  color: var(--footer-text-1) !important; text-decoration: none;
  border-radius:10px; padding: 6px 8px;
  transition: background-color .15s ease, color .15s ease, transform .06s ease;
}
.footer .footer-widget__links a:hover{
  background: color-mix(in srgb, #ffffff 10%, transparent);
  color:#fff !important;
  transform: translateY(-1px);
}
.footer .footer-widget__links a:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* ===== Contact list ===== */
.footer .list-contacts{ display:grid; gap:10px; }
.footer .list-contacts li{ gap:8px; line-height:1.35; }
.footer .list-contacts i{
  color: color-mix(in srgb, var(--ttl-primary,#f26822) 82%, #ffffff 18%) !important;
  font-size: 1rem;
  margin-top: 2px;
}
.footer .list-contacts a{
  color: var(--footer-text-1) !important;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.25);
  text-underline-offset: 2px;
}
.footer .list-contacts a:hover{
  color:#fff !important; text-decoration-color: rgba(255,255,255,.6);
}
.footer .list-contacts a:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* ===== Working hours table ===== */
.footer .footer-widget__times p{ color: var(--footer-text-2) !important; margin-bottom:8px; }
.footer .footer-widget__times .table{
  width:100%; color: var(--footer-text-1); margin:0;
  border-collapse: collapse; background: transparent !important;
}
.footer .footer-widget__times .table td{
  border: none !important;
  padding: 8px 0 !important;
  font-size: 14px;
}
.footer .footer-widget__times .table tbody tr + tr td{
  border-top: 1px dashed var(--footer-border) !important;
}

/* ===== Social icons — orange glass ===== */
.footer .footer-social{ gap:10px; margin-top: 6px !important; }
.footer .footer-social a{
  display:grid; place-items:center;
  inline-size:40px; block-size:40px; border-radius:12px;
  color:#fff !important; text-decoration:none;
  background: color-mix(in srgb, #f26822 24%, rgba(8,14,24,.15));
  border:1px solid color-mix(in srgb, #f26822 60%, rgba(255,255,255,.22));
  -webkit-backdrop-filter: saturate(160%) blur(8px);
          backdrop-filter: saturate(160%) blur(8px);
  box-shadow: 0 8px 18px rgba(242,104,34,.22), inset 0 1px 1px rgba(255,255,255,.12);
  transition: transform .08s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}
.footer .footer-social a:hover{
  transform: translateY(-1px);
  background: color-mix(in srgb, #f26822 34%, rgba(8,14,24,.12));
  border-color: color-mix(in srgb, #f26822 86%, #ffffff 14%);
  box-shadow: 0 10px 22px rgba(242,104,34,.28), inset 0 1px 1px rgba(255,255,255,.14);
}
.footer .footer-social a:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* ===== Bottom bar ===== */
.footer .footer-bottom{
  border-top: 1px solid var(--footer-border);
  background: color-mix(in srgb, #000 18%, transparent);
  padding-block: 10px !important;
}
.footer .footer-bottom .small{ color: var(--footer-text-2) !important; }

/* ===== SEO text ===== */
.footer .footer-seo-text{ padding: 8px var(--pad-inline, 16px) 16px !important; }
.footer .footer-seo-text p{
  margin: 0; color: var(--footer-text-3) !important;
  font-size: 12px; line-height: 1.6;
  max-width: 70ch; text-wrap: pretty;
}

/* ===== Safe-area ===== */
.footer .footer-bottom{ padding-bottom: max(10px, env(safe-area-inset-bottom)) !important; }

/* ===== RTL niceties ===== */
html[dir="rtl"] .footer .footer-widget__links a{ justify-content: flex-end; }
html[dir="rtl"] .footer .footer-social{ justify-content: flex-end; }


/*! TTL Mobile Patch: v1.32.0 — Blog (listing/filter/category/details): crisp cards, 3:2 covers, orange-glass CTAs, icon centering, RTL/a11y — 2025-09-25 */
@layer overrides {

  /* ===== ألوان عامة للباتش ===== */
  :root{
    --ttl-blue:   var(--ttl-accent-blue, #0259a5);
    --ttl-orange: #f26822;
  }

  /* ===============================
     A) القوائم (blog / category / filter)
     =============================== */
  @media (max-width:768px){

    /* مسافات الأقسام */
    .section-padding{
      --pad-inline: clamp(16px,4vw,22px);
      --pad-block:  clamp(24px,6vw,40px);
      padding: var(--pad-block) var(--pad-inline) !important;
    }

    /* شبكة عمود واحد للقوائم */
    .row.g-4, .row.g-3{
      display:grid !important;
      grid-template-columns: 1fr !important;
      gap: 12px !important;
      margin-top: 16px !important;
    }
    .row.g-4 > [class*="col-"], .row.g-3 > [class*="col-"]{
      padding:0 !important; margin:0 !important;
    }

    /* الكارت */
    .blog-card{
      background:#fff;
      border:1px solid rgba(2,89,165,.14) !important;
      border-radius:16px !important;
      overflow:hidden !important;               /* لإصلاح نصف القطر في سفاري */
      box-shadow: 0 1px 0 rgba(2,89,165,.06),
                  0 8px 18px rgba(8,14,24,.06) !important;
      position:relative;
      display:grid; grid-template-rows:auto 1fr;
    }
    @media (hover:hover){
      .blog-card:hover{
        box-shadow:0 10px 24px rgba(8,14,24,.10);
        transform: translateY(-1px);
        transition: box-shadow .18s ease, transform .08s ease;
      }
    }

    /* الغلاف: 3:2 + تركيز أعلى */
    .blog-card .card-img-top,
    .blog-card__image img{
      display:block; inline-size:100%; block-size:auto;
      aspect-ratio: 3 / 2 !important;
      object-fit: cover !important;
      object-position: 50% 22% !important;
    }

    /* محتوى الكارت */
    .blog-card .card-body{
      padding:14px !important;
      display:grid; gap:8px;
    }
    .blog-card .card-body h2,
    .blog-card .card-body h3,
    .blog-card .card-body h5{
      margin:0; color:#111; font-weight:800;
      font-size: clamp(16px,4.8vw,20px);
      display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
      text-wrap: balance;
    }
    .blog-card .card-body p{
      color:#475569 !important; margin:0;
      display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
    }

    /* رابط ممتد: حلقة تركيز واضحة */
    .blog-card .stretched-link:focus-visible{
      outline: 2px solid var(--ttl-blue);
      outline-offset: 3px; border-radius: 12px;
    }

    /* شِبّات التصنيف داخل الكارت */
    .blog-card .badge, .blog-card .badge.bg-secondary{
      background: color-mix(in srgb, var(--ttl-blue) 18%, rgba(8,14,24,.06)) !important;
      color:#0b1220 !important;
      border:1px solid color-mix(in srgb, var(--ttl-blue) 40%, rgba(255,255,255,.22)) !important;
      border-radius:10px !important;
      padding:6px 10px !important;
      font-weight:700 !important;
    }

    /* أزرار “عرض الكل” و”بحث” داخل صفحات البلوج */
    .btn.btn-view-all,
    .search-button,
    .blog-card a.btn,
    .blog-card .btn-outline-primary{
      display:inline-flex !important; align-items:center; gap:.5rem;
      min-height:44px; padding:10px 14px; margin-top:10px;
      border-radius:12px; font-weight:800; color:#fff !important; text-decoration:none !important;

      background: color-mix(in srgb, var(--ttl-orange) 28%, rgba(8,14,24,.12)) !important;
      border:1px solid color-mix(in srgb, var(--ttl-orange) 70%, rgba(255,255,255,.26)) !important;
      -webkit-backdrop-filter:saturate(160%) blur(10px);
              backdrop-filter:saturate(160%) blur(10px);
      box-shadow: 0 10px 24px rgba(242,104,34,.28),
                  inset 0 1px 1px rgba(255,255,255,.12) !important;

      transition: transform .08s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
    }
    .btn.btn-view-all:hover,
    .search-button:hover,
    .blog-card a.btn:hover,
    .blog-card .btn-outline-primary:hover{
      transform: translateY(-1px);
      background: color-mix(in srgb, var(--ttl-orange) 36%, rgba(8,14,24,.10)) !important;
      border-color: color-mix(in srgb, var(--ttl-orange) 86%, #ffffff 14%) !important;
      box-shadow: 0 12px 28px rgba(242,104,34,.34),
                  inset 0 1px 1px rgba(255,255,255,.14) !important;
    }
    .btn.btn-view-all:focus-visible,
    .search-button:focus-visible,
    .blog-card a.btn:focus-visible,
    .blog-card .btn-outline-primary:focus-visible{
      outline:2px solid rgba(255,255,255,.95); outline-offset:2px;
    }
    html[dir="rtl"] .btn .fa-angle-right{ transform: scaleX(-1); }

    /* إنپت البحث الكبير */
    .input-group.input-group-lg .form-control{
      min-height: 48px; border-radius: 12px 0 0 12px !important;
    }
    .input-group.input-group-lg .search-button{
      border-radius: 0 12px 12px 0 !important;
    }

    /* تصفّح الصفحات */
    nav[role="navigation"] .pagination{ gap:8px; flex-wrap: wrap; justify-content: center; }
    nav[role="navigation"] .page-link{
      border-radius:10px !important;
      border:1px solid rgba(2,89,165,.18) !important;
      color:#0f172a !important; min-width:36px; min-height:36px; display:grid; place-items:center;
    }
    nav[role="navigation"] .page-item.active .page-link{
      color:#fff !important; border-color: transparent !important;
      background: color-mix(in srgb, var(--ttl-orange) 28%, rgba(8,14,24,.12)) !important;
      -webkit-backdrop-filter:saturate(160%) blur(8px);
              backdrop-filter:saturate(160%) blur(8px);
      box-shadow: 0 6px 16px rgba(242,104,34,.22) inset;
    }

    /* صور حالة عدم وجود نتائج */
    img[alt*="No articles"], img[alt*="لا توجد نتائج"]{ max-width: 280px; opacity:.8; }

    /* تقليل الحركة */
    @media (prefers-reduced-motion: reduce){
      .section-padding *{ animation:none !important; transition:none !important; }
    }
  }

  /* ===============================
     B) صفحة التفاصيل (hero + المحتوى + الشير + السايدبار)
     =============================== */
  @media (max-width:768px){
    /* صورة الهيرو */
    .blog-details-wrapper .blog-hero img{
      width:100%; height:auto; display:block;
      border-radius: 14px !important;
      box-shadow: 0 8px 18px rgba(8,14,24,.08);
      object-fit: cover; object-position:center;
    }

    /* نص المقال */
    .post-content{
      color:#334155 !important;
      font-size: clamp(15px,4.2vw,16px);
      line-height:1.75; text-wrap: pretty;
    }
    .post-content h2, .post-content h3, .post-content h4{
      color:#0b1220; margin: 1.2em 0 .6em; font-weight:800;
    }
    .post-content img{ max-width:100%; height:auto; border-radius:10px; }

    /* شير */
    .blog-share a{
      inline-size:40px; block-size:40px; display:inline-grid; place-items:center;
      border-radius:10px;
      color:#0b1220 !important; background: rgba(2,89,165,.06);
      margin-inline: 2px;
    }

    /* السايدبار */
    .sidebar-box{
      border:1px solid rgba(2,89,165,.12);
      border-radius:14px !important;
    }
    .most-read-list li{ padding-block: 8px; }
    .most-read-link{ line-height:1.35; }
  }

  /* ===============================
     C) أزرار “الزجاج البرتقالي” داخل نص المقال + ضبط الأيقونة
     =============================== */

  /* نصف قطر موحّد كالواتساب */
  .blog-article, .article-content, .post-content, .blog-details, #blog-details, .single-post-content{
    --ttl-glass-radius: 16px;
    --ttl-cta-gap: .6rem;
    --ttl-glass-bg:   color-mix(in srgb, var(--ttl-orange) 28%, rgba(8,14,24,.12));
    --ttl-glass-bd:   color-mix(in srgb, var(--ttl-orange) 70%, rgba(255,255,255,.26));
    --ttl-glass-bg-h: color-mix(in srgb, var(--ttl-orange) 36%, rgba(8,14,24,.10));
    --ttl-glass-bd-h: color-mix(in srgb, var(--ttl-orange) 86%, #ffffff 14%);
  }

  /* تحويل الروابط/الأزرار الشائعة داخل المحتوى لزر زجاجي */
  .blog-article .btn, .blog-article a.btn, .blog-article button.btn,
  .blog-article a.button, .blog-article .wp-block-button__link,
  .article-content .btn, .post-content .btn, .blog-details .btn, #blog-details .btn,
  .article-content a.button, .post-content a.button, .blog-details a.button, #blog-details a.button,
  .article-content [role="button"], .post-content [role="button"]{
    all: unset !important;
    box-sizing: border-box;
    display:inline-flex; align-items:center; gap: var(--ttl-cta-gap);
    min-height:44px; padding:10px 14px;
    border-radius: var(--ttl-glass-radius); font-weight:800; line-height:1.1;
    color:#fff !important; text-decoration:none !important; cursor:pointer;

    background: var(--ttl-glass-bg) !important;
    border:1px solid var(--ttl-glass-bd) !important;
    -webkit-backdrop-filter:saturate(160%) blur(10px);
            backdrop-filter:saturate(160%) blur(10px);
    box-shadow: 0 10px 24px rgba(242,104,34,.28),
                inset 0 1px 1px rgba(255,255,255,.12) !important;
    transition: transform .08s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
  }
  .blog-article .btn:hover, .article-content .btn:hover, .post-content .btn:hover,
  .blog-details .btn:hover, #blog-details .btn:hover,
  .blog-article a.button:hover, .article-content a.button:hover, .post-content a.button:hover{
    transform: translateY(-1px);
    background: var(--ttl-glass-bg-h) !important;
    border-color: var(--ttl-glass-bd-h) !important;
    box-shadow: 0 12px 28px rgba(242,104,34,.34),
                inset 0 1px 1px rgba(255,255,255,.14) !important;
  }
  .blog-article .btn:active, .article-content .btn:active, .post-content .btn:active{ transform: translateY(0); }
  .blog-article .btn:focus-visible, .article-content .btn:focus-visible, .post-content .btn:focus-visible{
    outline:2px solid rgba(255,255,255,.95); outline-offset:2px;
  }

  /* وسط الزر لو داخل فقرة */
  .blog-article p > .btn, .article-content p > .btn, .post-content p > .btn,
  .blog-details p > .btn, #blog-details p > .btn,
  .blog-article p > .button, .article-content p > .button{
    margin-inline: auto; display:inline-flex;
  }

  /* أيقونة داخل الزر: محاذاة رأسية مثالية */
  .blog-article .btn i, .blog-article .btn .fa, .blog-article .btn svg,
  .article-content .btn i, .article-content .btn .fa, .article-content .btn svg,
  .post-content .btn i, .post-content .btn .fa, .post-content .btn svg,
  .blog-details .btn i, .blog-details .btn .fa, .blog-details .btn svg,
  #blog-details .btn i, #blog-details .btn .fa, #blog-details .btn svg,
  .single-post-content .btn i, .single-post-content .btn .fa, .single-post-content .btn svg{
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
    width:1.1em !important; height:1.1em !important; line-height:1 !important; vertical-align:middle !important;
    transform: translateY(-0.06em);  /* تعويض بصري لفونت أوسوم */
  }

  /* RTL niceties */
  html[dir="rtl"] .btn .chev{ transform: scaleX(-1); display:inline-block; }
  html[dir="rtl"] .blog-card .card-body h2,
  html[dir="rtl"] .blog-card .card-body h3,
  html[dir="rtl"] .blog-card .card-body h5,
  html[dir="rtl"] .blog-card .card-body p{ text-align:start; }
}

/* ===== Section paddings (consistent with site) ===== */
.section-padding,
section.pt-5.pb-3.text-center,
section.py-5,
section.pt-0.pb-5{
  --pad-inline: clamp(16px,4vw,22px);
  --pad-block:  clamp(24px,6vw,40px);
  padding-inline: var(--pad-inline) !important;
}

/* ===== Page title ===== */
.main .text-center h1{
  font-size: clamp(22px,6.2vw,28px);
  line-height: 1.2;
  text-wrap: balance;
  margin-bottom: 6px !important;
}
.main .text-center p{
  color:#64748b !important;
  margin: 0 auto;
  max-width: 60ch;
  text-wrap: pretty;
}

/* ===== Grid -> single column ===== */
.main .row.g-4{
  display:grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
}
.main .row.g-4 > [class*="col-"]{ padding:0 !important; margin:0 !important; }

/* ===== Card shells ===== */
.main .bg-white.shadow-sm,
.main .card{
  border:1px solid rgba(2,89,165,.12) !important;
  border-radius:16px !important;
  box-shadow: 0 1px 0 rgba(2,89,165,.06), 0 8px 18px rgba(8,14,24,.06) !important;
  overflow: hidden;
}

/* ===== Form: comfy controls ===== */
.main .form-control,
.main .form-select,
.main textarea.form-control{
  min-height: 48px;
  border-radius: 12px !important;
  border: 1px solid rgba(2,89,165,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
  font-size: 15px;
}
.main textarea.form-control{ min-height: 120px; }
.main .form-control:focus,
.main .form-select:focus,
.main textarea.form-control:focus{
  border-color: color-mix(in srgb, var(--ttl-accent-blue, #0259a5) 60%, #ffffff 40%) !important;
  outline: 2px solid color-mix(in srgb, var(--ttl-accent-blue, #0259a5) 30%, transparent);
  outline-offset: 1px;
  box-shadow: 0 0 0 4px color-mix(in srgb, #0259a5 16%, transparent);
}
.main small.text-danger{ display:block; margin-top:6px; }

/* ===== Submit button -> Orange Glass (unified) ===== */
.main .btn.btn-default{
  all: unset;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  width: 100%;
  min-height: 48px; padding: 12px 14px;
  border-radius: 14px; font-weight:800; cursor:pointer; color:#fff !important;

  background: color-mix(in srgb, #f26822 28%, rgba(8,14,24,.12));
  border:1px solid color-mix(in srgb, #f26822 70%, rgba(255,255,255,.26));
  -webkit-backdrop-filter:saturate(160%) blur(10px);
          backdrop-filter:saturate(160%) blur(10px);
  box-shadow: 0 12px 28px rgba(242,104,34,.28), inset 0 1px 1px rgba(255,255,255,.12);
  transition: transform .08s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}
.main .btn.btn-default:hover{
  transform: translateY(-1px);
  background: color-mix(in srgb, #f26822 36%, rgba(8,14,24,.10));
  border-color: color-mix(in srgb, #f26822 86%, #ffffff 14%);
  box-shadow: 0 14px 32px rgba(242,104,34,.34), inset 0 1px 1px rgba(255,255,255,.14);
}
.main .btn.btn-default:focus-visible{ outline:2px solid rgba(255,255,255,.95); outline-offset:2px; }
.main .btn.btn-default:active{ transform: translateY(0); }

/* ===== Info cards (icon + text) ===== */
.main .card .card-body{
  padding: 14px !important;
}
.main .card .card-body i{
  color: var(--ttl-primary, #f26822) !important;
  width: 28px; text-align: center;
  margin-top: 2px;
  flex: 0 0 auto;
}
.main .card .card-body h5{
  margin: 0 0 4px; font-weight: 800;
  color:#0b1220;
}
.main .card .card-body p{ color:#475569; margin:0; }
.main .card .card-body a{ color: #0259a5; text-decoration: underline; text-underline-offset: 2px; }

/* ===== Map: keep smooth rounded corners ===== */
.main .ratio.ratio-16x9{
  border:1px solid rgba(2,89,165,.12);
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 0 rgba(2,89,165,.06), 0 8px 18px rgba(8,14,24,.06);
}
.main .ratio iframe{ display:block; width:100%; height:100%; }

/* ===== RTL niceties ===== */
html[dir="rtl"] .main .text-center h1,
html[dir="rtl"] .main .text-center p{ text-align: center; }
html[dir="rtl"] .main .card .card-body{ text-align: start; } /* يحترم اتجاه اللغة */
html[dir="rtl"] .main .card .card-body a{ direction: ltr; unicode-bidi: plaintext; } /* يحافظ على ترتيب الإيميل/الرابط */

/*! TTL Mobile Patch: v1.32.1 — Contact: fix Send button overflow (box-sizing, Safari-safe) — 2025-09-25 */
@layer overrides {
  @media (max-width:768px){

    /* زر الإرسال داخل نموذج الاتصال */
    .main .btn.btn-default{
      box-sizing: border-box !important;  /* يمنع الزيادة عن 100% مع الـpadding */
      width: 100% !important;
      min-width: 0 !important;            /* احتياط لسفاري */
      margin-inline: 0 !important;
      display: inline-flex !important;     /* نحافظ على محاذاة المحتوى */
      justify-content: center !important;
      align-items: center !important;
    }

  }
}


@layer overrides{

/* =========================================================
   TTL Mobile Patch: v1.38.0 — Patches bundle (mobile-only)
   يشمل: Events / IOR-EOR-DDP / Kuwait→KSA LTL / About
   كل سكوب مستقل لسهولة الصيانة — لا يؤثر على الدِسكتوب
========================================================= */

/* ---------- Root palette (اختياري) ---------- */
:root{
  --ttl-orange:#f26822;
  --ttl-blue:var(--ttl-accent-blue,#0259a5);
}

/* =========================================================
   v1.38.0.A — Events (listing + details) — scoped
   نطاق اللستة: .ttl-events-index
   نطاق التفاصيل: .ttl-event-details
========================================================= */
@layer overrides {
  @media (max-width:768px){

    /* ===== Listing ===== */
    .ttl-events-index{
      --pad-inline:clamp(16px,4vw,22px);
      --pad-block:clamp(24px,6vw,40px);
      padding:var(--pad-block) var(--pad-inline) !important;
      background:#fff;
    }
    .ttl-events-index .page-title{
      font-size:clamp(20px,6vw,26px); line-height:1.2; margin:0 0 6px; color:#0f172a; text-wrap:balance;
    }
    .ttl-events-index .page-lead{ color:#475569; margin:6px 0 12px; text-wrap:pretty; }

    .ttl-events-index .events-list{
      display:grid !important; grid-template-columns:1fr !important; gap:12px !important; margin-top:12px !important;
    }
    .ttl-events-index .events-list > *{ padding:0 !important; margin:0 !important; }

    .ttl-events-index .event-card{
      border:1px solid rgba(2,89,165,.14); border-radius:16px; overflow:hidden; background:#fff;
      box-shadow:0 1px 0 rgba(2,89,165,.06), 0 8px 18px rgba(8,14,24,.06);
      display:grid; grid-template-rows:auto 1fr; position:relative;
    }
    @media (hover:hover){
      .ttl-events-index .event-card:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(8,14,24,.10); transition:box-shadow .18s ease, transform .08s ease; }
    }
    .ttl-events-index .event-card__media img{
      display:block; inline-size:100%; block-size:auto; aspect-ratio:3/2; object-fit:cover; object-position:50% 22%;
    }
    .ttl-events-index .event-card__body{ padding:14px; display:grid; gap:6px; }
    .ttl-events-index .event-title{
      margin:0; color:#0b1220; font-weight:800; font-size:clamp(16px,4.8vw,20px);
      display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-wrap:balance;
    }
    .ttl-events-index .event-meta{ color:#64748b; font-size:14px; }

    .events-nav .btn-back{ margin:12px auto 0; display:inline-flex; }

    /* ===== Details ===== */
    .ttl-event-details{
      --pad-inline:clamp(16px,4vw,22px);
      --pad-block:clamp(20px,5vw,32px);
      padding:var(--pad-block) var(--pad-inline) !important; background:#fff;
    }
    .ttl-event-details .event-hero img{
      width:100%; height:auto; border-radius:14px; box-shadow:0 8px 18px rgba(8,14,24,.08); object-fit:cover;
    }
    .ttl-event-details .event-title{ font-size:clamp(22px,6.6vw,28px); line-height:1.2; margin:12px 0 8px; text-wrap:balance; }
    .ttl-event-details .event-content{ color:#334155; font-size:clamp(15px,4.2vw,16px); line-height:1.75; text-wrap:pretty; }
    .ttl-event-details .event-content h2,
    .ttl-event-details .event-content h3{ color:#0b1220; font-weight:800; margin:1.2em 0 .6em; }

    /* Slider controls (generic) */
    .ttl-event-details .swiper-button-prev,
    .ttl-event-details .swiper-button-next,
    .ttl-event-details .splide__arrow,
    .ttl-event-details .carousel-control-prev,
    .ttl-event-details .carousel-control-next{
      width:42px; height:42px; border-radius:12px;
      background:color-mix(in srgb,var(--ttl-blue) 24%, rgba(8,14,24,.12)) !important;
      border:1px solid color-mix(in srgb,var(--ttl-blue) 60%, rgba(255,255,255,.22)) !important;
      -webkit-backdrop-filter:saturate(160%) blur(8px); backdrop-filter:saturate(160%) blur(8px);
      box-shadow:0 8px 18px rgba(2,89,165,.22), inset 0 1px 1px rgba(255,255,255,.12);
      color:#fff;
    }
    .ttl-event-details .swiper-pagination-bullet,
    .ttl-event-details .splide__pagination__page{ width:8px; height:8px; margin:0 4px; background:#cbd5e1; opacity:.9; }
    .ttl-event-details .swiper-pagination-bullet-active,
    .ttl-event-details .splide__pagination__page.is-active{ background:var(--ttl-blue); }

    /* RTL */
    html[dir="rtl"] .ttl-events-index .event-title,
    html[dir="rtl"] .ttl-event-details .event-title,
    html[dir="rtl"] .ttl-event-details .event-content{ text-align:start; }
    html[dir="rtl"] .events-nav .btn-back .chev{ transform:scaleX(-1); display:inline-block; }
  }
}

/* =========================================================
   v1.38.0.B — IOR/EOR/DDP page — scoped: .ttl-ior-page
========================================================= */
@layer overrides {
  @media (max-width:768px){

    .ttl-ior-page{
      --pad-inline: clamp(16px,4vw,22px);
      --pad-block:  clamp(24px,6vw,40px);
      --radius-lg:  16px;
      --radius-md:  12px;
      --ttl-blue:   var(--ttl-accent-blue, #0259a5);
      --ttl-orange: #f26822;
      padding: var(--pad-block) var(--pad-inline) !important;
      background:#fff !important;
    }
    .ttl-ior-container{ padding:0 !important; }

    .ttl-ior-hero{ margin-bottom:14px !important; }
    .ttl-ior-hero__img{
      display:block; inline-size:100%; block-size:auto; aspect-ratio:3/2;
      object-fit:cover; object-position:50% 22%; border-radius:var(--radius-lg) !important;
      box-shadow:0 8px 18px rgba(8,14,24,.08);
    }
    .ttl-ior-hero__img[data-fit="contain"]{ aspect-ratio:auto; object-fit:contain; object-position:center; background:#f1f5f9; }

    .ttl-ior-title{ font-size:clamp(22px,6.6vw,28px); line-height:1.2; margin:6px 0 10px; color:#0b1220 !important; text-wrap:balance; }
    .ttl-ior-lead{ color:#475569 !important; margin-bottom:16px !important; font-size:clamp(15px,4.4vw,16px); text-wrap:pretty; }
    .ttl-ior-h2{ font-size:clamp(18px,5.6vw,22px); line-height:1.25; margin:18px 0 10px; color:#0b1220; font-weight:800; text-wrap:balance; }
    .ttl-ior-paragraph{ color:#334155 !important; text-wrap:pretty; }

    .ttl-ior-list{ display:grid; gap:10px; margin:0 0 16px; padding:0; list-style:none; }
    .ttl-ior-list__item{
      display:flex; align-items:flex-start; gap:10px; background:#fff; border:1px solid rgba(2,89,165,.14);
      border-radius:var(--radius-md); padding:10px 12px; color:#0f172a;
    }
    .ttl-ior-list__icon{ color:var(--ttl-orange) !important; margin-top:2px; flex:0 0 18px; inline-size:18px; block-size:18px; }

    .ttl-ior-faq{ display:grid; gap:10px; }
    .ttl-ior-faq__q{ margin:0; font-size:clamp(15px,4.6vw,18px); color:#0b1220; font-weight:800; }
    .ttl-ior-faq__a{
      margin:4px 0 10px; color:#475569 !important; padding:10px 12px;
      border:1px dashed rgba(2,89,165,.20); border-radius:10px; background:#fafcff;
    }

    .ttl-ior-cta{ display:flex; justify-content:center; }
    .btn-ior-cta{
      all:unset; display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
      min-height:44px; padding:10px 14px; border-radius:16px; font-weight:800;
      color:#fff !important; cursor:pointer; text-decoration:none !important; white-space:nowrap;
      font-size:15px; letter-spacing:.2px; visibility:visible !important;

      background: color-mix(in srgb, var(--ttl-orange) 28%, rgba(8,14,24,.12));
      border:1px solid color-mix(in srgb, var(--ttl-orange) 70%, rgba(255,255,255,.26));
      -webkit-backdrop-filter:saturate(160%) blur(10px); backdrop-filter:saturate(160%) blur(10px);
      box-shadow:0 10px 24px rgba(242,104,34,.28), inset 0 1px 1px rgba(255,255,255,.12);
      transition:transform .08s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
    }
    .btn-ior-cta:hover{
      transform:translateY(-1px);
      background:color-mix(in srgb, var(--ttl-orange) 36%, rgba(8,14,24,.10));
      border-color:color-mix(in srgb, var(--ttl-orange) 86%, #ffffff 14%);
      box-shadow:0 12px 28px rgba(242,104,34,.34), inset 0 1px 1px rgba(255,255,255,.14);
    }
    .btn-ior-cta:focus-visible{ outline:2px solid rgba(255,255,255,.95); outline-offset:2px; }
    .ttl-ior-cta__icon{ display:inline-flex; align-items:center; justify-content:center; width:1.1em; height:1.1em; line-height:1; transform:translateY(-.06em); }

    html[dir="rtl"] .ttl-ior-page .ttl-ior-list__item{ text-align:start; }
  }
}

/* =========================================================
   v1.38.0.C — Kuwait→KSA LTL page — scoped: .ttl-ltl-page
========================================================= */
@layer overrides {
  @media (max-width:768px){

    .ttl-ltl-page{
      --ttl-blue:   var(--ttl-accent-blue, #0259a5);
      --ttl-orange: #f26822;
      --pad-inline: clamp(16px,4vw,22px);
      --pad-block:  clamp(24px,6vw,40px);
    }
    .ttl-ltl-page .ttl-ltl-container{ padding-inline:var(--pad-inline) !important; padding-block:var(--pad-block) !important; }

    .ttl-ltl-page .ttl-ltl-hero__img{
      aspect-ratio:3/2; object-fit:cover; object-position:center; border-radius:16px !important;
      box-shadow:0 8px 20px rgba(8,14,24,.08);
    }

    .ttl-ltl-page .ttl-ltl-title{ font-size:clamp(20px,6.2vw,26px); line-height:1.2; margin:10px 0 6px; color:#0b1220 !important; text-wrap:balance; }
    .ttl-ltl-page .ttl-subheading, .ttl-ltl-page .ttl-ltl-h2{
      font-size:clamp(18px,5.4vw,22px); line-height:1.25; margin:18px 0 8px; color:#0b1220 !important; font-weight:800; text-wrap:balance;
    }
    .ttl-ltl-page .ttl-ltl-lead, .ttl-ltl-page .ttl-ltl-paragraph, .ttl-ltl-page p{
      color:#475569 !important; font-size:clamp(14px,4.2vw,16px); line-height:1.75; text-wrap:pretty; margin-bottom:10px;
    }

    .ttl-ltl-page .ttl-ltl-list{ display:grid; gap:10px; padding:0; margin:10px 0 18px; list-style:none; }
    .ttl-ltl-page .ttl-ltl-list__item{
      display:flex; align-items:flex-start; gap:8px; background:#fff; color:#0f172a;
      border:1px solid rgba(2,89,165,.14); border-radius:14px; padding:10px 12px;
    }
    .ttl-ltl-page .ttl-ltl-list__icon{
      color:var(--ttl-orange) !important; flex:0 0 auto; width:1.1em; height:1.1em; line-height:1;
      display:inline-flex; align-items:center; justify-content:center; transform:translateY(-.06em);
      margin:0 !important; margin-inline-end:.5rem !important;
    }

    .ttl-ltl-page .ttl-ltl-faq .ttl-ltl-faq__q{ font-weight:800; color:#0b1220; margin:12px 0 4px; font-size:clamp(15px,4.6vw,17px); }
    .ttl-ltl-page .ttl-ltl-faq .ttl-ltl-faq__a{ margin:0 0 6px; color:#475569; }

    /* CTA (تجاوز آمن لأي .btn-default قديم) */
    .ttl-ltl-page .ttl-ltl-cta{ text-align:center; margin:6px 0 14px; }
    .ttl-ltl-page .ttl-ltl-cta .btn.btn-default.btn-ltl-cta,
    .ttl-ltl-page a.btn.btn-default.btn-ltl-cta{
      all:unset !important; box-sizing:border-box !important;
      display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:.6rem !important;
      min-height:44px !important; padding:10px 14px !important; border-radius:16px !important;
      font-weight:800 !important; line-height:1.1 !important; color:#fff !important; text-decoration:none !important;
      width:auto !important; max-width:100% !important; white-space:nowrap; font-size:15px; letter-spacing:.2px; visibility:visible !important;

      background: color-mix(in srgb, #f26822 28%, rgba(8,14,24,.12)) !important;
      border:1px solid color-mix(in srgb, #f26822 70%, rgba(255,255,255,.26)) !important;
      -webkit-backdrop-filter:saturate(160%) blur(10px); backdrop-filter:saturate(160%) blur(10px);
      box-shadow:0 10px 24px rgba(242,104,34,.28), inset 0 1px 1px rgba(255,255,255,.12) !important;
      transition:transform .08s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
    }
    .ttl-ltl-page .ttl-ltl-cta .btn.btn-default.btn-ltl-cta:hover{
      transform:translateY(-1px);
      background:color-mix(in srgb, #f26822 36%, rgba(8,14,24,.10)) !important;
      border-color:color-mix(in srgb, #f26822 86%, #ffffff 14%) !important;
      box-shadow:0 12px 28px rgba(242,104,34,.34), inset 0 1px 1px rgba(255,255,255,.14) !important;
    }
    .ttl-ltl-page .ttl-ltl-cta .btn.btn-default.btn-ltl-cta:focus-visible{ outline:2px solid rgba(255,255,255,.95) !important; outline-offset:2px !important; }
    .ttl-ltl-page .ttl-ltl-cta .btn.btn-default.btn-ltl-cta i{
      display:inline-flex !important; align-items:center !important; justify-content:center !important;
      width:1.1em !important; height:1.1em !important; line-height:1 !important; transform:translateY(-.06em); flex:0 0 auto !important; margin:0 !important;
    }

    html[dir="rtl"] .ttl-ltl-page .ttl-ltl-title,
    html[dir="rtl"] .ttl-ltl-page .ttl-ltl-h2,
    html[dir="rtl"] .ttl-ltl-page .ttl-ltl-paragraph,
    html[dir="rtl"] .ttl-ltl-page .ttl-ltl-list,
    html[dir="rtl"] .ttl-ltl-page .ttl-ltl-faq{ text-align:start; }
  }
}

/* =========================================================
   v1.38.0.D — About page — scoped: .ttl-about-page
   (يشمل formatted-content + feature-card CTA) 
========================================================= */
@layer overrides {
  @media (max-width:768px){

    .ttl-about-page{
      --ttl-blue:   var(--ttl-accent-blue, #0259a5);
      --ttl-orange: #f26822;
      --pad-inline: clamp(16px,4vw,22px);
      --pad-block:  clamp(24px,6vw,40px);
    }

    /* Breadcrumb / Hero / Cards layout (اختصارًا نُبقي الأساسيات) */
    .ttl-about-breadcrumb .container,
    .ttl-about-hero .container-xl,
    .ttl-about-cards .container-xl{ padding-inline: var(--pad-inline); }
    .ttl-about-title{ font-size:clamp(22px,6.4vw,28px); line-height:1.2; text-wrap:balance; color:#0b1220; }
    .ttl-about-content{ color:#475569; font-size:clamp(14px,4.2vw,16px); line-height:1.75; text-wrap:pretty; }
    .ttl-about-cards__row{ display:grid !important; grid-template-columns:1fr !important; gap:12px !important; }
    .ttl-about-card{
      background:#fff; color:#0f172a; border:1px solid rgba(2,89,165,.14); border-radius:16px;
      padding:14px; box-shadow:0 1px 0 rgba(2,89,165,.06), 0 8px 18px rgba(8,14,24,.06);
    }
    .ttl-about-card__icon i{ font-size:clamp(22px,6vw,28px); color:var(--ttl-orange); }
    .ttl-about-card__title{ font-size:clamp(16px,4.8vw,20px); margin:6px 0 4px; font-weight:800; color:#0b122a; }
    .ttl-about-card__desc{ color:#475569; }

    /* ==== A) formatted-content → زر زجاجي (مع تثبيتات ظهور النص) ==== */
    .ttl-about-page .formatted-content a.btn,
    .ttl-about-page .formatted-content a.button,
    .ttl-about-page .formatted-content a[role="button"],
    .ttl-about-page .formatted-content .wp-block-button .wp-block-button__link{
      all:unset;
      display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
      min-height:44px; padding:10px 14px; border-radius:16px;
      font-weight:800; line-height:1.1; font-size:15px; letter-spacing:.2px; white-space:nowrap;
      color:#fff !important; text-decoration:none !important; cursor:pointer; visibility:visible !important;

      background: color-mix(in srgb, var(--ttl-orange) 28%, rgba(8,14,24,.12));
      border:1px solid color-mix(in srgb, var(--ttl-orange) 70%, rgba(255,255,255,.26));
      -webkit-backdrop-filter:saturate(160%) blur(10px); backdrop-filter:saturate(160%) blur(10px);
      box-shadow:0 10px 24px rgba(242,104,34,.28), inset 0 1px 1px rgba(255,255,255,.12);
      transition:transform .08s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
      margin:10px 0 12px;
    }
    .ttl-about-page .formatted-content a.btn:hover,
    .ttl-about-page .formatted-content a.button:hover,
    .ttl-about-page .formatted-content a[role="button"]:hover,
    .ttl-about-page .formatted-content .wp-block-button .wp-block-button__link:hover{
      transform:translateY(-1px);
      background:color-mix(in srgb, var(--ttl-orange) 36%, rgba(8,14,24,.10));
      border-color:color-mix(in srgb, var(--ttl-orange) 86%, #ffffff 14%);
      box-shadow:0 12px 28px rgba(242,104,34,.34), inset 0 1px 1px rgba(255,255,255,.14);
    }
    .ttl-about-page .formatted-content a.btn:focus-visible,
    .ttl-about-page .formatted-content a.button:focus-visible,
    .ttl-about-page .formatted-content a[role="button"]:focus-visible,
    .ttl-about-page .formatted-content .wp-block-button .wp-block-button__link:focus-visible{
      outline:2px solid rgba(255,255,255,.95); outline-offset:2px;
    }
    .ttl-about-page .formatted-content a.btn i,
    .ttl-about-page .formatted-content a.button i,
    .ttl-about-page .formatted-content .wp-block-button .wp-block-button__link i{
      display:inline-flex; align-items:center; justify-content:center; width:1.1em; height:1.1em; line-height:1; transform:translateY(-.06em); flex:0 0 auto;
    }
    html[dir="rtl"] .ttl-about-page .formatted-content .chev{ transform:scaleX(-1) translateY(-.06em); }

    /* ==== B) CTA داخل كروت المزايا ==== */
    .ttl-about-card__cta{
      all:unset;
      display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
      min-height:40px; padding:8px 12px; border-radius:14px;
      font-weight:800; color:#fff !important; text-decoration:none !important; cursor:pointer; white-space:nowrap; font-size:15px;
      background: color-mix(in srgb, var(--ttl-orange) 28%, rgba(8,14,24,.12));
      border:1px solid color-mix(in srgb, var(--ttl-orange) 70%, rgba(255,255,255,.26));
      -webkit-backdrop-filter:saturate(160%) blur(10px); backdrop-filter:saturate(160%) blur(10px);
      box-shadow:0 10px 24px rgba(242,104,34,.28), inset 0 1px 1px rgba(255,255,255,.12);
      transition:transform .08s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
      margin-top:10px;
    }
    .ttl-about-card__cta:hover{
      transform:translateY(-1px);
      background:color-mix(in srgb, var(--ttl-orange) 36%, rgba(8,14,24,.10));
      border-color:color-mix(in srgb, var(--ttl-orange) 86%, #ffffff 14%);
      box-shadow:0 12px 28px rgba(242,104,34,.34), inset 0 1px 1px rgba(255,255,255,.14);
    }
    .ttl-about-card__cta:focus-visible{ outline:2px solid rgba(255,255,255,.95); outline-offset:2px; }
    .ttl-about-card__cta .chev{ width:1.1em; height:1.1em; line-height:1; transform:translateY(-.06em); }
    html[dir="rtl"] .ttl-about-page .chev{ transform:scaleX(-1) translateY(-.06em); }

    /* RTL نصوص عامة */
    html[dir="rtl"] .ttl-about-page .ttl-about-content,
    html[dir="rtl"] .ttl-about-page .ttl-about-title,
    html[dir="rtl"] .ttl-about-page .ttl-about-card__desc,
    html[dir="rtl"] .ttl-about-page .ttl-about-card__title{ text-align:start; }
  }
}
/* ========================= End v1.38.0 bundle ========================= */

/*! TTL Mobile Hotfix: v1.38.1 — About & LTL CTAs (fix white block overlay on iOS) — 2025-09-25
    النطاق: موبايل فقط (≤768px) — يعالج اختفاء لون زر glass بسبب ::before/::after أو background-image قديمة */
@layer overrides {
  @media (max-width:768px){

    /* ===== A) ABOUT: أزرار داخل formatted-content ===== */
    .ttl-about-page .formatted-content a.btn,
    .ttl-about-page .formatted-content a.button,
    .ttl-about-page .formatted-content a[role="button"],
    .ttl-about-page .formatted-content .wp-block-button .wp-block-button__link{
      position:relative !important;
      -webkit-appearance:none !important;
      background: color-mix(in srgb, #f26822 28%, rgba(8,14,24,.12)) !important;
      background-image: none !important;             /* يلغي أي جراديانت قديم */
      color:#fff !important;
    }
    /* نقتل أي طبقة قديمة مغطيّة الزر */
    .ttl-about-page .formatted-content a.btn::before,
    .ttl-about-page .formatted-content a.btn::after,
    .ttl-about-page .formatted-content a.button::before,
    .ttl-about-page .formatted-content a.button::after,
    .ttl-about-page .formatted-content .wp-block-button .wp-block-button__link::before,
    .ttl-about-page .formatted-content .wp-block-button .wp-block-button__link::after{
      content:none !important; display:none !important;
    }

    /* ===== B) ABOUT: زر الكارت (Learn more) ===== */
    .ttl-about-page .ttl-feature-card .ttl-btn-ghost{
      position:relative !important;
      -webkit-appearance:none !important;
      background: color-mix(in srgb, #f26822 28%, rgba(8,14,24,.12)) !important;
      background-image: none !important;
      box-shadow: 0 10px 24px rgba(242,104,34,.28), inset 0 1px 1px rgba(255,255,255,.12) !important;
      border:1px solid color-mix(in srgb, #f26822 70%, rgba(255,255,255,.26)) !important;
      color:#fff !important;
    }
    .ttl-about-page .ttl-feature-card .ttl-btn-ghost::before,
    .ttl-about-page .ttl-feature-card .ttl-btn-ghost::after{
      content:none !important; display:none !important;
    }

    /* ===== C) LTL: زر واتساب داخل الصفحة (لو الثيم يحط ::before) ===== */
    .ttl-ltl-page .ttl-ltl-cta .btn.btn-default.btn-ltl-cta{
      -webkit-appearance:none !important;
      background-image:none !important;
      filter:none !important;                         /* يلغي أي فلاتر قديمة */
    }
    .ttl-ltl-page .ttl-ltl-cta .btn.btn-default.btn-ltl-cta::before,
    .ttl-ltl-page .ttl-ltl-cta .btn.btn-default.btn-ltl-cta::after{
      content:none !important; display:none !important;
    }
  }
}
/* ===== End Hotfix: v1.38.1 ===== */

/*! TTL Mobile Patch: v1.36.4 — About Page: left-align & tidy typography (mobile-only, scoped) — 2025-09-25
    النطاق: .ttl-about-page فقط — يعالج محاذاة الوسط القادمة من .text-center ويظبط التيبوغرافيا على الموبايل */
@layer overrides {
  @media (max-width:768px){

    /* 1) إلغاء محاذاة الوسط داخل سكوب الصفحة */
    .ttl-about-page .text-center,
    .ttl-about-page .col-lg-10.text-center{
      text-align: start !important;  /* left في LTR و right في RTL */
    }

    /* 2) تيبوغرافيا المحتوى */
    .ttl-about-page .formatted-content{
      color:#475569; font-size:clamp(14px,4.2vw,16px);
      line-height:1.75; text-wrap:pretty;
      max-width: 72ch;                   /* عرض مريح للقراءة */
      margin-inline: 0;                  /* يلغي تمركز الحاوية */
    }
    .ttl-about-page .formatted-content p,
    .ttl-about-page .formatted-content li{
      text-align:start !important;
    }

    /* 3) العناوين */
    .ttl-about-page h1,
    .ttl-about-page h2,
    .ttl-about-page h3,
    .ttl-about-page h4{
      text-align:start !important;
      color:#0b1220;
      text-wrap:balance;
      margin: 1.1em 0 .5em;
      line-height:1.2;
      font-weight:800;
    }

    /* 4) القوائم */
    .ttl-about-page .formatted-content ul,
    .ttl-about-page .formatted-content ol{
      padding-inline-start: 1.1rem;
      margin: .4rem 0 1rem;
    }
    .ttl-about-page .formatted-content li + li{ margin-top:.35rem; }

    /* 5) الخط السفلي أسفل العنوان (لو موجود) */
    .ttl-about-page .ttl-underline{
      margin-inline: 0 0 12px !important; /* يخليه تحت العنوان ناحية البداية */
    }
  }
}
/* ===== End Patch: v1.36.4 — About Page ===== */

@layer overrides {
  @media (max-width:768px){

    /* ===== Vars + حشو مريح للحاوية ===== */
    .ttl-details-hub{
      --ttl-blue:   var(--ttl-accent-blue, #0259a5);
      --ttl-orange: #f26822;
      --pad-inline: clamp(16px,4vw,22px);
      --pad-block:  clamp(24px,6vw,40px);
      background:#fff;
    }
    .ttl-details-hub > .container,
    .ttl-details-hub .container-xl,
    .ttl-details-hub .container-lg{
      padding-inline: var(--pad-inline) !important;
    }

    /* ===== تيبوغرافيا عامة (لا تلغي تنسيقات الدِسك توب) ===== */
    .ttl-details-hub h1,
    .ttl-details-hub h2,
    .ttl-details-hub h3,
    .ttl-details-hub h4{
      color:#0b1220; font-weight:800; line-height:1.2;
      text-wrap:balance; margin:1.1em 0 .55em;
      text-align:start !important;
    }
    .ttl-details-hub p,
    .ttl-details-hub li{
      color:#475569; font-size:clamp(14px,4.2vw,16px);
      line-height:1.75; text-wrap:pretty; text-align:start !important;
    }

    /* ===== صور هيرو/بانر: 3:2 + ظل ناعم ===== */
    .ttl-details-hub img[alt*="banner"],
    .ttl-details-hub .hero img,
    .ttl-details-hub .banner img{
      display:block; width:100%; height:auto;
      aspect-ratio:3/2; object-fit:cover; object-position:center;
      border-radius:16px; box-shadow:0 8px 18px rgba(8,14,24,.08);
    }

    /* ===== شبكات داخل التفاصيل تتحول عمود واحد ===== */
    .ttl-details-hub .row.g-4,
    .ttl-details-hub .row.g-3{
      display:grid !important; grid-template-columns:1fr !important;
      gap:12px !important;
    }
    .ttl-details-hub .row.g-4 > [class*="col-"],
    .ttl-details-hub .row.g-3 > [class*="col-"]{
      padding:0 !important; margin:0 !important;
    }

    /* ===== أزرار زجاجية داخل المحتوى فقط (آمن) ===== */
    .ttl-details-hub .post-content a.btn,
    .ttl-details-hub .post-content a.button,
    .ttl-details-hub .post-content a[role="button"],
    .ttl-details-hub .formatted-content a.btn,
    .ttl-details-hub .formatted-content a.button,
    .ttl-details-hub .formatted-content a[role="button"],
    .ttl-details-hub .service-content a.btn,
    .ttl-details-hub .service-content a.button,
    .ttl-details-hub .service-content a[role="button"],
    .ttl-details-hub .wp-block-button .wp-block-button__link{
      all:unset;
      display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
      min-height:44px; padding:10px 14px;
      border-radius:16px; font-weight:800; line-height:1.1;
      color:#fff !important; text-decoration:none !important; cursor:pointer;

      background: color-mix(in srgb, var(--ttl-orange) 28%, rgba(8,14,24,.12));
      border:1px solid color-mix(in srgb, var(--ttl-orange) 70%, rgba(255,255,255,.26));
      -webkit-backdrop-filter:saturate(160%) blur(10px);
              backdrop-filter:saturate(160%) blur(10px);
      box-shadow:0 10px 24px rgba(242,104,34,.28), inset 0 1px 1px rgba(255,255,255,.12);
      transition:transform .08s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
      margin:10px 0 12px;
    }
    .ttl-details-hub .post-content a.btn:hover,
    .ttl-details-hub .formatted-content a.btn:hover,
    .ttl-details-hub .service-content a.btn:hover,
    .ttl-details-hub .wp-block-button .wp-block-button__link:hover{
      transform:translateY(-1px);
      background: color-mix(in srgb, var(--ttl-orange) 36%, rgba(8,14,24,.10));
      border-color: color-mix(in srgb, var(--ttl-orange) 86%, #ffffff 14%);
      box-shadow:0 12px 28px rgba(242,104,34,.34), inset 0 1px 1px rgba(255,255,255,.14);
    }
    .ttl-details-hub .post-content a.btn:focus-visible,
    .ttl-details-hub .formatted-content a.btn:focus-visible,
    .ttl-details-hub .service-content a.btn:focus-visible,
    .ttl-details-hub .wp-block-button .wp-block-button__link:focus-visible{
      outline:2px solid rgba(255,255,255,.95); outline-offset:2px;
    }
    .ttl-details-hub .post-content a.btn i,
    .ttl-details-hub .formatted-content a.btn i,
    .ttl-details-hub .service-content a.btn i{
      display:inline-flex; align-items:center; justify-content:center;
      width:1.1em; height:1.1em; line-height:1; transform:translateY(-.06em);
      flex:0 0 auto;
    }

    /* ===== تخصيصات خفيفة حسب النوع (اختياري) ===== */
    .ttl-details-hub.ttl--blog   { /* مثال: تحسين سطر مشترك لصفحة المقال */ }
    .ttl-details-hub.ttl--service{ /* مثال: بطاقات أسئلة/مزايا… */       }
    .ttl-details-hub.ttl--page   { /* صفحات ثابتة عامة */                }
    .ttl-details-hub.ttl--slider { /* تفاصيل سلايدر إن وجدت */           }

    /* ===== RTL ===== */
    html[dir="rtl"] .ttl-details-hub *{ text-align:start; }
  }
}
/* ===== End Patch: v1.38.0 — Details Hub ===== */

/*! TTL Mobile Patch: v1.38.x — Service Details (scoped, merged, cleaned) — 2025-09-25 */
@layer overrides {
  @media (max-width:768px){

    /* ===== Scope + spacing (local tokens) ===== */
    .ttl-service-page{
      --ttl-blue:   var(--ttl-accent-blue, #0259a5);
      --ttl-orange: #f26822;
      --pad-inline: clamp(16px,4vw,22px);
      --pad-block:  clamp(24px,6vw,40px);
    }
    .ttl-service-page .container-xl{ padding-inline: var(--pad-inline) !important; }
    .ttl-service-page .row{ row-gap: 14px; }

    /* ===== Media first (without HTML reorder) ===== */
    .ttl-service-page .svc-img{ order: -1; }
    .ttl-service-page .svc-img img{
      display:block; inline-size:100%; block-size:auto;
      aspect-ratio: 3 / 2;
      object-fit: cover; object-position: 50% 22%;
      border-radius:16px !important;
      box-shadow: 0 8px 18px rgba(8,14,24,.08);
    }

    /* ===== Typography ===== */
    .ttl-service-page .service-details h1{
      font-size: clamp(22px,6.6vw,28px);
      line-height:1.2; margin: 10px 0 8px; color:#0b1220 !important;
      text-wrap: balance;
    }
    .ttl-service-page .service-description{
      color:#475569 !important;
      font-size: clamp(14px,4.2vw,16px);
      line-height:1.75; text-wrap: pretty;
      text-align: start;
    }
    .ttl-service-page .service-description h2,
    .ttl-service-page .service-description h3{
      color:#0b1220; font-weight:800; margin:1.1em 0 .55em;
      text-align: start;
    }

    /* ===== Unified Orange-Glass CTA (content buttons + cards readmore) ===== */
    /* يطبّق على: الأزرار/الروابط داخل المحتوى + زر Read more داخل كروت Explore More Services */
    .ttl-service-page :is(
      .service-description a.btn,
      .service-description a.button,
      .service-description a[role="button"],
      .service-description .wp-block-button .wp-block-button__link,
      .service-description a.btn.btn-default,
      .service-description .btn.btn-default,
      .service-card .readmore
    ){
      all: unset !important;
      box-sizing: border-box !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: .6rem !important;

      min-height: 44px !important;
      padding: 10px 14px !important;
      border-radius: 16px !important;

      font-weight: 800 !important;
      line-height: 1.1 !important;
      color: #fff !important;
      text-decoration: none !important;
      cursor: pointer !important;

      width: auto !important;
      max-width: 100% !important; /* يمنع التمدّد داخل النص */
      margin: 10px 0 12px !important;

      background: color-mix(in srgb, var(--ttl-orange) 28%, rgba(8,14,24,.12)) !important;
      border: 1px solid color-mix(in srgb, var(--ttl-orange) 70%, rgba(255,255,255,.26)) !important;
      -webkit-backdrop-filter: saturate(160%) blur(10px);
              backdrop-filter: saturate(160%) blur(10px);
      box-shadow:
        0 10px 24px rgba(242,104,34,.28),
        inset 0 1px 1px rgba(255,255,255,.12) !important;

      transition:
        transform .08s ease,
        box-shadow .18s ease,
        background-color .18s ease,
        border-color .18s ease;
    }

    .ttl-service-page :is(
      .service-description a.btn,
      .service-description a.button,
      .service-description a[role="button"],
      .service-description .wp-block-button .wp-block-button__link,
      .service-card .readmore
    ):hover{
      transform: translateY(-1px);
      background: color-mix(in srgb, var(--ttl-orange) 36%, rgba(8,14,24,.10)) !important;
      border-color: color-mix(in srgb, var(--ttl-orange) 86%, #ffffff 14%) !important;
      box-shadow:
        0 12px 28px rgba(242,104,34,.34),
        inset 0 1px 1px rgba(255,255,255,.14) !important;
    }

    .ttl-service-page :is(
      .service-description a.btn,
      .service-description a.button,
      .service-description a[role="button"],
      .service-description .wp-block-button .wp-block-button__link,
      .service-card .readmore
    ):focus-visible{
      outline: 2px solid rgba(255,255,255,.95) !important;
      outline-offset: 2px !important;
    }

    /* Icon alignment (applies to both content CTAs & card readmore) */
    .ttl-service-page :is(
      .service-description a.btn i,
      .service-description a.button i,
      .service-description a[role="button"] i,
      .service-description .wp-block-button .wp-block-button__link i,
      .service-card .readmore i
    ){
      display:inline-flex !important; align-items:center !important; justify-content:center !important;
      width:1.1em !important; height:1.1em !important; line-height:1 !important;
      transform: translateY(-0.06em);
      flex:0 0 auto !important; margin:0 !important;
    }

    /* ===== RTL niceties ===== */
    html[dir="rtl"] .ttl-service-page .service-details h1,
    html[dir="rtl"] .ttl-service-page .service-description{ text-align:start; }
    html[dir="rtl"] .ttl-service-page .service-card .readmore .fa-angle-right{
      transform: scaleX(-1) translateY(-0.06em);
    }
  }
}

/*! TTL Mobile Patch: v1.39.0 — Services Index (mobile-only, scoped) — 2025-09-25
    هذا الباتش يخص صفحة قائمة الخدمات فقط عبر سكوب .ttl-services-index — لا يؤثر على الدِسكتوب */
@layer overrides {
  @media (max-width:768px){

    /* متغيرات عامة للسكوب */
    .ttl-services-index{
      --pad-inline: clamp(16px,4vw,22px);
      --pad-block:  clamp(24px,6vw,40px);
      --ttl-blue:   var(--ttl-accent-blue,#0259a5);
      --ttl-orange: #f26822;
    }
    .ttl-services-index .ttl-svcs-container{ padding-inline: var(--pad-inline); }

    /* العناوين والنصوص */
    .ttl-services-index .ttl-svcs-title{
      font-size: clamp(22px,6.4vw,28px);
      line-height: 1.2; text-wrap: balance; color:#0b1220;
      margin-bottom: .25rem;
    }
    .ttl-services-index .ttl-svcs-lead{
      color:#475569; font-size: clamp(14px,4.2vw,16px);
      line-height:1.75; text-wrap: pretty; margin-bottom: 1rem !important;
    }

    /* البريدكرمب */
    .ttl-services-index .ttl-svcs-breadcrumb__list{ gap:8px; }
    .ttl-services-index .ttl-svcs-breadcrumb__link{
      color: var(--ttl-blue); text-decoration: none;
    }
    .ttl-services-index .ttl-svcs-breadcrumb__link:hover{ text-decoration: underline; }

    /* الكروت */
    .ttl-services-index .ttl-svcs-card{
      border:1px solid rgba(2,89,165,.14);
      border-radius:16px; overflow: hidden;
      box-shadow: 0 1px 0 rgba(2,89,165,.06), 0 8px 18px rgba(8,14,24,.06);
    }
    .ttl-services-index .ttl-svcs-card__img{
      display:block; inline-size:100%;
      aspect-ratio: 3/2; object-fit: cover; object-position: center;
    }
    .ttl-services-index .ttl-svcs-card__title{
      font-weight:800; color:#0b1220; text-wrap: balance;
    }
    .ttl-services-index .ttl-svcs-card__desc{
      color:#475569; font-size: clamp(14px,4vw,16px); line-height:1.7; text-wrap: pretty;
    }

    /* زرار زجاجي موحد (نُعيد استخدام النظام العام) */
    .ttl-services-index .btn--glass{
      all: unset !important;
      display:inline-flex !important; align-items:center !important; justify-content:center !important;
      gap:.55rem !important; min-height:42px !important; padding:8px 12px !important;
      border-radius:14px !important; font-weight:800 !important; line-height:1.1 !important;
      color:#fff !important; text-decoration:none !important; cursor:pointer !important;
      border:1px solid rgba(255,255,255,.26) !important;
      -webkit-backdrop-filter: saturate(160%) blur(10px);
              backdrop-filter: saturate(160%) blur(10px);
      box-shadow: 0 10px 24px rgba(0,0,0,.08), inset 0 1px 1px rgba(255,255,255,.12) !important;
      transition: transform .08s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease !important;
    }
    .ttl-services-index .btn--glass:hover{ transform: translateY(-1px); }

    /* تلوين */
    .ttl-services-index .btn--glass.orange{
      background: color-mix(in srgb, var(--ttl-orange) 28%, rgba(8,14,24,.12)) !important;
      border-color: color-mix(in srgb, var(--ttl-orange) 70%, rgba(255,255,255,.26)) !important;
      box-shadow: 0 10px 24px rgba(242,104,34,.28), inset 0 1px 1px rgba(255,255,255,.12) !important;
    }
    .ttl-services-index .btn--glass.orange:hover{
      background: color-mix(in srgb, var(--ttl-orange) 36%, rgba(8,14,24,.10)) !important;
      border-color: color-mix(in srgb, var(--ttl-orange) 86%, #ffffff 14%) !important;
      box-shadow: 0 12px 28px rgba(242,104,34,.34), inset 0 1px 1px rgba(255,255,255,.14) !important;
    }
    .ttl-services-index .btn--glass.blue{
      background: color-mix(in srgb, var(--ttl-blue) 28%, rgba(8,14,24,.12)) !important;
      border-color: color-mix(in srgb, var(--ttl-blue) 70%, rgba(255,255,255,.26)) !important;
      box-shadow: 0 10px 24px rgba(2,89,165,.24), inset 0 1px 1px rgba(255,255,255,.12) !important;
    }

    /* الأيقونات داخل الأزرار */
    .ttl-services-index .ttl-svcs-btn i{
      display:inline-flex; align-items:center; justify-content:center;
      width:1.1em; height:1.1em; line-height:1; transform: translateY(-.06em);
      flex:0 0 auto; margin:0;
    }
    /* RTL: قلب السهم لو عليه .chev */
    html[dir="rtl"] .ttl-services-index .ttl-svcs-btn .chev{
      transform: scaleX(-1) translateY(-.06em);
    }

    /* تحسينات RTL للنص */
    html[dir="rtl"] .ttl-services-index .ttl-svcs-title,
    html[dir="rtl"] .ttl-services-index .ttl-svcs-lead,
    html[dir="rtl"] .ttl-services-index .ttl-svcs-card__title,
    html[dir="rtl"] .ttl-services-index .ttl-svcs-card__desc{ text-align: start; }

    /* تقليل الحركة */
    @media (prefers-reduced-motion: reduce){
      .ttl-services-index *{ animation:none !important; transition:none !important; }
    }
  }
}
/* ===== End Patch: v1.39.0 — Services Index ===== */


