/* Perroplas Home — Elementor container rebuild.
   Loaded only when the Home template has handed the document to Elementor
   (see perroplas_website_elementor_active()). Tokens come from
   perroplas-brand.css, which is site-wide and a declared dependency.

   Why the styling lives here rather than in Elementor's own style controls:
   settings-based styling only paints once Elementor has regenerated its
   per-post CSS file, and the design's clip-paths, token colours and card rules
   stay far more reviewable as CSS than as a JSON blob. The element tree carries
   semantic classes; this sheet does the painting.

   Container rules are written as `body .e-con.pp-el-*` and widget rules as
   `body .elementor-widget.elementor-widget.pp-el-*`. Elementor's own sheet targets those same
   two-class selectors (`.e-con.e-flex{flex-direction:var(--flex-direction)}`)
   at equal specificity and is printed after this one, so it would win every
   tie on source order. The leading `body` breaks the tie without !important.
   Widget rules repeat `.elementor-widget` because Elementor defends its own
   `.e-con .elementor-widget.elementor-widget{margin-block-end:0}` with the
   same doubled-class trick, and that rule outranks a single-class one. */

/* ================= the page wrapper ================= */
/* perroplas-branding.php gives the rebuild a .pp-el-interior wrapper instead of
   .pp-interior, so none of the reading-column rules reach these containers.
   Hello's own content wrapper still needs releasing, exactly as .pp-interior
   does, and Hello's `body:not([class*=elementor-page-])` cap is skipped anyway
   because Elementor adds an elementor-page-<id> body class. */
body .pp-el-interior .page-content,
body .pp-el-interior .entry-content{width:100%;max-width:none;margin:0;padding:0}
body .pp-el-interior .page-content > *{max-width:none}

/* Every Elementor container ships with 10px of padding and a default gap. Both
   compound through the nesting here — a column inside a shell inside a section
   was insetting its text by 30px — and the design expresses all of its spacing
   through the rules below. Neutralise both, then let the specific rules that
   follow re-add exactly what the design calls for. This rule must stay ahead of
   them: it matches at equal specificity and would otherwise win on order. */
body .e-con[class*="pp-el-"]{padding:0;gap:0}

/* Elementor's global kit styles headings and body copy with its own font stack
   (`.elementor-kit-N h2{font-family:Roboto}`), which outranks a bare `h2` rule
   and would silently replace the design's type. State the design's families on
   the widget itself; every heading that is not display-faced — the eyebrows,
   the mono metadata, the rounded stat numerals — overrides this below at higher
   specificity. Elementor also forces `img{height:auto}`, so the design's fixed
   image heights need the same treatment. */
body .pp-el-sec .elementor-heading-title{font-family:var(--font-display);
  color:var(--text-heading);letter-spacing:var(--tracking-tight);
  line-height:var(--leading-relaxed)}
body .pp-el-sec h1.elementor-heading-title,
body .pp-el-sec h2.elementor-heading-title,
body .pp-el-sec h3.elementor-heading-title{line-height:var(--leading-snug)}
body .pp-el-sec .elementor-widget-text-editor,
body .pp-el-sec .elementor-widget-text-editor p{font-family:var(--font-core);
  font-size:var(--size-base);line-height:var(--leading-relaxed);color:var(--text-body)}

/* ================= design-system base, re-scoped ================= */
body .pp-el-sec,
body .pp-el-sec *,
body .pp-el-sec *::before,
body .pp-el-sec *::after{box-sizing:border-box}
body .pp-el-sec h1,
body .pp-el-sec h2,
body .pp-el-sec h3{
  font-family:var(--font-display);color:var(--text-heading);margin:0;
  line-height:var(--leading-snug);letter-spacing:var(--tracking-tight)}
body .pp-el-sec p{margin:0}
body .pp-el-sec ul,
body .pp-el-sec figure{margin:0}
body .pp-el-sec a{color:var(--text-link);text-decoration:none;
  transition:color var(--duration-fast) var(--ease-standard)}
body .pp-el-sec a:hover{color:var(--perro-green);text-decoration:underline;text-underline-offset:3px}
body .pp-el-sec img{display:block;max-width:100%}
body .pp-el-sec :focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

