/*
   Mobile and tablet rules for Aviora Health.
   Loaded after style.css with a media attribute, so browsers on large screens
   download it but skip applying it. Breakpoints from widest to narrowest:
   1180 / 1080 / 960 / 860 / 640 / 520 / 400.
*/

@media (max-width: 1180px){
     .hero-text h1{
         font-size: 68px;
    }
     .services-head h2, .cth-head h2{
         font-size: 56px;
    }
     .clinic-text-col h2{
         font-size: 50px;
    }
     .testimonials-head h2{
         font-size: 46px;
    }
     .cta-inner h2{
         font-size: 50px;
    }
}
@media (max-width: 1080px){
     .service-card p{
        font-size:18px;
    }
     .service-card h4{
        font-size:30px;
    }
     .service-tags span{
        font-size:18px;
    }
     .hero-text h1{
        font-size:45px;
    }
     .hero-stat-label{
        font-size:18px;
    }
     .stat-card p{
        font-size:18px;
    }
     .clinic-text-col p{
        font-size:18px;
    }
     .cth-stat small{
        font-size:18px;
    }
     .cth-col-right p{
        font-size:18px;
    }
     .services-featured span{
        font-size:18px;
    }
     .services-featured strong{
        font-size:24px;
    }
     .stat-card h3{
        font-size:30px;
    }
     .service-item-text h3{
        font-size:30px;
    }
     .service-item-text p{
        font-size:18px;
    }
     .hero-grid{
         grid-template-columns: 1fr;
    }
     .hero-media{
         order: -1;
         margin: 0 auto;
    }
     .hero-photo{
         object-fit: cover;
    }
     .service-card{
         position: static;
         width: 100%;
         min-width: 0;
         transform: none;
         margin-top: 24px;
    }
     .clinic-grid{
         grid-template-columns: 1fr;
    }
     .clinic-main{
         aspect-ratio: 16/9;
    }
     .clinic-small-row{
         padding-left: 0;
         margin-top: 24px;
    }
     .cth-grid{
         grid-template-columns: 1fr 1fr;
    }
     .cth-col-right{
         grid-column: span 2;
    }
     .footer-grid{
         grid-template-columns: 1fr 1fr 1fr;
    }
}
@media (max-width: 1080px) and (min-width: 861px){
     
	 .hero{
         padding: 30px 0 70px;
    }
     .hero-text{
         text-align: center;
         margin: 0 auto;
    }
     .hero-actions{
         justify-content: center;
    }
     .hero-stats{
         justify-content: center;
    }
     .stats-row{
         padding: 20px 0 60px;
    }
     .stats-grid{
         gap: 20px;
    }
     .stat-card{
         padding: 26px 22px 30px;
    }
     .clinic-partner{
         padding: 20px 0 60px;
    }
     .clinic-text-col h2{
         font-size: 42px;
    }
     .close-to-home{
         padding: 30px 0 60px;
    }
     .cth-head{
         margin-bottom: 50px;
    }
     .cth-grid{
         gap: 28px;
    }
     .services-section{
         padding: 20px 0 60px;
    }
     .services-head{
         margin-bottom: 32px;
    }
     .services-grid{
         gap: 28px;
    }
     .service-item-top{
         padding: 24px 22px 20px;
         gap: 24px;
    }
     .cta-banner{
         padding: 30px 0 60px;
    }
     .cta-inner{
         padding: 56px 32px;
    }
     .testimonials{
         padding: 20px 0 70px;
    }
     .testimonials-head{
         margin-bottom: 40px;
    }
}
@media (max-width: 960px) and (min-width: 861px){
	 
     .main-nav{
         gap: 16px;
         font-size: 15px;
    }
     .nav-link{
         font-size: 15px;
         padding: 7px 12px;
    }
}
@media (max-width: 860px){
	 
     .header-inner{
         position: relative;
    }
     .header-cta{
         display: none;
    }
     .hamburger{
         display: flex;
         position: relative;
         z-index: 210;
         height: 20px;
         justify-content: space-between;
    }
     .nav-overlay{
         display: block;
    }
     .hamburger span{
         transition: transform .25s ease, opacity .2s ease;
    }
     .hamburger.active span:nth-child(1){
         transform: translateY(8.5px) rotate(45deg);
    }
     .hamburger.active span:nth-child(2){
         opacity: 0;
    }
     .hamburger.active span:nth-child(3){
         transform: translateY(-8.5px) rotate(-45deg);
    }
    /* Slide-in menu panel, the way a phone menu is usually done: it comes in
       from the right, the page behind it dims, and background scrolling is
       locked while it is open. */
     .main-nav{
         display: flex;
         position: fixed;
         top: 0;
         right: 0;
         bottom: 0;
         z-index: 200;
         width: min(86vw, 380px);
         flex-direction: column;
         align-items: stretch;
         gap: 0;
         padding: 26px 24px 40px;
         background: #fff;
         overflow-y: auto;
         overscroll-behavior: contain;
         box-shadow: -18px 0 50px rgba(15,42,67,.18);
         transform: translateX(100%);
         visibility: hidden;
         transition: transform .32s cubic-bezier(.4,0,.2,1), visibility .32s;
    }
     .main-nav.open{
         transform: translateX(0);
         visibility: visible;
    }
     .nav-panel-title{
         display: block;
         font-family: var(--font-display);
         font-size: 12.5px;
         font-weight: 500;
         letter-spacing: .18em;
         text-transform: uppercase;
         color: var(--olive-dark);
         padding-bottom: 16px;
         margin-bottom: 8px;
         border-bottom: 1px solid rgba(15,42,67,.1);
    }
     .main-nav > .nav-link{
         width: 100%;
         font-size: 17px;
         padding: 15px 12px;
         border-radius: 10px;
         border-bottom: 1px solid rgba(15,42,67,.07);
    }
    /* The header button drops into the panel instead of disappearing */
     .nav-cta-mobile{
         display: inline-flex;
         justify-content: center;
         width: 100%;
         margin-top: 22px;
    }
     .main-nav .dropdown{
         width: 100%;
    }
    /* No hover dropdowns on a touch screen: the parent opens on tap instead */
     .main-nav .dropdown::after{
         display: none;
    }
     .main-nav .nav-link.has-caret{
         width: 100%;
         justify-content: space-between;
         border-radius: 10px;
         padding: 15px 12px;
         border-bottom: 1px solid rgba(15,42,67,.07);
    }
     .dropdown.open > .nav-link.has-caret .nav-caret{
         transform: rotate(180deg);
    }
     .dropdown-menu{
         position: static;
         box-shadow: none;
         opacity: 1;
         visibility: visible;
         transform: none;
         min-width: 0;
         padding: 0;
         margin: 0;
         border-radius: 0;
         background: transparent;
         display: block;
         max-height: 0;
         overflow: hidden;
         transition: max-height .3s ease;
    }
     .dropdown.open .dropdown-menu{
         max-height: 640px;
         margin: 4px 0 10px;
    }
     .dropdown-menu a{
         display: block;
         font-size: 15px;
         padding: 11px 12px 11px 26px;
         color: rgba(28,28,28,.8);
    }
    /* Hero */
     .hero{
         padding: 24px 0 60px;
    }
     .hero-text{
         padding-top: 20px;
    }
     .hero-text h1{
         font-size: 42px;
         gap: 4px 10px;
    }
     .avatar-inline{
         height: 40px;
    }
     .avatar-inline img, .avatar-arrow{
         width: 34px;
         height: 34px;
    }
     .hero-copy{
         margin-top: 24px;
         font-size: 18px;
    }
     .hero-stats{
         margin-top: 40px;
         gap: 30px;
    }
     .doctor-card{
         min-width: 0;
         max-width: 92%;
    }
     .service-card{
         flex-wrap: wrap;
    }
    /* Stats row */
     .stats-row{
         padding: 20px 0 50px;
    }
     .stats-grid{
         grid-template-columns: 1fr;
    }
    /* Clinic partner */
     .clinic-partner{
         padding: 10px 0 60px;
    }
     .clinic-text-col h2{
         font-size: 34px;
    }
     .clinic-small-row{
         flex-wrap: wrap;
         gap: 16px;
    }
     .clinic-small-row img{
         width: calc(50% - 8px);
         height: auto;
         aspect-ratio: 4/3;
         margin-top: 0 !important;
    }
    /* Close to home */
     .close-to-home{
         padding: 20px 0 60px;
    }
     .cth-head{
         margin-bottom: 40px;
    }
     .cth-head h2{
         font-size: 34px;
    }
     .cth-stats{
         gap: 24px 36px;
         flex-wrap: wrap;
    }
     .cth-stat span{
         font-size: 30px;
    }
     .cth-grid{
         grid-template-columns: 1fr;
    }
     .cth-col-right{
         grid-column: auto;
    }
     .cth-col-mid img{
         min-height: 0;
         aspect-ratio: 4/3;
    }
     .cth-avatars{
         margin-bottom: 24px;
    }
    /* Service card tags (In-Person / Virtual) */
     .service-tags{
         gap: 28px;
    }
    /* Services */
     .services-section{
         padding: 10px 0 60px;
    }
     .services-head h2{
         font-size: 38px;
    }
     .services-featured{
         flex-wrap: wrap;
    }
     .services-grid{
         grid-template-columns: 1fr;
         gap: 24px;
    }
     .service-item-top{
         padding: 22px 20px 18px;
         gap: 20px;
    }
     .service-item-icon{
         width: 65px;
         height: 65px;
    }
     .service-item-icon svg{
         width: 40px;
         height: 40px;
    }
    /* CTA banner */
     .cta-banner{
         padding: 40px 0 60px;
    }
     .cta-inner{
         padding: 50px 24px;
         border-radius: 0;
    }
     .cta-inner h2{
         font-size: 40px;
    }
     .cta-deco{
         opacity: .4;
    }
    /* Testimonials */
     .testimonials{
         padding: 10px 0 70px;
    }
     .testimonials-head h2{
         font-size: 32px;
    }
     .testimonial-card{
         flex: 0 0 calc((100% - 24px) / 2);
    }
    /* Footer: single column, centered, mobile-friendly menu */
     .site-footer{
         padding: 50px 0 0;
    }
     .footer-grid{
         grid-template-columns: 1fr;
         gap: 0;
         padding-bottom: 8px;
    }
     .footer-brand{
         display: flex;
         flex-direction: column;
         align-items: center;
         text-align: center;
         padding-bottom: 34px;
         margin-bottom: 6px;
         border-bottom: 1px solid rgba(255,255,255,.12);
    }
     .footer-brand .logo{
         justify-content: center;
    }
     .footer-brand p{
         margin-top: 24px;
         max-width: 420px;
    }
     .footer-col{
         border-bottom: 1px solid rgba(255,255,255,.12);
    }
     .footer-col:last-child{
         border-bottom: none;
    }
     .footer-col-toggle{
         padding: 18px 2px;
         cursor: pointer;
    }
     .footer-col-toggle h4{
         margin-bottom: 0;
    }
     .footer-toggle-icon{
         display: flex;
         align-items: center;
         justify-content: center;
    }
     .footer-col.open .footer-col-toggle h4{
         color: #fff;
    }
     .footer-col.open .footer-toggle-icon{
         transform: rotate(180deg);
         color: #fff;
    }
     .footer-col-content{
         max-height: 0;
         overflow: hidden;
         transition: max-height .35s ease;
    }
     .footer-col a{
         padding: 8px 2px;
    }
     .footer-col-inner{
         padding-bottom: 18px;
    }
     .footer-newsletter{
         padding: 18px 2px 24px;
    }
     .footer-newsletter .footer-col-inner{
         padding-bottom: 4px;
    }
     .footer-newsletter .footer-col-content{
         max-height: none;
         overflow: visible;
         transition: none;
    }
     .subscribe-form{
         max-width: 360px;
    }
     .stay-connected{
         margin-top: 22px;
    }
}
@media (max-width: 640px){

     .testimonial-card{
         flex: 0 0 100%;
         padding: 24px 4px 10px;
    }
     .quote-mark{
         right: 4px;
         left: auto;
         bottom: auto;
         top: 8px;
         font-size: 30px !important;
    }
}
@media (max-width: 520px){
     .hero-text h1{
         font-size: 30px;
    }
     .hero-actions{
         flex-direction: column;
         align-items: stretch;
    }
     .hero-actions .btn{
         justify-content: center;
    }
     .hero-stats{
         gap: 24px;
         flex-wrap: wrap;
    }
     .service-card{
         position: static;
         width: 100%;
         min-width: 0;
         transform: none;
         margin-top: 16px;
         flex-wrap: wrap;
    }
     .doctor-card{
         margin-top: -100px;
         margin-left: 12px;
         width: fit-content;
         max-width: calc(100% - 24px);
    }
     .clinic-text-col h2, .cth-head h2, .testimonials-head h2{
         font-size: 30px;
    }
     .services-head h2{
         font-size: 30px;
    }
     .cta-inner h2{
         font-size: 30px;
    }
     .cta-deco{
         display: none;
    }
     .footer-grid{
         grid-template-columns: 1fr;
    }
     .service-item-top{
         flex-direction: column;
    }
     .services-featured{
         flex-direction: column;
         text-align: center;
    }
     .services-featured img{
         width: 100%;
         height: 160px;
    }
     .services-featured-tags{
         justify-content: center;
    }
     .service-tags{
         gap: 20px;
    }
     .cth-stats{
         gap: 18px 24px;
    }
     .cth-stat span{
         font-size: 26px;
    }
}
@media (max-width: 1080px) and (min-width: 861px){
	 
     .main-nav{
         gap: 16px;
         font-size: 15px;
    }
     .nav-link{
         font-size: 14px;
         padding: 7px 10px;
    }
}
@media (max-width: 400px){
	 
     .hero-text h1{
         font-size: 30px;
    }
     .avatar-inline{
         height: 36px;
    }
     .avatar-inline img, .avatar-arrow{
         width: 30px;
         height: 30px;
    }
     .btn{
         font-size: 16px;
         padding: 6px 18px;
    }
     .slider-nav{
         gap: 14px;
         margin-top: 32px;
    }
     .slider-arrow{
         width: 40px;
         height: 40px;
    }
}
@media (max-width: 782px){
     .admin-bar .site-header{
         top: 46px;
    }
}
@media (max-width: 640px){
     .basic-page{
         padding: 40px 20px 60px;
    }
     .basic-title{
         font-size: 28px;
    }
}

