/* ==========================================================================
   Mobile / tablet performance + layout
   Native scroll, cheaper paint, no horizontal spill, usable touch targets.
   ========================================================================== */

html.oet-live-site{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body.oet-live-site,
html.oet-live-site{
  overflow-x:clip;
  max-width:100%;
}

@supports not (overflow-x:clip){
  body.oet-live-site,
  html.oet-live-site{overflow-x:hidden}
}

body.oet-live-site img,
body.oet-live-site video,
body.oet-live-site canvas,
body.oet-live-site iframe{
  max-width:100%;
}

body.oet-live-site svg:not(.vl-offcanvas-toggle svg){
  max-width:100%;
}

body.oet-live-site table{
  max-width:100%;
}

html.oet-lite-motion [data-sal],
html.oet-lite-motion [data-sal|=fade],
html.oet-lite-motion [data-sal|=slide],
html.oet-lite-motion [data-sal|=zoom],
html.oet-lite-motion [data-sal|=flip],
body.sal-disabled [data-sal],
body.sal-disabled [data-sal|=slide]{
  opacity:1!important;
  transform:none!important;
  filter:none!important;
  transition:none!important;
  animation:none!important;
}


/* ---- Touch / narrow: kill expensive motion and paint ---- */
@media (max-width:1023.98px), (pointer:coarse), (hover:none){
  html.oet-live-site{scroll-behavior:auto}

  [data-sal],
  [data-sal|=fade],
  [data-sal|=slide],
  [data-sal|=zoom],
  [data-sal|=flip],
  [data-sal].sal-animate{
    opacity:1!important;
    transform:none!important;
    filter:none!important;
    transition:none!important;
    animation:none!important;
  }

  .aniamtion-key-4,
  .aniamtion-key-5,
  .circle,
  .text-anime-style-2,
  .text-anime-style-3,
  .image-anime,
  .image-anime img,
  .pathway-hero .pathway-map:before{
    animation:none!important;
    transform:none!important;
  }

  .pathway-card:hover,
  .pathway-faq details:hover,
  .pathway-map-step:hover,
  .brand-badge:hover{
    transform:none;
  }

  #vl-header-sticky.sticky .vl-header-main-area,
  .oet-community-popup__overlay,
  .oet-promo-popup__overlay,
  .oet-promo-popup__pagination,
  .oet-cc,
  .oet-pricing-hero-slider,
  .oet-mobile-ctabar{
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }

  .oet-promo-popup__dialog,
  .oet-promo-popup__swiper,
  .oet-promo-popup__image,
  .oet-contact-widget__label,
  .oet-contact-widget__button,
  .oet-contact-widget__badge{
    will-change:auto!important;
  }

  .oet-promo-popup__close,
  .oet-promo-popup__nav,
  .oet-promo-popup__cta,
  body.oet-live-site .oet-contact-widget:not(.is-open) .oet-contact-widget__label,
  body.oet-live-site .oet-contact-widget:not(.is-open) .oet-contact-widget__button:before,
  body.oet-live-site .oet-contact-widget__badge.is-teaser{
    animation:none!important;
  }

  .vl-hero-shape-2,
  .vl-hero-shape-3,
  .vl-hero-shape-4,
  .vl-hero-shape-1{
    display:none!important;
  }
}

/* ---- Tablet and down ---- */
@media (max-width:1199.98px){
  #vl-header-sticky{
    padding-top:env(safe-area-inset-top);
  }

  #vl-header-sticky .header-border-bottom>.row{
    display:flex!important;
    align-items:center;
    justify-content:space-between;
    flex-wrap:nowrap;
  }

  #vl-header-sticky .header-border-bottom>.row>[class*="col-"]{
    width:auto;
    max-width:none;
    flex:0 0 auto;
    padding-left:0;
    padding-right:0;
  }

  #vl-header-sticky .vl-header-action-item{
    display:flex!important;
    justify-content:flex-end;
    position:static;
    float:none!important;
    transform:none!important;
    margin:0;
    background:transparent;
    z-index:6;
  }

  #vl-header-sticky .vl-header-action-item.d-xl-none,
  #vl-header-sticky .vl-offcanvas-toggle{
    display:inline-flex!important;
  }

  #vl-header-sticky .vl-offcanvas-toggle{
    position:relative;
    min-width:44px;
    min-height:44px;
    width:44px;
    height:44px;
    padding:0;
    align-items:center;
    justify-content:center;
    color:#111329;
    background:#fff!important;
    border:1px solid rgba(95,70,245,.18)!important;
    border-radius:10px;
    box-shadow:none;
  }

  #vl-header-sticky .vl-offcanvas-toggle svg{
    display:none!important;
  }

  #vl-header-sticky .vl-offcanvas-toggle:before{
    content:"";
    display:block;
    width:18px;
    height:2px;
    border-radius:2px;
    background:#111329;
    box-shadow:0 -6px 0 #111329,0 6px 0 #111329;
  }

  .vl-offcanvas{
    width:min(420px,100vw);
    max-width:100%;
    padding:28px 20px calc(28px + env(safe-area-inset-bottom));
    z-index:10050;
    -webkit-overflow-scrolling:touch;
  }

  .vl-offcanvas-overlay,
  .vl-offcanvas-overlay-open{
    z-index:10040;
  }

  .vl-offcanvas-menu nav a,
  .vl-offcanvas-info a{
    min-height:44px;
    display:flex;
    align-items:center;
    white-space:normal;
    gap:8px;
  }

  .vl-offcanvas-menu .sub-menu,
  .vl-offcanvas-menu .vl-mega-menu{
    position:static!important;
    left:auto!important;
    top:auto!important;
    transform:none!important;
    min-width:0!important;
    width:100%!important;
    max-width:100%!important;
    box-shadow:none!important;
    border:0!important;
    border-radius:0!important;
    padding:0 0 0 8px!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    background:transparent!important;
  }

  .vl-offcanvas-menu ul li.has-dropdown{
    display:grid;
    grid-template-columns:minmax(0,1fr) 36px;
    align-items:center;
    column-gap:8px;
  }
  .vl-offcanvas-menu .vl-menu-close{
    position:static;
    top:auto;
    transform:none;
    width:36px;
    height:36px;
    min-width:36px;
    min-height:36px;
  }

  .vl-banner-area,
  .hero-banner-lavender.vl-banner-area,
  .hero-banner-lavender{
    padding-top:84px!important;
    padding-bottom:28px!important;
    overflow:hidden;
  }

  .hero-banner-lavender .title,
  .banner-area-content-1 .title{
    font-size:clamp(1.55rem,6.6vw,2.15rem)!important;
    line-height:1.18!important;
    letter-spacing:-.02em;
    overflow-wrap:break-word!important;
    word-break:normal!important;
    word-wrap:break-word!important;
    hyphens:manual;
    max-width:100%;
  }

  .hero-banner-lavender .sub-title,
  .banner-area-content-1 .sub-title{
    font-size:13.5px!important;
    line-height:1.45!important;
    white-space:normal!important;
    overflow-wrap:break-word!important;
    word-break:normal!important;
    max-width:100%;
    overflow:visible;
  }

  .hero-banner-lavender .para,
  .banner-area-content-1 p,
  .vl-section-title p,
  .vl-section-title .para{
    font-size:16px!important;
    line-height:1.6!important;
    overflow-wrap:break-word!important;
    word-break:normal!important;
    max-width:100%;
  }

  .vl-offcanvas-toggle{
    color:#111329;
  }

  .vl-offcanvas-toggle svg{
    display:block;
    overflow:visible;
  }

  .vl-hero-btn .vl-primary-btn{
    min-height:48px;
    padding:12px 20px;
    width:100%;
    max-width:360px;
    justify-content:center;
  }

  footer.vl-footer-10{
    padding-top:88px;
  }

  .pathway-hero{
    padding:120px 0 56px;
  }

  .oet-resource-hero{
    padding:110px 0 56px;
  }
}

