/*!
 * Parex V2 — homepage stylesheet.
 *
 * Ported from the approved design file. Scoped to `body.parex-v2`, which the
 * theme adds to the V2 page, so it is independent of any post ID and survives
 * a move between local, staging and live.
 *
 * Colours and type resolve through the Elementor kit globals (V2 Ink, V2 Gold,
 * V2 Mono Label and friends), which functions.php seeds on activation.
 */
/* ── Global tokens: repair and base typography ──────────────────────
   Everything on this page draws from the V2 kit globals. Two repairs are
   needed because of how Elementor emits them. */

/* 1. Elementor quotes a font-family value, so the mono stack came out as
      "ui-monospace,Menlo,Consolas,monospace" — one nonexistent font name.
      Redefining the variable restores the stack for every widget that uses
      the V2 Mono Label global, without touching the widgets themselves. */
body.elementor-kit-8{
  --e-global-typography-pxmono-font-family:ui-monospace,Menlo,Consolas,monospace}

/* 2. The kit sets Grey Cliff on body and every heading, so anything not given
      an explicit global inherited the wrong typeface. Re-base this page on the
      V2 Archivo global. Scoped to the page, so no other page changes. */
html body.parex-v2,
html body.parex-v2 .elementor-widget-text-editor,
html body.parex-v2 .elementor-widget-heading,
html body.parex-v2 input,
html body.parex-v2 label,
html body.parex-v2 select,
html body.parex-v2 textarea,
html body.parex-v2 button{
  font-family:var(--e-global-typography-pxbodyt-font-family),Helvetica,Arial,sans-serif}
html body.parex-v2 h1,
html body.parex-v2 h2,
html body.parex-v2 h3,
html body.parex-v2 h4,
html body.parex-v2 h5,
html body.parex-v2 h6{
  font-family:var(--e-global-typography-pxdisp-font-family),Helvetica,Arial,sans-serif;
  color:var(--e-global-color-pxink)}

/* Parex V2 homepage — design detail on top of the Elementor layout.
   Everything here is presentational. The page structure, copy and images stay
   fully editable in Elementor; these rules only restore the hairline rules,
   mono micro-labels and hero scrim the comp is built on.
   Hooks are the px-* classes set on each widget's Advanced > CSS Classes. */

/* ── Hero: a bottom-weighted scrim, so the photo stays bright up top and the
   copy sits on darkness. Elementor's flat overlay greys out the whole image. */
.px-hero > .elementor-background-overlay{
  background:linear-gradient(to top,
    rgba(0,0,0,0.66) 0%, rgba(0,0,0,0.30) 48%, rgba(0,0,0,0) 84%)!important;
  opacity:1!important;
}
.px-hero .elementor-widget-heading,
.px-hero .elementor-widget-text-editor{text-shadow:0 1px 18px rgba(0,0,0,0.35)}
.px-hero h1{letter-spacing:-0.03em!important}

/* ── Eyebrow: gold rule, then a mono label. ── */
.px-eyebrow .elementor-heading-title{
  display:flex;align-items:center;gap:14px;white-space:nowrap}
.px-eyebrow .elementor-heading-title::before{
  content:"";display:inline-block;width:26px;height:1px;background:var(--e-global-color-pxgold);flex:0 0 auto}
.px-eyebrow-light .elementor-heading-title::before{height:2px;background:var(--e-global-color-pxgold)}

/* ── Brand cards ── */
.px-bcard{transition:border-color 200ms ease}
.px-bcard:hover{border-color:var(--e-global-color-pxhrst)!important}
.px-bcard .px-cat p{
  font-size:13.5px;font-weight:600;line-height:1.35;letter-spacing:-0.005em;margin:0}
/* The gold rule that sits under each card's category line. */
.px-bcard .px-cat p::after{
  content:"";display:block;width:26px;height:2px;background:var(--e-global-color-pxgold);margin-top:10px}