/* Elementor wraps every widget; the wrapper must not add box model of its own.
   Note what is NOT here: a blanket `.elementor-widget:not(:last-child){
   margin-bottom:0}`. It reads as harmless but matches at higher specificity
   than the per-widget rules below, so it silently cancelled every spacing
   margin the design asks for — the gap under each card's metadata line, the
   space above each promise list. Elementor adds no widget margins of its own
   inside a container, so there is nothing to reset. */
body .pp-el-sec .elementor-widget-container{margin:0}

/* ================= section shells ================= */
body .e-con.pp-el-sec{padding:0;gap:0;width:100%;max-width:none;
  font-family:var(--font-core);font-size:var(--size-base);
  line-height:var(--leading-relaxed);color:var(--text-body);
  -webkit-font-smoothing:antialiased}
body .e-con.pp-el-shell{width:100%;max-width:1200px;margin:0 auto;
  padding-inline:clamp(20px,4vw,56px);gap:0}

/* ================= shared type ================= */
body .elementor-widget.elementor-widget.pp-el-eyebrow .elementor-heading-title{
  font-family:var(--font-core);font-size:var(--type-eyebrow-size);
  font-weight:var(--weight-semibold);letter-spacing:var(--type-eyebrow-tracking);
  text-transform:uppercase;line-height:1.2;color:var(--text-eyebrow)}
body .elementor-widget.elementor-widget.pp-el-eyebrow--green .elementor-heading-title{color:var(--perro-green)}
body .elementor-widget.elementor-widget.pp-el-eyebrow--navy200 .elementor-heading-title{color:var(--navy-200)}
body .elementor-widget.elementor-widget.pp-el-eyebrow.pp-el-inverse .elementor-heading-title{color:var(--white)}
body .elementor-widget.elementor-widget.pp-el-h2 .elementor-heading-title{
  font-family:var(--font-display);font-size:var(--size-3xl);
  font-weight:var(--weight-black);letter-spacing:var(--tracking-tight);
  line-height:var(--leading-snug);text-transform:uppercase;color:var(--text-heading)}
body .elementor-widget.elementor-widget.pp-el-h2.pp-el-inverse .elementor-heading-title{color:var(--white)}
body .e-con.pp-el-headblock{gap:0;width:100%;max-width:none}
body .e-con.pp-el-headblock--wide{max-width:760px}
body .pp-el-headblock .pp-el-h2{margin-top:var(--space-3)}
body .pp-el-rule{width:56px;height:4px;background:var(--brand-accent);margin-top:var(--space-5)}
body .elementor-widget.elementor-widget.pp-el-lede{margin-top:var(--space-6);max-width:var(--prose-max)}
body .elementor-widget.elementor-widget.pp-el-lede p{font-size:var(--size-md);
  line-height:var(--leading-relaxed);color:var(--text-body)}
body .elementor-widget.elementor-widget.pp-el-lede.pp-el-inverse p{color:var(--navy-100)}
body .elementor-widget.elementor-widget.pp-el-body p{max-width:var(--prose-max);color:var(--text-body)}
body .elementor-widget.elementor-widget.pp-el-body.pp-el-inverse p{color:var(--navy-100);max-width:52ch}
body .pp-el-kicker{font-size:var(--size-2xs);font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--green-700)}
body .pp-el-kicker--green{color:var(--perro-green)}

/* ================= buttons ================= */
body .elementor-widget.elementor-widget.pp-el-btn .elementor-button{
  display:inline-flex;align-items:center;justify-content:center;width:auto;
  font-family:var(--font-core);font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;line-height:1;
  text-decoration:none;cursor:pointer;border-radius:var(--radius-button);
  transition:var(--transition-control);fill:currentColor}
body .elementor-widget.elementor-widget.pp-el-btn .elementor-button:hover{text-decoration:none}
body .elementor-widget.elementor-widget.pp-el-btn--md .elementor-button{padding:12px 26px;font-size:var(--size-sm);gap:9px}
body .elementor-widget.elementor-widget.pp-el-btn--lg .elementor-button{padding:16px 34px;font-size:var(--size-md);gap:11px}
body .elementor-widget.elementor-widget.pp-el-btn--accent .elementor-button{
  background:var(--brand-accent);color:var(--text-on-accent);
  border:2px solid var(--brand-accent);box-shadow:var(--shadow-inset)}
body .elementor-widget.elementor-widget.pp-el-btn--secondary .elementor-button{
  background:transparent;color:var(--brand-primary);border:2px solid var(--brand-primary)}
