/* =========================================================
   Page header — replaces the legacy Revolution Slider banner.
   Palette: blue -> green only. No orange/saffron/yellow/pink.
   ========================================================= */

/* Hide the legacy carousel wherever this header renders. Display:none rather
   than deleting anything — remove the plugin and the old banner returns. */
body.tgn-ph rs-module-wrap,
body.tgn-ph rs-fullwidth-wrap,
body.tgn-ph rs-module,
body.tgn-ph .elementor-widget-slider_revolution,
body.tgn-ph .rev_slider_wrapper,
body.tgn-ph .forcefullwidth_wrapper_tp_banner{display:none!important;height:0!important;min-height:0!important}

/* The Elementor SECTION that wrapped the slider carries the old gradient as its
   own background, so hiding the widget alone left a coloured strip behind.
   :has() lets us drop the whole wrapper. */
body.tgn-ph .elementor-section:has(> .elementor-container .elementor-widget-slider_revolution),
body.tgn-ph .elementor-section:has(.elementor-widget-slider_revolution),
body.tgn-ph .elementor-top-section:has(rs-module-wrap){display:none!important}

body.tgn-ph{--blue:#0B4EA2;--blue-ink:#06203F;--green:#0E8A45;--mint:#7EDDA4;--sky:#8FC3FF;
  --ease:cubic-bezier(.22,.61,.36,1)}

/* the header sits inside Elementor's content column, so break it out to the
   full viewport width — a page header should be edge to edge */
.tgn-ph__band{position:relative;width:calc(100vw - var(--sbw,0px));margin-inline:calc(50% - 50vw + (var(--sbw,0px) / 2));
  overflow:hidden;isolation:isolate;
  background:linear-gradient(118deg,#06203F 0%,#0B4EA2 58%,#0E6E45 130%);
  padding-block:clamp(46px,5.8vw,78px);margin-bottom:clamp(24px,3vw,44px)}
/* faint engineering grid — depth without ornament */
.tgn-ph__grid{position:absolute;inset:0;z-index:0;opacity:.5;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:62px 62px;
  -webkit-mask-image:radial-gradient(120% 100% at 18% 0%,#000 25%,transparent 78%);
          mask-image:radial-gradient(120% 100% at 18% 0%,#000 25%,transparent 78%)}
.tgn-ph__glow{position:absolute;z-index:0;width:620px;height:620px;right:-190px;top:-250px;border-radius:50%;
  background:radial-gradient(circle,rgba(126,221,164,.22),transparent 66%);filter:blur(10px);
  animation:tgnPhDrift 20s ease-in-out infinite alternate;pointer-events:none}
@keyframes tgnPhDrift{from{transform:translate(0,0)}to{transform:translate(-56px,38px) scale(1.1)}}

.tgn-ph__inner{position:relative;z-index:1;max-width:1184px;margin:0 auto;padding-inline:24px}

.tgn-ph__eyebrow{display:inline-block;margin:0;padding:7px 13px 6px;
  border:1px solid rgba(126,221,164,.40);background:rgba(126,221,164,.07);
  font-size:11px;font-weight:800;letter-spacing:2.4px;text-transform:uppercase;color:var(--mint);
  opacity:0;animation:tgnPhUp .7s var(--ease) .05s forwards}

.tgn-ph__title{margin:0;font-family:'Manrope',system-ui,sans-serif;font-weight:800;color:#fff;
  font-size:clamp(30px,4.6vw,58px);line-height:1.06;letter-spacing:-.03em;max-width:20ch;
  overflow:hidden;
  /* A line-height below the font's natural line box makes the glyph box hang out
     of it at BOTH ends, and this element's own overflow:hidden (which drives the
     reveal) clips whatever hangs. Pad both edges clear of the ink and take the
     same amount off the margins, so the spacing above and below is unchanged.
     The eyebrow and standfirst give up their margins to this element: an
     inline-block eyebrow would add to the margin rather than collapse with it. */
  padding-block:.2em;margin-block:calc(18px - .2em)}
.tgn-ph__title span{display:block;transform:translateY(150%);animation:tgnPhMask .95s var(--ease) .12s forwards}
@keyframes tgnPhMask{to{transform:none}}

.tgn-ph__sub{margin:0;max-width:56ch;font-size:clamp(14.5px,1.4vw,17px);line-height:1.7;
  color:rgba(255,255,255,.84);opacity:0;animation:tgnPhUp .8s var(--ease) .26s forwards}


@keyframes tgnPhUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* the theme prints its own page title above the content on some templates —
   suppress it so the title is not shown twice */
body.tgn-ph .jupiterx-main-header,
body.tgn-ph .jupiterx-page-title,
body.tgn-ph .elementor-page-title{display:none!important}

@media (max-width:820px){
}
@media (prefers-reduced-motion:reduce){
  body.tgn-ph .tgn-ph__band *{animation:none!important}
  .tgn-ph__title span{transform:none}
  .tgn-ph__eyebrow,.tgn-ph__sub{opacity:1}
}