.px-bcard .px-cardlink .elementor-button{
  background:none!important;border:none!important;padding:0!important;
  color:var(--e-global-color-pxgldd)!important;font-size:10px!important;letter-spacing:0.16em}
.px-bcard .px-cardlink .elementor-button:hover{color:var(--e-global-color-pxink)!important;background:none!important}
.px-bcard .elementor-widget-image img{transition:transform 600ms cubic-bezier(.2,.6,.2,1)}
.px-bcard:hover .elementor-widget-image img{transform:scale(1.03)}

/* ── Brand accordion ── */
.px-acc .elementor-accordion-item{border-color:var(--e-global-color-pxhair)!important;margin-bottom:0}
.px-acc .elementor-tab-title{
  font-size:15px!important;font-weight:600;letter-spacing:-0.01em;padding:20px 22px!important}
.px-acc .elementor-tab-title.elementor-active{border-bottom:1px solid var(--e-global-color-pxhair)}
.px-acc .elementor-tab-content{padding:22px!important;font-size:15px;line-height:1.65}
.px-acc .elementor-tab-content a{
  color:var(--e-global-color-pxgldd);text-decoration:none;font-size:11px;letter-spacing:0.16em;text-transform:uppercase}
.px-acc .elementor-tab-content a:hover{color:var(--e-global-color-pxink)}

/* ── "Why Parex" and "Where to next" cards ── */
.px-why,.px-path{transition:border-color 200ms ease,transform 260ms cubic-bezier(.2,.6,.2,1)}
.px-why:hover,.px-path:hover{border-color:var(--e-global-color-pxhrst)!important}
.px-path:hover{transform:translateY(-8px)}
.px-why h3,.px-path h3{font-size:18px!important;font-weight:700;letter-spacing:-0.01em;line-height:1.3}
.px-path .elementor-button{
  background:none!important;border:none!important;padding:0!important;
  color:var(--e-global-color-pxgldd)!important;font-size:11px!important;letter-spacing:0.18em}
.px-path .elementor-button:hover{color:var(--e-global-color-pxink)!important}

/* ── Contact block: hairline rule over each column, as in the comp. ── */
.px-k .elementor-heading-title{
  border-top:1px solid var(--e-global-color-pxink);padding-top:24px;display:block;margin-bottom:14px}
.px-v .elementor-heading-title{font-size:24px!important;font-weight:600;letter-spacing:-0.01em}
.px-v-sm .elementor-heading-title{font-size:18px!important;line-height:1.4}

/* ── Forms: the design's underline fields and mono uppercase labels. ── */
.px-form .elementor-field-group label{
  font-family:var(--e-global-typography-pxmono-font-family)!important;
  font-size:10px!important;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--e-global-color-pxlabl)!important;margin-bottom:6px}
.px-form .elementor-field-group .elementor-field,
.px-form .elementor-field-group select{
  background:transparent!important;border:none!important;
  border-bottom:1px solid rgba(18,18,16,0.3)!important;border-radius:0!important;
  padding:14px 0!important;font-size:16px!important;color:var(--e-global-color-pxink)!important;
  box-shadow:none!important}
.px-form .elementor-field-group .elementor-field:focus,
.px-form .elementor-field-group select:focus{
  border-bottom:2px solid var(--e-global-color-pxink)!important;outline:none}
.px-form textarea.elementor-field{min-height:96px}
.px-form .elementor-field-type-submit button{
  letter-spacing:0.16em;border-radius:0!important;padding:17px 28px!important}
.px-form-nl .elementor-field-group label{position:absolute;left:-9999px}

/* ── Responsive ── */
@media (max-width:1024px){
  .px-bcard .px-cat p{font-size:13px}
}
@media (max-width:767px){
  .px-hero h1{font-size:38px!important}
  .px-eyebrow .elementor-heading-title{white-space:normal}
}