body .elementor-widget.elementor-widget.pp-el-btn--accent .elementor-button:hover{background:var(--green-600);border-color:var(--green-600)}
body .elementor-widget.elementor-widget.pp-el-btn--secondary .elementor-button:hover{background:var(--brand-primary);color:var(--white)}
/* The submit button inside the enquiry form is plain markup, not a widget. */
body .pp-el-sec .pp-el-submit{background:var(--brand-primary);color:var(--text-on-brand);
  border:2px solid var(--brand-primary);box-shadow:var(--shadow-inset);
  padding:16px 34px;font-size:var(--size-md);gap:11px;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-core);font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;line-height:1;
  cursor:pointer;border-radius:var(--radius-button);transition:var(--transition-control)}
body .pp-el-arrow{width:54px;height:54px;display:grid;place-items:center;background:var(--white);
  color:var(--perro-navy);border-radius:var(--radius-capsule);flex:0 0 auto}
body .pp-el-arrow:hover{text-decoration:none}
body .e-con.pp-el-ctarow{flex-direction:row;align-items:center;gap:12px;flex-wrap:wrap;width:100%}

/* ================= clip paths from the design ================= */
body .pp-el-clip-tr img{clip-path:polygon(0 0,calc(100% - 72px) 0,100% 72px,100% 100%,0 100%)}
body .pp-el-clip-br img{clip-path:polygon(0 0,100% 0,100% calc(100% - 64px),calc(100% - 64px) 100%,0 100%)}
body .pp-el-clip-bl img{clip-path:polygon(0 0,100% 0,100% 100%,64px 100%,0 calc(100% - 64px))}

/* ================= hero ================= */
body .e-con.pp-el-sec--hero{background:var(--perro-navy);
  padding:clamp(48px,7vw,88px) 0 clamp(72px,9vw,120px);
  clip-path:polygon(0 0,100% 0,100% 100%,88px 100%,0 calc(100% - 88px))}
body .e-con.pp-el-hero{gap:0}
body .e-con.pp-el-hero-top{flex-direction:row;flex-wrap:wrap;gap:clamp(24px,4vw,56px);
  align-items:flex-end;margin-top:clamp(24px,3vw,36px);width:100%}
body .elementor-widget.elementor-widget.pp-el-h1{flex:1 1 460px;min-width:0}
body .elementor-widget.elementor-widget.pp-el-h1 .elementor-heading-title{
  font-size:clamp(34px,5vw,62px);line-height:1.06;
  letter-spacing:var(--tracking-tighter);color:var(--white);font-weight:300;
  text-transform:none}
body .pp-el-h1-strong{font-weight:800}
body .elementor-widget.elementor-widget.pp-el-hero-lede{flex:1 1 300px;min-width:0;max-width:46ch}
body .elementor-widget.elementor-widget.pp-el-hero-lede p{font-size:var(--size-md);
  line-height:var(--leading-relaxed);color:var(--navy-100)}
body .elementor-widget.elementor-widget.pp-el-lede--dark p{color:var(--text-body)}
body .e-con.pp-el-hero .pp-el-ctarow{margin-top:clamp(28px,3.5vw,44px)}
body .e-con.pp-el-hero-foot{flex-direction:row;flex-wrap:wrap;gap:clamp(24px,4vw,56px);
  margin-top:clamp(48px,6vw,80px);align-items:stretch;width:100%}
body .e-con.pp-el-hero-points{flex:1 1 260px;min-width:0;justify-content:flex-end;gap:18px}
body .e-con.pp-el-hero-img{flex:1 1 440px;min-width:0;gap:0}
body .pp-el-hero-img img{width:100%;height:clamp(260px,32vw,400px);object-fit:cover}
body .pp-el-pointlist{list-style:none;padding:0;display:flex;flex-direction:column;gap:14px}
body .pp-el-pointlist li{display:flex;gap:14px;align-items:baseline;color:var(--white);
  font-size:var(--size-sm);font-weight:600;letter-spacing:var(--tracking-wide);
  border-top:1px solid rgba(255,255,255,.16);padding-top:14px}
body .pp-el-dash{width:10px;height:3px;background:var(--perro-green);flex:0 0 auto;
  transform:translateY(-4px)}

