/* =========================================================
   ESPRIQ TARGET INTERNAL RESPONSIVE V1
   Applied only to: About, Services, Academy, Projects,
   Analytics and Milestones. Knowledge intentionally excluded.
   ========================================================= */

/* ---------- header: tablet + mobile ---------- */
@media (max-width:1099px){
  #internal-espriq-header{
    height:74px !important;
  }

  #internal-espriq-header .topbar{
    position:relative !important;
    left:auto !important;
    top:auto !important;
    width:100% !important;
    height:74px !important;
    transform:none !important;
    transform-origin:center !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    padding:0 20px !important;
    background:rgba(2,18,29,.94) !important;
    backdrop-filter:blur(14px) !important;
  }

  #internal-espriq-header .mini-brand{
    position:relative !important;
    left:auto !important;
    top:auto !important;
    height:auto !important;
    gap:10px !important;
    flex:0 0 auto !important;
  }

  #internal-espriq-header .mini-brand img{
    width:44px !important;
    height:44px !important;
  }

  #internal-espriq-header .mini-brand span{
    font-size:25px !important;
    letter-spacing:.4px !important;
  }

  #internal-espriq-header .nav{
    display:none !important;
  }

  #internal-espriq-header .actions{
    position:relative !important;
    right:auto !important;
    top:auto !important;
    height:auto !important;
    margin-inline-start:auto !important;
    gap:8px !important;
    display:flex !important;
    align-items:center !important;
  }

  #internal-espriq-header .action-icon{
    display:none !important;
  }

  #internal-espriq-header .login{
    min-width:128px !important;
    height:42px !important;
    padding:0 14px !important;
    font-size:13px !important;
  }

  #internal-espriq-header .lang{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:40px !important;
    padding:0 10px !important;
    border:1px solid rgba(39,195,214,.24) !important;
    border-radius:8px !important;
    font-size:13px !important;
    white-space:nowrap !important;
  }

  #espriq-mobile-toggle{
    width:42px;
    height:42px;
    padding:0;
    border:1px solid rgba(39,195,214,.34);
    border-radius:9px;
    background:rgba(3,35,48,.82);
    color:#fff;
    display:grid;
    place-items:center;
    cursor:pointer;
    flex:0 0 42px;
  }

  #espriq-mobile-toggle span,
  #espriq-mobile-toggle:before,
  #espriq-mobile-toggle:after{
    content:"";
    display:block;
    width:19px;
    height:2px;
    border-radius:2px;
    background:currentColor;
    transition:transform .18s ease,opacity .18s ease;
  }

  #espriq-mobile-toggle{
    position:relative;
  }

  #espriq-mobile-toggle span{
    position:absolute;
    left:11px;
    top:20px;
  }

  #espriq-mobile-toggle:before{
    position:absolute;
    left:11px;
    top:14px;
  }

  #espriq-mobile-toggle:after{
    position:absolute;
    left:11px;
    top:26px;
  }

  #espriq-mobile-toggle[aria-expanded="true"] span{opacity:0}
  #espriq-mobile-toggle[aria-expanded="true"]:before{transform:translateY(6px) rotate(45deg)}
  #espriq-mobile-toggle[aria-expanded="true"]:after{transform:translateY(-6px) rotate(-45deg)}

  #espriq-mobile-menu{
    position:absolute;
    top:calc(100% + 10px);
    inset-inline-end:12px;
    width:min(360px,calc(100vw - 24px));
    padding:12px;
    border:1px solid rgba(42,200,220,.30);
    border-radius:14px;
    background:rgba(2,22,32,.98);
    box-shadow:0 24px 65px rgba(0,0,0,.46);
    backdrop-filter:blur(16px);
    z-index:999;
  }

  #espriq-mobile-menu[hidden]{display:none !important}

  #espriq-mobile-menu nav{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }

  #espriq-mobile-menu a{
    min-height:44px;
    padding:10px 12px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    text-decoration:none;
    color:#eef5f7;
    border:1px solid rgba(42,200,220,.16);
    border-radius:9px;
    background:rgba(4,39,52,.62);
    font-size:13px;
    font-weight:750;
  }

  #espriq-mobile-menu a.active{
    color:#f1c044;
    border-color:rgba(241,192,68,.34);
    background:rgba(95,74,18,.16);
  }

  /* ---------- common hero composition ---------- */
  .about-hero,
  .services-hero,
  .academy-hero,
  .projects-hero,
  .milestones-hero{
    grid-template-columns:1fr !important;
    min-height:auto !important;
    gap:30px !important;
    padding:54px 6% 62px !important;
  }

  .analytics-hero{
    min-height:auto !important;
    padding:54px 6% 62px !important;
    gap:30px !important;
    display:flex !important;
    flex-direction:column !important;
  }

  .analytics-copy{order:1 !important}
  .analytics-visual{order:2 !important}

  .about-copy,
  .services-copy,
  .academy-copy,
  .projects-copy,
  .analytics-copy,
  .milestones-copy{
    width:100% !important;
    max-width:760px !important;
    margin-inline:auto !important;
    transform:none !important;
  }

  html[dir="rtl"] .about-copy,
  html[dir="rtl"] .services-copy,
  html[dir="rtl"] .academy-copy,
  html[dir="rtl"] .projects-copy,
  html[dir="rtl"] .analytics-copy,
  html[dir="rtl"] .milestones-copy{
    text-align:right !important;
    direction:rtl !important;
  }

  html[dir="ltr"] .about-copy,
  html[dir="ltr"] .services-copy,
  html[dir="ltr"] .academy-copy,
  html[dir="ltr"] .projects-copy,
  html[dir="ltr"] .analytics-copy,
  html[dir="ltr"] .milestones-copy{
    text-align:left !important;
    direction:ltr !important;
  }

  .about-title,
  .services-title,
  .academy-title,
  .projects-title,
  .analytics-title,
  .milestones-title{
    font-size:clamp(46px,7.2vw,64px) !important;
    line-height:1.04 !important;
    overflow-wrap:anywhere;
  }

  .about-lead,
  .services-lead,
  .academy-lead,
  .projects-lead,
  .analytics-lead,
  .milestones-lead{
    width:100% !important;
    max-width:760px !important;
    font-size:18px !important;
    line-height:1.9 !important;
  }

  .about-visual,
  .services-map,
  .academy-visual,
  .projects-visual,
  .analytics-visual,
  .milestone-visual{
    width:100% !important;
    min-height:330px !important;
    display:grid !important;
    place-items:center !important;
    overflow:visible !important;
    transform:none !important;
  }

  .about-web-scene,
  .services-hub,
  .learning-map,
  .project-cycle,
  .analytics-radar,
  .timeline-map{
    margin-inline:auto !important;
    max-width:100% !important;
  }

  .about-web-scene{width:400px !important;height:400px !important}
  .services-hub{width:410px !important;height:410px !important}
  .learning-map{width:390px !important;height:390px !important}
  .project-cycle{width:400px !important;height:390px !important}
  .analytics-radar{width:390px !important;height:390px !important;transform:none !important}
  .timeline-map{width:390px !important;height:380px !important}

  /* lower section typography, fixing late desktop readability overrides */
  .about-section-head h2,
  .services-section-head h2,
  .academy-section-head h2,
  .projects-section-head h2,
  .analytics-section-head h2,
  .milestones-section-head h2{
    font-size:38px !important;
    line-height:1.25 !important;
  }

  .about-section-head p,
  .services-section-head p,
  .academy-section-head p,
  .projects-section-head p,
  .analytics-section-head p,
  .milestones-section-head p{
    font-size:18px !important;
    line-height:1.8 !important;
  }

  .about-card h3,
  .service-card h3,
  .academy-path h3,
  .project-stage h3,
  .analytics-card h3,
  .milestone-card h3{
    font-size:24px !important;
  }

  .about-card p,
  .service-card p,
  .academy-path p,
  .project-stage p,
  .analytics-card p,
  .milestone-card p{
    font-size:17px !important;
    line-height:1.8 !important;
  }

  .capability strong,
  .control-item strong,
  .milestone-band-item strong{
    font-size:23px !important;
  }

  .capability span,
  .control-item span,
  .milestone-band-item span{
    font-size:16px !important;
    line-height:1.7 !important;
  }
}

