/* ============================================================
   MOBILE HOMEPAGE  (phones/tablets <=992px only)
   ------------------------------------------------------------
   The approved minimal mobile homepage. The markup is a single
   <div class="hx"> placed first inside the existing .mhome block in
   index.html. Everything else inside .mhome (the old mobile layout)
   stays in the file but is hidden here, so removing this link and the
   .hx block restores the previous layout.

   Desktop (>=993px) is not affected: .mhome is already display:none
   there and every rule below sits inside the media query.
   Needs assets/mobile-inner.css + mobile-inner.js for the Let's Connect
   button and the contact pop-up.
   ============================================================ */

@media (max-width: 992px){

  /* the old mobile layout stays in the file but is not shown */
  .mhome > *:not(.hx){ display:none !important; }
  .mhome > .hx{ height:auto !important; min-height:0 !important; }
  /* the Connect pop-up is added straight to <body>; the old "hide everything else" rule must not hide it */
  body > .m-sheet-ov.m-sheet-ov.m-sheet-ov.m-sheet-ov{ display:flex !important; }

  /* ---------- Theme tokens (dark) ---------- */
  .hx{
    --hx-bg:#05080E; --hx-bg2:#10141C; --hx-ink:#D4DCE8; --hx-muted:#94A3B8;
    --hx-accent:#14B8A6; --hx-card:rgba(255,255,255,.045); --hx-shine:#9CF5EA;
    --hx-bar:#05080E; --hx-line:rgba(255,255,255,.08); --hx-btn:#0D9488;
    --hx-sec-y:32px; --hx-sec-x:22px; --hx-head-gap:32px; --hx-gap:12px; --hx-r:14px;
    background:var(--hx-bg); color:var(--hx-ink); padding-bottom:64px; text-align:left;
    font-family:var(--font-sans, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif);
  }
  .hx *, .hx *::before, .hx *::after{ box-sizing:border-box; }
  .hx a{ text-decoration:none; color:inherit; }
  .hx h1, .hx h2, .hx h3, .hx p{ margin:0; }

  /* ---------- Shared section rhythm ---------- */
  .hx-sec{ padding:var(--hx-sec-y) var(--hx-sec-x); background:var(--hx-bg); }
  .hx-sec.alt{ background:var(--hx-bg2); }
  .hx-eyebrow{ display:block; font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
    color:var(--hx-accent); margin:0 0 var(--hx-head-gap); text-align:center; }
  .hx-stack{ display:grid; gap:var(--hx-gap); }
  .hx-link{ display:block; text-align:center; margin-top:24px; color:var(--hx-accent) !important; font-weight:700; font-size:15px; }

  /* ---------- 1. Hero: one full screen ---------- */
  .hx-hero{ min-height:calc(100vh - 75px - 64px); min-height:calc(100svh - 75px - 64px);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; padding:var(--hx-sec-y) var(--hx-sec-x); background:var(--hx-bg); }
  .hx-hero h1{ font-size:25px; line-height:1.3; font-weight:800; letter-spacing:.02em; text-transform:uppercase; color:var(--hx-ink); text-shadow:none; }
  .hx-hero h1 span{ display:block; white-space:normal; overflow-wrap:break-word; word-break:break-word; animation:hxRise .8s cubic-bezier(.16,1,.3,1) var(--d,0s) both; }
  .hx-hero h1 span:nth-child(1){ --d:.15s; }
  .hx-hero h1 span:nth-child(2){ --d:.45s; }
  .hx-hero h1 span:nth-child(3){ --d:.85s; }
  .hx-hero h1 span:nth-child(4){ --d:1.1s; }
  @keyframes hxRise{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
  /* the two teal phrases: a slow light sweep, about 2s of motion then about 4s of rest */
  .hx-hero h1 .t{ width:fit-content; margin-inline:auto; color:var(--hx-accent) !important;
    background-image:linear-gradient(100deg,var(--hx-accent) 0%,var(--hx-accent) 42%,var(--hx-shine) 50%,var(--hx-accent) 58%,var(--hx-accent) 100%);
    background-size:250% 100%; background-position:130% 0;
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
    animation:hxRise .8s cubic-bezier(.16,1,.3,1) var(--d) both, hxShine 6s ease-in-out calc(var(--d) + .8s) infinite; }
  .hx-hero h1 .t:nth-child(4){ animation-delay:var(--d), calc(var(--d) + 1.3s); }
  @keyframes hxShine{ 0%{ background-position:130% 0; } 35%{ background-position:-30% 0; } 100%{ background-position:-30% 0; } }
  @media (prefers-reduced-motion:reduce){
    .hx-hero h1 span, .hx-hero h1 .t, .hx-hero h1 .t:nth-child(4){ animation:none; }
    .hx-hero h1 .t{ background:none; -webkit-text-fill-color:currentColor; }
  }
  @media (forced-colors:active){ .hx-hero h1 .t{ background:none; -webkit-text-fill-color:currentColor; } }

  /* ---------- 2. Numbers: 2 x 2 equal cards ---------- */
  .hx-stats{ display:grid; grid-template-columns:1fr 1fr; gap:var(--hx-gap); }
  .hx-stat{ background:var(--hx-card); border-radius:var(--hx-r); padding:20px 12px; min-height:112px;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; }
  .hx-stat b{ font-size:36px; font-weight:800; letter-spacing:-1px; line-height:1; color:var(--hx-ink); }
  .hx-stat span{ font-size:13px; line-height:1.3; color:var(--hx-muted); }

  /* ---------- 3. Our network: grouped static grid ---------- */
  .hx-ngroup{ margin-bottom:20px; }
  .hx-ngroup:last-child{ margin-bottom:0; }
  .hx-nlabel{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--hx-accent); margin-bottom:10px; font-weight:700; }
  .hx-ngrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
  .hx-chip{ width:100%; height:58px; border-radius:10px; background:#fff; border:1px solid var(--hx-line); display:grid; place-items:center; }
  .hx-chip img{ max-width:72px; max-height:34px; display:block; }
  .hx-chip.wl img{ filter:brightness(0); opacity:.85; }
  .hx-more{ grid-column:1 / -1; text-align:center; padding:4px 0 0; font-size:13px; font-weight:600; letter-spacing:.02em;
    color:var(--hx-accent); cursor:default; user-select:none; }

  /* ---------- 4. Divisions: one soft card per division ---------- */
  .hx-drow{ display:flex; align-items:center; gap:14px; min-height:72px; padding:14px 16px; background:var(--hx-card); border-radius:var(--hx-r); color:var(--hx-ink); }
  .hx-drow .n{ font-size:13px; font-weight:700; color:var(--hx-accent); min-width:28px; }
  .hx-drow .tx{ flex:1; }
  .hx-drow b{ display:block; font-size:18px; font-weight:700; }
  .hx-drow small{ display:block; font-size:13px; color:var(--hx-muted); }
  .hx-drow .go{ color:var(--hx-muted); font-size:18px; }

  /* ---------- 5. Case studies: four tiles ---------- */
  .hx-tiles{ display:grid; grid-template-columns:1fr 1fr; gap:var(--hx-gap); }
  .hx-tile{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center;
    min-height:96px; padding:16px 12px; background:var(--hx-card); border-radius:var(--hx-r); color:var(--hx-ink); }
  .hx-tile .tag{ font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--hx-accent); }
  .hx-tile b{ font-size:17px; line-height:1.25; font-weight:700; }

  /* ---------- 6. Blogs: plain text list ---------- */
  .hx-posts{ display:grid; gap:24px; }
  .hx-post{ display:block; text-align:center; color:var(--hx-ink); }
  .hx-post .cat{ display:block; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--hx-accent); }
  .hx-post h3{ margin-top:6px; font-size:17px; line-height:1.35; font-weight:600; color:var(--hx-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  /* ---------- 7. FAQ: one soft card per question, question on one line ---------- */
  .hx-faq{ background:var(--hx-card); border-radius:var(--hx-r); overflow:hidden; }
  .hx-q{ list-style:none; min-height:52px; padding:0 16px; display:flex; gap:12px; align-items:center; cursor:pointer;
    font-size:13.5px; font-weight:600; line-height:1.35; color:var(--hx-ink); }
  .hx-q::-webkit-details-marker{ display:none; }
  .hx-q::marker{ content:""; }
  .hx-t{ flex:1 1 auto; min-width:0; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .hx-p{ margin-left:auto; color:var(--hx-accent); font-size:22px; font-weight:400; line-height:1; transition:transform .25s; }
  .hx-faq[open] .hx-q{ padding:14px 16px; align-items:flex-start; }
  .hx-faq[open] .hx-t{ white-space:normal; overflow:visible; text-overflow:clip; }
  .hx-faq[open] .hx-p{ transform:rotate(45deg); }
  .hx-a{ font-size:14.5px; line-height:1.6; color:var(--hx-muted); padding:0 18px 18px; }

  /* ---------- 8. Let's Connect card (button and pop-up come from mobile-inner.js) ---------- */
  .hx-cta{ padding-top:0; }
  .hx .footer-cta{ display:block !important; background:var(--hx-card) !important; border:0 !important; box-shadow:none !important;
    border-radius:var(--hx-r) !important; padding:26px 22px !important; margin:0 !important; max-width:none !important; }
  .hx .footer-cta-title{ font-size:20px !important; line-height:1.3; font-weight:800; color:var(--hx-ink) !important; text-align:center !important; }
  .hx .m-connect{ background:var(--hx-btn) !important; }

  /* ---------- Footer ---------- */
  .hx-foot{ padding:var(--hx-sec-y) var(--hx-sec-x) 28px; background:var(--hx-bg2); }
  .hx-foot img{ height:22px; width:auto; display:block; margin-bottom:26px; }
  .hx-fgrid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
  .hx-fct{ font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--hx-accent); margin-bottom:10px; }
  .hx-fct.sp{ margin-top:16px; }
  .hx-foot a{ display:block; color:var(--hx-muted); font-size:14px; padding:6px 0; }
  .hx-cp{ margin-top:28px; font-size:11.5px; color:var(--hx-muted); }

  /* ---------- Fixed bottom bar: Call / WhatsApp / Email ---------- */
  .hx-dock{ position:fixed; left:0; right:0; bottom:0; z-index:900; height:64px; display:grid; grid-template-columns:repeat(3,1fr);
    background:var(--hx-bar); border-top:1px solid var(--hx-line); }
  .hx-dock a{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
    color:var(--hx-muted); font-size:11px; font-weight:700; letter-spacing:.04em; }
  .hx-dock svg{ width:21px; height:21px; fill:currentColor; }
  .hx-dock a.wa{ color:var(--hx-accent); }
}

/* ============================================================
   LIGHT THEME (this copy only): logo teal #26A99A, light grey #F3F4F5.
   Cards are grey on white sections and flip to white on grey sections.
   ============================================================ */
@media (max-width: 992px){
  body:has(.hx){ background:#FFFFFF !important; }
  .hx{
    --hx-bg:#FFFFFF; --hx-bg2:#F3F4F5; --hx-ink:#1C1A17; --hx-muted:#4A5154;
    --hx-accent:#26A99A; --hx-card:#F3F4F5; --hx-shine:#7FD6CB;
    --hx-bar:#FFFFFF; --hx-line:rgba(28,26,23,.15); --hx-btn:#26A99A;
  }
  .hx-sec.alt{ --hx-card:#FFFFFF; }
  .hx-dock a{ color:var(--hx-accent); }
}