/* ==========================================================================
   Ekin — tablet & phone adaptation layer
   Every rule lives inside a max-width media query, so the desktop
   rendering (>1024px) is byte-for-byte unchanged.
   Load LAST, after ekin.css / ekin-dark.css / page <style> blocks.
   ========================================================================== */

/* ---------- global guards (all non-desktop widths) ---------- */
@media (max-width:1024px){
  html,body{overflow-x:clip}
  img,video,svg,canvas{max-width:100%}
  /* full-bleed bands: use the real viewport, never overshoot */
  [class*="bleed"],.pk-bleed,.pg-vid,.pg-shot,.mod-fullvideo,.ps-bleed,.ms-bleed{
    width:100vw!important;max-width:100vw!important;
    margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important
  }
  /* section rhythm tightens */
  .pad-y{padding-block:clamp(56px,9vw,88px)}
  .sec-head h2,.split-text h2,.mod-text h2{max-width:24ch}
}

/* ---------- tablet: 2-up instead of 3/4-up ---------- */
@media (max-width:1024px) and (min-width:641px){
  .ben-grid,.cap-grid,.dm-grid,.pe-cards,.ws-grid,.edge-grid,
  .bs-m-grid,.xs-m-grid,.pg-m-grid,.mi-cards,.mi-cards-2,.mi-cards-flat,
  .ld-grid,.ab-grid,.blog-grid,.kit-grid,.safer-grid,.partner-grid,
  .port-trio,.build,.v-focus,.v-stack-grid,.pw-grid,.sol-grid,.features,
  .dm-ops,.foot-locations{
    grid-template-columns:repeat(2,minmax(0,1fr))!important
  }
  .stats,.why-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .cta-split,.split,.ai,.v-co,.v-co-meta,.rec-list{grid-template-columns:1fr!important}
  .foot-top{grid-template-columns:1fr 1fr!important;gap:36px 28px!important}
}

/* ---------- phone: everything single column ---------- */
@media (max-width:640px){
  .ben-grid,.cap-grid,.dm-grid,.pe-cards,.ws-grid,.edge-grid,
  .bs-m-grid,.xs-m-grid,.pg-m-grid,.mi-cards,.mi-cards-2,.mi-cards-flat,
  .ld-grid,.ab-grid,.blog-grid,.kit-grid,.safer-grid,.partner-grid,
  .port-trio,.build,.v-focus,.v-stack-grid,.pw-grid,.sol-grid,.features,
  .dm-ops,.cta-split,.split,.ai,.v-co,.v-co-meta,.rec-list,
  .foot-top,.foot-locations,.stats,.why-stats,.prod-stage{
    grid-template-columns:1fr!important
  }
  .wrap{padding-inline:20px}
  .pad-y{padding-block:clamp(44px,12vw,64px)}
  .sec-head h2,.split-text h2,.mod-text h2,.hero h1{max-width:none}
  /* keep every tap target reachable */
  .btn{min-height:46px;display:inline-flex;align-items:center}
  .actions{flex-direction:column;align-items:stretch}
  .actions .btn{justify-content:center;width:100%}
}

/* ---------- hero: fixed heights become content-driven ---------- */
@media (max-width:1024px){
  .hero{min-height:auto;height:auto;padding-block:clamp(96px,18vw,140px) clamp(56px,10vw,90px)}
  .hero-bp,.le-hero{height:auto!important;min-height:64svh!important}
  .hero-content{align-items:center!important}
  .hero-figure{margin-top:32px}
  .scroll-hint{display:none}
}
@media (max-width:640px){
  .hero h1{font-size:clamp(34px,10.5vw,52px)!important;letter-spacing:-.02em}
  .hero p{font-size:16.5px!important}
  .hero-bp,.le-hero{min-height:58svh!important}
}

/* ---------- Maestro hub-and-spoke ---------- */
@media (max-width:1024px){
  .mh-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:auto!important}
  .mh-wires{display:none}
  .mh-tl,.mh-tr,.mh-ml,.mh-mr,.mh-bl,.mh-br,.mh-hub{grid-area:auto!important}
  .mh-hub{grid-column:1/-1!important;order:-1;max-width:210px!important;margin-bottom:10px}
}
@media (max-width:640px){
  .mh-grid{grid-template-columns:1fr!important}
  .mh-hub{max-width:180px!important}
}

/* ---------- Spotter / TerraEye module architecture ---------- */
@media (max-width:1024px) and (min-width:761px){
  .mpa-stage{grid-template-columns:19% 45% 36%!important;gap:18px!important}
  .mpa-card{max-width:none!important;padding:20px 18px!important}
  .mpa-card h3{font-size:21px!important}
  .mpa-viewer{height:54vh!important}
}
@media (max-width:760px){
  .mpa-scroll{display:none!important}
  .mpa-mobile{display:block!important}
}

/* ---------- world map / office locator ---------- */
@media (max-width:1024px){
  #worldMap,.off-stage{min-height:0}
  .off-stage{height:auto}
  .off-panel{position:static!important;inset:auto!important;width:auto!important;max-width:none!important;margin-top:18px}
}

