/* Pet Path Violet — base typography, controls, motion.
   Applies the design contract on top of Hello Elementor + Elementor containers. */

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--pp-font);
  font-size:var(--pp-fs-body);
  line-height:var(--pp-lh-body);
  color:var(--pp-ink);
  background:var(--pp-bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-synthesis-weight:none;
  overflow-x:hidden;
}

/* ---------- Type ---------- */
h1,h2,h3,h4,h5,h6,
.elementor-heading-title{
  font-family:var(--pp-font);
  color:var(--pp-ink);
  font-weight:700;
  line-height:var(--pp-lh-head);
  letter-spacing:var(--pp-tr-head);
  margin:0 0 .5em;
  text-wrap:balance;
}
h1,.pp-display{font-size:var(--pp-fs-h1);line-height:var(--pp-lh-display);letter-spacing:var(--pp-tr-display)}
.pp-display{font-size:var(--pp-fs-display);font-weight:800}
h2{font-size:var(--pp-fs-h2)}
h3{font-size:var(--pp-fs-h3)}
h4{font-size:var(--pp-fs-h4)}
p{margin:0 0 1.1em;max-width:var(--pp-measure);text-wrap:pretty}
p:last-child{margin-bottom:0}
a{color:var(--pp-accent);text-decoration:none;transition:color var(--pp-dur-fast) var(--pp-ease-out)}
a:hover{color:var(--pp-accent-hover)}
strong,b{font-weight:700}
/* Emphasis inside a headline stays in-family */
h1 em,h2 em,h3 em{font-style:normal;font-weight:800;color:var(--pp-accent)}

.pp-lead{font-size:clamp(1.0625rem,1rem + .4vw,1.25rem);color:var(--pp-ink-muted);line-height:1.6}
.pp-label{
  font-size:var(--pp-fs-xs);font-weight:600;text-transform:uppercase;
  letter-spacing:var(--pp-tr-label);color:var(--pp-accent);
}
.pp-muted{color:var(--pp-ink-muted)}

/* ---------- Layout ---------- */
.pp-section{padding-block:var(--pp-section-y)}
.pp-surface{background:var(--pp-surface)}
.pp-sunken{background:var(--pp-sunken)}
.pp-tint{background:var(--pp-accent-tint)}
.pp-dark{background:var(--pp-dark);color:var(--pp-on-dark)}
.pp-dark h1,.pp-dark h2,.pp-dark h3,.pp-dark h4{color:var(--pp-on-dark)}
.pp-dark p{color:var(--pp-on-dark-muted)}
.pp-hairline{border-top:1px solid var(--pp-border)}

/* Elementor containers inherit the rhythm rather than fighting it */
.elementor-section.elementor-section-boxed>.elementor-container,
.e-con>.e-con-inner{max-width:1200px}

