/* Kolabori V6.0 — responsive mobile polish and vertical rhythm. */

/* Keep compact header controls inside every viewport. */
.header-v54 .brand-v54{min-width:0;flex:1 1 auto}
.header-v54 .brand-v54 img{max-width:100%;object-fit:contain}
.header-v54 .navtools-v54{flex:0 0 auto;min-width:0}

/* Preserve the complete desktop scroll cue, including its arrowhead. */
.hero .scroll-hint{
  bottom:16px;
  padding-bottom:28px;
  white-space:nowrap;
}
.hero .scroll-hint:after{
  position:absolute;
  left:50%;
  bottom:4px;
  width:1px;
  height:20px;
  margin:0;
  transform:translateX(-50%);
}
.hero .scroll-hint:before{
  content:"";
  position:absolute;
  left:50%;
  bottom:2px;
  width:7px;
  height:7px;
  border-right:1px solid rgba(255,255,255,.62);
  border-bottom:1px solid rgba(255,255,255,.62);
  transform:translateX(-50%) rotate(45deg);
}

/* A tighter, consistent vertical rhythm between the nine main blocks. */
.section{padding:68px 0}
.impact{padding:58px 0}
.impact-head,.solutions-head,.governance-head{margin-bottom:26px}
.experience-note{margin:20px 0 24px}
.scenario-switch,.people-list{margin-top:22px}
.governance-note{margin-top:18px}
.footer{padding:48px 0 24px}
.footer-bottom{margin-top:30px;padding-top:18px}

/* The illustrative dashboard must never create horizontal clipping. */
.dashboard-wrap,.dash-browser,.dash-body,.dash-main,.dash-main-head,
.dash-cards,.dash-content,.chart-card,.list-card{min-width:0;max-width:100%}
.dash-main-head>div{min-width:0}
.dash-main h4,.dash-card strong{overflow-wrap:anywhere}

@media(max-width:1320px){
  /* Requested mobile/tablet order: menu, language, theme. */
  .header-v54 #menuBtn{order:1}
  .header-v54 .lang-picker{order:2}
  .header-v54 #themeToggle{order:3}
  .header-v54 .cta-v54{order:4}
}

@media(max-width:980px){
  .section{padding:56px 0}
  .impact{padding:50px 0}
  .experience-grid{gap:34px}
  .dash-browser{width:100%;transform:none}
  .floating-insight{right:10px}
}

@media(max-width:680px){
  :root{--v543-header-h:74px}
  .wrap{width:min(100% - 24px,var(--max))}
  .header-v54 .nav-v54{width:min(100% - 20px,var(--max));gap:6px}
  .header-v54 .brand-v54{height:52px}
  .header-v54 .brand-v54 img{width:clamp(112px,35vw,136px);height:auto}
  .header-v54 .navtools-v54{gap:6px}
  .header-v54 .lang-picker{width:54px;height:42px}
  .header-v54 .lang-current{height:42px;padding:0 8px;gap:5px}
  .header-v54 #menuBtn,.header-v54 #themeToggle{width:42px;height:42px;min-width:42px;min-height:42px}

  /* Let the hero grow with translated content instead of clipping it. */
  .hero{
    height:auto;
    min-height:calc(100svh - var(--v543-header-h));
    display:flex;
    align-items:stretch;
    overflow:hidden;
  }
  .hero-inner{
    width:100%;
    min-height:inherit;
    padding:clamp(38px,7svh,62px) 0 104px;
    display:flex;
    align-items:center;
  }
  .hero-copy{width:100%;min-width:0}
  .hero-kickers{margin-bottom:18px}
  .hero h1{font-size:clamp(42px,13vw,54px);margin-bottom:20px}
  .hero p{font-size:16px;line-height:1.55}
  .hero-actions{margin-top:24px}
  .hero-note{margin-top:24px;padding-right:58px;line-height:1.45}
  .hero .scroll-hint{bottom:14px;padding-bottom:26px}

  .section{padding:44px 0}
  .impact{padding:42px 0}
  .impact-head,.solutions-head,.governance-head{margin-bottom:22px}
  .impact-grid{gap:10px}
  .impact-item{min-height:154px;padding:18px}
  .story-grid{gap:32px}
  .experience-grid{gap:30px}
  .people-list{margin-top:20px}
  .contact-copy,.contact-form{padding:28px 22px}

  .dashboard-wrap{width:100%}
  .dash-browser{border-radius:18px}
  .dash-main{width:100%;padding:18px 14px}
  .dash-main-head{gap:10px;align-items:flex-start}
  .dash-main h4{font-size:18px;line-height:1.2}
  .avatar-stack{flex:0 0 auto;margin-right:4px}
  .avatar-stack span{width:25px;height:25px}
  .dash-cards{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:9px;margin-top:16px}
  .dash-card{padding:12px 10px}
  .dash-card strong{font-size:clamp(18px,5.2vw,22px);line-height:1.12}
  .dash-content{grid-template-columns:minmax(0,1fr);gap:9px;margin-top:9px}
  .floating-insight{position:relative;right:auto;bottom:auto;width:auto;margin:12px 0 0}

  .footer{padding:40px 0 22px}
  .footer-grid-v54{gap:26px 18px}
  .footer-bottom{margin-top:24px;padding-top:17px}
  .whatsapp-v54{right:14px;bottom:14px;width:52px;height:52px}
}

@media(max-width:380px){
  .header-v54 .brand-v54 img{width:108px}
  .header-v54 .navtools-v54{gap:4px}
  .header-v54 .lang-picker{width:50px}
  .header-v54 .lang-current{padding:0 6px}
  .header-v54 #menuBtn,.header-v54 #themeToggle{width:40px;height:40px;min-width:40px;min-height:40px}
  .hero h1{font-size:clamp(39px,13.4vw,48px)}
  .hero-note{padding-right:54px}
  .dash-main{padding:16px 11px}
  .dash-cards{gap:7px}
  .dash-card{padding:11px 8px}
  .dash-card strong{font-size:18px}
  .avatar-stack{display:none}
}

@media(max-width:340px){
  .header-v54 .brand-v54 img{width:94px}
  .header-v54 .navtools-v54{gap:3px}
  .header-v54 .lang-picker{width:47px}
  .impact-grid{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
  .hero:before{transform:none!important}
}