/* responsive.css
   Every breakpoint, in one file loaded last. Media queries add no
   specificity, so these must come after the component stylesheets. */

@media (max-width: 1100px) {

    .pa-process .steps .step:not(:last-child)::after {
        display: none;
    }

}


@media (max-width: 900px) {

    .navbar-t .right .lang {
        margin-right: 8px;
    }

    .navbar-t .right .call .text p {
        display: none;
    }

    .pa-help,
    .state-facts,
    .state-cities,
    .state-grid {
        padding: 60px var(--gutter);
    }

    .pa-help {
        gap: 40px;
    }

    .state-hero {
        padding: 55px var(--gutter);
    }

}


@media (max-width: 700px) {

    .navbar-t .right .call {
        gap: 0;
        padding: 12px;
        border-radius: 50%;
    }

    .navbar-t .right .call .text {
        display: none;
    }

    .navbar-t .right .lang .lang-toggle {
        padding: 8px 10px;
    }

    .pa-process {
        padding: 60px var(--gutter);
    }

    .pa-process .steps {
        gap: 34px;
    }

    .pa-process .steps .step {
        max-width: 100%;
        min-width: 100%;
    }

    .pa-cta {
        flex-direction: column;
        align-items: flex-start;
        margin-top: 40px;
        padding: 26px 22px;
    }

    .pa-cta .action {
        width: 100%;
        align-items: stretch;
    }

    .pa-cta .action button {
        width: 100%;
    }

    .hero .left .content .below button {
        align-self: stretch;
    }

    .pa-help .left .benefits .benefit {
        flex: 1 1 100%;
    }

    .pa-help .right img {
        height: 220px;
    }

    .state-facts .facts .fact {
        min-width: 100%;
    }

    .state-grid .grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

}


@media (max-width: 1250px) {

    .navbar-t .left {
        margin-left: 0;
    }

    .navbar-t .middle {
        gap: 16px;
    }

    .hero img {
        right: calc(var(--gutter) + 205px);
    }

}


@media (max-width: 1150px) {

    .hero img {
        opacity: 0.3;
        right: calc(var(--gutter) + 120px);
    }

    .hero .left .content {
        max-width: 100%;
    }

    .hero .left .content .below {
        width: 100%;
        max-width: 420px;
    }

    .hero .right .get-free-case {
        width: 100%;
        max-width: 400px;
    }

}


@media (max-width: 900px) {

    .navbar-t {
        padding: 12px var(--gutter);
    }

    .navbar-t .middle {
        display: none;
    }

    .navbar-t .right {
        flex: 0;
        justify-content: flex-end;
    }

    .navbar-t .right button .text p {
        display: none;
    }

    .navbar-t .right .burger {
        display: flex;
    }

    .mobile-menu {
        display: flex;
        top: 66px;
    }

    .hero {
        flex-direction: column;
        align-items: stretch;
        padding: 55px var(--gutter);
        gap: 38px;
    }

    .hero img {
        display: none;
    }

    .hero .left {
        margin-left: 0;
        width: 100%;
    }

    .hero .left .content .below {
        max-width: 100%;
    }

    .hero .right {
        width: 100%;
        align-items: stretch;
    }

    .hero .right .get-free-case {
        max-width: 100%;
    }

    .attorney .left::after {
        width: 92%;
    }

    .attorney .left img {
        max-height: 420px;
    }

    .faq {
        gap: 35px;
    }

    .faq .left {
        position: static;
    }

    .faq .left p {
        max-width: 100%;
    }

    .why-choose,
    .attorney {
        gap: 40px;
    }

    .why-choose .left > p {
        max-width: 100%;
    }

}


@media (max-width: 700px) {

    .how-we-help,
    .why-choose,
    .our-process,
    .case-results,
    .attorney,
    .testimonials,
    .faq,
    .cta-band {
        padding: 60px var(--gutter);
    }

    .heading {
        margin-bottom: 32px;
    }

    .navbar-t .right button {
        gap: 0;
        padding: 12px;
        border-radius: 50%;
    }

    .navbar-t .right button .text {
        display: none;
    }

    .navbar-t .right button i {
        font-size: 16px;
    }

    .how-we-help .cards,
    .our-process .steps,
    .case-results .results,
    .testimonials .reviews {
        gap: 14px;
    }

    .how-we-help .cards .card,
    .our-process .steps .step,
    .case-results .results .result,
    .testimonials .reviews .review {
        max-width: 100%;
        min-width: 100%;
    }

    .how-we-help .cards .card,
    .our-process .steps .step,
    .case-results .results .result,
    .testimonials .reviews .review {
        transition-delay: 0s;
    }

    .why-choose .right .stats {
        flex-direction: column;
        gap: 22px;
        padding: 26px 20px;
    }

    .why-choose .right .stats .stat {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.14);
        padding: 0 0 18px 0;
        width: 100%;
    }

    .why-choose .right .stats .stat:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .attorney {
        flex-direction: column-reverse;
    }

    .attorney .right .credentials {
        gap: 22px;
    }

    .cta-band .content .actions {
        flex-direction: column;
        width: 100%;
    }

    .cta-band .content .actions button {
        width: 100%;
    }

    .footer-b {
        padding: 55px var(--gutter) 25px var(--gutter);
    }

    .footer-b .top {
        gap: 30px;
    }

    .footer-b .top .brand,
    .footer-b .top .column {
        flex: 1 1 100%;
        min-width: 100%;
    }

    .footer-b .bottom {
        justify-content: flex-start;
        gap: 12px;
    }

    .to-top {
        right: 16px;
        bottom: 16px;
        width: 42px;
        height: 42px;
    }

}


