/* ==========================================================================
   IWAT DIGITAL — Responsive & "native app" mobile experience
   Loaded after main.css.
   --------------------------------------------------------------------------
   Strategy
     • Desktop ≥1080px : full marketing layout, hover interactions, top nav
     • Tablet  768–1079 : condensed grid, hamburger nav
     • Mobile  <768px   : app shell — sticky collapsing header, full-screen
                          drawer, fixed bottom tab bar, scroll-snap carousels,
                          sheet-style sections, no horizontal overflow.
   ========================================================================== */

/* =========================================================
   DESKTOP FINISHING TOUCHES
   ========================================================= */
@media (min-width: 1081px) {
  /* Cursor affordance on interactive cards */
  .iwat-card--service { cursor: pointer; }
  /* Text selection colour inside brand buttons */
  .iwat-btn { -webkit-user-select: none; user-select: none; }
}

/* =========================================================
   ≤1200px
   ========================================================= */
@media (max-width: 1200px) {
  .iwat-footer__main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .iwat-footer__brand { grid-column: 1 / -1; }
  .iwat-chip--tl { left: -2%; }
  .iwat-chip--br { right: -2%; }
  .iwat-chip--bl { display: none; }
}

/* =========================================================
   ≤1080px — switch to drawer nav
   ========================================================= */