/* Card photo is flush to the card edge; text and link keep their inset. */
.px-bcard .px-cat{padding-left:18px;padding-right:18px}
.px-bcard > .elementor-widget-wrap > .elementor-inner-section:not(.px-brow){margin-bottom:18px}
.px-bcard > .elementor-widget-wrap > .elementor-inner-section .elementor-container{max-width:none}
/* Elementor's default column padding insets the card photo; remove it so the
   panel meets the card edge as the comp has it. */
.px-bcard > .elementor-widget-wrap > .elementor-inner-section > .elementor-container > .elementor-column > .elementor-widget-wrap{padding:0}
.px-bcard > .elementor-widget-wrap{padding:0!important}
.px-bcard .elementor-inner-section:not(.px-brow){width:100%}

/* ── Closer port of the approved stylesheet onto Elementor's markup ── */

/* Section rhythm. The comp uses viewport-relative padding; matching it keeps
   the vertical proportions identical at every width. */
body.parex-v2 .elementor-section.elementor-top-section{padding-left:4.5vw;padding-right:4.5vw}
body.parex-v2 .elementor-section .elementor-container{max-width:1560px}

/* Type scale, matched to the comp rather than Elementor's defaults. */
body.parex-v2 h2.elementor-heading-title{
  font-size:clamp(30px,3.2vw,48px)!important;line-height:1.08!important;
  letter-spacing:-0.03em!important;font-weight:700!important}
body.parex-v2 .px-hero h1.elementor-heading-title{
  font-size:clamp(40px,4.2vw,64px)!important;line-height:1.02!important;letter-spacing:-0.03em!important}

/* Lead paragraphs. */
.px-hero .elementor-widget-text-editor{font-size:17.5px;line-height:1.62}

/* "Why Parex" cards — flat hairline boxes, generous inner padding. */
.px-why{border-color:var(--e-global-color-pxhrmd)!important}
.px-why h3.elementor-heading-title{margin-bottom:12px!important}
.px-why .elementor-widget-text-editor{font-size:15px;line-height:1.65;color:var(--e-global-color-pxbody)}

/* "Where to next" cards. */
.px-path h3.elementor-heading-title{font-size:20px!important;font-weight:600!important;letter-spacing:-0.01em!important}
.px-path .elementor-widget-text-editor{font-size:14.5px;line-height:1.6}
.px-path .px-eyebrow .elementor-heading-title::before{display:none}
.px-path .elementor-widget-button{border-top:1px solid var(--e-global-color-pxhrmd);padding-top:16px;margin-top:4px}

/* Contact block. */
.px-v .elementor-heading-title{margin-bottom:10px}
.px-k + .elementor-widget-heading{margin-top:0}

/* Accordion, styled as the comp's brand panels. */
.px-acc .elementor-accordion{border:none}
.px-acc .elementor-accordion-item{border:1px solid var(--e-global-color-pxhair);border-bottom:none}
.px-acc .elementor-accordion-item:last-child{border-bottom:1px solid var(--e-global-color-pxhair)}
.px-acc .elementor-tab-title a{letter-spacing:-0.01em}

/* Newsletter panel: the oversized watermark line from the comp. */
body.parex-v2 .px-form-nl{position:relative;z-index:1}

/* Dark closing band. */
body.parex-v2 .elementor-section[class*="elementor-element"] .elementor-widget-button .elementor-button{
  border-radius:0}

/* Buttons: mono, uppercase, square, matching the comp's rhythm. */
body.parex-v2 .elementor-button{
  font-size:11.5px!important;letter-spacing:0.16em!important;text-transform:uppercase!important;
  border-radius:0!important}

@media (max-width:900px){
  body.parex-v2 .elementor-section.elementor-top-section{padding-left:5vw;padding-right:5vw}
}

/* Card photo area to the comp's 4:3 proportion. */
.px-bcard > .elementor-widget-wrap > .elementor-inner-section > .elementor-container{
  min-height:0}
.px-bcard .elementor-inner-section:not(.px-brow){aspect-ratio:4/3;display:flex}
.px-bcard .elementor-inner-section:not(.px-brow) > .elementor-container{width:100%;align-items:center}