/* ================= about ================= */
body .e-con.pp-el-sec--about{background:var(--white);padding:clamp(56px,8vw,96px) 0}
body .e-con.pp-el-about{flex-direction:row;flex-wrap:wrap;gap:clamp(32px,5vw,72px);
  align-items:flex-start}
body .e-con.pp-el-about-media{flex:1 1 340px;min-width:0;position:relative;gap:0}
body .pp-el-about-media img{width:100%;height:clamp(300px,38vw,480px);object-fit:cover}
body .pp-el-yearbadge{position:absolute;left:0;bottom:-32px;background:var(--perro-navy);
  padding:22px 28px;max-width:78%}
body .pp-el-yearbadge-k{font-family:var(--font-mono);font-size:var(--size-2xs);
  letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--navy-200)}
body .pp-el-yearbadge-v{font-family:var(--font-rounded);font-weight:800;
  font-size:clamp(34px,4.2vw,52px);line-height:1;color:var(--white);margin-top:8px}
body .pp-el-yearbadge-v span{color:var(--perro-green)}
body .pp-el-about-media .elementor-widget-html{position:static}
body .e-con.pp-el-about-copy{flex:1 1 420px;min-width:0;gap:24px}
body .e-con.pp-el-about-cta{flex-direction:row;align-items:center;gap:24px;flex-wrap:wrap;
  margin-top:8px;width:100%}
body .pp-el-callout{display:flex;flex-direction:column;gap:2px}
body .pp-el-callout-k{font-size:var(--size-2xs);font-weight:600;
  letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--text-muted)}
body .pp-el-callout-v{font-family:var(--font-mono);font-size:var(--size-md);
  color:var(--perro-navy);font-weight:600}
body .e-con.pp-el-sec--cap{background:var(--ink-050);padding:clamp(56px,8vw,96px) 0}
body .e-con.pp-el-cap{gap:0}

/* ================= grids and cards ================= */
body .e-con.pp-el-grid{display:grid;gap:clamp(16px,2vw,28px);align-items:stretch;
  width:100%;flex-direction:unset}
body .e-con.pp-el-grid--cap{grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  margin-top:clamp(36px,4vw,56px)}
body .e-con.pp-el-grid--promise{grid-template-columns:repeat(auto-fit,minmax(235px,1fr));
  gap:clamp(16px,2vw,24px);margin-top:clamp(36px,4vw,56px)}
body .e-con.pp-el-grid--step{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(16px,2vw,24px);margin-top:24px}
body .e-con.pp-el-grid--prod{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:clamp(20px,2.5vw,32px);margin-top:clamp(36px,4vw,56px)}
body .e-con.pp-el-grid--stats{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:clamp(20px,3vw,36px)}
body .e-con.pp-el-card{background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-card);height:100%;gap:0;padding:0;overflow:hidden;
  transition:var(--transition-lift)}
body .e-con.pp-el-card--cap:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
body .e-con.pp-el-card-frame{height:180px;background:var(--ink-100);padding:0;gap:0;overflow:hidden}
body .e-con.pp-el-card-frame--contain{background:var(--ink-050)}
body .pp-el-card-frame .elementor-widget-image,
body .pp-el-card-frame .elementor-widget-container{height:100%}
body .pp-el-card-frame img{width:100%;height:100%;object-fit:cover}
body .pp-el-card-frame--contain img{object-fit:contain}
body .e-con.pp-el-card-body{padding:var(--card-pad);gap:0;flex:1}
body .elementor-widget.elementor-widget.pp-el-card-meta .elementor-heading-title{
  font-family:var(--font-mono);font-size:var(--size-2xs);color:var(--text-subtle)}
body .elementor-widget.elementor-widget.pp-el-card-meta{margin-bottom:var(--space-3)}
body .elementor-widget.elementor-widget.pp-el-card-h3 .elementor-heading-title{
  font-family:var(--font-display);font-size:var(--size-md);
  font-weight:var(--weight-bold);color:var(--text-heading);letter-spacing:0;
  text-transform:none}
body .elementor-widget.elementor-widget.pp-el-card-p{margin-top:var(--space-3)}
body .elementor-widget.elementor-widget.pp-el-card-p p{font-size:var(--size-sm);
  line-height:var(--leading-normal);color:var(--text-muted)}

/* promise */
body .e-con.pp-el-card--promise{border-top:4px solid var(--brand-accent);
  padding:var(--card-pad);overflow:visible}
