/* =========================================================
   MYDN GROUP — Setup 52
   Universal Responsive App Experience & Typography Cleanup
   Scope: public website, careers, forms, portal login modal, shared components.
   Goal: premium desktop web + app-like mobile/tablet experience.
========================================================= */
:root{
  --mydn-app-bg:#f6f8fb;
  --mydn-card-bg:#ffffff;
  --mydn-ink:#203449;
  --mydn-muted:#66788d;
  --mydn-line:rgba(15,61,94,.12);
  --mydn-blue:#1f6fca;
  --mydn-navy:#0b2948;
  --mydn-radius:22px;
  --mydn-radius-lg:30px;
  --mydn-soft-shadow:0 14px 38px rgba(11,41,72,.08);
  --mydn-appbar-h:64px;
  --mydn-bottom-nav-h:76px;
}

html{
  width:100%;
  max-width:100%;
  overflow-x:clip;
  -webkit-text-size-adjust:100%;
  text-rendering:optimizeLegibility;
}
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden!important;
  color:var(--mydn-ink);
  font-weight:400!important;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
*,*::before,*::after{box-sizing:border-box;min-width:0}
img,svg,video,canvas,iframe{max-width:100%}
button,input,select,textarea{font:inherit;max-width:100%}
a,button{touch-action:manipulation}

/* Typography refinement — removes the heavy/kaba visual feeling without changing content. */
body,
p,
li,
input,
select,
textarea,
label,
small,
.meta,
.text,
.card p,
.service-card p,
.brand-card p,
.process-card p,
.contact-card p,
.footer p{
  font-weight:400!important;
}
strong,b{font-weight:600!important}
h1,h2,h3,h4,h5,h6,
.section-head h2,
.hero-copy h1,
.hero h1,
.drawer-card strong,
.card strong,
.service-card strong,
.brand-card strong,
.process-card strong,
.contact-card strong{
  font-weight:600!important;
  letter-spacing:-.025em!important;
}
.eyebrow,
.btn,
button,
.nav-link,
.desktop-nav a,
.drawer-links a,
.lang-switch button,
.pill,
.badge,
.stat-label,
.stat strong,
.mydn-chat-tool,
.mydn-chat-btn{
  font-weight:500!important;
}
.section-head p,
.hero-copy p,
.hero p,
.lead,
.subtext{
  font-weight:400!important;
  line-height:1.66!important;
}