/* The fixed header overlaps the hero, as in the comp. */
.px-hero{margin-top:0}

/* Brand card gutters. Elementor's column-gap control does not apply here, and
   margins on a 20%-wide column overflow the row and wrap the fifth card, so the
   gap goes on the flex container instead. */
.px-brandrow > .elementor-container{gap:20px;flex-wrap:wrap}
.px-brandrow > .elementor-container > .px-bcard{
  margin:0!important;flex:1 1 0;min-width:0}

/* The comp fades the hero into the page rather than cutting it hard. */
.px-hero{position:relative}
.px-hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:22px;pointer-events:none;z-index:2;
  background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,0.75) 70%,#FFF 100%)}

/* ── Matched to the original stylesheet ─────────────────────────────
   Values below are taken directly from the supplied design file. */

/* .statement — the About paragraph is display-scale, not body copy. */
.px-statement p{
  font-size:clamp(24px,2vw,34px)!important;font-weight:400!important;
  line-height:1.38!important;letter-spacing:-0.02em!important;
  color:var(--e-global-color-pxink)!important;margin:28px 0 0!important;text-wrap:pretty}

/* .h2x — "Where to next." runs larger than the other section headings. */
.px-h2x .elementor-heading-title{
  font-size:clamp(34px,3.8vw,56px)!important;line-height:1.05!important;
  letter-spacing:-0.03em!important;font-weight:700!important}

/* .chead .lbl — "Our Brands" is 13px Archivo, not the mono label. */
.px-chead-lbl .elementor-heading-title{
  font-size:13px!important;font-weight:500!important;letter-spacing:0.24em!important;
  text-transform:uppercase;color:var(--e-global-color-pxlabl)!important}

/* .secnum — section eyebrows. */
.px-eyebrow .elementor-heading-title{
  font-size:10px!important;letter-spacing:0.26em!important}
.px-eyebrow{margin-bottom:30px}

/* Section rhythm is viewport-relative in the original, which is what keeps the
   page's proportions across screen sizes. */
body.parex-v2 .elementor-top-section{padding-top:12vh;padding-bottom:11vh}
body.parex-v2 .px-hero{padding-top:0!important;padding-bottom:64px!important}

/* .nlmarq — the oversized watermark behind the newsletter panel. */
.px-nlpanel{position:relative;overflow:hidden}
.px-nlpanel::before{
  content:"Better products. Better living.   Better products. Better living.   ";
  white-space:pre;
  position:absolute;left:0;top:50%;transform:translateY(-50%);
  white-space:nowrap;pointer-events:none;z-index:0;
  font-weight:800;font-size:clamp(80px,9vw,150px);letter-spacing:-0.03em;
  color:rgba(18,18,16,0.05);line-height:1;
  animation:pxMarq 38s linear infinite}
@keyframes pxMarq{from{transform:translate(0,-50%)}to{transform:translate(-50%,-50%)}}
@media (prefers-reduced-motion:reduce){.px-nlpanel::before{animation:none}}
.px-nlpanel > .elementor-container{position:relative;z-index:1}

/* Card meta row: link sits right, as the comp's "+ MORE / VISIT SITE" row does. */
.px-bcard .px-cardlink{text-align:right}
.px-bcard .px-cardlink .elementor-button{float:right}

/* Per-section rhythm, matching the original rather than one global value:
   #brands opens at 5vh, .sec is 12vh/11vh, .pathsec 13vh, .newsband 10vh. */
.px-brandhead{padding-top:5vh!important;padding-bottom:2vh!important}
.px-brandrow{padding-top:0!important;padding-bottom:6vh!important}
.px-accsec{padding-top:2vh!important;padding-bottom:11vh!important}

/* Card photo panel: 4:3, no forced height. */
.px-bcard .elementor-inner-section:not(.px-brow){aspect-ratio:4/3;min-height:0!important}
.px-bcard .elementor-inner-section:not(.px-brow) > .elementor-container{min-height:0!important;height:100%}

