/* ========================================================================== 
   YIFO RESPONSIVE LAYER
   Mobile-first safeguards and breakpoint refinements loaded after style.css.
   ========================================================================== */

html{
  overflow-x:clip;
  scroll-padding-top:96px;
}
body{
  overflow-x:hidden;
  min-width:0;
}
main,
section,
.container,
.header-inner,
.footer-grid,
.card-grid,
.intro-grid,
.contact-grid{
  min-width:0;
}
img,svg,video,canvas,iframe{
  max-width:100%;
  height:auto;
}
iframe{
  width:100%;
}
.logo-image{
  max-width:min(220px,48vw) !important;
  height:48px !important;
}
.btn{
  max-width:100%;
  justify-content:center;
}
input,textarea,select,button{
  max-width:100%;
}
table{
  max-width:100%;
}

/* Back to top */
.back-to-top{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:95;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:52px;
  min-height:52px;
  padding:0 16px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:999px;
  background:var(--field);
  color:#fff;
  box-shadow:0 14px 34px rgba(23,21,18,.24);
  font-family:var(--display);
  font-size:13px;
  font-weight:700;
  letter-spacing:.02em;
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(12px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s ease, background .2s ease;
}
.back-to-top:hover{
  background:var(--field-2);
  transform:translateY(-2px);
}
.back-to-top.is-visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
}
.back-to-top__icon{
  font-size:20px;
  line-height:1;
}

/* Large desktop */
@media (min-width:1440px){
  .container{ padding-left:32px; padding-right:32px; }
  .hero-copy{ padding-left:max(32px,calc((100vw - var(--container))/2 + 32px)); }
}

/* Compact desktop / landscape tablet before the menu collapses */
@media (min-width:1101px) and (max-width:1280px){
  .header-inner{ padding-left:18px; padding-right:18px; }
  .main-nav{ gap:15px; }
  .main-nav a{ font-size:13px; }
  .header-cta{ gap:10px; }
  .header-cta > .btn{ padding:9px 12px; font-size:12.5px; }
  .logo-image{ max-width:170px !important; height:44px !important; }
}

/* Tablet and mobile navigation */
@media (max-width:1100px){
  .site-header{ z-index:120; }
  .header-inner{
    min-height:76px;
    padding:12px 20px;
  }
  .logo-image{
    height:44px !important;
    max-width:min(190px,52vw) !important;
  }
  .header-cta > .btn-outline-dark{ display:none; }
  .nav-toggle{
    display:block;
    width:44px;
    height:44px;
    padding:10px;
    flex:none;
  }
  .nav-toggle span{ width:24px; }
  .main-nav{
    position:fixed;
    top:var(--header-height,76px);
    right:0;
    bottom:0;
    left:auto;
    width:min(430px,86vw);
    height:calc(100dvh - var(--header-height,76px));
    padding:24px 26px 34px;
    background:var(--field);
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    transform:translateX(100%);
    transition:transform .28s ease;
    box-shadow:-18px 0 42px rgba(23,21,18,.18);
    z-index:125;
  }
  .main-nav.open{ transform:translateX(0); }
  .main-nav a{
    width:100%;
    padding:12px 2px;
    border-bottom:1px solid var(--line-dark);
    color:#fff;
    font-family:var(--display);
    font-size:17px;
    line-height:1.25;
  }
  .main-nav a.active{ color:var(--sun); }
  .main-nav a::after{ display:none; }
  .main-nav .header-cta.only-mobile{
    display:flex;
    width:100%;
    margin-top:20px;
  }
  .main-nav .header-cta.only-mobile .btn{
    display:flex;
    width:100%;
  }
  body.nav-open::before{
    content:"";
    position:fixed;
    top:var(--header-height,76px);
    right:0;
    bottom:0;
    left:0;
    background:rgba(23,21,18,.42);
    z-index:110;
  }
  body.nav-open{ overflow:hidden; }

  .hero-grid{ min-height:0; }
  .hero-copy{
    padding:76px 24px 56px;
    max-width:none;
  }
  .hero-media{ min-height:320px; }
  .section{ padding:80px 0; }
  .section-tight{ padding:56px 0; }
  .intro-grid{ gap:42px; }
  .section-head{ margin-bottom:42px; }
  .contact-grid{ gap:42px; }
  .footer-grid{ gap:34px 28px; }
}

/* Tablets */
@media (min-width:641px) and (max-width:900px){
  .container{ padding-left:24px; padding-right:24px; }
  .hero-copy h1{ font-size:clamp(2.35rem,7vw,3.4rem); }
  .hero-media{
    min-height:0;
    aspect-ratio:16/8;
  }
  .hero-stat{ flex:1 1 33.333%; padding:20px; }
  .card-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .metric-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .testimonial-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .values-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .footer-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .newsletter-inner{ align-items:flex-start; }
  .newsletter form{ width:100%; }
  .newsletter input{ flex:1 1 280px; }
}