body .elementor-widget.elementor-widget.pp-el-promise-h3 .elementor-heading-title{
  font-family:var(--font-display);font-size:var(--size-lg);
  font-weight:var(--weight-black);letter-spacing:var(--tracking-wide);
  text-transform:uppercase;color:var(--perro-navy);line-height:1.15}
body .elementor-widget.elementor-widget.pp-el-promise-sub{margin-top:var(--space-3)}
body .elementor-widget.elementor-widget.pp-el-promise-sub p{font-size:var(--size-sm);
  line-height:var(--leading-normal);color:var(--green-800);font-weight:var(--weight-semibold)}
body .pp-el-sec .pp-el-promise-points{margin:var(--space-5) 0 0;padding:0;list-style:none;
  display:flex;flex-direction:column;gap:var(--space-3)}
body .pp-el-promise-points li{display:flex;gap:var(--space-3);font-size:var(--size-sm);
  line-height:var(--leading-normal);color:var(--text-body)}
body .pp-el-dot{width:6px;height:6px;border-radius:50%;background:var(--brand-accent);
  flex:0 0 auto;margin-top:7px}

/* ================= machine capacity ================= */
body .e-con.pp-el-sec--capacity{background:var(--perro-navy);
  clip-path:polygon(0 0,calc(100% - 96px) 0,100% 96px,100% 100%,0 100%)}
body .e-con.pp-el-capacity{flex-direction:row;flex-wrap:wrap;gap:clamp(32px,5vw,64px);
  align-items:center;padding-block:clamp(56px,8vw,96px)}
body .e-con.pp-el-capacity-copy{flex:1 1 420px;min-width:0;gap:clamp(28px,3.5vw,40px)}
body .e-con.pp-el-capacity-media{flex:1 1 340px;min-width:0;gap:0}
body .pp-el-capacity-media img{width:100%;height:clamp(260px,30vw,400px);object-fit:cover}
body .e-con.pp-el-stat{gap:0;padding:0}
body .elementor-widget.elementor-widget.pp-el-stat-v .elementor-heading-title{
  font-family:var(--font-rounded);font-weight:var(--weight-black);
  font-size:var(--size-4xl);line-height:1;color:var(--white)}
body .pp-el-stat-suffix{color:var(--brand-accent)}
body .elementor-widget.elementor-widget.pp-el-stat-l{margin-top:var(--space-3)}
body .elementor-widget.elementor-widget.pp-el-stat-l .elementor-heading-title{
  font-family:var(--font-core);font-size:var(--size-2xs);
  font-weight:var(--weight-semibold);letter-spacing:var(--tracking-wider);
  text-transform:uppercase;color:var(--navy-200)}

/* ================= promise / process sections ================= */
body .e-con.pp-el-sec--promise{background:var(--white);padding:clamp(56px,8vw,96px) 0}
body .e-con.pp-el-sec--process{background:var(--ink-050);padding:clamp(56px,8vw,96px) 0}
body .e-con.pp-el-process{gap:0}
body .e-con.pp-el-process-head{flex-direction:row;flex-wrap:wrap;gap:clamp(24px,4vw,56px);
  align-items:flex-end;width:100%}
body .pp-el-process-head .pp-el-headblock{flex:1 1 440px;min-width:0}
body .pp-el-bandrule{display:flex;align-items:center;gap:20px;margin-top:clamp(32px,4vw,48px)}
body .pp-el-process > .elementor-widget-html:first-of-type .pp-el-bandrule{margin-top:clamp(36px,4vw,52px)}
body .pp-el-bandrule-k{font-family:var(--font-core);font-size:var(--type-eyebrow-size);
  font-weight:var(--weight-semibold);letter-spacing:var(--type-eyebrow-tracking);
  text-transform:uppercase;line-height:1.2;color:var(--green-800)}
body .pp-el-bandrule-line{flex:1;height:2px;background:var(--ink-200)}
body .pp-el-bandrule-r{font-family:var(--font-mono);font-size:var(--size-2xs);color:var(--text-subtle)}
body .e-con.pp-el-card--step{padding:var(--card-pad);overflow:visible;position:relative}
body .e-con.pp-el-step-top{flex-direction:row;align-items:center;gap:var(--space-4);
  width:100%;padding:0}