/* ---- Phone ---- */
@media (max-width:767.98px){
  .container,
  .container-fluid{
    padding-left:max(16px,env(safe-area-inset-left));
    padding-right:max(16px,env(safe-area-inset-right));
  }

  .pt-100{padding-top:56px!important}
  .pb-100{padding-bottom:56px!important}
  .pt-70{padding-top:44px!important}
  .pb-70{padding-bottom:44px!important}
  .mb-50{margin-bottom:28px!important}
  .mb-40{margin-bottom:24px!important}
  .mb-30{margin-bottom:18px!important}

  .vl-offcanvas{
    width:100%;
    padding:20px 16px calc(20px + env(safe-area-inset-bottom));
  }

  .vl-offcanvas-header{
    margin-bottom:24px!important;
  }

  .brand-area{
    padding-top:8px;
    padding-bottom:8px;
  }

  .brand__thumb{
    height:auto!important;
    width:min(280px,86vw)!important;
  }

  .brand-badge{
    flex-direction:row!important;
    align-items:center!important;
    gap:12px!important;
    min-height:88px;
    height:auto!important;
    padding:12px 14px!important;
  }

  .brand-badge__icon{
    flex:0 0 44px!important;
    width:44px!important;
    height:44px!important;
    font-size:18px!important;
  }

  .brand-badge__title,
  .brand-badge__sub{
    white-space:normal;
    overflow:visible;
  }

  .hero-banner-lavender .vl-banner-card-1,
  .hero-banner-lavender .vl-banner-card-2,
  .hero-banner-lavender .vl-hero-shape-2,
  .hero-banner-lavender .vl-hero-shape-3,
  .hero-banner-lavender .vl-hero-shape-4{
    display:none!important;
  }

  body.oet-live-site .hero-banner-lavender .vl-banner-thumb-1{
    overflow:visible;
    margin-inline:auto;
    position:relative!important;
    inset:auto!important;
    height:auto!important;
  }

  body.oet-live-site .hero-banner-lavender .vl-banner-thumb-1 picture,
  body.oet-live-site .hero-banner-lavender .vl-banner-thumb-1 img.oet-hero-doctor{
    width:min(78vw,300px);
    max-width:100%;
    height:auto;
    position:relative!important;
    inset:auto!important;
    display:block;
    margin-inline:auto;
  }

  .oet-community-popup{
    padding:0;
    align-items:stretch;
  }

  .oet-community-popup__dialog{
    width:100%;
    max-width:100%;
    max-height:100dvh;
    border-radius:20px 20px 0 0;
    margin-top:auto;
  }

  .oet-community-popup__body{
    max-height:min(92dvh,100dvh);
    padding:22px 16px calc(22px + env(safe-area-inset-bottom));
  }

  .oet-community-popup__title{
    font-size:clamp(1.5rem,7vw,2rem);
  }

  .oet-promo-popup{
    padding:18px 14px;
    align-items:center;
    justify-content:center;
  }

  .oet-promo-popup__dialog{
    width:min(100%, 620px);
    max-width:100%;
    max-height:min(86dvh,760px);
    border-radius:24px;
  }

  .oet-promo-popup__swiper{
    height:min(58dvh,420px)!important;
    min-height:0!important;
  }

  .oet-promo-popup__dialog::before,
  .oet-promo-popup__dialog::after{
    display:none;
  }

  body.oet-live-site .oet-contact-widget{
    right:max(12px,env(safe-area-inset-right));
    bottom:max(16px,env(safe-area-inset-bottom));
  }

  body.oet-live-site .oet-contact-widget__label{
    display:none;
  }

  body.oet-live-site .oet-contact-widget__button{
    width:56px;
    height:56px;
    box-shadow:0 10px 24px rgba(95,70,245,.32);
  }

  body.oet-live-site .oet-contact-widget__button i{
    font-size:22px;
  }

  body.oet-live-site .oet-contact-widget__panel{
    position:fixed;
    inset:auto 0 0 0;
    width:100%;
    max-width:100%;
    max-height:min(86dvh,720px);
    border-radius:22px 22px 0 0;
    bottom:0;
    right:0;
    transform:translateY(16px);
  }

  body.oet-live-site .oet-contact-widget__panel:after{
    display:none;
  }

  body.oet-live-site .oet-contact-widget.is-open .oet-contact-widget__panel{
    transform:none;
  }

  body.oet-live-site .oet-contact-widget__close{
    min-width:44px;
    min-height:44px;
  }

  .oet-cc{
    inset:auto 10px max(10px,env(safe-area-inset-bottom))!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }

  .oet-cc-actions,
  .oet-cc .oet-cc-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
  }

  .oet-cc button{
    min-height:44px!important;
    width:100%;
  }

  .success-hero{
    padding:108px 0 32px;
  }

  .success-tabs-wrap{
    top:64px;
    z-index:20;
  }

  .success-lightbox{
    padding:12px;
    align-items:flex-end;
  }

  .success-lightbox__panel{
    max-width:100%;
    max-height:92dvh;
  }

  .oet-pricing-hero h1,
  .oet-pricing-hero .title,
  .success-hero h1,
  .about-hero h1,
  .banner-area-content-1 h1,
  .vl-section-title .title,
  .vl-section-title-10 .title{
    font-size:clamp(1.45rem,6.4vw,2rem)!important;
    line-height:1.22!important;
    overflow-wrap:break-word!important;
    word-break:normal!important;
    white-space:normal!important;
    max-width:100%;
    overflow:visible;
  }

  .oet-pricing-hero p,
  .success-hero p,
  .success-hero .lead{
    overflow-wrap:break-word!important;
    max-width:100%;
  }

  .oet-pricing-hero-swiper{
    height:min(52dvh,380px)!important;
    min-height:0!important;
  }

  .oet-pricing-hero-slider{
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    padding:8px!important;
  }

  footer.vl-footer-10{
    padding-top:64px;
    padding-bottom:24px;
  }

  /* "Get OET-Ready" CTA banner, immediately above the footer on the home/about/
     contact pages: the desktop 342px crop height is far taller than a 2:1 image
     needs at phone widths, crowding the footer below it. Let it scale by its
     real aspect ratio instead, and add clear breathing room before the footer.
     The image's rendered height grows with viewport width (locked 2:1 ratio),
     right up to the 767.98px edge of this block, so the buffer has to clear
     the tallest case in this range, not just small phones (2026-09-11 §1 fix). */
  .cta-wrap7{
    padding-bottom:260px;
  }

  .cta-large-thumb-10 img{
    height:auto;
    aspect-ratio:2/1;
  }

  .vl-footer-10 .social-area-footer-10 a{
    width:44px;
    height:44px;
    line-height:44px;
  }

  .oet-footer-btn{
    min-height:48px;
  }

  .service__box10,
  .service__box10-thumb,
  .service__box10-thumb img{
    max-width:100%;
  }

  .service__box10-thumb img{
    height:auto;
  }

  .vl-section-title .title,
  .vl-section-title-10 .title{
    font-size:clamp(1.55rem,6.4vw,2.15rem)!important;
    line-height:1.2!important;
  }

  .counterbox__single .title{
    font-size:clamp(1.8rem,8vw,2.4rem);
  }

  h1,h2,h3,p,li{
    overflow-wrap:break-word!important;
    word-break:normal!important;
    hyphens:manual;
    max-width:100%;
  }

  body:has(.oet-cc:not([hidden])){
    padding-bottom:240px;
  }

  .row{
    --bs-gutter-x:16px;
  }
}

