/* Homepage hero + site-wide alignment — 2026-11-12c
   Mobile: photo stacked ABOVE the copy so text never covers a face.
   Desktop: copy sits in a lower-left glass panel; officer face stays clear on the right.
   Animations off so type is sharp on first paint. */

/* Kill blur-in title animations (they left the headline unreadable). */
.x-hero [data-fade],
.x-hero__title .l > span{
  animation:none !important;
  opacity:1 !important;
  filter:none !important;
  transform:none !important;
}

/* ---------- Mobile / tablet: stacked hero ---------- */
@media (max-width:1099px){
  .x-hero{
    min-height:0 !important;
    height:auto !important;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    background:#07111f;
  }
  .x-hero__media{
    position:relative !important;
    inset:auto !important;
    z-index:0 !important;
    width:100%;
    aspect-ratio:3/2;
    height:auto;
    margin-top:var(--x-nav-h,72px);
  }
  .x-hero__media picture,
  .x-hero__media img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:50% 28%;
    display:block;
    transform:none !important;
    animation:none !important;
  }
  .x-hero::before,
  .x-hero::after{display:none !important} /* no veil over faces */
  .x-hero__in{
    position:relative;
    width:100%;
    padding-top:1.15rem !important;
    padding-bottom:calc(1.25rem + env(safe-area-inset-bottom,0px)) !important;
    background:#07111f;
  }
  .x-hero__copy{max-width:none}
  .x-hero__title{
    font-size:1.8rem !important; /* ~29px, three short lines */
    line-height:1.15 !important;
    letter-spacing:-.03em;
    margin:.35rem 0 .7rem !important;
    text-wrap:balance;
    color:#fff;
    text-shadow:none;
    filter:none;
  }
  .x-hero__title .x-grad-text{
    background:none;
    -webkit-background-clip:unset;
    background-clip:unset;
    color:#8dbcff;
  }
  .x-hero .x-flags, .x-hero__copy > .x-flags{
    display:flex;
    gap:.7rem 1rem;
    align-items:center;
    margin:0 0 .9rem;
    font-size:.82rem;
    color:#c9d3e3;
  }
  .x-hero .x-flag{height:14px;width:auto}
  .x-hero__sub{display:none} /* keep first screen tight; body copy follows */
  .x-hero__ctas{
    display:flex;
    flex-direction:column;
    gap:.55rem;
    flex-wrap:nowrap !important;
  }
  .x-hero__ctas .x-btn{
    flex:none !important;
    width:100%;
    min-height:52px;
    justify-content:center;
    font-size:1rem;
    white-space:nowrap;
  }
  .x-hero__ctas .x-btn--blue,
  .x-hero__ctas .x-btn--quote{
    --bg:#2f7bff;
    --fg:#fff;
    background:#2f7bff;
    color:#fff;
    font-weight:700;
    box-shadow:0 8px 24px -8px rgba(47,123,255,.7);
  }
  .x-hero__ctas .x-btn--wa{background:#25D366;color:#fff !important;border:0;font-weight:700}
  .x-hero__meta{display:none} /* phone is a button now */
  .x-hero__caption{display:none !important}
  .x-hero__reach{display:block;margin:.15rem 0 .7rem;font-size:.95rem}
  .x-hero__reach a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px}
  .x-hero .x-press, .x-press{
    margin:.35rem 0 0;color:#c9d3e3;font-size:.88rem;font-weight:600;letter-spacing:.01em;
  }
}

