/* =====================================================================
   Fineotex America — brand layer
   Primary   #09225B  (logo navy)   — dark sections, header, headings
   Secondary #7A89FF                — accents: buttons, icon circles, active states, lines
   Red       #EB1C24                — form error messages only (no decorative red)
   main.css / mobile.css already carry this palette (template accent = secondary,
   template dark = primary). This file holds the few rules colour swapping can't express.
   Load after main.css and mobile.css on every page.
   ===================================================================== */
:root {
  --fx-primary: #09225B;
  --fx-primary-deep: #06173D;     /* deepest backgrounds (footer, dark sections) */
  --fx-secondary: #7A89FF;
  --fx-secondary-dark: #4656D8;   /* secondary for text/links on white (passes contrast) */
  --fx-red: #EB1C24;
}

/* ---------- Header: white at all times (on load and when scrolled), original-colour logo ---------- */
.pxn-header.header-absolute,
.pxn-header.header-duplicate {
  background: #fff;
  border-bottom: 1px solid rgba(9, 34, 91, .08);
  box-shadow: 0 10px 30px -20px rgba(9, 34, 91, .35);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* logo sizes: large laptop/desktop · laptop · compact laptop · tablet & small-laptop (Menu button) · phone */
.pxn_site_logo img, .footer_logo .logo img, .offcanvas_logo .logo img { width: 100%; height: auto; }
.pxn-header .pxn_site_logo { max-width: 380px; }
@media (max-width: 1199.98px) { .pxn-header .pxn_site_logo { max-width: 365px; } }
@media (max-width: 1099.98px) { .pxn-header .pxn_site_logo { max-width: 345px; } }
@media (max-width: 991.98px)  { .pxn-header .pxn_site_logo { max-width: 360px; } }
@media (max-width: 575.98px)  { .pxn-header .pxn_site_logo { max-width: 360px; } }
@media (max-width: 380px)     { .pxn-header .pxn_site_logo { max-width: 360px; } }
.pxn_footer_widget.footer_info_widget .footer_logo .logo { max-width: 270px; }
@media (max-width: 991.98px) { .fx-offcanvas .offcanvas_logo .logo { max-width: 210px; } }

/* compact desktop header so logo, menu and "Contact Us" stay on one row on smaller laptops */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .pxn-header .pxn_main_navigation > ul { column-gap: 26px; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .pxn-header .pxn_header_main_wrap { gap: 18px; }
  .pxn-header .pxn_main_navigation > ul { column-gap: 18px; }
  .pxn-header .pxn_main_navigation ul > li > a { font-size: 14.5px; }
  .pxn-header .pxn_header_btn { gap: 8px; font-size: 14.5px; padding-inline-start: 16px; }
  .pxn-header .pxn_header_btn .btn_icon { width: 34px; height: 34px; font-size: 16px; }
}

/* menu on white: navy links · hover = darker secondary + underline slides in · active = navy with full secondary underline */
.pxn-header .pxn_main_navigation ul > li > a { color: var(--fx-primary); }
.pxn-header .pxn_main_navigation ul > li > a::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; border-radius: 2px;
  background: var(--fx-secondary); transform: scaleX(0); transform-origin: left center; transition: transform .3s ease;
}
.pxn-header .pxn_main_navigation ul > li > a:hover,
.pxn-header .pxn_main_navigation ul > li > a:focus-visible { color: var(--fx-secondary-dark); }
.pxn-header .pxn_main_navigation ul > li > a:hover::before,
.pxn-header .pxn_main_navigation ul > li > a:focus-visible::before { transform: scaleX(1); }
.pxn-header .pxn_main_navigation ul > li.current-menu-ancestor > a,
.pxn-header .pxn_main_navigation ul > li.current-menu-item > a { color: var(--fx-primary); }
.pxn-header .pxn_main_navigation ul > li.current-menu-ancestor > a::before,
.pxn-header .pxn_main_navigation ul > li.current-menu-item > a::before { transform: scaleX(1); }
.pxn-header .pxn_offcanvas_toggle,
.pxn-header .pxn_offcanvas_toggle .text,
.pxn-header .pxn_offcanvas_toggle .icon { color: var(--fx-primary); }

