/* Global reset and layout safety */
*,
*::before,
*::after{
  box-sizing:border-box;
}

html{
  -webkit-text-size-adjust:100%;
}

html, body{
  width:100%;
  max-width:100%;
  margin:0;
  overflow-x:clip;
}

@supports not (overflow-x: clip){
  html, body{
    overflow-x:hidden;
  }
}

/* Media never overflows */
img, video, iframe, svg{
  max-width:100%;
  height:auto;
  display:block;
}

/* Text never forces overflow */
h1, h2, h3, h4, h5, h6, p, li, a{
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Flex and grid children can shrink */
.container,
.header,
.header-inner,
.brand,
.nav,
.cta,
.hero,
.hero-card,
.hero-grid,
.hero-grid > *,
.hero-left,
.hero-right,
.panel,
.statgrid,
.statgrid > *,
.founder,
.founder > *,
.outcomes-grid,
.outcomes-grid > *,
#services .split,
#services .split > *{
  min-width:0;
}

/* Optional, prevents tiny 100vw scrollbar issues if any section uses vw */
.fullwidth,
.section,
.hero,
header,
main,
footer{
  width:100%;
  max-width:100%;
}

/* Header mobile behavior */
@media (max-width: 980px){
  .header{
    position:sticky;
    top:0;
    z-index:999;
    background:rgba(0,0,0,.88);
    backdrop-filter:blur(10px);
  }

  .header-inner{
    flex-wrap:wrap;
    align-items:center;
    gap:12px;
    padding:14px 0;
  }

  .brand{
    min-width:0;
    display:flex;
    align-items:center;
    gap:10px;
  }

  .brand img{
    height:30px;
    width:auto;
  }

  .brand .tag{
    display:none;
  }

  .nav{
    width:100%;
    flex-wrap:wrap;
    justify-content:flex-start;
    gap:8px;
  }

  .cta{
    width:100%;
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start;
    gap:10px;
  }

  .btn{
    padding:11px 14px;
    border-radius:14px;
  }

  .navdrop{
    position:fixed;
    left:16px;
    right:16px;
    top:90px;
    min-width:unset;
    max-height:calc(100vh - 120px);
    overflow:auto;
    padding-bottom:env(safe-area-inset-bottom);
    z-index:1000;
  }
}

/* Hero layout */
@media (max-width: 980px){
  .hero{
    padding:44px 0 34px;
  }

  .hero-grid{
    display:grid;
    grid-template-columns:1fr;
  }

  .hero-left{
    padding:28px 22px 22px;
  }

  .hero-right{
    padding:22px 22px 24px;
    border-left:0;
    border-top:1px solid var(--line);
  }

  .statgrid{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
  }
}

@media (max-width: 520px){
  h1{
    font-size:34px;
    line-height:1.08;
  }

  .lead{
    font-size:16px;
    line-height:1.5;
  }
}

/* Services layout */
@media (min-width: 1101px){
  #services .split{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:18px;
  }
}

@media (max-width: 1100px){
  #services .split{
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
  }
}

/* Leadership and outcomes */
@media (max-width: 980px){
  .founder{
    display:grid;
    grid-template-columns:1fr;
    gap:18px;
  }

  .founder-photo{
    width:100%;
    max-width:100%;
  }

  .outcomes-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
  }
}

/* Debug helper, turn on if you still have weird overflow */
/*
*{ outline:1px solid rgba(255,0,0,.25); }
*/