/* ---------- Desktop: cinematic, text in a glass panel, face clear ---------- */
@media (min-width:1100px){
  .x-hero{
    min-height:100vh;
    min-height:100svh;
    align-items:flex-end;
  }
  .x-hero__media img{
    object-position:78% 28% !important; /* face in the upper-right, clear of the panel */
    transform:none !important;
    animation:none !important;
  }
  .x-hero::before{
    background:linear-gradient(90deg,rgba(4,6,12,.72) 0%,rgba(4,6,12,.28) 46%,rgba(4,6,12,.08) 70%),
                linear-gradient(180deg,rgba(4,6,12,.45) 0%,rgba(4,6,12,0) 22%,rgba(4,6,12,.15) 58%,rgba(4,6,12,.72) 100%) !important;
  }
  .x-hero__in{
    padding-top:calc(var(--x-nav-h,72px) + 2rem);
    padding-bottom:5.5rem; /* clear the WhatsApp fab */
  }
  .x-hero__copy{
    max-width:36rem;
    padding:1.4rem 1.5rem 1.5rem;
    border-radius:20px;
    background:rgba(4,6,12,.66);
    border:1px solid rgba(255,255,255,.12);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
  }
  .x-hero__title{
    font-size:clamp(2.2rem,1.6rem + 1.6vw,3.15rem) !important;
    line-height:1.08 !important;
    margin:.35rem 0 .8rem !important;
    filter:none !important;
    text-shadow:none;
  }
  .x-hero__title .x-grad-text{color:#8dbcff;background:none;-webkit-background-clip:unset;background-clip:unset}
  .x-hero .x-flags{margin:0 0 1rem}
  .x-hero__sub{margin-bottom:1.15rem;font-size:1.05rem}
  .x-hero__ctas{display:flex;flex-wrap:wrap;gap:.65rem}
  .x-hero__ctas .x-btn{min-height:52px}
  .x-hero__ctas .x-btn--quote,
  .x-hero__ctas .x-btn--blue{background:#2f7bff;color:#fff;font-weight:700}
  .x-hero__ctas .x-btn--wa{background:#25D366;color:#fff !important;font-weight:700;border:0}
  .x-hero__meta{margin-top:1rem;padding-top:.9rem}
}

/* ---------- Site-wide alignment + type scale ---------- */
.x-wrap, .x-pagehero__in, .x-ho .x-wrap, .x-onboard .x-wrap, .x-section .x-wrap{
  /* already share --x-gutter; keep left edges consistent */
}
h1, .x-hero__title, .x-pagehero__title{
  letter-spacing:-.03em;
  color:#fff;
}
h2, .x-h2, .x-ho h2, .x-onboard .x-h2, html.x-inner .ui-title-block{
  font-size:clamp(1.55rem,1.15rem + 1.3vw,2.2rem);
  line-height:1.2;
  letter-spacing:-.025em;
  margin:0 0 .7rem;
}
h3, .x-ho-card h3, .x-onboard li h3{
  font-size:1.12rem;
  line-height:1.3;
  margin:0 0 .35rem;
}
.x-btn, html.x-inner .btn, html.x-inner .btn-primary, html.x-inner input[type=submit]{
  min-height:52px;
  border-radius:999px;
  font-weight:700;
}
/* Nothing in the nav or widgets may cover a page-hero face */
.x-pagehero{margin-top:0}
@media (max-width:1099px){
  .x-pagehero{padding-top:calc(var(--x-nav-h,72px) + 1.5rem)}
  .x-pagehero--photo{padding-top:calc(var(--x-nav-h,72px) + 0px); min-height:0; display:flex; flex-direction:column}
  .x-pagehero--photo .x-pagehero__img{
    position:relative; inset:auto; width:100%; height:auto; aspect-ratio:3/2;
    object-fit:cover; object-position:50% 22%;
    display:block;
  }
  .x-pagehero--photo .x-pagehero__shade{display:none}
  .x-pagehero--photo .x-pagehero__in{
    background:#07111f; padding:1.15rem var(--x-gutter,1.25rem) 1.4rem;
  }
}
/* Floating widgets must not sit on top of hero buttons */
@media (min-width:1100px){
  #xtreme-whatsapp-btn{bottom:24px}
  a.xtreme-float-quote, .x-fab{bottom:24px}
}

/* Tablet: slightly shorter photo so the last CTA clears the sticky action bar */
@media (min-width:600px) and (max-width:1099px){
  .x-hero__media{aspect-ratio:16/9}
  .x-hero__in{padding-top:.95rem !important;padding-bottom:1rem !important}
  .x-hero__ctas{gap:.45rem}
  .x-hero__title{margin:.3rem 0 .55rem !important}
}
@media (max-width:1099px){
  /* Always keep in-flow content clear of the sticky Call / WhatsApp / Quote bar */
  .x-hero, .x-pagehero, main#main-content, .x-section, .x-ho, .x-onboard{
    scroll-margin-bottom:calc(84px + env(safe-area-inset-bottom,0px));
  }
  body{padding-bottom:calc(88px + env(safe-area-inset-bottom,0px)) !important}
}

/* If the first content heading just repeats the hero title, tighten the gap; many service/training templates had a second "Training" h2. */
.x-pagehero + * > .container > .row > .col-xs-12 > .ui-title-block:first-child,
.x-pagehero + section .ui-title-block:first-child,
.x-pagehero + .section-default .ui-title-block.text-center:first-of-type{
  /* keep for a11y if it's an h2, but don't visually shout over the hero */
  font-size:0;
  height:0;
  margin:0;
  overflow:hidden;
}

.x-pagehero + main .ui-title-block.text-center,
.x-pagehero + main > .section-default .ui-title-block:first-child,
.x-pagehero + main > section:first-child .ui-title-block:first-child{
  font-size:0 !important;height:0 !important;margin:0 !important;padding:0 !important;overflow:hidden !important;
}

/* IVR routing line + header phone */
.x-press, .x-press-n{color:#c9d3e3;font-size:.9rem;font-weight:600;margin:.35rem 0 0}
.x-ho-card .x-press-n{margin-top:.55rem;color:#facc15}
/* display handled in inner-pages.css so mobile header is not crowded */
.x-nav__phone{align-items:center;gap:.45rem}
.x-nav__phone-text{display:flex;flex-direction:column;line-height:1.15;align-items:flex-start}
.x-press--nav{font-size:.65rem;font-weight:600;color:#c9d3e3;letter-spacing:.03em;white-space:nowrap;margin:0}
@media (max-width:1099px){
  .x-press--nav{display:none} /* sticky bar carries the short form */
}