/* "Contact Us" buttons (header + mobile menu): navy with white text, light secondary on hover */
.pxn-header .pxn_header_btn,
.fx-offcanvas .fx-offcanvas-cta { background-color: var(--fx-primary); color: #fff; }
.pxn-header .pxn_header_btn .btn_icon,
.fx-offcanvas .fx-offcanvas-cta .btn_icon { background-color: #fff; color: var(--fx-primary); }
.pxn-header .pxn_header_btn:hover, .pxn-header .pxn_header_btn:focus,
.fx-offcanvas .fx-offcanvas-cta:hover, .fx-offcanvas .fx-offcanvas-cta:focus { background-color: var(--fx-secondary); color: var(--fx-primary); }

/* ---------- Mobile menu: white panel so the original logo reads ---------- */
@media (max-width: 991.98px) {
  .fx-offcanvas .offcanvas_bg { background: #fff; }
  .fx-offcanvas .offcanvas_top { border-bottom-color: rgba(9, 34, 91, .12); }
  .fx-offcanvas .offcanvas_close { color: var(--fx-primary); border-color: rgba(9, 34, 91, .2); }
  .fx-offcanvas .pxn_offcanvas_menu .mean-nav ul:not(.sub-menu) > li > a:not(.mean-expand) { color: var(--fx-primary); border-bottom-color: rgba(9, 34, 91, .1); }
  .fx-offcanvas .pxn_offcanvas_menu .mean-nav ul:not(.sub-menu) > li > a:not(.mean-expand):hover,
  .fx-offcanvas .pxn_offcanvas_menu .mean-nav ul:not(.sub-menu) > li.current-menu-ancestor > a,
  .fx-offcanvas .pxn_offcanvas_menu .mean-nav ul:not(.sub-menu) > li.current-menu-ancestor > a:not(.mean-expand) { color: var(--fx-secondary-dark); }
  .fx-offcanvas .offcanvas_socials .label { color: #6E7487; }
  .fx-offcanvas .offcanvas_socials .social { color: var(--fx-primary); }
}

/* ---------- Footer: white brand card so the original logo reads on the navy footer ---------- */
.pxn_footer_widget.footer_info_widget { background-color: #fff; border-color: #fff; }
.pxn_footer_widget.footer_info_widget .footer_desc,
.pxn_footer_widget.footer_info_widget .footer_desc p { color: #4B5470; }
.pxn_footer_widget.footer_info_widget .footer_desc strong { color: var(--fx-primary); }

/* ---------- Hero ---------- */
#water-bg { filter: hue-rotate(38deg) saturate(1.05); }          /* teal underwater photo -> brand blue */
.hero .process-item.active .icon-circle svg { stroke: #fff; }      /* active loop icon: white on the secondary circle */

/* eyebrow lines ("Water technology…", "Intelligent monitoring concept") */
.eyebrow:before { height: 2px; background: var(--fx-secondary); }

/* =====================================================================
   Contact page (contact.html)
   ===================================================================== */
.fx-page-banner { position: relative; overflow: hidden; padding: 172px 0 76px; background: var(--fx-primary-deep); isolation: isolate; }
.fx-page-banner_bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center 60%; }
.fx-page-banner::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(9, 34, 91, .95) 0%, rgba(9, 34, 91, .78) 45%, rgba(122, 137, 255, .32) 100%); }
.fx-page-title { margin: 0; color: #fff; font-size: clamp(36px, 4.4vw, 60px); line-height: 1.05; letter-spacing: -.02em; }
.fx-page-title::after { content: ""; display: block; width: 64px; height: 4px; margin-top: 18px; border-radius: 2px; background: var(--fx-secondary); }

.fx-contact { padding: 56px 0 90px; background: #fff; }
.fx-breadcrumb { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 40px; padding: 12px 20px;
  border-radius: 10px; background: #F2F4FA; color: var(--fx-secondary-dark); font-size: 15px; font-weight: 600; }
.fx-breadcrumb a { color: var(--fx-primary); text-decoration: none; }
.fx-breadcrumb a:hover { color: var(--fx-secondary-dark); }
.fx-breadcrumb .sep { color: #9AA3BD; font-weight: 400; }

.fx-contact-intro h2 { margin: 0 0 8px; color: var(--fx-primary); font-size: clamp(28px, 2.6vw, 36px); line-height: 1.15; }
.fx-contact-intro p { margin: 0 0 28px; color: #4B5470; font-size: 17px; }

.fx-contact-form input,
.fx-contact-form textarea {
  display: block; width: 100%; padding: 16px 18px; border: 1px solid #DCE1EE; border-radius: 10px; background: #fff;
  color: var(--fx-primary); font-size: 16px; font-weight: 500; line-height: 1.4; outline: none; transition: border-color .2s, box-shadow .2s;
}
.fx-contact-form textarea { min-height: 190px; resize: vertical; }
.fx-contact-form ::placeholder { color: #3B4462; font-weight: 600; opacity: .9; }
.fx-contact-form input:focus,
.fx-contact-form textarea:focus { border-color: var(--fx-secondary); box-shadow: 0 0 0 4px rgba(122, 137, 255, .22); }
.fx-contact-form.was-validated input:invalid,
.fx-contact-form.was-validated textarea:invalid { border-color: var(--fx-red); box-shadow: 0 0 0 4px rgba(235, 28, 36, .08); }
.fx-contact-form .fx-send-btn { margin-top: 6px; border: 0; cursor: pointer; }
.fx-contact-form .fx-send-btn[disabled] { opacity: .7; cursor: wait; pointer-events: none; }
.fx-form-error { margin-top: 14px; color: var(--fx-red); font-size: 15px; font-weight: 500; }
.fx-form-error a { color: var(--fx-red); text-decoration: underline; }
.fx-form-done { padding: 40px 34px; border-radius: 16px; background: #F2F4FA; text-align: center; }
.fx-form-done .icon { display: inline-flex; width: 64px; height: 64px; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--fx-primary); color: #fff; font-size: 30px; }
.fx-form-done h3 { margin: 18px 0 6px; color: var(--fx-primary); font-size: 24px; }
.fx-form-done p { margin: 0; color: #4B5470; }
.fx-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.fx-contact-card { padding: 30px 32px; border: 1px solid #EEF1F8; border-top: 4px solid var(--fx-secondary); border-radius: 16px; background: #fff;
  box-shadow: 0 24px 60px -30px rgba(9, 34, 91, .30); }
.fx-contact-card + .fx-contact-card { margin-top: 24px; }
.fx-contact-card h3 { margin: 0 0 14px; color: var(--fx-primary); font-size: 24px; line-height: 1.2; }
.fx-contact-card h3:not(:first-child) { margin-top: 22px; padding-top: 20px; border-top: 1px solid #EEF1F8; }
.fx-office + .fx-office { margin-top: 18px; padding-top: 18px; border-top: 1px solid #EEF1F8; }
.fx-office_country { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 6px; color: var(--fx-secondary-dark);
  font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.fx-office strong { display: block; margin-bottom: 4px; color: var(--fx-primary); font-size: 17px; }
.fx-office p, .fx-contact-line { margin: 0; color: #4B5470; font-size: 15.5px; line-height: 1.65; }
.fx-office p + p { margin-top: 4px; }
.fx-contact-card a { color: var(--fx-secondary-dark); text-decoration: none; font-weight: 600; }
.fx-contact-card a:hover { color: var(--fx-primary); text-decoration: underline; }
.fx-contact-line { display: flex; align-items: center; gap: 10px; }
.fx-contact-line i { display: inline-flex; width: 34px; height: 34px; flex: none; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--fx-secondary); color: var(--fx-primary); font-size: 16px; }
.fx-contact-line small { color: #8A93AD; }

/* maps: full-width row of three */
.fx-maps { padding: 0 0 100px; background: #fff; }
.fx-maps_wrap { padding-inline: clamp(16px, 3vw, 48px); }
.fx-map_title { margin: 0 0 14px; color: var(--fx-primary); font-size: 22px; }
.fx-map { position: relative; height: clamp(320px, 30vw, 480px); overflow: hidden; border-radius: 16px; background: #EEF1F8;
  box-shadow: 0 24px 60px -34px rgba(9, 34, 91, .35); }
.fx-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (max-width: 991.98px) {
  .fx-page-banner { padding: 128px 0 56px; }
  .fx-contact { padding: 40px 0 70px; }
  .fx-breadcrumb { margin-bottom: 28px; }
  .fx-maps { padding-bottom: 70px; }
  .fx-map { height: 340px; }
}
@media (max-width: 575.98px) {
  .fx-page-banner { padding: 112px 0 44px; }
  .fx-contact-card { padding: 24px 22px; }
  .fx-form-done { padding: 32px 22px; }
  .fx-map { height: 300px; }
}

/* =====================================================================
   Laptop & small-screen refinements
   ===================================================================== */

/* Hero on laptops/desktops: content starts below the (now solid white) header and the
   loop diagram is sized to the screen height so the whole hero fits on one screen. */
@media (min-width: 992px) {
  .hero .main { padding-top: 130px; padding-bottom: 40px; }
}
@media (min-width: 992px) and (max-width: 1399.98px) { .hero .main { padding-top: 122px; } }
@media (min-width: 992px) and (max-width: 1199.98px) { .hero .main { padding-top: 110px; } }
@media (min-width: 992px) and (max-height: 849px) { .hero .main { --pz-h: .98; } }
@media (min-width: 992px) and (max-height: 799px) { .hero .main { --pz-h: .9; } }
@media (min-width: 992px) and (max-height: 739px) { .hero .main { --pz-h: .84; } }
@media (min-width: 992px) and (max-height: 699px) { .hero .main { --pz-h: .78; } }
@media (min-width: 992px) and (max-height: 659px) { .hero .main { --pz-h: .7; } }
@media (min-width: 992px) and (max-height: 619px) { .hero .main { --pz-h: .64; } }
@media (min-width: 992px) and (max-height: 579px) { .hero .main { --pz-h: .58; } }
@media (min-width: 992px) and (max-height: 539px) { .hero .main { --pz-h: .52; } }
@media (min-width: 992px) and (max-height: 499px) { .hero .main { --pz-h: .46; } }

/* Small laptops with high display scaling and landscape tablets (768–991px wide, wider than tall):
   text and loop side by side instead of stacked, sized to fit one screen. */
@media (min-width: 768px) and (max-width: 991.98px) and (orientation: landscape) {
  .hero .main { flex-direction: row; align-items: center; justify-content: space-between; gap: 28px;
    min-height: 100vh; min-height: 100svh; padding: 104px var(--fx-gutter) 28px; }
  .hero .copy { min-height: 0; padding: 0; flex: 1 1 auto; max-width: 560px; justify-content: center; }
  .hero .main h1 { font-size: clamp(34px, min(5.4vw, 9.5vh), 54px); }
  .hero .eyebrow { margin-bottom: 14px; }
  .hero .process-section { width: auto; flex: 0 0 auto; padding: 0; }
  .hero .process-wrapper { --pw: min(44vw, calc(100svh - 150px), 400px); }
}

/* "Built around the water on your site": keep all three cards in one row on laptops */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .pxn-h3_projects { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
}

/* "See how we work with…" buttons: when the text wraps on smaller laptops, drop the hover
   text-roll (its duplicate line otherwise overlaps the second line) */
@media (min-width: 992px) and (max-width: 1399.98px) {
  .pxn_service_item .service_btn { font-size: 15px; padding: 6px 6px 6px 16px; gap: 12px; }
  .pxn_service_item .service_btn .btn_text > span { text-shadow: none; transform: none !important; text-align: left; }
}

/* "Live system monitoring · 4 signals" line */
@media (min-width: 992px) and (max-width: 1399.98px) {
  .water-section .status { font-size: 14px; letter-spacing: .08em; gap: 8px; }
}

/* Contact page on short laptop screens: slimmer banner so the form shows sooner */
@media (min-width: 992px) and (max-height: 760px) {
  .fx-page-banner { padding: 150px 0 48px; }
  .fx-contact { padding-top: 40px; }
  .fx-breadcrumb { margin-bottom: 28px; }
}
@media (min-width: 768px) and (max-width: 991.98px) and (orientation: landscape) {
  .fx-page-banner { padding: 116px 0 40px; }
  .fx-contact { padding-top: 32px; }
  .fx-breadcrumb { margin-bottom: 24px; }
}