@media (max-width: 430px) {

    .navbar-t {
        padding: 10px var(--gutter);
    }

    .mobile-menu {
        top: 60px;
        padding: 0 var(--gutter);
    }

    .mobile-menu.open {
        padding: 18px var(--gutter);
    }

    .hero {
        padding: 45px var(--gutter);
        gap: 30px;
    }

    .hero .right .get-free-case {
        padding: 22px 18px;
    }

    .how-we-help,
    .why-choose,
    .our-process,
    .case-results,
    .attorney,
    .testimonials,
    .faq,
    .cta-band,
    .pa-help,
    .pa-process,
    .pa-index,
    .state-facts,
    .state-cities,
    .state-grid {
        padding: 50px var(--gutter);
    }

    .crumbs {
        padding: 12px var(--gutter);
    }

    .state-hero {
        padding: 45px var(--gutter);
    }

    .how-we-help .cards .card {
        padding: 18px;
    }

    .our-process .steps .step,
    .case-results .results .result,
    .testimonials .reviews .review {
        padding: 24px 20px;
    }

    .faq .right .question .top {
        padding: 16px 18px;
    }

    .faq .right .question.open .answer {
        padding: 0 18px 18px 18px;
    }

    .footer-b {
        padding: 45px var(--gutter) 22px var(--gutter);
    }

}


@media (prefers-reduced-motion: reduce) {

    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }

}


@media (max-width: 1250px) {

    .navbar-t .middle {
        gap: 14px;
    }

    .navbar-t .middle a {
        font-size: 13px;
    }

}


@media (max-width: 1080px) {

    .navbar-t .middle {
        gap: 10px;
    }

    .navbar-t .middle a {
        font-size: 12px;
    }

    .navbar-t .right .lang {
        margin-right: 8px;
    }

}


@media (max-width: 1150px) {

    .hero .left .content .trust {
        gap: 18px;
    }

    .hero .right {
        flex: 1 1 auto;
    }

    .hero .left .content .actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hero .left .content .actions .primary,
    .hero .left .content .actions .call {
        width: 100%;
        box-sizing: border-box;
    }

    .stats-bar .inner .stat {
        min-width: 44%;
        border-right: none;
    }

    .stats-bar .inner .stat:nth-child(odd) {
        border-right: 1px solid rgba(1, 1, 1, 0.08);
    }

}


@media (max-width: 700px) {

    .hero .left .content .lead {
        max-width: 100%;
    }

    .hero .left .content .trust {
        flex-direction: column;
        gap: 14px;
        margin-top: 20px;
    }

    .hero .left .content .actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        margin-top: 22px;
    }

    .hero .left .content .actions .primary,
    .hero .left .content .actions .call {
        width: 100%;
        box-sizing: border-box;
    }

    .hero .left .content .micro {
        gap: 6px;
    }

    .stats-bar .inner {
        flex-direction: column;
        padding: 20px 18px;
        gap: 4px;
    }

    .stats-bar {
        padding: 32px var(--gutter);
    }

    .stats-bar .inner .stat {
        min-width: 100%;
        justify-content: flex-start;
        padding: 12px 4px;
        border-right: none;
        border-bottom: 1px solid rgba(1, 1, 1, 0.08);
    }

    .stats-bar .inner .stat:nth-child(odd) {
        border-right: none;
    }

    .stats-bar .inner .stat:last-child {
        border-bottom: none;
    }

}


/* ---------- mobile conversion pass ---------- */

@media (max-width: 760px) {

    .sticky-call {
        display: flex;
    }

    /* room for the sticky bar so it never covers the last of the footer */
    body {
        padding-bottom: 74px;
    }

    .to-top {
        bottom: 86px;
    }

    /* low value on a phone, and it cost most of a thumb of scroll */
    .crumbs {
        display: none;
    }

    .hero {
        padding: 34px var(--gutter) 38px var(--gutter);
        gap: 26px;
    }

    .hero .left .content h5 {
        font-size: 12px;
        letter-spacing: 1.4px;
    }

    .hero .left .content h1 {
        font-size: clamp(30px, 8.6vw, 38px);
        line-height: 1.1;
    }

    .hero .left .content .lead {
        font-size: 14px;
        line-height: 1.6;
        margin-top: 14px;
    }

    /* titles only, two across: same proof in half the height */
    .hero .left .content .trust {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px 14px;
        margin-top: 16px;
    }

    .hero .left .content .trust .item {
        flex: 0 1 calc(50% - 7px);
        align-items: center;
        gap: 7px;
    }

    .hero .left .content .trust .item i {
        font-size: 15px;
        margin-top: 0;
    }

    .hero .left .content .trust .item .text b {
        font-size: 12px;
        white-space: normal;
    }

    .hero .left .content .trust .item .text span {
        display: none;
    }

    .hero .left .content .actions {
        gap: 10px;
        margin-top: 18px;
    }

    .hero .left .content .actions .primary,
    .hero .left .content .actions .call {
        min-height: 54px;
        padding: 0 18px;
        font-size: 14px;
    }

    .hero .left .content .micro {
        margin-top: 12px;
        font-size: 11px;
    }

}