/* ---------- Buttons ---------- */
.pp-btn,
.elementor-button{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--pp-font);font-weight:600;font-size:var(--pp-fs-sm);
  line-height:1;letter-spacing:0;
  padding:1em 1.75em;
  border-radius:var(--pp-r-pill);
  border:1px solid transparent;
  cursor:pointer;
  white-space:nowrap;
  transition:background-color var(--pp-dur-fast) var(--pp-ease-out),
             color var(--pp-dur-fast) var(--pp-ease-out),
             border-color var(--pp-dur-fast) var(--pp-ease-out),
             box-shadow var(--pp-dur) var(--pp-ease-out),
             transform var(--pp-dur-fast) var(--pp-ease-out);
}
.pp-btn--primary,
.elementor-button:not(.pp-btn--ghost){
  background:var(--pp-accent);color:#fff;box-shadow:var(--pp-shadow-sm);
}
.pp-btn--primary:hover,
.elementor-button:not(.pp-btn--ghost):hover{
  background:var(--pp-accent-hover);color:#fff;box-shadow:var(--pp-shadow-md);transform:translateY(-1px);
}
.pp-btn--primary:active,
.elementor-button:not(.pp-btn--ghost):active{background:var(--pp-accent-active);transform:translateY(1px);box-shadow:var(--pp-shadow-sm)}
.pp-btn--ghost{background:#fff;color:var(--pp-ink);border-color:var(--pp-border)}
.pp-btn--ghost:hover{border-color:var(--pp-accent-soft);color:var(--pp-accent);transform:translateY(-1px)}
.pp-btn--ghost:active{transform:translateY(1px)}
.pp-btn--on-dark{background:#fff;color:var(--pp-dark)}
.pp-btn--on-dark:hover{background:var(--pp-accent-tint);color:var(--pp-accent-active)}
.pp-btn:focus-visible,.elementor-button:focus-visible,a:focus-visible,button:focus-visible{
  outline:none;box-shadow:var(--pp-ring)
}

/* ---------- Cards ---------- */
.pp-card{
  background:#fff;border:1px solid var(--pp-border);border-radius:var(--pp-r-md);
  padding:clamp(20px,3vw,32px);
  transition:transform var(--pp-dur) var(--pp-ease-spring),
             box-shadow var(--pp-dur) var(--pp-ease-out),
             border-color var(--pp-dur) var(--pp-ease-out);
}
.pp-card--lift:hover{transform:translateY(-4px);box-shadow:var(--pp-shadow-lg);border-color:var(--pp-accent-tint-3)}
.pp-card--tint{background:var(--pp-accent-tint);border-color:transparent}

/* ---------- Status badge ---------- */
.pp-badge{
  display:inline-flex;align-items:center;gap:.45em;
  font-size:var(--pp-fs-xs);font-weight:700;text-transform:uppercase;
  letter-spacing:var(--pp-tr-label);
  padding:.5em 1em;border-radius:var(--pp-r-pill);
  background:var(--pp-accent-tint);color:var(--pp-accent);
}
.pp-badge--delivered{background:var(--pp-success-bg);color:var(--pp-success)}
.pp-badge--delayed{background:var(--pp-warning-bg);color:var(--pp-warning)}

/* ---------- Forms ---------- */
input[type=text],input[type=email],input[type=tel],input[type=search],
input[type=url],input[type=number],input[type=date],select,textarea{
  font-family:var(--pp-font);font-size:var(--pp-fs-body);color:var(--pp-ink);
  background:#fff;border:1px solid var(--pp-border);border-radius:var(--pp-r-sm);
  padding:.85em 1em;width:100%;
  transition:border-color var(--pp-dur-fast) var(--pp-ease-out),box-shadow var(--pp-dur-fast) var(--pp-ease-out);
}
input::placeholder,textarea::placeholder{color:var(--pp-ink-faint)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--pp-accent-soft);box-shadow:var(--pp-ring)}

/* ---------- Media ---------- */
img,video,svg{max-width:100%;height:auto;display:block}
.pp-media{border-radius:var(--pp-r-md);overflow:hidden}
.pp-media--lg{border-radius:var(--pp-r-lg)}

/* ---------- Scroll reveal ----------
   Armed by JS only, so a failed script leaves content fully visible.
   Uses a keyframe animation with fill-mode `both` rather than toggling between
   two competing rules: the end state persists on its own and does not depend on
   a transition cascade resolving correctly. */
.pp-reveal--armed{opacity:0}
.pp-reveal--armed.pp-in{animation:pp-rise var(--pp-dur-slow) var(--pp-ease-out) both}
.pp-reveal--armed.pp-stagger-1.pp-in{animation-delay:70ms}
.pp-reveal--armed.pp-stagger-2.pp-in{animation-delay:140ms}
.pp-reveal--armed.pp-stagger-3.pp-in{animation-delay:210ms}
.pp-reveal--armed.pp-stagger-4.pp-in{animation-delay:280ms}

@keyframes pp-rise{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .pp-reveal--armed{opacity:1!important;transform:none!important;animation:none!important}
}

/* ---------- Responsive guards ---------- */
@media (max-width:1024px){
  :root{--pp-measure:60ch}
}
@media (max-width:767px){
  :root{--pp-measure:100%}
  .pp-btn,.elementor-button{width:100%;min-height:48px;white-space:normal}
  .pp-btn-row{display:flex;flex-direction:column;gap:12px;width:100%}
}

/* ---------- Elementor bridge ----------
   Elementor applies custom classes to the widget wrapper, so utility classes
   have to reach through to the element the style belongs on. */

.elementor-widget.pp-display .elementor-heading-title{
  font-size:var(--pp-fs-display);font-weight:800;
  line-height:var(--pp-lh-display);letter-spacing:var(--pp-tr-display);
}
.elementor-widget.pp-lead .elementor-widget-container,
.elementor-widget.pp-lead p{
  font-size:clamp(1.0625rem,1rem + .4vw,1.25rem);
  line-height:1.6;color:var(--pp-ink-muted);
}

/* Hero eligibility pill, built from a native icon-list widget */
.pp-hero-pill .elementor-icon-list-items{
  display:inline-flex;margin:0;padding:0;list-style:none;
}
.pp-hero-pill .elementor-icon-list-item{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--pp-accent-tint);color:var(--pp-accent);
  border-radius:var(--pp-r-pill);padding:7px 15px;margin:0;
  font-size:var(--pp-fs-xs);font-weight:600;
}
.pp-hero-pill .elementor-icon-list-text{color:var(--pp-accent)}
.pp-hero-pill+.elementor-widget{margin-top:20px}