/* Phones and small tablets */
@media (max-width:640px){
  html{ scroll-padding-top:82px; }
  .container{ padding-left:18px; padding-right:18px; }
  .header-inner{ min-height:68px; padding:10px 16px; }
  .logo-image{
    height:40px !important;
    max-width:min(170px,58vw) !important;
  }
  .main-nav{
    top:var(--header-height,68px);
    width:100vw;
    height:calc(100dvh - var(--header-height,68px));
    padding:18px 20px 28px;
    box-shadow:none;
  }
  body.nav-open::before{ display:none; }
  .main-nav a{ font-size:16.5px; padding:11px 2px; }

  .hero-copy{
    padding:54px 18px 42px;
    gap:20px;
  }
  .hero-copy h1{
    font-size:clamp(2rem,11vw,2.75rem);
    line-height:1.02;
  }
  .hero-copy .lede{ font-size:16px; }
  .hero-media{
    min-height:0;
    aspect-ratio:4/3;
    clip-path:polygon(0 4%,100% 0,100% 100%,0 100%);
  }
  .hero-stats{ display:block; }
  .hero-stat{
    width:100%;
    border-right:0;
    border-bottom:1px solid var(--line-dark);
    padding:18px;
  }
  .hero-stat:last-child{ border-bottom:0; }
  .hero-actions{
    width:100%;
    gap:10px;
  }
  .hero-actions .btn{
    width:100%;
    white-space:normal;
    text-align:center;
  }

  .section{ padding:58px 0; }
  .section-tight{ padding:44px 0; }
  .section-head{ margin-bottom:32px; }
  .section-head h2{ font-size:clamp(1.65rem,8vw,2.15rem); }
  .section-head .lede{ font-size:15.5px; }
  .section-head-row{ align-items:flex-start; gap:16px; }
  .section-head-row > .btn{ width:100%; }
  .page-header{ padding:46px 0 40px; }
  .page-header p{ font-size:15.5px; }
  .intro-grid{ gap:28px; }
  .intro-grid blockquote{ padding-left:18px; }

  .card-grid,
  .testimonial-grid,
  .metric-grid,
  .values-grid{
    grid-template-columns:1fr;
  }
  .theme-card,
  .path-card,
  .testimonial-card,
  .community-voices-empty{
    padding:24px 20px;
  }
  .prog-body{ padding:20px; }
  .metric-cell{ padding:24px 20px; }
  .metric-note{ padding:18px; font-size:12.5px; }

  .org-chart{ width:100%; }
  .org-row,
  .org-dept-row{ width:100%; }
  .org-node{
    min-width:0;
    width:100%;
    max-width:340px;
  }
  .org-dept{ width:100%; max-width:340px; text-align:center; }

  .filter-bar{
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-bottom:8px;
    margin-bottom:28px;
    scroll-snap-type:x proximity;
    scrollbar-width:thin;
  }
  .filter-chip{
    flex:0 0 auto;
    scroll-snap-align:start;
    min-height:42px;
  }
  .search-box{ width:100%; max-width:none; }
  .search-box input{ min-width:0; font-size:16px; }

  .contact-grid{ gap:30px; }
  .field input,
  .field textarea,
  .field select{ font-size:16px; }
  .contact-info-item{ flex-direction:column; gap:6px; }
  .contact-info-item .k{ width:auto; }

  .resource-row{
    align-items:flex-start;
    flex-direction:column;
  }
  .resource-row .btn{ width:100%; }

  .newsletter{ padding:48px 0; }
  .newsletter-inner{ align-items:flex-start; }
  .newsletter form{ width:100%; flex-direction:column; }
  .newsletter input{ width:100%; min-width:0; font-size:16px; }
  .newsletter form .btn{ width:100%; }

  .cta-band{ padding:50px 0; }
  .cta-band .hero-actions{ padding:0 18px; }

  .site-footer{ padding:58px 0 24px; }
  .footer-grid{ grid-template-columns:1fr; gap:30px; }
  .footer-brand p{ max-width:none; }
  .footer-bottom{
    margin-top:42px;
    padding-top:22px;
    flex-direction:column;
  }
  .mt-lg{ margin-top:38px; }

  .back-to-top{
    right:16px;
    bottom:16px;
    width:48px;
    min-width:48px;
    height:48px;
    min-height:48px;
    padding:0;
  }
  .back-to-top__text{ display:none; }
}

/* Very small phones */
@media (max-width:360px){
  .container{ padding-left:14px; padding-right:14px; }
  .header-inner{ padding-left:12px; padding-right:12px; }
  .logo-image{ max-width:150px !important; }
  .hero-copy{ padding-left:14px; padding-right:14px; }
  .eyebrow{ font-size:11px; letter-spacing:.1em; gap:7px; }
  .eyebrow::before{ width:16px; }
  .btn{ padding-left:18px; padding-right:18px; }
}

@media (prefers-reduced-motion:reduce){
  .back-to-top,
  .main-nav{ transition:none; }
}