body .elementor-widget.elementor-widget.pp-el-step-badge .elementor-heading-title{
  width:40px;height:40px;border-radius:var(--radius-capsule);background:var(--perro-navy);
  color:var(--white);font-family:var(--font-rounded);font-weight:var(--weight-black);
  font-size:var(--size-md);display:grid;place-items:center}
body .elementor-widget.elementor-widget.pp-el-step-badge{flex:0 0 auto}
body .elementor-widget.elementor-widget.pp-el-step-phase .elementor-heading-title{
  font-family:var(--font-core);font-size:var(--size-3xs);
  font-weight:var(--weight-semibold);letter-spacing:var(--tracking-widest);
  text-transform:uppercase;color:var(--text-subtle)}
body .elementor-widget.elementor-widget.pp-el-step-h3{margin-top:var(--space-5)}
body .elementor-widget.elementor-widget.pp-el-step-h3 .elementor-heading-title{
  font-family:var(--font-display);font-size:var(--size-md);
  font-weight:var(--weight-bold);color:var(--steel-600);letter-spacing:0;text-transform:none}
body .elementor-widget.elementor-widget.pp-el-step-p p{color:var(--text-body)}
body .pp-el-holdpoint{margin-top:var(--space-5);display:inline-flex;align-self:flex-start;
  background:var(--amber-100);box-shadow:inset 0 0 0 1px var(--amber-500);
  border-radius:var(--radius-capsule);padding:5px 14px;font-family:var(--font-core);
  font-size:var(--size-3xs);font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--ink-900)}

/* ================= pull quote ================= */
body .e-con.pp-el-sec--quote{position:relative;background:var(--navy-900);padding:0;gap:0}
body .pp-el-quote-img img{width:100%;height:clamp(280px,34vw,460px);object-fit:cover;
  clip-path:polygon(96px 0,100% 0,100% 100%,0 100%,0 96px)}
body .pp-el-quote-scrim{position:absolute;inset:0;background:var(--scrim-bottom);
  clip-path:polygon(96px 0,100% 0,100% 100%,0 100%,0 96px);pointer-events:none}
body .pp-el-sec--quote > .elementor-widget-html{position:static}
body .e-con.pp-el-quote-copy{position:absolute;left:0;right:0;bottom:0;width:100%;
  max-width:1200px;margin:0 auto;padding:clamp(24px,4vw,48px) clamp(20px,4vw,56px);gap:0}
body .elementor-widget.elementor-widget.pp-el-pullquote{margin-top:12px;max-width:44ch}
body .elementor-widget.elementor-widget.pp-el-pullquote p{font-size:clamp(18px,2.2vw,26px);font-weight:700;
  line-height:1.25;color:var(--white)}

/* ================= products ================= */
body .e-con.pp-el-sec--products{background:var(--white);padding:clamp(56px,8vw,96px) 0}
body .e-con.pp-el-tile{gap:0;padding:0}
body .e-con.pp-el-tile-frame{background:var(--ink-050);border:1px solid var(--border-subtle);
  border-radius:var(--radius-card);padding:var(--space-6);display:grid;place-items:center;
  min-height:176px}
body .pp-el-tile-frame img{max-height:132px;width:auto;object-fit:contain}
body .elementor-widget.elementor-widget.pp-el-tile-name{margin-top:var(--space-4)}
body .elementor-widget.elementor-widget.pp-el-tile-name .elementor-heading-title{
  font-family:var(--font-core);font-size:var(--size-sm);font-weight:var(--weight-bold);
  color:var(--perro-navy);letter-spacing:var(--tracking-wide)}
body .elementor-widget.elementor-widget.pp-el-tile-note{margin-top:4px}
body .elementor-widget.elementor-widget.pp-el-tile-note .elementor-heading-title{
  font-family:var(--font-mono);font-size:var(--size-2xs);color:var(--text-subtle)}

/* ================= markets marquee ================= */
body .e-con.pp-el-sec--markets{background:var(--navy-800);padding:22px 0;overflow:hidden}
body .pp-el-marquee{display:flex;width:max-content;animation:perro-marquee 38s linear infinite}
body .pp-el-marquee-run{display:flex;gap:0;align-items:center;flex:0 0 auto}
body .pp-el-market{padding-inline:28px;font-size:var(--size-xs);font-weight:600;
  letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--white)}
body .pp-el-market-sep{color:var(--perro-green)}
@media (prefers-reduced-motion:reduce){body .pp-el-marquee{animation:none}}