@media (max-width: 600px){
     .admin-bar .site-header{
         top: 0;
    }
}

/* Services page: intro, filters, card groups, why-choose panel.
   Same breakpoint ladder as the sections above. */

@media (max-width: 1180px){
     .services-intro-text h1{
         font-size: 48px;
    }
     .promise-panel h2{
         font-size: 34px;
    }
     .promise-grid{
         grid-template-columns: repeat(2, 1fr);
         gap: 28px;
    }
}
@media (max-width: 1080px){
     .services-intro{
         padding: 24px 0 44px;
    }
     .services-intro-grid{
         grid-template-columns: 1fr;
         gap: 32px;
    }
     .services-intro-media{
         order: -1;
    }
     .services-intro-text h1, .services-intro-text p{
         max-width: none;
    }
     .services-intro-text p{
         font-size: 18px;
    }
     .group-cards, .group-cards-wide{
         grid-template-columns: repeat(2, 1fr);
    }
     .group-card p{
         font-size: 16px;
    }
     .promise-panel{
         padding: 40px 30px 44px;
    }
     .promise-card p{
         font-size: 16px;
    }
     .static-reviews{
         grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 860px){
     .services-intro-text h1{
         font-size: 36px;
    }
     .eyebrow{
         margin-bottom: 18px;
    }
     .service-filters{
         margin-top: 24px;
         gap: 10px;
    }
     .filter-pill{
         font-size: 14px;
         padding: 8px 16px;
    }
     .service-groups{
         padding: 0 0 50px;
    }
     .service-group{
         margin-bottom: 40px;
    }
     .group-title{
         font-size: 19px;
    }
     .promise-section{
         padding: 0 0 55px;
    }
     .promise-panel h2{
         font-size: 28px;
         margin-bottom: 28px;
    }
     .cta-copy{
         font-size: 16px;
    }
}
@media (max-width: 640px){
     .group-cards, .group-cards-wide, .promise-grid, .static-reviews{
         grid-template-columns: 1fr;
    }
     .cta-actions{
         flex-direction: column;
         align-items: stretch;
    }
     .cta-actions .btn{
         justify-content: center;
    }
     .btn-small{
         align-self: stretch;
         justify-content: center;
    }
}
@media (max-width: 520px){
     .services-intro-text h1{
         font-size: 30px;
    }
     .promise-panel{
         padding: 32px 22px 36px;
    }
}

/* About, Dermatology, Health Checks and Contact pages.
   Same breakpoint ladder as everything above. */

@media (max-width: 1180px){
     .section-title, .section-head h2, .panel-heading{
         font-size: 34px;
    }
     .contact-intro h1{
         font-size: 44px;
    }
     .about-intro h1, .derm-intro h1, .health-intro h1{
         font-size: 42px;
    }
     .mission-panel blockquote p{
         font-size: 28px;
    }
     .pillars-grid, .numbered-grid, .pathway-grid{
         grid-template-columns: repeat(2, 1fr);
    }
     .panel{
         padding: 38px 30px 42px;
    }
     .mission-panel{
         padding: 42px 40px 46px;
    }
}
@media (max-width: 1080px){
    /* Intro rows stack, with the photo moved above the text */
     .about-intro-grid, .derm-intro-grid, .health-intro-grid{
         grid-template-columns: 1fr;
         gap: 34px;
    }
     .about-intro-media, .derm-intro-media, .health-intro-media{
         order: -1;
    }
     .about-intro h1, .about-intro p, .derm-intro h1, .derm-intro p, .health-intro h1, .health-intro p{
         max-width: none;
    }
     .about-intro p, .derm-intro p, .health-intro p, .contact-intro p{
         font-size: 18px;
    }
     .contact-cards-grid{
         grid-template-columns: 1fr;
    }
     .contact-main-grid{
         grid-template-columns: 1fr;
    }
     .contact-card p, .location-points li, .reason-card p, .pillar-card p{
         font-size: 16px;
    }
     .panels-grid{
         grid-template-columns: 1fr;
    }
     .panel-summary{
         position: static;
    }
     .team-panel{
         grid-template-columns: 1fr;
         gap: 26px;
    }
     .trust-grid{
         grid-template-columns: 1fr;
         gap: 34px;
    }
     .trust-item{
         padding: 0;
    }
     .numbered-card p, .pathway-step p, .trust-item p{
         font-size: 15px;
    }
}
@media (max-width: 860px){
     .contact-intro{
         padding: 34px 0 26px;
    }
     .contact-intro h1{
         font-size: 34px;
    }
     .about-intro, .derm-intro, .health-intro{
         padding: 30px 0 44px;
    }
     .about-intro h1, .derm-intro h1, .health-intro h1{
         font-size: 32px;
    }
     .section-title, .section-head h2, .panel-heading{
         font-size: 27px;
         margin-bottom: 28px;
    }
     .section-head{
         margin-bottom: 28px;
    }
     .panel{
         padding: 30px 22px 34px;
         border-radius: 18px;
    }
     .mission-panel{
         padding: 34px 24px 38px;
         border-radius: 18px;
    }
     .mission-panel blockquote p{
         font-size: 22px;
    }
     .mission-support{
         font-size: 15px;
    }
     .contact-form-card{
         padding: 26px 20px 30px;
    }
     .contact-form-card h2{
         font-size: 25px;
    }
     .contact-card, .location-card{
         padding: 24px 20px 26px;
    }
     .team-text h2{
         font-size: 26px;
    }
     .team-panel{
         padding: 18px;
    }
     .reasons-grid{
         grid-template-columns: 1fr;
    }
     .pillars-grid, .numbered-grid, .pathway-grid{
         grid-template-columns: 1fr;
    }
     .panel-filters{
         justify-content: flex-start;
         overflow-x: auto;
         flex-wrap: nowrap;
         padding-bottom: 6px;
         -webkit-overflow-scrolling: touch;
    }
     .panel-filters .filter-pill{
         flex: 0 0 auto;
    }
}
@media (max-width: 640px){
     .field-row{
         grid-template-columns: 1fr;
         gap: 0;
    }
     .button-row{
         flex-direction: column;
         align-items: stretch;
    }
     .button-row .btn{
         justify-content: center;
    }
     .figure-row{
         gap: 10px;
    }
     .figure-pill{
         flex: 1 1 calc(50% - 5px);
         padding: 12px 16px;
    }
          .panel-option{
         grid-template-columns: 1fr auto;
         row-gap: 10px;
    }
     .panel-option-price{
         font-size: 17px;
    }
     .panel-check{
         justify-self: end;
    }
     .rating-pill{
         width: 100%;
         justify-content: flex-start;
    }
     .location-map iframe, .location-map-empty{
         height: 200px;
    }
}
@media (max-width: 520px){
     .contact-intro h1{
         font-size: 29px;
    }
     .about-intro h1, .derm-intro h1, .health-intro h1{
         font-size: 28px;
    }
     .mission-panel blockquote p{
         font-size: 20px;
    }
     .numbered-badge{
         position: static;
         display: inline-block;
         margin-bottom: 12px;
    }
     .summary-total strong{
         font-size: 24px;
    }
}

/* Service pages and the assessment packages block. */

@media (max-width: 1180px){
     .page-intro-text h1{
         font-size: 42px;
    }
     .feature-grid-4{
         grid-template-columns: repeat(2, 1fr);
    }
     .steps-grid{
         grid-template-columns: repeat(2, 1fr);
    }
     .package-included{
         grid-template-columns: 1fr;
    }
}
@media (max-width: 1080px){
     .page-intro-grid{
         grid-template-columns: 1fr;
         gap: 34px;
    }
     .page-intro-media{
         order: -1;
    }
     .page-intro-text h1, .page-intro-text > p{
         max-width: none;
    }
     .page-intro-text > p{
         font-size: 18px;
    }
     .section-head-left{
         max-width: none;
    }
     .feature-grid-3{
         grid-template-columns: repeat(2, 1fr);
    }
     .option-grid{
         grid-template-columns: 1fr;
    }
     .package-grid{
         grid-template-columns: 1fr;
    }
     .feature-card > p, .feature-list li, .step-card p, .benefit-card p, .option-card p{
         font-size: 16px;
    }
}
@media (max-width: 860px){
     .page-intro{
         padding: 30px 0 44px;
    }
     .page-intro-text h1{
         font-size: 32px;
    }
     .intro-ticks{
         gap: 8px 18px;
         margin-top: 20px;
    }
     .features-section, .steps-section, .benefits-section, .options-section, .packages-section{
         padding: 0 0 46px;
    }
     .feature-card{
         padding: 24px 22px 26px;
    }
     .benefit-grid{
         grid-template-columns: 1fr;
    }
     .package-tabs{
         justify-content: flex-start;
         overflow-x: auto;
         flex-wrap: nowrap;
         padding-bottom: 6px;
         -webkit-overflow-scrolling: touch;
    }
     .package-tabs .filter-pill{
         flex: 0 0 auto;
    }
     .package-main, .package-side{
         padding: 24px 20px 26px;
    }
     .package-main h3{
         font-size: 23px;
    }
     .package-price strong{
         font-size: 30px;
    }
	     .panels-section .section-head h2{
         font-size: 30px;
    }
}
@media (max-width: 640px){
     .feature-grid-2, .feature-grid-3, .feature-grid-4, .steps-grid{
         grid-template-columns: 1fr;
    }
     .option-badge, .numbered-badge{
         position: static;
         display: inline-block;
         margin-bottom: 12px;
    }
     .addon-row{
         grid-template-columns: 20px 1fr;
         row-gap: 6px;
    }
     .addon-price{
         grid-column: 2;
    }
     .package-total-value{
         font-size: 24px;
    }
}
@media (max-width: 520px){
     .page-intro-text h1{
         font-size: 28px;
    }
     .intro-ticks li{
         font-size: 13.5px;
    }
     .benefit-card, .feature-card{
         padding: 22px 18px 24px;
    }
}

@media (max-width: 768px){
    /* Feature card rows stack on small screens */
 .feature-row{
     grid-template-columns: 30px 1fr;
     gap: 0 12px;
}
 .feature-row-copy{
     grid-column: 2;
     margin-top: 6px;
}
}