/* ---------- phone ---------- */
@media (max-width:720px){
  #internal-espriq-header{height:64px !important}

  #internal-espriq-header .topbar{
    height:64px !important;
    padding:0 12px !important;
  }

  #internal-espriq-header .mini-brand{
    gap:7px !important;
  }

  #internal-espriq-header .mini-brand img{
    width:36px !important;
    height:36px !important;
  }

  #internal-espriq-header .mini-brand span{
    font-size:20px !important;
  }

  #internal-espriq-header .login{
    display:none !important;
  }

  #internal-espriq-header .lang{
    min-height:38px !important;
    padding:0 8px !important;
    font-size:12px !important;
  }

  #espriq-mobile-toggle{
    width:38px;
    height:38px;
    flex-basis:38px;
  }
  #espriq-mobile-toggle span,
  #espriq-mobile-toggle:before,
  #espriq-mobile-toggle:after{left:9px}
  #espriq-mobile-toggle span{top:18px}
  #espriq-mobile-toggle:before{top:12px}
  #espriq-mobile-toggle:after{top:24px}

  #espriq-mobile-menu{
    top:calc(100% + 8px);
  }

  .about-hero,
  .services-hero,
  .academy-hero,
  .projects-hero,
  .analytics-hero,
  .milestones-hero{
    padding:42px 20px 52px !important;
    gap:26px !important;
  }

  .about-kicker,
  .services-kicker,
  .academy-kicker,
  .projects-kicker,
  .analytics-kicker,
  .milestones-kicker{
    font-size:12px !important;
    line-height:1.5 !important;
    letter-spacing:1.5px !important;
    margin-bottom:14px !important;
  }

  .about-title,
  .services-title,
  .academy-title,
  .projects-title,
  .analytics-title,
  .milestones-title{
    font-size:clamp(38px,11.5vw,48px) !important;
    line-height:1.08 !important;
    margin-bottom:18px !important;
  }

  html[lang="de"] .about-title,
  html[lang="de"] .services-title,
  html[lang="de"] .academy-title,
  html[lang="de"] .projects-title,
  html[lang="de"] .analytics-title,
  html[lang="de"] .milestones-title{
    font-size:clamp(34px,10vw,43px) !important;
  }

  .about-lead,
  .services-lead,
  .academy-lead,
  .projects-lead,
  .analytics-lead,
  .milestones-lead{
    font-size:16.5px !important;
    line-height:1.82 !important;
  }

  .about-actions,
  .services-actions,
  .academy-actions,
  .projects-actions,
  .analytics-actions,
  .milestones-actions{
    width:100% !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
    margin-top:26px !important;
    direction:inherit !important;
  }

  .about-btn,
  .services-btn,
  .academy-btn,
  .projects-btn,
  .analytics-btn,
  .milestones-btn{
    min-width:0 !important;
    width:100% !important;
    min-height:48px !important;
    padding:9px 10px !important;
    font-size:12.5px !important;
    line-height:1.35 !important;
    text-align:center !important;
    white-space:normal !important;
  }

  .about-visual,
  .services-map,
  .academy-visual,
  .projects-visual,
  .analytics-visual,
  .milestone-visual{
    min-height:300px !important;
  }

  .about-web-scene{width:310px !important;height:310px !important}
  .services-hub{width:320px !important;height:320px !important}
  .learning-map{width:320px !important;height:340px !important}
  .project-cycle{width:320px !important;height:320px !important}
  .analytics-radar{width:330px !important;height:330px !important;transform:none !important}
  .timeline-map{width:330px !important;height:340px !important}

  /* Keep visual cores proportional */
  .services-hub .services-hub-core{
    width:138px !important;
    height:138px !important;
  }

  .project-core{
    width:158px !important;
    height:145px !important;
  }

  .timeline-core{
    width:132px !important;
    height:132px !important;
  }

  /* lower content */
  .about-section,
  .services-section,
  .academy-section,
  .projects-section,
  .analytics-section,
  .milestones-section{
    padding-left:20px !important;
    padding-right:20px !important;
  }

  .about-section-head h2,
  .services-section-head h2,
  .academy-section-head h2,
  .projects-section-head h2,
  .analytics-section-head h2,
  .milestones-section-head h2{
    font-size:31px !important;
    line-height:1.28 !important;
  }

  .about-section-head p,
  .services-section-head p,
  .academy-section-head p,
  .projects-section-head p,
  .analytics-section-head p,
  .milestones-section-head p{
    font-size:16px !important;
    line-height:1.78 !important;
  }

  .about-card h3,
  .service-card h3,
  .academy-path h3,
  .project-stage h3,
  .analytics-card h3,
  .milestone-card h3{
    font-size:21px !important;
  }

  .about-card p,
  .service-card p,
  .academy-path p,
  .project-stage p,
  .analytics-card p,
  .milestone-card p{
    font-size:15.5px !important;
    line-height:1.75 !important;
  }

  .capability strong,
  .control-item strong,
  .milestone-band-item strong{
    font-size:21px !important;
  }

  .capability span,
  .control-item span,
  .milestone-band-item span{
    font-size:15px !important;
    line-height:1.65 !important;
  }

  .services-capabilities,
  .projects-control,
  .milestone-band{
    margin-left:20px !important;
    margin-right:20px !important;
  }

  .services-cta,
  .projects-cta,
  .analytics-cta{
    margin-left:20px !important;
    margin-right:20px !important;
  }
}

/* extra narrow phones */
@media (max-width:420px){
  #internal-espriq-header .lang{
    max-width:86px !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  .about-web-scene{width:290px !important;height:290px !important}
  .services-hub{width:300px !important;height:300px !important}
  .learning-map{width:300px !important;height:325px !important}
  .project-cycle{width:300px !important;height:300px !important}
  .analytics-radar{width:310px !important;height:310px !important}
  .timeline-map{width:310px !important;height:330px !important}
}

/* ESPRIQ desktop mobile-toggle guard */
@media (min-width:1100px){#espriq-mobile-toggle{display:none!important}}