/* ---------- tables and wide data blocks ---------- */
@media (max-width:1024px){
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .spec-table,.jobs-table{display:block;overflow-x:auto}
}

/* ---------- mobile drawer: safe areas, scroll containment ---------- */
@media (max-width:1024px){
  .drawer{
    padding-top:max(22px,env(safe-area-inset-top))!important;
    padding-bottom:max(30px,calc(env(safe-area-inset-bottom) + 24px))!important;
    padding-left:max(22px,env(safe-area-inset-left))!important;
    padding-right:max(22px,env(safe-area-inset-right))!important;
    overscroll-behavior:contain;-webkit-overflow-scrolling:touch
  }
  .drawer-group a{padding-block:10px!important}
  .drawer-group h6{font-size:12px!important;letter-spacing:.18em!important}
  .nav{padding-top:max(0px,env(safe-area-inset-top))}
}

/* ---------- homepage numeric hero (.numhero) ---------- */
@media (max-width:1024px){
  .numhero .copy{width:min(88vw,720px)!important}
  .numhero .cblock h1{font-size:clamp(34px,7.4vw,64px)!important}
  .numhero .cblock p{font-size:17px!important;max-width:42ch!important}
}
@media (max-width:640px){
  .numhero .copy{left:20px!important;right:20px!important;width:auto!important;
    top:clamp(96px,14vh,132px)!important}
  .numhero .cblock h1{font-size:clamp(30px,9vw,52px)!important;letter-spacing:-.03em!important}
  .numhero .cblock p{font-size:16px!important;margin-top:18px!important;max-width:none!important}
  .numhero .hero1-cta,.numhero .cta-row{margin-top:24px!important;flex-direction:column;align-items:stretch}
  .numhero .hero1-cta .btn,.numhero .cta-row .btn{justify-content:center;width:100%}
}

/* ---------- long-form article pages ---------- */
@media (max-width:640px){
  .prose p,.prose li{font-size:16.5px;line-height:1.72}
  .prose h2{font-size:26px}
  .prose h3{font-size:21px}
  .prose .lead{font-size:19px}
}

/* ---------- touch targets: keep the visual dot, grow the hit area ---------- */
@media (max-width:1024px){
  .tdots{gap:2px}
  .tdot{position:relative;box-sizing:content-box;padding:16px 12px!important;background-clip:content-box!important}
  .nav-burger{width:44px!important;height:44px!important;margin-right:-8px}
  .drawer-close{width:44px!important;height:44px!important}
  .tarrows button,.cs-reset{min-height:42px;padding-inline:16px}
  .drawer a,.drawer-link{min-height:46px;display:flex;align-items:center}
}

/* ---------- micro-labels: never below 11px on tablet or phone ---------- */
@media (max-width:1024px){
  .eyebrow,.ml-label,.drawer-sub,.pn,.label,.k,
  .cs-eyebrow,.cs-zone,.cs-rzone,.cs-dempty,.cs-lhead,.cs-lhead span,
  .cs-tip em,.cs-row span,.cs-summary span,.mh-hub-label,.pw-i,.idx,.env{
    font-size:11px!important
  }
  .cs-pin{min-width:40px;min-height:40px}
  /* HUD micro-annotations inside the connected-city map */
  .cs-frame span,.cs-frame em,.cs-frame b,.cs-frame u,.cs-tip,.rn,.xs-cue{font-size:11px!important}
  .cs-frame .cs-title,.cs-frame h3,.cs-frame h4{font-size:inherit!important}
  .mpa-item{min-height:42px}
}
@media (max-width:640px){
  .eyebrow,.ml-label,.drawer-sub{letter-spacing:.14em!important}
  .xs-mrow{font-size:12px!important}
  .xs-mrow u{font-size:11px!important}
}

/* ---------- connected city map on a phone ---------- */
@media (max-width:640px){
  .cs-main{aspect-ratio:4/5!important}
  .cs-summary{position:static!important;left:auto!important;top:auto!important;transform:none!important;
    grid-auto-flow:row!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:0!important;
    border-radius:0!important;padding:12px 14px!important}
  .cs-summary div+div{padding-left:0!important;border-left:1px solid rgba(159,180,214,.12)!important}
  .cs-detail{position:static!important;inset:auto!important;grid-template-columns:auto minmax(0,1fr)!important;
    gap:12px!important;margin:12px 14px 14px!important}
  .cs-detail>*:nth-child(n+4){grid-column:1/-1}
}

/* ---------- demo cards: let the copy breathe instead of clipping ---------- */
@media (max-width:1024px){
  .demo-card{overflow:visible!important;min-height:0!important;padding-bottom:clamp(34px,5vw,64px)!important;flex-direction:column;align-items:flex-start}
  .demo-card .demo-img{position:relative!important;right:auto!important;bottom:auto!important;
    width:100%!important;max-width:460px;margin-top:26px}
}
@media (max-width:640px){
  .demo-card{padding:30px 22px!important;border-radius:12px}
}