/* ================= contact ================= */
body .e-con.pp-el-sec--contact{background:var(--white);padding:clamp(56px,8vw,96px) 0 0;
  scroll-margin-top:68px}
body .e-con.pp-el-contact{gap:0}
body .e-con.pp-el-contact-row{flex-direction:row;flex-wrap:wrap;gap:clamp(24px,4vw,48px);
  margin-top:clamp(32px,4vw,48px);align-items:flex-start;width:100%}
body .pp-el-contact-row > .elementor-widget-html,
body .pp-el-contact-row > .elementor-widget-shortcode{flex:1 1 460px;min-width:0}
body .pp-el-form{background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:10px;padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:20px}
body .pp-el-fieldrow{display:flex;flex-wrap:wrap;gap:20px}
/* Only the paired fields carry a flex basis. On the standalone fields the form
   is the flex parent and its main axis is the column, so `flex:1 1 200px` was
   being read as a 200px height. */
body .pp-el-field{display:flex;flex-direction:column;gap:8px}
body .pp-el-fieldrow > .pp-el-field{flex:1 1 200px;min-width:0}
/* The label box takes its height from the form's own 16px/1.6 line box, not
   from the small-caps span inside it; the theme's label rule would collapse it. */
body .pp-el-sec .pp-el-label{display:block;margin-bottom:var(--space-2);
  font-size:var(--size-base);line-height:var(--leading-relaxed);font-weight:400}
body .pp-el-label-t{font-family:var(--font-core);font-size:var(--size-2xs);
  font-weight:var(--weight-semibold);letter-spacing:var(--tracking-wider);
  text-transform:uppercase;color:var(--perro-navy)}
body .pp-el-req{color:var(--brand-accent-active);margin-left:4px}
body .pp-el-hint{display:block;margin-top:4px;font-size:var(--size-2xs);
  color:var(--text-muted);letter-spacing:0;text-transform:none;font-weight:400}
body .pp-el-form .pp-control{width:100%;font-family:var(--font-core);
  font-size:var(--size-sm);line-height:1.5;color:var(--text-body);background:var(--white);
  padding:11px 14px;border-radius:var(--radius-input);
  border:1px solid var(--border-default);box-shadow:none;outline:none;
  transition:var(--transition-control);cursor:auto}
body .pp-el-form .pp-control--area{resize:vertical;display:block}
body .pp-el-form .pp-control--select{appearance:none;-webkit-appearance:none;padding-right:38px}
body .pp-el-selectwrap{position:relative}
body .pp-el-chevron{position:absolute;right:14px;top:50%;width:8px;height:8px;
  margin-top:-6px;border-right:2px solid var(--perro-navy);
  border-bottom:2px solid var(--perro-navy);transform:rotate(45deg);pointer-events:none}
