/* =====================================================================
   Fineotex Water Solutions - mobile & tablet layer
   ---------------------------------------------------------------------
   Every layout rule in this file lives inside a max-width: 991.98px
   media query, so desktop (992px and up) renders exactly as before.
   The only rules outside a media query target elements this file /
   mobile.js introduce (.fx-dots, the sidebar), and they are hidden on
   desktop.
   ===================================================================== */

/* Elements that only exist for mobile: never shown on desktop */
.fx-dots { display: none; }

@media (min-width: 992px) {
  .fx-offcanvas,
  .fx-offcanvas-overlay { display: none !important; }
}

@media (max-width: 991.98px) {

  :root {
    --fx-gutter: 20px;          /* page side padding */
    --fx-gap: 14px;             /* gap between carousel cards */
    --fx-slide: 84%;            /* card width on phones (next card peeks) */
  }

  html.fx-menu-open,
  html.fx-menu-open body { overflow: hidden; }

  /* ---------- Global spacing ---------- */
  .container {
    padding-left: var(--fx-gutter);
    padding-right: var(--fx-gutter);
  }

  .section-padding {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .sec_title {
    font-size: clamp(28px, 6.4vw, 40px);
    line-height: 1.14;
  }

  .sec_desc,
  .discption {
    font-size: 16px;
    line-height: 1.6;
  }

  .section_heading .discption { margin-top: 12px; margin-bottom: 0; }

  /* ---------- Header ---------- */
  .pxn-header .container-fluid {
    padding-left: var(--fx-gutter);
    padding-right: var(--fx-gutter);
  }

  .pxn_header_main { padding: 12px 0; }

  .pxn_header_main_wrap {
    flex-wrap: nowrap !important;
    gap: 14px;
  }

  .pxn_site_logo {
    max-width: 200px;
    flex: 0 1 auto;
  }

  .pxn_header_right { margin-left: auto; }

  .pxn_offcanvas_toggle {
    padding: 6px 0;
    cursor: pointer;
  }

  .pxn_offcanvas_toggle .icon { font-size: 30px; }

  /* ---------- Sidebar menu ---------- */
  .fx-offcanvas.pxn_offcanvas {
    width: min(86vw, 380px);
    max-width: none;
    transform: translateX(105%);
    transition: transform .45s cubic-bezier(.2, .8, .2, 1);
    box-shadow: -24px 0 60px rgba(4, 18, 24, .35);
    z-index: 1001;
  }

  .fx-offcanvas.pxn_offcanvas.opened { transform: translateX(0); }

  .fx-offcanvas .offcanvas_bg {
    background-color: #0B2530;
    background-image:
      radial-gradient(circle at 100% 0%, rgba(79, 199, 187, .18), transparent 55%),
      radial-gradient(circle at 0% 100%, rgba(18, 54, 70, .9), transparent 60%);
  }

  .fx-offcanvas .offcanvas_wrapper {
    display: flex;
    flex-direction: column;
    padding: 18px var(--fx-gutter) 28px;
  }

  .fx-offcanvas .offcanvas_top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(238, 241, 237, .14);
  }

  .fx-offcanvas .offcanvas_logo .logo { max-width: 170px; }

  .fx-offcanvas .offcanvas_close {
    width: 42px;
    height: 42px;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(238, 241, 237, .22);
    color: #EEF1ED;
    cursor: pointer;
  }

  .fx-offcanvas .offcanvas_close .icon { font-size: 18px; }

  .fx-offcanvas .pxn_offcanvas_menu {
    margin: 26px 0 0;
  }

  .fx-offcanvas .pxn_offcanvas_menu .mean-nav ul:not(.sub-menu) > li:not(:last-child) {
    margin-bottom: 0;
  }

  .fx-offcanvas .pxn_offcanvas_menu .mean-nav ul:not(.sub-menu) > li > a:not(.mean-expand) {
    display: block;
    color: #EEF1ED;
    font-size: 20px;
    text-transform: none;
    letter-spacing: -.01em;
    padding: 15px;
    border-bottom: 1px solid rgba(238, 241, 237, .1);
  }

  .fx-offcanvas .pxn_offcanvas_menu .mean-nav ul:not(.sub-menu) > li.current-menu-ancestor > a:not(.mean-expand) {
    color: #4FC7BB;
  }

  .fx-offcanvas .fx-offcanvas-cta {
    margin-top: 28px;
    width: 100%;
    justify-content: space-between;
  }

  .fx-offcanvas .offcanvas_socials {
    margin-top: auto;
    padding-top: 28px;
  }

  .fx-offcanvas .offcanvas_socials .label {
    display: block;
    font-size: 13px;
    color: rgba(238, 241, 237, .6);
    margin-bottom: 10px;
  }

  .fx-offcanvas-overlay.pxn_offcanvas_overlay {
    transform: none;
    opacity: 0;
    visibility: hidden;
    background: rgba(6, 20, 26, .55);
    backdrop-filter: blur(4px);
    transition: opacity .35s ease, visibility .35s ease;
    z-index: 1000;
  }

  .fx-offcanvas-overlay.pxn_offcanvas_overlay.opened {
    transform: none;
    opacity: 1;
    visibility: visible;
  }

  /* ---------- Hero banner ----------
     First screen = the water, with the text and buttons resting at its
     foot. The circle diagram follows below. */
  .hero {
    min-height: 0;
    background-color: #0B2530;
  }

  .hero #water-bg {
    bottom: auto;
    height: 100vh;
    height: 100svh;
  }

  .hero .overlay {
    background: linear-gradient(180deg,
      rgba(11, 37, 48, .12) 0,
      rgba(11, 37, 48, .04) 30vh,
      rgba(11, 37, 48, .5) 62vh,
      rgba(11, 37, 48, .9) 92vh,
      #0B2530 100vh,
      #0B2530 100%);
  }

  .hero .main {
    min-height: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 0 var(--fx-gutter) 48px;
  }

  .hero .copy {
    max-width: 620px;
    min-height: 100vh;
    min-height: 56svh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 96px 0 30px;
  }

  .hero .eyebrow {
    font-size: 12px;
    letter-spacing: .16em;
    margin-bottom: 16px;
    color: rgba(238, 241, 237, .8);
  }

  .hero .eyebrow::before { width: 28px; flex: none; }

  .hero .main h1 { font-size: clamp(38px, 10vw, 60px); }

  .hero .lede {
    font-size: 14.5px;
    margin-top: 14px;
  }

  .hero .actions {
    margin-top: 20px;
    gap: 8px;
    flex-wrap: wrap;
  }

  .hero .actions .btn {
    font-size: 14px;
    padding: 10px 16px;
    gap: 8px;
    white-space: nowrap;
    justify-content: center;
  }

  /* circle diagram: same artwork, positions recalculated as % of the box */
  .hero .process-section {
    width: 100%;
    min-height: 0;
    padding: 28px 0 0;
    overflow: visible;
  }

  .hero .process-wrapper {
    --pw: min(420px, calc(100vw - 2 * var(--fx-gutter)));
    --icon: calc(var(--pw) * .16);
    width: var(--pw);
    height: var(--pw);
    max-width: none;
    max-height: none;
    margin: 0 auto;
  }

  .hero .center-content {
    width: calc(var(--pw) * .37);
    height: calc(var(--pw) * .37);
  }

  .hero .center-circle { padding: calc(var(--pw) * .05); }

  .hero .center-text {
    font-size: calc(var(--pw) * .047);
    max-width: 85%;
  }

  .hero .icon-circle,
  .hero .icon-depth {
    width: var(--icon);
    height: var(--icon);
  }

  .hero .icon-circle::before {
    width: 40%;
    height: 14%;
    top: 11%;
    left: 20%;
  }

  .hero .icon-circle svg {
    width: 54%;
    height: 54%;
  }

  .hero .process-item { width: calc(var(--icon) + 44px); }

  .hero .process-label {
    top: calc(var(--icon) + 10px);
    font-size: 11px;
    letter-spacing: .1em;
  }

  .hero .item-intake  { left: calc(var(--pw) * .5    - var(--icon) / 2 - 22px); top: calc(var(--pw) * .1613 - var(--icon) / 2); }
  .hero .item-treat   { left: calc(var(--pw) * .8221 - var(--icon) / 2 - 22px); top: calc(var(--pw) * .3953 - var(--icon) / 2); }
  .hero .item-use     { left: calc(var(--pw) * .6991 - var(--icon) / 2 - 22px); top: calc(var(--pw) * .774  - var(--icon) / 2); }
  .hero .item-recover { left: calc(var(--pw) * .3009 - var(--icon) / 2 - 22px); top: calc(var(--pw) * .774  - var(--icon) / 2); }
  .hero .item-reuse   { left: calc(var(--pw) * .1779 - var(--icon) / 2 - 22px); top: calc(var(--pw) * .3953 - var(--icon) / 2); }

  /* ---------- Swipe carousels (shared) ---------- */
  .pxn-h1_projects_wrap.grid,
  .water-section .dashboard,
  .pxn-h3_projects,
  .pxn-h1_we_offer_wrapper .we_offer_features,
  .pxn-drop-section .drop_steps,
  .pxn-h2_services,
  .pxn-h1_why_choose_wrapper .why_choose_features {
    position: relative;
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: var(--fx-gap);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--fx-gutter);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 calc(var(--fx-gutter) * -1);
    padding: 4px var(--fx-gutter) 8px;
  }

  .pxn-h1_projects_wrap.grid::-webkit-scrollbar,
  .water-section .dashboard::-webkit-scrollbar,
  .pxn-h3_projects::-webkit-scrollbar,
  .pxn-h1_we_offer_wrapper .we_offer_features::-webkit-scrollbar,
  .pxn-drop-section .drop_steps::-webkit-scrollbar,
  .pxn-h2_services::-webkit-scrollbar,
  .pxn-h1_why_choose_wrapper .why_choose_features::-webkit-scrollbar { display: none; }

  .pxn-h1_projects_wrap .grid-item,
  .water-section .dashboard > .card,
  .pxn-h3_projects > .pxn-h3_project_item,
  .pxn-h1_we_offer_wrapper .we_offer_features > .pxn-h1_offer_box,
  .pxn-drop-section .drop_steps > .drop_step,
  .pxn-h2_services > .pxn_service_item,
  .pxn-h1_why_choose_wrapper .why_choose_features > .pxn-h1_feature_box {
    flex: 0 0 var(--fx-slide);
    max-width: none;
    min-width: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  /* pagination dots injected by mobile.js */
  .fx-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
  }

  .fx-dots[hidden] { display: none; }

  .fx-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(11, 37, 48, .22);
    transition: width .3s ease, background-color .3s ease;
    cursor: pointer;
  }

  .fx-dot.is-active {
    width: 24px;
    background: #4FC7BB;
  }

  .fx-dots--light .fx-dot { background: rgba(238, 241, 237, .3); }
  .fx-dots--light .fx-dot.is-active { background: #4FC7BB; }

  /* ---------- 1. Data centers / Semiconductors ---------- */
  .pxn-h1_projects_wrap.grid {
    height: auto !important;          /* undo Masonry's inline height */
  }

  .pxn-h1_projects_wrap .grid-sizer,
  .pxn-h1_projects_wrap .gutter-sizer { display: none; }

  .pxn-h1_projects_wrap .grid-item {
    position: relative !important;    /* undo Masonry's inline positions */
    left: auto !important;
    top: auto !important;
    float: none;
    padding: 0;
  }

  .pxn-h1_project_item_inner { width: 100%; }

  .pxn-h1_project_item .project_img img {
    aspect-ratio: 5 / 4.4;
    object-fit: cover;
  }

  .pxn-h1_project_item .project_content {
    padding: 14px 18px 14px 16px;
    min-width: 0;
    max-width: 88%;
  }

  .pxn-h1_project_item .project_content .project_title { font-size: 20px; }

  .pxn-h1_project_item .project_content .project_cat { margin-bottom: 0; }

  .pxn-h1_project_item .project_content .project_cat > .category { font-size: 14px; }

  /* ---------- 2. Monitoring dashboard ---------- */
  .container-fluid.water-bg {
    padding-left: 0;
    padding-right: 0;
  }

  .water-section {
    padding: 60px var(--fx-gutter) 56px;
    min-height: 0;
  }

  .water-section .layout { gap: 28px; }

  .water-section .eyebrow {
    font-size: 12px;
    letter-spacing: .14em;
    margin-bottom: 12px;
  }

  .water-section h1 {
    font-size: clamp(28px, 6.4vw, 40px);
    line-height: 1.15;
  }

  .water-section .copy p.description {
    font-size: 16px;
    line-height: 1.65;
    margin: 14px 0 12px;
  }

  .water-section .status {
    font-size: 12px;
    letter-spacing: .08em;
    gap: 8px;
  }

  .water-section .dashboard {
    border: 0;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
  }

  .water-section .dashboard > .card {
    --fx-slide: 78%;
    border: 1px solid rgba(180, 220, 222, .2) !important;
    border-radius: 12px;
    background: rgba(10, 42, 53, .78);
    padding: 16px 16px 12px;
  }

  /* ---------- 3. Systems / Mobile / Chemistry ---------- */
  .pxn-h3-projects-section { padding-top: 64px; }

  .pxn-h3_projects_wrap .section_heading { margin-bottom: 28px; }

  .pxn-h3_project_item .project_img img {
    aspect-ratio: 4 / 4.6;
    object-fit: cover;
  }

  .pxn-h3_project_item .project_content .project_title { font-size: 19px; }

  /* ---------- 4. What we bring to site ---------- */
  .pxn-h1_we_offer_wrapper .section_heading {
    margin-bottom: 28px;
    gap: 12px;
  }

  .pxn-h1_offer_box .offer_title { font-size: 21px; }

  .pxn-h1_offer_box .offer_desc { font-size: 15px; }

  .pxn-h1_offer_box.middle .offer_content,
  .pxn-h1_offer_box .offer_content { padding: 18px 20px 22px; }

  .pxn-h1_offer_box .offer_content .offer_no {
    font-size: 36px;
    margin-top: 12px;
  }

  .pxn-h1_offer_box .offer_icon {
    width: 64px;
    height: 64px;
    font-size: 34px;
  }

  /* ---------- 5. Every drop has more than one life ---------- */
  .pxn-drop-section { padding: 64px 0 56px; }

  .pxn-drop-section .drop_wrapper { gap: 26px; }

  .pxn-drop-section .drop_sticky_inner { gap: 22px; }

  .pxn-drop-section .sec_title {
    font-size: clamp(28px, 6.4vw, 40px);
    line-height: 1.12;
  }

  .pxn-drop-section .sec_desc { font-size: 16px; }

  .pxn-drop-section .drop_loop { width: min(100%, 340px); }

  .pxn-drop-section .drop_steps { padding-bottom: 8px; }

  .pxn-drop-section .drop_steps > .drop_step {
    min-height: 0;
    padding: 0;
    gap: 0;
    border-left: 0;
    transform: none;
    opacity: .55;
    transition: opacity .35s ease;
  }

  .pxn-drop-section .drop_steps > .drop_step.is-active { opacity: 1; }

  .pxn-drop-section .drop_step::before { display: none; }

  .pxn-drop-section .drop_step .pxn_faq_cta { height: 100%; }

  .pxn-drop-section .drop_step .cta_img img {
    aspect-ratio: 5 / 4.6;
    object-fit: cover;
  }

  .pxn-drop-section .drop_step .cta_content { padding: 20px; }

  .pxn-drop-section .drop_step_head { gap: 12px; }

  .pxn-drop-section .drop_step_ico {
    width: 44px;
    height: 44px;
  }

  .pxn-drop-section .drop_step_ico svg {
    width: 20px;
    height: 20px;
  }

  .pxn-drop-section .drop_step h3 { font-size: 26px; }

  .pxn-drop-section .drop_step p {
    font-size: 15px;
    line-height: 1.55;
    margin: 10px 0 0;
  }

  /* ---------- 6. Program results (stats as a 2 x 2 grid) ---------- */
  .pxn-h2-counter-section {
    display: block;
    min-height: 0;
    padding: 60px 0 40px;
  }

  .pxn-h2-counter-section .container-fluid {
    padding-left: var(--fx-gutter);
    padding-right: var(--fx-gutter);
  }

  .pxn-h2-counter-section .pxn-h2_services_wrap1 {
    position: static;
    margin-bottom: 28px;
  }

  /* soft glow keeps the dark heading readable over the photo */
  .pxn-h2-counter-section .pxn-h2_services_wrap1 .sec_title,
  .pxn-h2-counter-section .pxn-h2_services_wrap1 p {
    text-shadow: 0 0 18px rgba(255, 255, 255, .85), 0 0 3px rgba(255, 255, 255, .6);
  }

  .pxn-h2-counter-section .pxn-h2_services_wrap1 p {
    font-size: 16px;
    line-height: 1.55;
    margin: 12px 0 0;
  }

  .pxn-h2-counter-section .bg_img::after {
    background-image: linear-gradient(180deg, rgba(6, 61, 47, 0) 30%, rgba(12, 33, 28, .82) 68%);
  }

  .pxn-h2_counters_wrap {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }

  .pxn_counter_2 {
    flex-direction: column-reverse;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px;
    height: 100%;
  }

  .pxn_counter_2 .count { font-size: 34px; }

  .pxn_counter_2 .title {
    font-size: 13px;
    line-height: 1.35;
    align-items: flex-start;
  }

  .pxn_counter_2 .title::before {
    flex: none;
    margin-top: 4px;
  }

  /* ---------- 7. Built for data centers and fabs ---------- */
  .pxn-h2-services-section .left_shape { display: none; }

  .pxn-h2_services_wrap .section_heading { margin-bottom: 28px; }

  .pxn-h2_services_wrap .section_heading p {
    font-size: 16px;
    margin: 12px 0 0;
  }

  .pxn_service_item {
    display: flex;
    flex-direction: column;
    padding: 24px 22px;
  }

  .pxn_service_item .service_content {
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .pxn_service_item .service_header { margin-bottom: 18px; }

  .pxn_service_item .service_icon {
    width: 60px;
    height: 60px;
    font-size: 30px;
  }

  .pxn_service_item .service_title { font-size: 21px; }

  .pxn_service_item .service_excerpt {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 20px;
  }

  .pxn_service_item .service_btn {
    margin-top: auto;
    font-size: 15px;
    padding: 6px 6px 6px 16px;
    gap: 12px;
  }

  /* wrapped labels clashed with the hover "roll" duplicate - keep them static */
  .pxn_service_item .service_btn .btn_text > span {
    text-shadow: none;
    transform: none !important;
    text-align: left;
  }

  .pxn_service_item .service_btn .btn_icon { flex: none; }

  /* ---------- 8. Why run it through one program ---------- */
  .pxn-h1-why-choose-section { padding: 64px 0 60px; }

  .pxn-h1_why_choose_wrapper .section_heading {
    margin-bottom: 28px;
    gap: 12px;
  }

  .pxn-h1_why_choose_wrapper .feature_bg_img { display: none; }

  .pxn-h1_why_choose_wrapper .why_choose_features > .pxn-h1_feature_box,
  .pxn-h1_why_choose_wrapper .why_choose_features > .pxn-h1_feature_box.right {
    padding: 22px 20px;
    border-radius: 12px;
    border: 1px solid rgba(238, 241, 237, .1);
    background-image: linear-gradient(155deg, #1f5044 0%, #123646 100%);
  }

  .pxn-h1_feature_box .feature_box_head,
  .pxn-h1_feature_box.right .feature_box_head {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
  }

  .pxn-h1_feature_box .feature_box_head .feature_title {
    width: auto;
    flex: 1;
    font-size: 20px;
  }

  .pxn-h1_feature_box .feature_icon {
    flex: none;
    width: 56px;
    height: 56px;
    font-size: 28px;
  }

  .pxn-h1_feature_box .feature_desc {
    font-size: 15px;
    line-height: 1.6;
    margin-top: 14px;
  }

  /* ---------- 9. Contact ---------- */
  .pxn-h1_contact_wrap { row-gap: 32px; }

  .pxn_contact_form .section_heading { margin-bottom: 24px; }

  .pxn_contact_img {
    max-width: 100%;
    padding-right: 0;
  }

  .pxn_contact_img .contact_img_bg { display: none; }

  .pxn_contact_img img:not(.img_top) { aspect-ratio: 16 / 9; }

  /* ---------- 10. Footer ---------- */
  .pxn-footer .footer_widgets_wrap .footer_info_widget { margin-bottom: 8px; }

  .pxn-footer .footer_widgets_wrap .footer_widgets_inner {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px 18px;
    padding: 32px 0 36px 24px;
  }

  .pxn-footer .footer_widgets_wrap .footer_contact_info { max-width: none; }

  .pxn-footer .footer_bottom { padding: 22px 0; }
}

/* ---------- Tablets (576 - 991): two cards per view ---------- */
@media (min-width: 576px) and (max-width: 991.98px) {
  :root {
    --fx-gutter: 32px;
    --fx-slide: calc(50% - 7px);
  }

  .water-section .dashboard > .card { --fx-slide: calc(50% - 7px); }

  /* only two cards here, so a plain 2-column grid fits without swiping */
  .pxn-h1_projects_wrap.grid,
  .pxn-h2_services {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
    margin: 0;
    padding: 0;
  }

  .pxn-h1_projects_wrap .grid-item,
  .pxn-h2_services > .pxn_service_item { width: auto; }

  .hero .actions .btn {
    font-size: 15px;
    padding: 11px 20px;
  }

  /* four stages: keep one stage per swipe so each can become active */
  .pxn-drop-section .drop_steps > .drop_step { --fx-slide: 62%; }
}

@media (max-width: 767.98px) {
  .pxn-h2_counters_wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Phones ---------- */
@media (max-width: 575.98px) {
  .section-padding {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .pxn_site_logo { max-width: 168px; }

  .pxn_offcanvas_toggle .text { font-size: 15px; }

  .hero .process-wrapper { --pw: min(420px, calc(100vw - 2 * var(--fx-gutter))); }

  .pxn_counter_2 .count { font-size: 30px; }

  /* the large team photo adds a full screen of scrolling on phones */
  .pxn_contact_img { display: none; }

  .pxn-footer .footer_widgets_wrap .footer_widgets_inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 28px 0 32px 18px;
  }

  .pxn-footer .footer_widgets_wrap .footer_contact_info { grid-column: 1 / -1; }
}