/* Buttons: reach the anchor inside the widget wrapper */
.elementor-widget.pp-btn--ghost .elementor-button{
  background:#fff;color:var(--pp-ink);border:1px solid var(--pp-border);box-shadow:none;
}
.elementor-widget.pp-btn--ghost .elementor-button:hover{
  border-color:var(--pp-accent-soft);color:var(--pp-accent);background:#fff;transform:translateY(-1px);
}
.elementor-widget.pp-btn--primary .elementor-button{
  background:var(--pp-accent);color:#fff;
}
.elementor-widget.pp-btn--primary .elementor-button:hover{background:var(--pp-accent-hover)}

/* Media radius */
.pp-media--lg img{border-radius:var(--pp-r-lg)}
.pp-media img{border-radius:var(--pp-r-md)}

/* Hero image should not exceed the viewport height on tall desktops */
#pp-hero img{width:100%}

@media (max-width:1024px){
  .pp-btn-row .elementor-widget{width:100%}
}
@media (max-width:767px){
  .pp-hero-pill .elementor-icon-list-item{font-size:12px;padding:6px 13px}
  .pp-btn-row{gap:12px}
}

/* ---------- Section components ---------- */
.pp-center{text-align:center;margin-inline:auto}
.pp-center .elementor-widget-container{margin-inline:auto}
.pp-center-row{justify-content:center}

/* Checklist */
.pp-checklist .elementor-icon-list-item{align-items:flex-start;gap:12px}
.pp-checklist .elementor-icon-list-icon{margin-top:4px}
.pp-checklist .elementor-icon-list-text{color:var(--pp-ink-soft);line-height:1.55}

/* Icon box inside bento cards */
.pp-iconbox .elementor-icon-box-icon{margin-bottom:14px}
.pp-iconbox .elementor-icon{color:var(--pp-accent);font-size:24px}
.pp-iconbox .elementor-icon-box-title{
  font-size:var(--pp-fs-h4);font-weight:700;margin:0 0 6px;letter-spacing:var(--pp-tr-head);
}
.pp-iconbox .elementor-icon-box-description{color:var(--pp-ink-muted);line-height:1.6;margin:0}

/* Steps */
.pp-steps .pp-step{padding:22px 0;border-bottom:1px solid var(--pp-border)}
.pp-steps .pp-step:last-child{border-bottom:0}
.pp-step__num .elementor-heading-title{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  background:var(--pp-accent-tint);color:var(--pp-accent);
  font-size:var(--pp-fs-sm);font-weight:700;letter-spacing:0;
}
.pp-step h3{margin:0 0 4px}
.pp-step p{color:var(--pp-ink-muted);margin:0}

/* Quotes */
.pp-quote__text{font-size:var(--pp-fs-body);line-height:1.65;color:var(--pp-ink-soft)}
.pp-quote__meta p{font-size:var(--pp-fs-sm);color:var(--pp-ink-muted);margin:0;line-height:1.45}
.pp-quote__meta strong{color:var(--pp-ink)}
.pp-avatar .elementor-heading-title{
  display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:50%;
  background:var(--pp-accent-tint);color:var(--pp-accent);
  font-size:var(--pp-fs-xs);font-weight:700;letter-spacing:.04em;
}

/* FAQ accordion */
.pp-faq .elementor-accordion-item{
  border:1px solid var(--pp-border);border-radius:var(--pp-r-md);
  margin-bottom:12px;overflow:hidden;background:#fff;
}
.pp-faq .elementor-tab-title{
  border:0;padding:20px 22px;font-weight:600;font-size:var(--pp-fs-body);
  transition:background-color var(--pp-dur-fast) var(--pp-ease-out);
}
.pp-faq .elementor-tab-title:hover{background:var(--pp-accent-tint)}
.pp-faq .elementor-tab-title a{color:var(--pp-ink)}
.pp-faq .elementor-active .elementor-tab-title a{color:var(--pp-accent)}
.pp-faq .elementor-tab-content{
  border:0;padding:0 22px 22px;color:var(--pp-ink-muted);line-height:1.65;
}
.pp-faq .elementor-accordion-icon{color:var(--pp-accent)}