@media (max-width: 1080px) {
  :root { --header-h: 68px; }

  .iwat-nav { display: none; }
  .iwat-burger { display: grid; }
  .iwat-header__in { gap: 14px; }
  .iwat-brand { margin-right: auto; }

  .iwat-hero--split .iwat-hero__in { grid-template-columns: minmax(0, 1fr); }
  .iwat-hero--split .iwat-hero__visual { order: -1; max-width: 560px; }
  .iwat-hero__copy { max-width: 100%; }
  .iwat-hero__visual-inner { animation-duration: 8s; }

  .iwat-split { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .iwat-split--reverse > *:first-child { order: 0; }
  .iwat-split__media { max-width: 560px; }

  .iwat-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .iwat-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .iwat-head--split { grid-template-columns: minmax(0, 1fr); align-items: start; }
}

@media (max-width: 1080px) and (min-width: 769px) {
  .iwat-slider__track--portrait > li { width: min(420px, 56vw); }
  .iwat-slider__track--wide > li { width: min(620px, 74vw); }
}

/* =========================================================
   ≤900px
   ========================================================= */
@media (max-width: 900px) {
  .iwat-topbar__list > li:not(.iwat-topbar__keep) { display: none; }
  .iwat-hslider__body { max-width: 100%; }
}

/* =========================================================
   ≤768px — THE APP SHELL
   ========================================================= */
@media (max-width: 768px) {

  :root {
    --header-h: 62px;
    /* Reserve room for the fixed bottom tab bar. 63px = the bar's own
       62px height plus its 1px top border, plus the iOS home indicator. */
    --tabbar-h: calc(63px + env(safe-area-inset-bottom, 0px));
    --gutter: 20px;
    --sec-y: 58px;
    --sec-y-sm: 40px;
    --fs-display: clamp(2rem, 8.6vw, 2.7rem);
    --r-xl: 24px;
    --r-2xl: 26px;
  }

  /* --- Native-app page behaviour --- */
  html {
    -webkit-text-size-adjust: none;
    scroll-padding-bottom: var(--tabbar-h);
  }
  body {
    padding-bottom: var(--tabbar-h);
    overscroll-behavior-y: none;
    -webkit-overflow-scrolling: touch;
    /* Prevent the classic iOS rubber-band revealing white gutter */
    background: var(--bg);
  }
  /* Kill horizontal overflow at the source */
  html, body, .iwat-wrap, .iwat-section, .iwat-hero, .iwat-footer { max-width: 100%; overflow-x: clip; }

  /* Tap targets */
  a, button, [role="button"], .iwat-btn, summary, label[for] {
    touch-action: manipulation;
  }
  .iwat-btn { min-height: 54px; padding: 16px 26px; }
  .iwat-btn--sm { min-height: 46px; }
  .iwat-slider__btn { width: 52px; height: 52px; }
  .iwat-nav > ul > li > a { min-height: 48px; }

  /* Nothing should scale-zoom on double tap */
  button, .iwat-burger, .iwat-slider__btn, .iwat-totop, .iwat-drawer__close {
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
  }

  /* ----------------------------
     Top app bar
     ---------------------------- */
  .iwat-topbar {
    font-size: .72rem;
    padding: 7px 0;
  }
  .iwat-topbar__in { gap: 12px; }
  .iwat-topbar__social { gap: 12px; }
  .iwat-topbar__social svg { width: 15px; height: 15px; }

  .iwat-header { background: rgba(255, 255, 255, .88); }
  .iwat-header.is-stuck { background: rgba(255, 255, 255, .97); }
  .iwat-header__in { min-height: var(--header-h); }
  .iwat-header.is-stuck .iwat-header__in { min-height: 56px; }
  .iwat-brand img { height: 38px; max-width: 150px; }
  .iwat-header.is-stuck .iwat-brand img { height: 33px; }
  .iwat-brand__name { font-size: 1rem; }
  .iwat-brand__tag { font-size: .58rem; letter-spacing: .1em; }

  .iwat-progress { height: 2.5px; }

  /* ----------------------------
     Full-screen drawer
     ---------------------------- */
  .iwat-drawer__panel {
    width: 100%;
    max-width: none;
    top: 0;
    border-radius: 0;
    transform: translateY(-100%);
    transition: transform .46s var(--ease);
    /* Slide down like a native sheet */
    padding-top: env(safe-area-inset-top);
  }
  .iwat-drawer.is-open .iwat-drawer__panel { transform: translateY(0); }
  .iwat-drawer__head { padding-top: 14px; }
  .iwat-drawer__nav li > a {
    font-size: 1.12rem;
    font-weight: 700;
    min-height: 60px;
    padding: 18px 2px;
  }

  /* ----------------------------
     Hero — app-like
     ---------------------------- */
  .iwat-hero {
    padding-block: 40px 46px;
    /* Sit under the app bar with a soft fade */
    -webkit-mask-image: none;
  }
  .iwat-hero::after { background-size: 44px 44px; }
  .iwat-hero h1, .iwat-hero h2 { letter-spacing: -.03em; }
  .iwat-hero__lead { font-size: 1.03rem; margin-bottom: 1.6em; }
  .iwat-hero__meta {
    margin-top: 26px;
    padding-top: 22px;
    gap: 10px 20px;
  }
  .iwat-hero__meta-item { font-size: .82rem; }
  .iwat-hero__in { gap: 30px; }
  .iwat-hero--split .iwat-hero__visual { order: -1; }
  .iwat-hero__visual-inner { border-radius: var(--r-xl); }
  .iwat-chip { display: none; }

  .iwat-pagehero {
    padding-block: 32px 36px;
    /* Rounded bottom corners = app screen */
    border-radius: 0 0 26px 26px;
  }

  .iwat-btn-row { width: 100%; gap: 11px; }
  .iwat-btn-row .iwat-btn { flex: 1 1 auto; }
  /* Primary action becomes a full-width, thumb-reachable block */
  .iwat-btn-row--stack .iwat-btn { width: 100%; flex: 1 0 100%; }

  /* ----------------------------
     Sections as cards/sheets
     ---------------------------- */
  .iwat-head { margin-bottom: 28px; }
  .iwat-eyebrow { font-size: .68rem; padding: 7px 13px 7px 11px; margin-bottom: 15px; }

  .iwat-grid--2, .iwat-grid--3, .iwat-grid--4 { grid-template-columns: minmax(0, 1fr); }
  .iwat-grid--auto { grid-template-columns: minmax(0, 1fr); gap: 14px; }

  .iwat-card, .iwat-glass {
    padding: 24px 22px;
    border-radius: var(--r-md);
  }
  .iwat-card:hover { transform: none; }
  .iwat-glass:hover { transform: none; }
  .iwat-card__ico { width: 52px; height: 52px; border-radius: 15px; margin-bottom: 16px; }
  .iwat-card__ico svg { width: 24px; height: 24px; }
  .iwat-card--service .iwat-card__num { font-size: 2.5rem; top: 14px; right: 18px; }

  /* ----------------------------
     Scroll-snap carousel (very "app")
     ---------------------------- */
  .iwat-slider__vp--snap {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-block: 4px 20px;
    /* Fade the edges */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  }
  .iwat-slider__vp--snap::-webkit-scrollbar { display: none; }
  .iwat-slider__vp--snap .iwat-slider__track {
    transform: none !important;
    transition: none;
    width: max-content;
  }
  .iwat-slider__vp--snap .iwat-slider__track > li {
    width: min(80vw, 300px);
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
  .iwat-slider__vp--snap .iwat-slider__track--wide > li { width: min(86vw, 360px); }

  /* Arrow controls are meaningless on a touch scroll-snap list */
  .iwat-slider__nav .iwat-slider__btn { display: none; }
  .iwat-slider__dots { display: none; }
  .iwat-slider__nav { justify-content: center; }
  .iwat-slider__count { display: none; }

  /* Slide captions always visible on touch */
  .iwat-slide__cap { transform: none; opacity: 1; padding: 26px 18px 16px; }
  .iwat-slide__cap h4 { font-size: .98rem; }
  .iwat-slide__cap p { font-size: .78rem; }

  /* Hero slider: swipe, taller touch target */
  .iwat-hslider {
    min-height: 420px;
    border-radius: var(--r-xl);
  }
  .iwat-hslider__track { transition: transform .5s var(--ease); }
  .iwat-hslider__body { padding: 26px 22px 74px; }
  .iwat-hslider__body h3 { font-size: 1.42rem; }
  .iwat-hslider__body p { font-size: .95rem; }
  .iwat-hslider__dots { bottom: 24px; left: 22px; }
  .iwat-hslider__dot { width: 26px; height: 4px; }
  .iwat-hslider__dot.is-active { width: 44px; }

  /* ----------------------------
     Stats
     ---------------------------- */
  .iwat-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .iwat-stat {
    padding: 20px 12px;
    border-radius: var(--r-md);
  }
  .iwat-stat:hover { transform: none; }
  .iwat-stat__num { font-size: 1.95rem; }
  .iwat-stat__label { font-size: .76rem; }

  /* ----------------------------
     Process
     ---------------------------- */
  .iwat-process::before { left: 22px; }
  .iwat-process__step { gap: 16px; }
  .iwat-process__marker {
    width: 46px; height: 46px;
    font-size: .92rem;
    box-shadow: 0 0 0 5px var(--bg-soft), var(--sh-sm);
  }
  .iwat-process__body { padding: 18px 18px; border-radius: var(--r-sm); }
  .iwat-process__step:hover .iwat-process__body { transform: none; }
  .iwat-numlist > li { gap: 15px; }
  .iwat-numlist > li::before { width: 44px; height: 44px; border-radius: 13px; font-size: .88rem; }

  /* ----------------------------
     Testimonials — swipeable
     ---------------------------- */
  .iwat-tst__vp {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-block: 4px 18px;
  }
  .iwat-tst__vp::-webkit-scrollbar { display: none; }
  .iwat-tst__track { transform: none !important; transition: none; width: max-content; }
  .iwat-tst__track > li { width: min(86vw, 400px); scroll-snap-align: center; }
  .iwat-tst__card {
    padding: 26px 22px;
    border-radius: var(--r-lg);
  }
  .iwat-tst__quote { font-size: 1rem; margin-bottom: 20px; }
  .iwat-tst__avatar { width: 46px; height: 46px; }
  .iwat-tst__name { font-size: .96rem; }
  .iwat-tst__rating { display: none; }
  .iwat-agg { padding: 18px 20px; gap: 14px; border-radius: var(--r-md); }
  .iwat-agg__score { font-size: 2.1rem; }

  /* ----------------------------
     CTA
     ---------------------------- */
  .iwat-cta {
    border-radius: var(--r-lg);
    padding: 34px 24px;
    /* Full-bleed on small screens */
    margin-inline: calc(var(--gutter) * -1);
    border-radius: 0;
  }
  .iwat-cta::before, .iwat-cta::after { width: 320px; height: 320px; }
  .iwat-cta__note { font-size: .78rem; }

  /* ----------------------------
     Team / contact cards
     ---------------------------- */
  .iwat-person__body { padding: 16px 16px 20px; }
  .iwat-person__body h3 { font-size: .98rem; }
  .iwat-contactcard { padding: 20px 18px; border-radius: var(--r-md); }
  .iwat-contactcard:hover { transform: none; }

  /* ----------------------------
     Footer
     ---------------------------- */
  .iwat-footer__main { grid-template-columns: minmax(0, 1fr); gap: 34px; padding-block: 44px 34px; }
  .iwat-footer__bottom { flex-direction: column; align-items: flex-start; text-align: left; gap: 12px; }
  .iwat-footer h4 { font-size: .8rem; }
  .iwat-footer__social a { width: 46px; height: 46px; } /* comfortable touch */

  /* ----------------------------
     Floating actions
     ---------------------------- */
  /* WhatsApp FAB sits just above the tab bar */
  .iwat-fab {
    right: 16px;
    bottom: calc(var(--tabbar-h) + 14px);
    width: 54px; height: 54px;
  }
  .iwat-fab svg { width: 26px; height: 26px; }

  .iwat-totop {
    left: 16px;
    bottom: calc(var(--tabbar-h) + 14px);
    width: 44px; height: 44px;
    background: var(--brand-navy);
    color: #fff;
    border-color: transparent;
  }

  /* ----------------------------
     BOTTOM TAB BAR — the app signature
     ---------------------------- */
  .iwat-tabbar {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: var(--z-tabbar);
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(180%) blur(22px);
    -webkit-backdrop-filter: saturate(180%) blur(22px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 28px rgba(0, 48, 96, .10);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    /* Hidden while the drawer is open */
    transition: transform .4s var(--ease), opacity .3s var(--ease);
  }
  body.iwat-drawer-open .iwat-tabbar {
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
  }

  .iwat-tabbar__inner {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: stretch;
    height: 62px;
    max-width: 560px;
    margin-inline: auto;
  }

  .iwat-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 4px 6px;
    color: var(--muted);
    font-size: .63rem;
    font-weight: 700;
    letter-spacing: .01em;
    position: relative;
    min-height: 56px;
    -webkit-user-select: none;
    user-select: none;
    transition: color .3s var(--ease);
  }
  .iwat-tab svg {
    width: 23px; height: 23px;
    transition: transform .35s var(--ease);
    stroke-width: 1.9;
  }
  .iwat-tab span { line-height: 1.1; white-space: nowrap; }
  .iwat-tab__ico { position: relative; display: grid; place-items: center; height: 26px; }

  /* Active state: colour + pill + pop */
  .iwat-tab.is-active { color: var(--brand-blue-700); }
  .iwat-tab.is-active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 28px; height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--grad-line);
  }
  .iwat-tab.is-active svg { transform: translateY(-2px) scale(1.1); }
  .iwat-tab:active svg { transform: scale(.88); }

  /* Central raised "Get quote" action, app-style */
  .iwat-tab--fab {
    justify-content: flex-start;
    padding-top: 0;
  }
  .iwat-tab--fab .iwat-tab__ico {
    width: 54px; height: 54px;
    margin-top: -20px;
    border-radius: 50%;
    background: var(--grad-brand);
    color: #fff;
    box-shadow: 0 8px 22px rgba(0, 112, 224, .42);
    border: 3px solid #fff;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  }
  .iwat-tab--fab .iwat-tab__ico svg { width: 24px; height: 24px; }
  .iwat-tab--fab:active .iwat-tab__ico { transform: scale(.9); }
  .iwat-tab--fab span { color: var(--brand-blue-700); }
  .iwat-tab--fab .iwat-tab__ico::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid rgba(0, 169, 240, .55);
    animation: iwat-pulse-ring 2.6s var(--ease-out) infinite;
  }

  /* Attention dot on the WhatsApp tab. Deliberately a dot rather than a
     count — a static number would imply a permanent unread message. */
  .iwat-tab__badge {
    position: absolute;
    top: 2px;
    right: -1px;
    width: 9px; height: 9px;
    border-radius: var(--r-full);
    background: #25D366;
    border: 1.5px solid #fff;
    animation: iwat-badge-pop .4s var(--ease) both .8s;
  }
  @keyframes iwat-badge-pop {
    from { transform: scale(0); }
    70%  { transform: scale(1.25); }
    to   { transform: scale(1); }
  }

  /* Hide the floating FAB when the tab bar already has WhatsApp */
  body.iwat-has-wa-tab .iwat-fab { display: none; }

  /* ----------------------------
     Legacy WP content on mobile
     ---------------------------- */
  .iwat-content .wp-block-columns { flex-direction: column !important; }
  .iwat-content .wp-block-column { flex-basis: 100% !important; width: 100%; }
  .iwat-content .alignwide,
  .iwat-content .alignfull { width: 100vw; margin-inline: calc(50% - 50vw); }
  .iwat-content .alignleft, .iwat-content .alignright { float: none; max-width: 100%; margin: 1.4em 0; }
  .iwat-content .wp-block-cover,
  .iwat-content .nfd-wb-hero__hero-8 { min-height: 0; padding: 26px 20px !important; border-radius: var(--r-lg) !important; }
  .iwat-content .wp-block-image img { border-radius: var(--r-md); }

  /* Full-bleed tables scroll horizontally rather than overflow */
  .iwat-content table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }

  .iwat-accordion__q { padding: 17px 18px; font-size: .96rem; gap: 12px; }
  .iwat-accordion__a { padding: 0 18px 18px; }

  /* Comfortable form controls */
  .iwat-content input[type="text"], .iwat-content input[type="email"],
  .iwat-content input[type="tel"], .iwat-content input[type="url"],
  .iwat-content input[type="number"], .iwat-content input[type="search"],
  .iwat-content textarea, .iwat-content select {
    padding: 15px 16px;
    font-size: 16px; /* prevents iOS auto-zoom on focus */
    border-radius: var(--r-sm);
  }
  .iwat-content textarea { min-height: 130px; }
  .iwat-content input[type="submit"], .iwat-content .wpcf7-submit {
    width: 100%;
    padding: 17px 24px;
    font-size: 1rem;
  }

  /* Reduce reveal distance so nothing feels sluggish on a phone */
  [data-reveal="up"]    { transform: translate3d(0, 22px, 0); }
  [data-reveal="left"]  { transform: translate3d(-24px, 0, 0); }
  [data-reveal="right"] { transform: translate3d(24px, 0, 0); }
  [data-reveal="blur"]  { filter: blur(5px); transform: translate3d(0, 14px, 0); }
  [data-reveal-stagger] > * { transform: translate3d(0, 20px, 0); }
  [data-reveal] { transition-duration: .6s; }

  /* Marquee: shorter loop, slower */
  .iwat-marquee__track { animation-duration: 28s; }
  .iwat-marquee__item { min-width: 138px; height: 62px; padding: 12px 16px; font-size: .85rem; }
}