/* Hero eyebrow uses the larger 11px variant in the comp. */
.px-hero .px-eyebrow .elementor-heading-title{font-size:11px!important}

/* Stronger bottom scrim, matching the original's gradient stops. */
.px-hero > .elementor-background-overlay{
  background:linear-gradient(to top,
    rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.22) 52%, rgba(0,0,0,0) 82%)!important}

/* Hero copy sits on the bottom edge, as in the original (.hero{align-items:flex-end}). */
.px-hero > .elementor-container{align-items:flex-end!important}
.px-hero > .elementor-container > .elementor-column > .elementor-widget-wrap{align-content:flex-end}

/* ── Responsive, following the original's breakpoints ───────────────
   Original: ≤1100 about/why stack and paths go 2-up; ≤900 brand cards 2-up,
   contact and CTA stack, sections drop to 8vh/5vw; ≤560 everything 1-up. */

@media (max-width:1100px){
  /* About stacks; the photo goes full width under the copy. */
  body.parex-v2 .elementor-top-section .elementor-container{flex-wrap:wrap}
  .px-whyrow > .elementor-container > .elementor-column{flex:0 0 100%!important;max-width:100%!important}
  .px-pathrow > .elementor-container > .elementor-column{flex:0 0 calc(50% - 11px)!important;max-width:calc(50% - 11px)!important}
  .px-pathrow > .elementor-container{gap:22px;flex-wrap:wrap}
  .px-pathsec .elementor-widget-wrap > .elementor-inner-section{width:100%}
  .px-brandrow > .elementor-container > .px-bcard{flex:0 0 calc(33.333% - 14px);max-width:calc(33.333% - 14px)}
}

@media (max-width:900px){
  body.parex-v2 .elementor-top-section{padding-top:8vh!important;padding-bottom:8vh!important;
    padding-left:5vw!important;padding-right:5vw!important}
  .px-brandrow > .elementor-container > .px-bcard{flex:0 0 calc(50% - 10px);max-width:calc(50% - 10px)}
  /* Contact columns, the CTA band and the newsletter panel all stack. */
  .px-crow > .elementor-container > .elementor-column{flex:0 0 100%!important;max-width:100%!important}
  .px-nlpanel > .elementor-container > .elementor-column{flex:0 0 100%!important;max-width:100%!important}
  .px-nlpanel{padding:36px 28px!important;margin-left:5vw!important;margin-right:5vw!important}
  .px-nlpanel::before{font-size:80px}
  .px-statement p{font-size:24px!important}
  /* Form fields go single column. */
  .px-form .elementor-field-group{width:100%!important;max-width:100%!important}
}

@media (max-width:560px){
  .px-brandrow > .elementor-container > .px-bcard,
  .px-pathrow > .elementor-container > .elementor-column{
    flex:0 0 100%!important;max-width:100%!important}
  .px-hero h1.elementor-heading-title{font-size:clamp(32px,8.4vw,52px)!important}
  .px-h2x .elementor-heading-title{font-size:clamp(30px,7vw,40px)!important}
  .px-eyebrow .elementor-heading-title{letter-spacing:0.12em!important;white-space:normal}
  /* Only the dark band's pair stacks full width, as in the original. */
  .px-ctabtns .elementor-button{width:100%;text-align:center}
  .px-nlpanel::before{font-size:64px}
}

@media (max-width:640px){
  /* The eyebrow's wide tracking runs out of room; ease it and let it wrap. */
  .px-hero .px-eyebrow .elementor-heading-title{
    font-size:9.5px!important;letter-spacing:0.14em!important;flex-wrap:wrap;row-gap:6px}
  .px-brandhead{padding-top:4vh!important;padding-bottom:0!important}
  .px-brandhead .elementor-widget-divider{margin-bottom:0}
  /* Tighten the card meta so five stacked cards do not run so long. */
  .px-bcard .px-cat p{margin-bottom:0}
  .px-bcard{padding-bottom:14px!important}
}