/* Dark band adjustments */
.pp-dark .pp-lead p,.pp-dark .elementor-widget.pp-lead p{color:var(--pp-on-dark-muted)}
.pp-dark .pp-hero-pill .elementor-icon-list-item{background:rgba(255,255,255,.10)}
.pp-dark .pp-hero-pill .elementor-icon-list-text,
.pp-dark .pp-hero-pill .elementor-icon-list-icon i{color:#fff}
.pp-cta h2{max-width:18ch;margin-inline:auto}

@media (max-width:767px){
  .pp-step{gap:14px}
  .pp-step__num .elementor-heading-title{width:38px;height:38px}
  .pp-quote{width:100%}
}

/* ---------- XPRO header ---------- */
.pp-site-header{
  background:#fff;
  border-bottom:1px solid var(--pp-border);
  position:sticky;top:0;z-index:120;
}
.pp-brand a,.pp-brand .xpro-site-title,.pp-brand div{
  font-family:var(--pp-font);font-weight:800;
  font-size:var(--pp-fs-h4);letter-spacing:var(--pp-tr-head);
  color:var(--pp-ink);text-decoration:none;line-height:1.2;
}
.pp-brand a:hover{color:var(--pp-accent)}

.pp-nav ul{display:flex;align-items:center;gap:4px;margin:0;padding:0;list-style:none}
.pp-nav a{
  display:inline-block;
  font-size:var(--pp-fs-sm);font-weight:500;color:var(--pp-ink-soft);
  padding:.55em .85em;border-radius:var(--pp-r-pill);
  text-decoration:none;white-space:nowrap;
  transition:color var(--pp-dur-fast) var(--pp-ease-out),
             background-color var(--pp-dur-fast) var(--pp-ease-out);
}
.pp-nav a:hover{color:var(--pp-accent);background:var(--pp-accent-tint)}
.pp-nav .current-menu-item>a,.pp-nav li.current_page_item>a{color:var(--pp-accent);font-weight:600}

.pp-header-cta a,.pp-header-cta button{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--pp-accent);color:#fff!important;
  border:0;border-radius:var(--pp-r-pill);
  padding:.8em 1.5em;
  font-family:var(--pp-font);font-weight:600;font-size:var(--pp-fs-sm);
  text-decoration:none;white-space:nowrap;
  transition:background-color var(--pp-dur-fast) var(--pp-ease-out),
             transform var(--pp-dur-fast) var(--pp-ease-out),
             box-shadow var(--pp-dur) var(--pp-ease-out);
}
.pp-header-cta a:hover{background:var(--pp-accent-hover);transform:translateY(-1px);box-shadow:var(--pp-shadow-md)}
.pp-header-cta a:active{transform:translateY(1px)}

@media (max-width:1024px){
  .pp-nav a{padding:.5em .6em;font-size:14px}
}
@media (max-width:767px){
  .pp-site-header{position:static}
  .pp-header-cta a{padding:.7em 1.1em;font-size:13px;width:auto}
}

/* ---------- XPRO footer ---------- */
.pp-site-footer .pp-footer-title .elementor-heading-title{
  font-size:var(--pp-fs-h4);font-weight:800;color:#fff;letter-spacing:var(--pp-tr-head);
}
.pp-site-footer .pp-footer-heading .elementor-heading-title{
  font-size:var(--pp-fs-xs);font-weight:600;text-transform:uppercase;
  letter-spacing:var(--pp-tr-label);color:#fff;
}
.pp-site-footer p{color:var(--pp-on-dark-muted);font-size:var(--pp-fs-sm);line-height:1.7}
.pp-footer-links .elementor-icon-list-item{margin:0}
.pp-footer-links .elementor-icon-list-icon{display:none}
.pp-footer-links a,.pp-footer-links .elementor-icon-list-text{
  color:var(--pp-on-dark-muted);font-size:var(--pp-fs-sm);text-decoration:none;
  transition:color var(--pp-dur-fast) var(--pp-ease-out);
}
.pp-footer-links a:hover,.pp-footer-links .elementor-icon-list-item:hover .elementor-icon-list-text{color:#fff}
.pp-footer-bottom{border-top:1px solid var(--pp-dark-border)}
.pp-footer-legal p{font-size:var(--pp-fs-xs);color:var(--pp-on-dark-muted);margin:0}
.pp-footer-legal a{color:var(--pp-on-dark-muted);text-decoration:none}
.pp-footer-legal a:hover{color:#fff}

@media (max-width:767px){
  .pp-footer-bottom{gap:10px;text-align:center}
}