/* ==========================================================================
   fix.css — scroll, animation, mobile + padding hardening (loads LAST)
   ========================================================================== */

/* ---- 1. SCROLL ------------------------------------------------------------
   `overflow-x:hidden` on BOTH html and body turns body into its own scroll
   container: double scrollbars, broken position:sticky, janky iOS momentum.
   `clip` hides the overflow without creating a scroll container.            */
html { overflow-x: visible !important; -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
@supports (overflow: clip) { body { overflow-x: clip; } }
html { scroll-padding-top: 90px; }
@media (max-width: 991px) { html { scroll-padding-top: 76px; } }
body.mean-nav-open, html.menu-open { overscroll-behavior: contain; }
img, video, iframe, svg, canvas { max-width: 100%; height: auto; }
iframe { height: revert-layer; }
table { max-width: 100%; }
.table-responsive, .wift-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
pre, code { white-space: pre-wrap; word-break: break-word; }

/* ---- 2. ANIMATION ---------------------------------------------------------
   Only animate transform + opacity (GPU). Drop the 6px blur reveal and the
   always-on blurred blobs where they cost frames.                           */
.wow { animation-fill-mode: both; }
.wift-reveal { will-change: auto; backface-visibility: hidden; }
html.wift-io-armed .wift-reveal { -webkit-filter: none !important; filter: none !important; }
.wift-ambient { contain: strict; transform: translateZ(0); }
.wift-ambient i { will-change: transform; }

@media (max-width: 991px), (hover: none) {
  .wift-ambient i { -webkit-filter: blur(60px); filter: blur(60px); animation-duration: 60s !important; }
  .wift-ambient i:nth-child(3) { display: none; }
  .wow { animation-duration: .6s !important; }
  [data-tilt], .brand-area li { transform: none !important; }
  .paroller, [data-paroller-factor] { transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .wow, .wift-reveal { visibility: visible !important; opacity: 1 !important; transform: none !important; }
}

/* ---- 3. MOBILE LAYOUT + PADDING ----------------------------------------- */
:root { --fx-gutter: clamp(16px, 4.5vw, 28px); }
.container, .container-fluid, .custom-container {
  padding-left: var(--fx-gutter); padding-right: var(--fx-gutter);
}
.row { --bs-gutter-x: clamp(16px, 3vw, 30px); }

h1 { font-size: clamp(28px, 7.4vw, 60px); line-height: 1.14; }
h2 { font-size: clamp(24px, 5.6vw, 42px); line-height: 1.2; }
h3 { font-size: clamp(19px, 4.6vw, 28px); line-height: 1.28; }
h4, h5 { font-size: clamp(17px, 4.2vw, 22px); }

@media (max-width: 991px) {
  .slider-area .single-slider { min-height: 88vh; min-height: 88svh; }
  .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6,
  .col-lg-7, .col-lg-8, .col-lg-9 { margin-bottom: 0; }
}

@media (max-width: 767px) {
  /* section rhythm: theme uses 100–120px blocks, far too airy on a phone */
  .pt-150, .pt-140, .pt-130, .pt-120, .pt-110, .pt-100, .pt-90 { padding-top: 56px !important; }
  .pb-150, .pb-140, .pb-130, .pb-120, .pb-110, .pb-100, .pb-90 { padding-bottom: 56px !important; }
  .pt-80, .pt-70 { padding-top: 44px !important; }
  .pb-80, .pb-70 { padding-bottom: 44px !important; }
  .mb-100, .mb-90, .mb-80, .mb-70, .mb-60 { margin-bottom: 36px !important; }
  .mt-100, .mt-90, .mt-80, .mt-70, .mt-60 { margin-top: 36px !important; }
  .contact-area .contact-box, .wift-post, .s-single-services { border-radius: 14px; }
  .contact-area .contact-box > *, .s-single-services .services-content { padding-left: 20px; padding-right: 20px; }

  .wift-post { grid-template-columns: 1fr !important; }
  .wift-post-thumb { min-height: 180px; }

  /* tap targets + readable body text */
  .btn, button, .slider-btn, [class*="-btn"], .menu a { min-height: 44px; }
  .btn, [class*="-btn"] { padding-left: 22px; padding-right: 22px; }
  body { font-size: 15px; }
  p, li { font-size: 15px; line-height: 1.65; }
  .slider-area h1, .slider-area .slider-title, .breadcrumb-area h1 { font-size: clamp(28px, 8vw, 44px) !important; line-height: 1.15 !important; }
  .section-title h2 { font-size: clamp(24px, 6.4vw, 34px) !important; }

  /* iOS zooms the page when a focused field is < 16px */
  input, select, textarea { font-size: 16px !important; width: 100%; max-width: 100%; }

  .row > [class*="col-"] { padding-left: calc(var(--bs-gutter-x) * .5); padding-right: calc(var(--bs-gutter-x) * .5); }
  .breadcrumb-area { padding-top: 120px !important; padding-bottom: 56px !important; }
  #scrollUp { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
}

/* notches / home-indicator */
@supports (padding: max(0px)) {
  .container, .container-fluid {
    padding-left: max(var(--fx-gutter), env(safe-area-inset-left));
    padding-right: max(var(--fx-gutter), env(safe-area-inset-right));
  }
  footer, .footer-area { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
}

/* ---- 4. PLACEHOLDER IMAGES ---------------------------------------------- */
img[src*="img/placeholders/"] { object-fit: cover; background: #8e99a8; }
picture { display: block; }
picture > img { width: 100%; }

/* ---- 5. SECOND NAV (.wift-subnav): no reorder, no resize, no jump --------
   wift.css v8x set `order:-1` + smaller type on the active chip, so every
   section change re-flowed the whole pill row. The active pill now only
   changes colour; geometry is identical in every state. */
.wift-subnav { transition: top .22s ease; transform: translateZ(0); }
.wift-subnav-links a, .wift-subnav-links a[aria-current] {
  order: 0 !important; display: inline-flex; align-items: center; min-height: 34px;
  font-size: 13px !important; font-weight: 500 !important; padding: 7px 14px !important;
  box-sizing: border-box; border: 0;
  transition: background-color .2s ease, color .2s ease, opacity .2s ease !important;
}
.wift-subnav-links { scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
.wift-subnav-links a { scroll-snap-align: center; }
.wift-subnav-links a[aria-current="true"], .wift-subnav-links a[aria-current="page"] {
  background: var(--wift-amber, #FEF9EE); color: #0b1f4d; opacity: 1;
}
@media (max-width: 991px) {
  .wift-subnav-links a, .wift-subnav-links a[aria-current] { font-size: 12.5px !important; padding: 6px 12px !important; min-height: 32px; }
}

/* ---- 6. DUMMY EDUCATION VECTORS (img/edu/*.svg) -------------------------- */
.wift-edu-bg {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  background-repeat: no-repeat; background-size: min(1200px, 135%) auto;
  background-position: right -30px top 24px; opacity: .1;
}
.wift-edu-bg.is-flip { background-position: left -30px bottom 24px; }
.wift-edu-bg.is-dark { filter: invert(1); opacity: .12; }
@media (max-width: 767px) { .wift-edu-bg { background-size: 190% auto; opacity: .07; } .wift-edu-bg.is-dark { opacity: .09; } }

/* ---- 7. STICKY MENU / 2ND NAV: nothing may show through ------------------
   The glass bars were ~50% transparent, so cards and headings scrolled up
   behind the logo, menu and "On this page" pills and read as overlapping.   */
.header-area .sticky-menu, .header-three .sticky-menu, .header-area.header-three .menu-area.sticky-menu {
  background: rgba(254, 249, 238, .96) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  box-shadow: 0 1px 0 rgba(11, 31, 77, .08), 0 8px 24px -12px rgba(11, 31, 77, .18);
}
.wift-subnav {
  background: linear-gradient(180deg, #12295C 0%, #0B1F4D 62%, #071534 100%) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  border-bottom: 1px solid rgba(254, 249, 238, .14);
}
/* logo lockup: never shrinks into the menu, always a clear gap */
.second-menu .logo { margin-right: clamp(12px, 2vw, 28px); }
.wift-logo { flex-shrink: 0; min-width: 0; }
.wift-logo img { flex: 0 0 auto; max-width: none; }
@media (min-width: 992px) and (max-width: 1279px) { .second-menu .main-menu nav > ul > li > a { padding-left: 8px; padding-right: 8px; } }


/* ---- 8. COOKIE CONSENT BANNER + FOOTER LEGAL STRIP ---------------------- */
.wift-consent { position: fixed; z-index: 9998; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); max-width: 640px; margin: 0 auto;
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding: 16px 18px; border-radius: 18px; background: rgba(9, 22, 51, .94); color: #f2f6ff;
  box-shadow: 0 18px 60px -12px rgba(3, 10, 26, .8), 0 0 0 1px rgba(254, 249, 238, .18); font-size: 14px; line-height: 1.5; }
.wift-consent p { margin: 0; flex: 1 1 280px; } .wift-consent a { color: #FEF9EE; text-decoration: underline; }
.wift-consent-btns { display: flex; gap: 10px; flex: 0 0 auto; }
.wift-consent button { min-height: 44px; padding: 0 22px; border-radius: 999px; border: 1.5px solid rgba(254, 249, 238, .45); background: transparent; color: #f2f6ff; font: 600 14px/1 inherit; cursor: pointer; }
.wift-consent button[data-c="yes"] { background: #FEF9EE; border-color: #FEF9EE; color: #0b1f4d; }
.wift-legal { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; padding: 14px 16px calc(18px + env(safe-area-inset-bottom, 0px)); font-size: 13px; }
.wift-legal a { color: inherit; opacity: .8; text-decoration: underline; } .wift-legal a:hover { opacity: 1; }

.wift-legal-doc h2 { font-size: clamp(20px, 2.6vw, 28px); margin: 1.6em 0 .5em; }
.wift-legal-doc p { max-width: 70ch; }

/* ---- 9. BLUR GLITCH FIX ---------------------------------------------------
   Cause: three fixed background blobs were re-blurred (filter: blur(90px)) on
   every animation frame while stacked backdrop-filters on the header, sticky
   bar, "On this page" bar and glass cards were sampling that moving layer.
   The browser had to re-blur the blobs AND re-blur everything over them each
   frame, which shows as flicker, banding and lag while scrolling.
   Now: the blobs are soft radial gradients with no filter and no drift, so the
   backdrop is static and cacheable, and blur is admitted for one layer per band
   (the band's content column) instead of for every card inside it. */
*, *::before, *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
main > section:not(.wift-edu-hero) > .container, main > section.wift-edu-hero {
  -webkit-backdrop-filter: saturate(160%) blur(16px) !important;
  backdrop-filter: saturate(160%) blur(16px) !important;
}
/* the intro band carries its formwork line-art on the section itself, so a blur
   on its transparent column would smear the drawing rather than the backdrop */
main > section.wift-edu-hero > .container {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.wift-ambient i { -webkit-filter: none !important; filter: none !important; opacity: 1 !important; }
.wift-ambient i:nth-child(1) { background: radial-gradient(closest-side, rgba(122, 168, 255, .5), rgba(122, 168, 255, 0)) !important; }
.wift-ambient i:nth-child(2) { background: radial-gradient(closest-side, rgba(254, 249, 238, .34), rgba(254, 249, 238, 0)) !important; }
.wift-ambient i:nth-child(3) { background: radial-gradient(closest-side, rgba(88, 122, 226, .42), rgba(88, 122, 226, 0)) !important; }
.wift-reveal, .wift-reveal.wift-reveal-in { -webkit-filter: none !important; filter: none !important; }
/* §9 removes the banner's blur, so it keeps a near-opaque fill instead of a
   translucent one — same navy family as the glass sheets, light ink on top. */
.wift-consent { background: rgba(9, 22, 51, .94); }

/* ---- 10. FROSTED NAV (blurs the content scrolling underneath) ----------------
   Only the two sticky bars blur their backdrop. Every other element stays
   un-filtered and the background blobs are plain gradients, so the browser blurs
   two small strips per frame instead of re-blurring stacked layers (the glitch). */
.header-area .menu-area.sticky-menu, .header-three .menu-area.sticky-menu, .header-area.header-three .menu-area.sticky-menu {
  background: rgba(254, 249, 238, .6) !important;
  -webkit-backdrop-filter: saturate(180%) blur(22px) !important; backdrop-filter: saturate(180%) blur(22px) !important;
}
.wift-subnav, nav.wift-subnav {
  background: linear-gradient(180deg, #12295C 0%, #0B1F4D 62%, #071534 100%) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}

/* ---- 11. LOGO: real crest, transparent background, larger ------------------ */
.wift-logo img { height: 84px !important; width: auto !important; max-width: none; background: none !important; object-fit: contain; }
.wift-logo-mark--dark { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); }   /* white crest on dark bars */
@media (max-width: 991px) { .wift-logo img { height: 64px !important; } }