@media (max-width: 760px) {

    /* touch sized fields - 44px is the minimum comfortable tap target */
    .hero .right .get-free-case {
        padding: 22px 18px;
    }

    .hero .right .get-free-case h3 {
        font-size: 20px;
    }

    .hero .right form .inputs input,
    .hero .right form .inputs select {
        min-height: 46px;
        font-size: 15px;
        padding: 10px 14px;
    }

    .hero .right form .inputs textarea {
        min-height: 74px;
        font-size: 15px;
        padding: 12px 14px;
    }

    .hero .right form button {
        min-height: 54px;
        font-size: 14px;
    }

    /* two across instead of four stacked rows */
    .stats-bar .inner {
        flex-direction: row;
        flex-wrap: wrap;
        padding: 18px 14px;
        gap: 0;
    }

    .stats-bar .inner .stat {
        flex: 0 0 50%;
        min-width: 0;
        box-sizing: border-box;
        justify-content: flex-start;
        gap: 9px;
        padding: 14px 8px;
        border-right: none;
        border-bottom: none;
    }

    .stats-bar .inner .stat:nth-child(odd) {
        border-right: 1px solid rgba(1, 1, 1, 0.08);
    }

    .stats-bar .inner .stat:nth-child(1),
    .stats-bar .inner .stat:nth-child(2) {
        border-bottom: 1px solid rgba(1, 1, 1, 0.08);
    }

    .stats-bar .inner .stat i {
        font-size: 20px;
    }

    .stats-bar .inner .stat .text b {
        font-size: 16px;
    }

    .stats-bar .inner .stat .text span {
        font-size: 10.5px;
        line-height: 1.3;
    }

}


@media (max-width: 900px) {

    /* every tappable thing gets a real thumb target */
    .navbar-t .right .burger {
        width: 44px;
        height: 44px;
        margin-left: 6px;
    }

    .navbar-t .right .lang .lang-toggle {
        min-height: 44px;
    }

    .navbar-t .right .lang .lang-menu a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .mobile-menu.open {
        max-height: 520px;
    }

    .mobile-menu a {
        display: flex;
        align-items: center;
        min-height: 46px;
        border-bottom: 1px solid rgba(1, 1, 1, 0.07);
    }

    .mobile-menu .langs a {
        min-height: 40px;
        border-bottom: none;
    }

    .mobile-menu {
        gap: 0;
    }

    .mobile-menu b {
        display: flex;
        align-items: center;
        min-height: 46px;
    }

    .footer-b .top .column a,
    .footer-b .bottom .links a {
        min-height: 38px;
        display: flex;
        align-items: center;
    }

    .footer-b .top .contact a.line {
        min-height: 40px;
        align-items: center;
    }

    .faq .right .question .top {
        min-height: 56px;
    }

    .state-grid .grid .tile {
        min-height: 62px;
        justify-content: center;
    }

    .state-cities .cities .city {
        min-height: 42px;
    }

    .state-hero .content .actions a {
        min-height: 46px;
        box-sizing: border-box;
    }

}


@media (max-width: 900px) {

}


@media (max-width: 760px) {

    .case-results,
    .our-process,
    .testimonials {
        padding: 60px var(--gutter);
    }

    .our-process .steps .step,
    .testimonials .reviews .review,
    .case-results .results .result {
        max-width: 100%;
        min-width: 100%;
        transition-delay: 0s;
    }

    .our-process .steps {
        gap: 30px;
    }

}


@media (max-width: 1000px) {

    .how-we-help .intro {
        position: static;
        max-width: 100%;
    }

    .how-we-help {
        gap: 34px;
    }

}


@media (max-width: 760px) {

    .how-we-help {
        padding: 60px var(--gutter);
        gap: 26px;
    }

    .how-we-help .cards {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 1000px) {

    .why-choose {
        gap: 40px;
    }

    .why-choose .left,
    .why-choose .right {
        max-width: 100%;
    }

}


@media (max-width: 760px) {

    .why-choose {
        padding: 60px var(--gutter);
    }

    .why-choose .right {
        max-width: 100%;
    }

    .why-choose .left .cta {
        align-self: stretch;
    }

    /* fixed attachment is janky on phones */
    .case-results {
        background-attachment: scroll;
    }

}

@media (max-width: 1000px) {

    .our-process .intro {
        position: static;
        max-width: 100%;
    }

    .our-process {
        gap: 32px;
    }

}