/* ---- Small phones ---- */
@media (max-width:575.98px){
  .oet-hero-break{
    display:block;
  }
}

@media (max-width:399.98px){
  .hero-banner-lavender .title,
  .banner-area-content-1 .title{
    font-size:1.5rem!important;
  }

  #vl-header-sticky .vl-logo img{
    height:34px;
    max-width:118px;
  }
}

/* ---- Landscape phones ---- */
@media (max-width:1023.98px) and (orientation:landscape) and (max-height:500px){
  .vl-banner-area,
  .hero-banner-lavender{
    padding-top:64px!important;
    padding-bottom:16px!important;
  }

  .oet-promo-popup__swiper,
  .oet-pricing-hero-swiper{
    height:min(70dvh,280px)!important;
    min-height:0!important;
  }

  .oet-community-popup__dialog,
  .oet-promo-popup__dialog,
  body.oet-live-site .oet-contact-widget__panel{
    max-height:100dvh;
    border-radius:0;
  }
}

/* ---- Coarse pointers: larger tap targets ---- */
@media (pointer:coarse){
  a,button,input,select,textarea,.vl-offcanvas-toggle{
    touch-action:manipulation;
  }

  .oet-search-btn,
  .vl-header-action-item .vl-offcanvas-toggle,
  .oet-promo-popup__close,
  .oet-promo-popup__nav,
  .success-page-btn,
  .success-tab{
    min-width:44px;
    min-height:44px;
  }
}

@media (prefers-reduced-motion:reduce){
  .aniamtion-key-4,
  .aniamtion-key-5,
  .circle{
    animation:none!important;
  }
}