/* About stacks below 1100, as the original does, with the photo full width. */
@media (max-width:1100px){
  .px-about > .elementor-container > .elementor-column{
    flex:0 0 100%!important;max-width:100%!important}
  .px-about .elementor-widget-image,
  .px-about .elementor-widget-image .elementor-widget-container,
  .px-about .elementor-widget-image img{width:100%!important;max-width:100%!important}
  .px-about > .elementor-container{gap:34px}
}

/* Paths band: heading and cards share one photo background, as the original. */
.px-pathsec{position:relative;overflow:hidden}
.px-pathsec > .elementor-background-overlay{background-color:var(--e-global-color-pxsand)!important}
.px-pathsec .px-pathrow{margin-top:44px}
.px-pathsec .px-pathrow > .elementor-container{gap:22px;align-items:stretch}

/* .chip.bl — the location tag on the About photo. */
.px-afig{position:relative}
.px-afig .elementor-widget-container{position:relative;display:block}
.px-afig .elementor-widget-container::after{
  content:"5 Tolich Place · Henderson";
  position:absolute;left:0;bottom:0;z-index:2;
  background:var(--e-global-color-pxink);color:#FFF;padding:8px 12px;
  font-size:9.5px;line-height:1;letter-spacing:0.18em;text-transform:uppercase}

/* Newsletter: one underlined row — field flexes, button sits at its end,
   matching .nlform in the original. */
.px-form-nl .elementor-form-fields-wrapper{
  display:flex;align-items:flex-end;flex-wrap:nowrap;gap:0;
  border-bottom:1px solid rgba(18,18,16,0.3)}
.px-form-nl .elementor-field-group{flex:1 1 auto;margin-bottom:0}
.px-form-nl .elementor-field-group.elementor-field-type-submit{flex:0 0 auto;width:auto!important}
.px-form-nl .elementor-field-group .elementor-field{
  border-bottom:none!important;padding:16px 0!important}
.px-form-nl .elementor-field-group .elementor-field:focus{border-bottom:none!important}
.px-nlpanel{padding:clamp(40px,5vw,72px)!important}

/* ── Brand card meta row ─────────────────────────────────────────────
   The original's .brow: "+ More" left, "Visit Site" right, on one line
   (display:flex; justify-content:space-between; padding-top:4px). */
.px-bcard .px-brow{width:100%;margin-top:auto;margin-bottom:0!important;padding:2px 18px 0!important}
.px-bcard .px-brow > .elementor-container{
  display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:10px}
.px-bcard .px-brow > .elementor-container > .elementor-column{width:auto!important;flex:0 0 auto}
.px-bcard .px-brow .elementor-widget-wrap{padding:0!important}

/* .plusb — 10px mono, label grey, with the larger "+" glyph. */
.px-bcard .px-more .elementor-button{
  background:none!important;border:none!important;padding:0!important;
  font-family:var(--e-global-typography-pxmono-font-family)!important;
  font-size:10px!important;letter-spacing:0.16em!important;text-transform:uppercase;
  color:var(--e-global-color-pxlabl)!important;white-space:nowrap}
.px-bcard .px-more .elementor-button:hover{color:var(--e-global-color-pxink)!important;background:none!important}
/* The original renders the plus a few px larger than the label. */
.px-bcard .px-more .elementor-button-text{font-size:10px}
.px-bcard .px-more .elementor-button-text::first-letter{font-size:14px;line-height:1}

/* .xp — gold-deep, right-aligned, never wraps. */
.px-bcard .px-cardlink .elementor-button{white-space:nowrap}

/* .brow is pushed to the card foot by margin-top:auto, exactly as the original
   does, so the gap above it is whatever the equal-height row leaves. Only the
   top padding is set here; a margin on the paragraph would just push it down. */
.px-bcard .px-cat p{margin:0!important}
.px-bcard .px-brow{padding-top:0!important;padding-bottom:0!important}

/* Card foot: 16px below the meta row, as .binfo has. */
.px-bcard{padding-bottom:16px!important}

