/* =============================================================================
   theEfficacy.com — responsive adjustments
   Loaded after style.css, applies breakpoints and layout refinements
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Large tablet — 1024px and below
----------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    :root {
        --gutter: clamp(1rem, 3vw, 1.6rem);
    }
    .container { padding-left: 1.4rem; padding-right: 1.4rem; }
    h1 { font-size: clamp(2.6rem, 5.6vw, 3.8rem); }
    h2 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); }
}

/* -----------------------------------------------------------------------------
   Mobile nav — 880px and below
----------------------------------------------------------------------------- */
@media (max-width: 880px) {
    .nav__links { display: none; }
    .nav__toggle { display: inline-flex; }
    .nav__inner { gap: 0.5rem; }
    .hero { padding-top: 7.5rem; }
    .hero__cta { gap: 0.6rem; }
    .hero__meta { gap: 1rem 1.4rem; }
}

/* -----------------------------------------------------------------------------
   Tablet — 768px and below
----------------------------------------------------------------------------- */
@media (max-width: 768px) {
    body { font-size: 15.5px; }
    .section { padding: 4.5rem 0; }
    .section--hero { padding: 7rem 0 3rem; }
    .caps__list { gap: 0.4rem 1.2rem; }
    .caps__item { font-size: 0.82rem; }
    .hero__scroll { display: none; }
    .why__visual { aspect-ratio: 16/11; }
    .work__item { min-height: 240px; }
    .about__grid { gap: 2rem; }
    .footer__grid { gap: 2rem; }
    .footer__cta { padding: 3rem 0 4rem; margin-bottom: 3rem; }
    .marquee__track { animation-duration: 22s; }
}

/* -----------------------------------------------------------------------------
   Mobile — 560px and below
----------------------------------------------------------------------------- */
@media (max-width: 560px) {
    .container { padding-left: 1.1rem; padding-right: 1.1rem; }
    .nav { padding: 0.7rem 0; }
    .nav.is-scrolled { padding: 0.5rem 0; }
    .nav__brand-text { font-size: 1rem; }
    .nav__brand-mark svg { width: 26px; height: 26px; }
    .nav__toggle { width: 42px; height: 42px; }
    .hero__title { font-size: clamp(2.4rem, 11vw, 3.2rem); }
    .hero__cta { flex-direction: column; align-items: stretch; }
    .hero__cta .btn { width: 100%; }
    .btn { padding: 0.95rem 1.3rem; font-size: 0.92rem; }
    .card { padding: 1.4rem; }
    .bento { gap: 0.9rem; }
    .bento__item { padding: 1.4rem; }
    .bento__item--lg, .bento__item--md, .bento__item--sm, .bento__item--wide { grid-column: span 2; }
    .form { padding: 1.4rem; }
    .form__row { grid-template-columns: 1fr; }
    .work__body { padding: 1.2rem; }
    .work__title { font-size: 1.1rem; }
    .footer__legal { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
    .footer__cta h2 { font-size: clamp(2rem, 9vw, 2.6rem); }
    .hero__meta { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
}

/* -----------------------------------------------------------------------------
   Tiny — 380px and below
----------------------------------------------------------------------------- */
@media (max-width: 380px) {
    .eyebrow { font-size: 0.66rem; }
    .lead { font-size: 1rem; }
    .work__item { min-height: 220px; }
}

/* -----------------------------------------------------------------------------
   Wide — 1600px+
----------------------------------------------------------------------------- */
@media (min-width: 1600px) {
    :root { --container-max: 1360px; }
    h1 { font-size: clamp(3.2rem, 5vw, 6rem); }
}