/* 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:light-dark(#E7E7E7, #1D201D);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:light-dark(#E7E7E7, #1D201D);
  background-position:center center;background-repeat:no-repeat;background-size:cover;
  filter:var(--pi-photo-grade);}
/* Directional scrim so the white headline holds on any slide (bright or dark
   photo). Darkens the left third (where the headline sits) and the bottom;
   fades to clear across the image so the photo still reads. Sits ABOVE the
   photo but BELOW the text layer (.paras-hero__grid is a later sibling). */
.paras-hero__bg::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(94deg, rgba(17,19,17,.62) 0%, rgba(17,19,17,.28) 42%, rgba(17,19,17,0) 66%),
    linear-gradient(0deg,  rgba(17,19,17,.42) 0%, rgba(17,19,17,0) 38%);
}

/* 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). */
/* 600, not 700: this was the ONLY 700 on the site — every other display
   heading resolves to --pi-fw-display (500) via css/typography.css, so the
   hero read markedly heavier than everything under it. 600 keeps the hero
   dominant at 90px without breaking the weight ladder. */
.paras-hero__title{margin:0;font-family:var(--pi-font-display);font-weight:500;
  font-size:90px;line-height:100px;color:#fff;white-space:nowrap;text-align:left;
  letter-spacing:-.02em;}
/* Optional subtitle (only output when set) — flows directly under the headline. */
.paras-hero__subtitle{margin:10px 0 0;font-family:var(--pi-font-body);font-weight:400;
  font-size:24px;line-height:1.4;color:#fff;text-align:left;}
/* Google rating badge — sits UNDER the hero CTA (reuses the service-area
   .pa-rating: score · gold stars · "GOOGLE RATING"). Absolutely placed in the
   scaled 1240 grid, left-aligned with the button (left:30) just below it
   (button is at top:495); a soft shadow keeps it legible on any slide. */
.paras-hero__rating.pa-rating{
  position:absolute;
  left:30px;
  top:566px;
  z-index:4;
  gap:12px;
  margin:0;
}
.paras-hero__rating .pa-rating__score{ font-size:32px; text-shadow:0 2px 6px rgba(0,0,0,.5); }
.paras-hero__rating .pa-rating__stars{ font-size:14px; letter-spacing:2.5px; }
.paras-hero__rating .pa-rating__label{ font-size:10px; color:rgba(244,241,236,.9); text-shadow:0 1px 4px rgba(0,0,0,.5); }
/* mobile hero is a static flex column — let the badge flow under the button */
@media (max-width:767px){
  .paras-hero__rating.pa-rating{ position:static; margin-top:18px; gap:10px; }
  .paras-hero__rating .pa-rating__score{ font-size:26px; }
  .paras-hero__rating .pa-rating__stars{ font-size:13px; }
  .paras-hero__rating .pa-rating__label{ font-size:9.5px; }
}
/* 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);
}
/* SOLID primary CTA (design-review fix): the ghost outline made the single
   highest-value action the lowest-contrast thing on the page. A solid
   champagne fill with white label gives the hero one unmistakable primary
   action; it deepens to antique bronze on hover. Larger label for presence. */
.paras-hero__btn a.sc_button{
    display:inline-flex;
    align-items:center;
    gap:12px;
    background:var(--pi-accent-fill) !important;
    border:1px solid var(--pi-accent-fill) !important;
    color:var(--pi-on-accent) !important;
    padding:17px 34px !important;
    font-size:13.5px !important;
    font-weight:600;
    letter-spacing:.16em;
    text-transform:uppercase;
    line-height:1;
    box-shadow:0 14px 30px -14px rgba(25,27,25,.5);
    transition:background .25s var(--pi-ease, ease), border-color .25s ease, transform .25s var(--pi-ease, ease), box-shadow .25s ease;
}
/* no arrow / no icon / no underline artifacts — plain ghost label */
.paras-hero__btn a.sc_button::after,
.paras-hero__btn a.sc_button::before,
.paras-hero__btn .sc_button_title::after,
.paras-hero__btn .sc_button_title::before,
.paras-hero__btn .sc_button_text::after{
    display:none !important;
}
.paras-hero__btn a.sc_button:hover{
    background:var(--pi-accent-dk) !important;
    border-color:var(--pi-accent-dk) !important;
    transform:translateY(-2px);
    box-shadow:0 18px 36px -14px rgba(25,27,25,.6);
}

/* Entrance: headline + button fade in as the slide becomes active. The old
   perpetual ±10px yoyo float read as restless/cheap; it's retired for a
   single fade+rise, and the background carries a slow Ken-Burns push for
   quiet cinematic life. All movement is gated to prefers-reduced-motion. */
.paras-hero__heading,.paras-hero__btn{opacity:0;transition:opacity .5s var(--pi-ease-lux, ease);}
.paras-hero__slide.is-active .paras-hero__heading,
.paras-hero__slide.is-active .paras-hero__btn{opacity:1;}
@media (prefers-reduced-motion:no-preference){
  @keyframes paras-hero-rise{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
  @keyframes paras-hero-kb{from{transform:scale(1.001);}to{transform:scale(1.06);}}
  .paras-hero__slide.is-active .paras-hero__heading{animation:paras-hero-rise .9s var(--pi-ease-lux, ease) both;}
  .paras-hero__slide.is-active .paras-hero__btn{animation:paras-hero-rise .9s var(--pi-ease-lux, ease) .12s both;}
  .paras-hero__slide.is-active .paras-hero__bg{animation:paras-hero-kb 9s ease-out both;}
}

/* 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; }
}