/* Native hero slider (home-1) — reproduces the Slider Revolution output.
   Responsive model: a fixed 1240x749 design grid scaled by --ph-scale (set by
   hero.js = min(1, sliderWidth/1240)), so layer size + position scale together,
   exactly like RS6. Backgrounds are CSS (no <img>, no alt) to match RS6/SEO. */

/* Slider occupies its container width (matches RS6's wrapper/background = ~1299px
   centred at this viewport). The 1240 grid is centred in it via --ph-gx (hero.js). */
.paras-hero{position:relative;width:100%;overflow:hidden;
  background:#E7E7E7;height:var(--ph-h,749px);--ph-scale:1;--ph-gx:0px;}
.paras-hero__track{position:absolute;inset:0;}

/* Slides cross-fade over 600ms linear (RS6 slideChange speed 600, *opacity* fade). */
.paras-hero__slide{position:absolute;inset:0;opacity:0;z-index:1;
  transition:opacity .6s linear;will-change:opacity;}
.paras-hero__slide.is-active{opacity:1;z-index:2;}

.paras-hero__bg{position:absolute;inset:0;background-color:#E7E7E7;
  background-position:center center;background-repeat:no-repeat;background-size:cover;}

/* 1240x749 design grid: scaled from top-left, left offset (--ph-gx, set by hero.js)
   centres the scaled grid in the full-bleed hero — matches RS6 layer positions. */
.paras-hero__grid{position:absolute;top:0;left:var(--ph-gx,0);width:1240px;height:749px;
  transform:scale(var(--ph-scale));transform-origin:top left;}
.paras-hero__content{position:absolute;inset:0;}

/* Heading wrapper = the absolutely-positioned headline block (left 31, top 217).
   The title sits inside it as a static element, so with no subtitle the headline
   renders at the exact same position as before. */
.paras-hero__heading{position:absolute;left:31px;top:217px;}
/* Headline: Poppins 700, 90/100, #fff. Non-heading element (matches RS6 outline). */
.paras-hero__title{margin:0;font-family:"Poppins",sans-serif;font-weight:700;
  font-size:90px;line-height:100px;color:#fff;white-space:nowrap;text-align:left;}
/* Optional subtitle (only output when set) — flows directly under the headline. */
.paras-hero__subtitle{margin:10px 0 0;font-family:"Open Sans",sans-serif;font-weight:400;
  font-size:24px;line-height:1.4;color:#fff;text-align:left;}
/* Button layer (rendered by the trx_sc_button reproduction). RS6 set the layer's
   parent font-size to 20px; the em-based trx button inherits it (→ 21.18px) and
   scales with the grid. */
.paras-hero__btn
 {
    position: absolute;
    left: 30px;
    top: 495px;
    font-size: var(--ph-btnfs, 20px);
    background-color: black;
    padding: 6px 23px;
}

/* Layer entrance fade (300ms linear) + phase-locked idle yoyo float (±10px, linear,
   6s headline / 4s button), started when the slide becomes active. */
.paras-hero__heading,.paras-hero__btn{opacity:0;transition:opacity .3s linear;}
.paras-hero__slide.is-active .paras-hero__heading,
.paras-hero__slide.is-active .paras-hero__btn{opacity:1;}
@keyframes paras-hero-floatY{from{transform:translateY(-10px);}to{transform:translateY(10px);}}
.paras-hero__slide.is-active .paras-hero__heading{animation:paras-hero-floatY 6s linear infinite alternate;}
.paras-hero__slide.is-active .paras-hero__btn{animation:paras-hero-floatY 4s linear infinite alternate;}

/* Desktop-only arrows (RS6 hideUnder 1300px; bottom-right). hero.js adds
   .ph-arrows-on when the slider is >=1300px wide. */
.paras-hero__arrow{display:none;}
.paras-hero.ph-arrows-on .paras-hero__arrow{display:block;position:absolute;z-index:5;
  bottom:100px;width:40px;height:40px;cursor:pointer;}
.paras-hero__arrow--prev{right:136px;}
.paras-hero__arrow--next{right:74px;}
.paras-hero__arrow::before{content:"";position:absolute;top:50%;left:50%;width:14px;height:14px;
  border-top:2px solid #fff;border-left:2px solid #fff;}
.paras-hero__arrow--prev::before{transform:translate(-30%,-50%) rotate(-45deg);}
.paras-hero__arrow--next::before{transform:translate(-70%,-50%) rotate(135deg);}

/* ---- Mobile (≤767px): drop the proportional-scale grid and use a natural, readable
   stacked layout. The desktop scale model shrinks the subtitle to ~7px and the whole
   block to "tiny desktop"; on phones we instead lay the headline/subtitle/button out
   in normal flow at mobile-appropriate sizes, vertically centred over the background. */
@media (max-width:767px){
  .paras-hero{ height:auto !important; min-height:440px; }
  .paras-hero__grid{ position:absolute; inset:0; left:0 !important; width:auto; height:auto;
    transform:none !important; }
  .paras-hero__content{ position:static; display:flex; flex-direction:column;
    justify-content:center; height:100%; box-sizing:border-box; padding:30px 22px; }
  .paras-hero__heading{ position:static; }
  .paras-hero__title{ font-size:clamp(24px,7.4vw,32px); line-height:1.18; white-space:normal; }
  .paras-hero__subtitle{ font-size:clamp(13.5px,4vw,16px); line-height:1.5; margin-top:12px; max-width:36ch; }
  .paras-hero__btn{ position:static; font-size:15px !important; margin-top:20px; }
  /* calm the idle float on mobile so text doesn't bob in the centred layout */
  .paras-hero__slide.is-active .paras-hero__heading,
  .paras-hero__slide.is-active .paras-hero__btn{ animation:none; }
}