/* =========================================================
   ≤400px — small phones
   ========================================================= */
@media (max-width: 400px) {
  :root { --gutter: 16px; }
  .iwat-brand__tag { display: none; }
  .iwat-tab { font-size: .58rem; }
  .iwat-tab svg { width: 21px; height: 21px; }
  .iwat-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .iwat-stat__num { font-size: 1.7rem; }
  .iwat-btn { font-size: .88rem; padding: 15px 20px; }
  .iwat-hero { padding-block: 32px 38px; }
}

/* =========================================================
   Landscape phones
   ========================================================= */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  :root { --tabbar-h: 0px; }
  .iwat-tabbar { display: none; }
  .iwat-fab { bottom: 16px; }
  .iwat-totop { display: none; }
  .iwat-hero { padding-block: 28px; }
}

/* =========================================================
   Large desktop: give the layout room to breathe
   ========================================================= */
@media (min-width: 1500px) {
  :root { --maxw: 1320px; }
}

/* =========================================================
   Coarse pointers: replace hover lift with a press state
   ========================================================= */
@media (hover: none) {
  .iwat-card:hover,
  .iwat-glass:hover,
  .iwat-person:hover,
  .iwat-stat:hover,
  .iwat-contactcard:hover,
  .iwat-accordion__item:hover { transform: none; box-shadow: var(--sh-sm); }
  .iwat-person:hover .iwat-person__media img { transform: none; }
  .iwat-slide:hover img { transform: none; }
  .iwat-btn:hover { transform: none; }
  .iwat-fab:hover { transform: none; }
  .iwat-marquee:hover .iwat-marquee__track { animation-play-state: running; }
}