/* Width safety layer — fixes 100vw/calc overflow on iOS/Android/tablet. */
.container,
.wrapper,
.section-inner,
.header-shell,
.footer-shell,
.hero-shell,
.content-shell,
.module-shell,
.careers-shell,
.contact-shell{
  max-width:min(1240px,calc(100% - 32px))!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
[style*="100vw"],
.full-bleed,
.vw-section{
  max-width:100%!important;
}
.section,
.hero,
.site-footer,
.site-header,
main,
footer,
header{
  max-width:100%;
}

/* Premium card touch: public website + careers. */
.card,
.service-card,
.brand-card,
.process-card,
.market-card,
.contact-card,
.career-card,
.job-card,
.form-card,
.login-card,
.portal-card,
.track-card,
.mydn-chat-panel{
  box-shadow:var(--mydn-soft-shadow);
  border-color:var(--mydn-line)!important;
}

/* Public app-style bottom navigation; injected by Setup 52 JS. */
.mydn-public-bottom-nav{
  display:none;
}
.mydn-public-bottom-nav a,
.mydn-public-bottom-nav button{
  border:0;
  background:transparent;
  color:#5f7186;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  font-size:11px;
  line-height:1;
  font-weight:500!important;
  min-width:0;
  text-decoration:none;
  padding:6px 2px;
  border-radius:16px;
}
.mydn-public-bottom-nav svg{
  width:19px;
  height:19px;
  stroke-width:1.8;
}
.mydn-public-bottom-nav a.is-active,
.mydn-public-bottom-nav button.is-active{
  color:var(--mydn-navy);
  background:rgba(31,111,202,.08);
}

/* Tablet app feel for public pages. */
@media (min-width:769px) and (max-width:1180px){
  .container,
  .wrapper,
  .section-inner,
  .header-shell,
  .footer-shell,
  .hero-shell,
  .content-shell{
    max-width:calc(100% - 44px)!important;
  }
  .section{padding-top:72px!important;padding-bottom:72px!important}
  .section-head h2{font-size:clamp(30px,4.4vw,48px)!important;letter-spacing:-.035em!important}
  .section-head p{font-size:16px!important;line-height:1.62!important}
  .grid,
  .grid-3,
  .grid-4,
  .services-grid,
  .brands-grid,
  .process-grid,
  .market-grid,
  .contact-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .site-header{
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
  }
}

/* Universal phone app shell. */
@media (max-width:768px){
  :root{--mydn-bottom-nav-h:78px}
  body{
    background:var(--mydn-app-bg)!important;
    padding-left:env(safe-area-inset-left,0px);
    padding-right:env(safe-area-inset-right,0px);
    padding-bottom:calc(var(--mydn-bottom-nav-h) + env(safe-area-inset-bottom,0px));
  }
  .site-header{
    position:sticky!important;
    top:0!important;
    z-index:70!important;
    background:rgba(255,255,255,.94)!important;
    border-bottom:1px solid rgba(15,61,94,.08)!important;
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    box-shadow:none!important;
  }
  .header-shell,
  .container,
  .wrapper,
  .section-inner,
  .footer-shell,
  .hero-shell,
  .content-shell{
    width:calc(100% - 24px)!important;
    max-width:calc(100% - 24px)!important;
  }
  .brand-link img,
  .drawer-head img{
    max-height:42px!important;
    width:auto!important;
    object-fit:contain!important;
  }
  .desktop-nav{display:none!important}
  .header-actions{gap:7px!important;min-width:0!important}
  .lang-switch{transform:scale(.94);transform-origin:right center}
  .icon-btn,
  .menu-btn,
  .close-btn{
    min-width:42px!important;
    min-height:42px!important;
  }
  .hero,
  .section{
    padding-top:42px!important;
    padding-bottom:42px!important;
  }
  .hero-shell,
  .hero-grid,
  .split,
  .contact-grid,
  .footer-grid,
  .grid,
  .grid-2,
  .grid-3,
  .grid-4,
  .services-grid,
  .brands-grid,
  .process-grid,
  .market-grid,
  .careers-grid,
  .form-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:16px!important;
  }
  .hero-copy h1,
  .hero h1,
  h1{
    font-size:clamp(30px,9vw,42px)!important;
    line-height:1.04!important;
    letter-spacing:-.04em!important;
  }
  .section-head h2,
  h2{
    font-size:clamp(24px,7vw,34px)!important;
    line-height:1.08!important;
    letter-spacing:-.035em!important;
  }
  h3{font-size:clamp(18px,5.2vw,23px)!important;line-height:1.16!important}
  p,.section-head p,.hero-copy p,.hero p,li{
    font-size:14px!important;
    line-height:1.58!important;
  }
  .eyebrow{font-size:10.5px!important;padding:7px 10px!important;letter-spacing:.08em!important}
  .btn,
  button,
  input,
  select,
  textarea{
    min-height:44px;
    font-size:13px!important;
  }
  .btn{
    width:100%;
    justify-content:center;
    padding-left:16px!important;
    padding-right:16px!important;
    border-radius:16px!important;
  }
  .hero-actions,
  .cta-actions,
  .section-actions,
  .form-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    width:100%;
  }
  .card,
  .service-card,
  .brand-card,
  .process-card,
  .market-card,
  .contact-card,
  .career-card,
  .job-card,
  .form-card,
  .login-card,
  .portal-card,
  .track-card{
    border-radius:22px!important;
    padding:18px!important;
  }
  .drawer,
  .modal,
  .login-modal,
  .portal-modal{
    width:calc(100vw - 18px)!important;
    max-width:calc(100vw - 18px)!important;
    max-height:calc(100dvh - 24px)!important;
    border-radius:26px!important;
    overflow:auto!important;
  }
  table{width:100%!important;max-width:100%!important}
  .table-wrap,
  .responsive-table,
  .table-responsive{
    width:100%!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch!important;
    border-radius:18px!important;
  }
  .mydn-public-bottom-nav{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:1200;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:4px;
    min-height:calc(var(--mydn-bottom-nav-h) + env(safe-area-inset-bottom,0px));
    padding:8px 10px calc(9px + env(safe-area-inset-bottom,0px));
    background:rgba(255,255,255,.96);
    border-top:1px solid rgba(15,61,94,.1);
    box-shadow:0 -14px 34px rgba(11,41,72,.08);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
  }
  body.mydn-standalone .site-header{
    padding-top:env(safe-area-inset-top,0px);
  }
  body.mydn-standalone{
    min-height:100dvh;
  }
}

@media (max-width:430px){
  .header-shell,
  .container,
  .wrapper,
  .section-inner,
  .footer-shell,
  .hero-shell,
  .content-shell{
    width:calc(100% - 20px)!important;
    max-width:calc(100% - 20px)!important;
  }
  .section{padding-top:36px!important;padding-bottom:36px!important}
  .card,
  .service-card,
  .brand-card,
  .process-card,
  .market-card,
  .contact-card,
  .career-card,
  .job-card,
  .form-card{padding:16px!important;border-radius:20px!important}
  .mydn-chat-root{right:12px!important}
}

@media (max-width:375px){
  .lang-switch button{padding-left:9px!important;padding-right:9px!important}
  .mydn-public-bottom-nav a,
  .mydn-public-bottom-nav button{font-size:10px!important}
  .mydn-public-bottom-nav svg{width:18px;height:18px}
}

@media (hover:none){
  .btn:hover,
  .card:hover,
  .service-card:hover,
  .brand-card:hover{transform:none!important}
}