body .pp-el-formfoot{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
body .pp-el-formstatus{font-size:var(--size-sm);color:var(--green-700);font-weight:600}
body .pp-el-sec .pp-el-formnote{font-size:var(--size-xs);color:var(--ink-600);margin:0}

/* ---- Contact Form 7 ("Home Contact form", post 10) ----------------------
   The form template emits the design's own classes, so only CF7's added
   wrappers need handling. Every selector is prefixed `.pp-el-formwrap` - one
   class more than CF7's own `.wpcf7 form .x` rules, which tie with a plain
   `body .x` and load in an order we do not control. */
body .pp-el-formwrap .wpcf7{width:100%}
body .pp-el-formwrap .wpcf7 .screen-reader-response{position:absolute;width:1px;height:1px;
  margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* CF7 wraps every control in an inline span; the design has a block div there. */
body .pp-el-formwrap .wpcf7-form-control-wrap{display:block}
body .pp-el-formwrap .wpcf7-form .hidden-fields-container{display:none}
/* The spinner is a sibling of the submit inside .pp-el-formfoot and holds
   24px of width while idle, which would push the button off the design's
   left edge. It is only wanted while the request is in flight. */
body .pp-el-formwrap .wpcf7-spinner{display:none;margin:0 0 0 4px}
body .pp-el-formwrap .wpcf7-form.submitting .wpcf7-spinner{display:inline-block}
/* CF7's response output is a block at the end of the form, not an inline
   sibling of the button as the design's status span was. */
body .pp-el-formwrap .wpcf7 form .wpcf7-response-output{margin:0;padding:12px 16px;
  border:1px solid var(--border-default);border-radius:var(--radius-sm);
  font-family:var(--font-core);font-size:var(--size-sm);line-height:1.5;
  color:var(--ink-700);background:var(--white)}
body .pp-el-formwrap .wpcf7 form.sent .wpcf7-response-output{border-color:var(--green-500);
  color:var(--green-700)}
body .pp-el-formwrap .wpcf7 form.invalid .wpcf7-response-output,
body .pp-el-formwrap .wpcf7 form.unaccepted .wpcf7-response-output,
body .pp-el-formwrap .wpcf7 form.failed .wpcf7-response-output{border-color:var(--red-600);
  color:var(--red-600)}
body .pp-el-formwrap .wpcf7-not-valid-tip{margin-top:6px;font-family:var(--font-core);
  font-size:var(--size-2xs);color:var(--red-600)}
body .pp-el-formwrap .pp-control.wpcf7-not-valid{border-color:var(--red-600)}
body .e-con.pp-el-contact-aside{flex:1 1 260px;min-width:0;gap:24px}
body .pp-el-sec .pp-el-nextsteps{list-style:none;padding:0;margin-top:16px;display:flex;
  flex-direction:column;gap:14px}
body .pp-el-nextsteps li{display:flex;gap:12px;align-items:flex-start;
  font-size:var(--size-sm);color:var(--ink-700);line-height:1.55}
body .pp-el-next-n{font-family:var(--font-mono);font-size:var(--size-sm);
  color:var(--perro-navy);font-weight:600;flex:0 0 auto}
body .pp-el-direct{border-top:1px solid var(--border-subtle);padding-top:20px}
body .pp-el-direct p{margin-top:12px;font-size:var(--size-sm);color:var(--ink-700);line-height:1.6}
body .pp-el-direct p + p{margin-top:10px}

/* closing CTA panel */
body .e-con.pp-el-ctapanel{flex-direction:row;flex-wrap:wrap;margin-top:clamp(40px,5vw,64px);
  background:var(--perro-navy);gap:0;padding:0;
  clip-path:polygon(0 0,100% 0,100% 100%,88px 100%,0 calc(100% - 88px))}
body .e-con.pp-el-ctapanel-l{flex:1 1 380px;min-width:0;padding:clamp(32px,4vw,56px);gap:0}
body .elementor-widget.elementor-widget.pp-el-ctapanel-h .elementor-heading-title{
  font-size:clamp(26px,3.4vw,40px);font-weight:800;letter-spacing:var(--tracking-tight);
  line-height:1.15;text-transform:uppercase;color:var(--white)}
body .pp-el-ctapanel-l .pp-el-body{margin-top:20px}
/* Beats the .pp-el-body.pp-el-inverse rule above, which sets the capacity
   section's 52ch measure on the same widget classes. */
body .pp-el-ctapanel-l .elementor-widget.elementor-widget.pp-el-body p{max-width:44ch}
body .pp-el-ctapanel-l .pp-el-ctarow{margin-top:32px}
body .pp-el-ctapanel > .elementor-widget-html{flex:1 1 300px;min-width:0}
body .pp-el-ctapanel-r{background:var(--navy-800);padding:clamp(32px,4vw,56px);
  display:flex;flex-direction:column;gap:28px;height:100%}
body .pp-el-sec .pp-el-ctapanel-addr{margin-top:10px;color:var(--white);font-weight:600;line-height:1.5}
body .pp-el-ctapanel-r p{margin-top:10px}
body .pp-el-ctapanel-tel{font-family:var(--font-mono);color:var(--white);font-size:var(--size-md)}
body .pp-el-ctapanel-mail{display:flex;flex-direction:column;gap:4px}
body .pp-el-ctapanel-mail a{color:var(--white)}
body .pp-el-ctapanel-mail a.pp-el-muted{color:var(--navy-200)}

/* ================= narrow widths ================= */
@media (max-width:640px){
body .e-con.pp-el-sec--hero{clip-path:polygon(0 0,100% 0,100% 100%,56px 100%,0 calc(100% - 56px))}
body .e-con.pp-el-ctapanel{clip-path:polygon(0 0,100% 0,100% 100%,56px 100%,0 calc(100% - 56px))}
body .pp-el-yearbadge{position:static;max-width:none;margin-top:0}
}