/* ── About: match the original's .about grid ─────────────────────────
   .about{grid-template-columns:1.05fr 1fr;gap:clamp(40px,5vw,90px);
   align-items:center} and .about .statement{margin:18px 0 0}. */
.px-about > .elementor-container{
  align-items:center!important;gap:clamp(40px,5vw,90px);flex-wrap:nowrap}
.px-about > .elementor-container > .elementor-column{padding:0!important;max-width:none}
.px-about > .elementor-container > .elementor-column > .elementor-widget-wrap{padding:0!important}
.px-about > .elementor-container > .elementor-column:first-child{flex:1.05 1 0}
.px-about > .elementor-container > .elementor-column:last-child{flex:1 1 0}
.px-about .px-statement p{margin:18px 0 0!important}
.px-about .px-afig,
.px-about .px-afig .elementor-widget-container,
.px-about .px-afig img{width:100%!important;max-width:100%!important;height:auto}
/* Elementor adds its default widget spacing below the heading, which stacked
   on top of the statement's own 18px margin. */
.px-about .elementor-widget:not(:last-child){margin-bottom:0}
/* ...but the eyebrow keeps its own 30px, as .secnum does in the original. */
.px-about .px-eyebrow{margin-bottom:30px!important}

/* ── Why Parex cards: match .whycard / .wtx from the original ─────────
   .whyrow{gap:22px}  .whycard{border:1px solid hairline-mid}
   .wtx{padding:28px 26px 30px}
   .whycard b{font-size:18px;font-weight:700;line-height:1.3;margin-bottom:12px}
   .whycard p{font-size:15px;line-height:1.65}
   The title was rendering at weight 400 because the global typography rule
   outranks a plain class selector — hence !important here. */
.px-whyrow > .elementor-container{gap:22px}
.px-whyrow > .elementor-container > .elementor-column{padding:0!important;max-width:none;flex:1 1 0}
.px-why{padding:0!important}
.px-why > .elementor-widget-wrap{padding:28px 26px 30px!important}
.px-why h3.elementor-heading-title{
  margin:0!important;
  font-size:18px!important;font-weight:700!important;
  line-height:1.3!important;letter-spacing:-0.01em!important;
  color:var(--e-global-color-pxink)!important}
/* Put the whole 12px on the heading and zero everything else, so no default
   widget spacing can stack on top of it. */
.px-why .elementor-widget{margin-bottom:0!important}
.px-why .elementor-widget-heading{margin-bottom:12px!important}
.px-why .elementor-widget-text-editor,
.px-why .elementor-widget-text-editor .elementor-widget-container{margin-top:0!important}
.px-why .elementor-widget-text-editor p{
  margin:0!important;font-size:15px!important;line-height:1.65!important;
  color:var(--e-global-color-pxbody)!important}

/* ── Newsletter: a bordered panel inset inside the band ───────────────
   The original nests .nlpanel inside .newsband{padding:10vh 4.5vw} > .in,
   so the gold box sits within the content width rather than running full
   bleed. Its heading is also smaller than a section H2:
   clamp(26px,2.4vw,38px). */
.px-nlpanel{
  /* The original centres .in (max-width 1560) inside .newsband's 4.5vw
     padding. A fixed left margin plus max-width pushed the panel left on wide
     screens, so centre it and cap the width the same way. */
  margin-left:auto!important;margin-right:auto!important;
  max-width:min(1560px, calc(100% - 9vw));
  margin-top:10vh!important;margin-bottom:10vh!important;
  padding:clamp(40px,5vw,72px)!important}
.px-nlpanel > .elementor-container{
  align-items:center;gap:clamp(40px,4vw,80px);max-width:none}
.px-nlpanel > .elementor-container > .elementor-column{padding:0!important}
.px-nlpanel > .elementor-container > .elementor-column > .elementor-widget-wrap{padding:0!important}
.px-nlpanel h2.elementor-heading-title{
  font-size:clamp(26px,2.4vw,38px)!important;line-height:1.08!important}