/*!
 * WebPanda service-page template v1 — scoped isolation + brand tokens.
 * Mirrors the custom blog template (assets/css/webpanda-template.css): scoped
 * entirely under `.wp-webpanda-service` so the client theme / Elementor / Gutenberg
 * CSS cannot leak in or out. Every brand colour + font arrives as a CSS custom
 * property on the root wrapper (`--wp-brand-*`), each with the original reference
 * value as its fallback, so an un-branded render == the reference design and a
 * branded render recolours the whole subtree. FIXED neutrals (white, body gray,
 * light surfaces, borders, black) stay hard-coded — they are not brand roles.
 * Keep in sync with webpanda-frontend/src/lib/webpanda-service-template-css.ts.
 *
 * TYPOGRAPHY IS ONE FONT. Every rule below reads the SAME `--wp-brand-font`, which the
 * renderer fills with the client's own font (from their Brand Kit, or detected off their
 * live site). So a branded page is set entirely in the client's font — headings and body
 * alike — and never mixes their font with ours. The per-rule fallbacks differ only because
 * they reproduce the reference page's own typography (Oswald headings / Mukta Mahee body)
 * for the case where we know nothing about the client. Those families must also be LOADED
 * by whatever renders this stylesheet; see `serviceFontsToLoad()` in the backend util and
 * the `data-wp-fonts` attribute on the wrapper.
 *
 * FALLBACKS ARE THE LIVE REFERENCE'S EXACT COMPUTED VALUES
 * (https://mgiqvi3t32.wpdns.site/final-service-page/, measured @1440px):
 *   body copy .............. "Mukta Mahee" 18px / weight 500 / #464646
 *   section H2 ............. Oswald 44px / weight 500 / #06319A / uppercase
 *   hero H1 ............... Oswald 40px / weight 700 / white / left @x80
 *   content container ..... 1290px wide (742 article + 40 gap + 508 form)
 *   testimonial bar ....... #2B65D9   VIP band ....... #2456D1
 *   FAQ closed pill ....... #0083EB   FAQ open pill .. #1743B3
 *   footer bg (cream) ..... #FCFBF8   social bar ..... #06319A
 *   footer call pill ...... #D62828   footer email ... #1743B3
 */

/* --- root wrapper ------------------------------------------------------------ */
.wp-webpanda-service{
  box-sizing:border-box;
  font-family:var(--wp-brand-font, "Mukta Mahee", sans-serif);
  font-size:18px;
  line-height:1.7;
  font-weight:500;
  color:#464646;
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  background:#ffffff;
  overflow-x:hidden;
}
.wp-webpanda-service *,
.wp-webpanda-service *::before,
.wp-webpanda-service *::after{ box-sizing:border-box; }

/* controlled reset — component level, never all:initial */
.wp-webpanda-service h1,
.wp-webpanda-service h2,
.wp-webpanda-service h3,
.wp-webpanda-service h4,
.wp-webpanda-service p,
.wp-webpanda-service ul,
.wp-webpanda-service ol,
.wp-webpanda-service li,
.wp-webpanda-service figure,
.wp-webpanda-service blockquote{ margin:0; padding:0; }
.wp-webpanda-service img{ max-width:100%; height:auto; display:block; }
.wp-webpanda-service button,
.wp-webpanda-service input,
.wp-webpanda-service textarea,
.wp-webpanda-service select{ font:inherit; color:inherit; }
.wp-webpanda-service a{ text-decoration:none; }

/* shared centred container — reference content box is 1290px wide
   (742 article col + 40 gap + 508 form col). max-width 1330 + 20px padding
   keeps the inner content box at exactly 1290 while giving side breathing room. */
.wp-webpanda-service .wps-container{
  width:100%;
  max-width:1330px;
  margin:0 auto;
  padding:0 20px;
}

/* headings — Oswald, uppercase, brand navy-blue */
.wp-webpanda-service h1,
.wp-webpanda-service h2,
.wp-webpanda-service h3{
  font-family:var(--wp-brand-font, Oswald, sans-serif);
  text-transform:uppercase;
  line-height:1.05;
}
/* section titles — reference: Oswald 44px / weight 500 / #06319A */
.wp-webpanda-service .wps-section-title{
  font-size:44px;
  font-weight:500;
  color:var(--wp-brand-secondary, #06319A);
  margin:0 0 20px;
}
.wp-webpanda-service p{ margin:0 0 18px; }
.wp-webpanda-service p:last-child{ margin-bottom:0; }

/* shared button — reference CTA is a full pill (radius 50px), Oswald 16px/600 uppercase */
.wp-webpanda-service .wps-btn{
  display:inline-block;
  font-family:var(--wp-brand-font, Oswald, sans-serif);
  text-transform:uppercase;
  font-weight:600;
  font-size:16px;
  letter-spacing:.02em;
  color:#ffffff;
  text-align:center;
  border:0;
  border-radius:50px;
  padding:15px 34px;
  cursor:pointer;
  line-height:1.2;
}
.wp-webpanda-service .wps-btn--accent{ background:var(--wp-brand-accent, #F20505); }
.wp-webpanda-service .wps-btn--secondary{ background:var(--wp-brand-secondary, #06319A); }
.wp-webpanda-service .wps-btn--block{ display:block; width:100%; }

/* --- 1. HERO ----------------------------------------------------------------- */
/* Reference: a ~540px full-bleed hero (110px top/bottom padding), the service photo covered by a
   LEFT-TO-RIGHT navy gradient (darker over the copy, fading to reveal the photo on the right), a
   left-aligned 650px content box holding a large Oswald title, a short 2-line lead, and two pill
   CTAs. The overlay uses the brand PRIMARY (via color-mix so its alpha can be tuned in a gradient),
   so a client's brand recolours the wash; the fallback is the reference navy #0A1844. */
.wp-webpanda-service .wps-hero{
  position:relative;
  min-height:540px;
  padding:110px 0;
  display:flex;
  align-items:center;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.wp-webpanda-service .wps-hero__overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--wp-brand-primary, #0A1844) 90%, transparent) 0%,
    color-mix(in srgb, var(--wp-brand-primary, #0A1844) 80%, transparent) 45%,
    color-mix(in srgb, var(--wp-brand-primary, #0A1844) 58%, transparent) 100%);
}
.wp-webpanda-service .wps-hero__inner{ position:relative; z-index:1; width:100%; }
.wp-webpanda-service .wps-hero__box{ max-width:650px; }  /* left-aligned copy column */
.wp-webpanda-service .wps-hero__title{
  font-family:var(--wp-brand-font, Oswald, sans-serif);
  text-transform:uppercase;
  color:#ffffff;
  font-size:78px;
  font-weight:700;
  line-height:1.02;
  margin:0;
}
.wp-webpanda-service .wps-hero__blurb{
  color:#ffffff;
  font-size:22px;
  line-height:1.8;
  margin:20px 0 0;
  max-width:600px;
}
/* CTA row — two pills, wrapping on small screens. */
.wp-webpanda-service .wps-hero__cta{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin-top:32px;
}
.wp-webpanda-service .wps-hero__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:250px;
  height:60px;
  padding:0 34px;
  border-radius:999px;
  font-family:var(--wp-brand-font, Oswald, sans-serif);
  font-size:18px;
  font-weight:700;
  color:#ffffff;
  cursor:pointer;
  transition:filter .15s ease;
}
.wp-webpanda-service .wps-hero__btn:hover{ filter:brightness(1.06); }
.wp-webpanda-service .wps-hero__btn--call{ background:var(--wp-brand-accent, #ED1C24); }
.wp-webpanda-service .wps-hero__btn--contact{ background:var(--wp-brand-secondary, #2456D1); }

/* --- 2. INTRO (2-col: article + sidebar) ------------------------------------- */
.wp-webpanda-service .wps-intro{ padding:60px 0; background:#FCFBF8; }
.wp-webpanda-service .wps-intro__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 508px;
  gap:40px;
  align-items:start;
}
.wp-webpanda-service .wps-article > * + *{ margin-top:0; }
.wp-webpanda-service .wps-block{ margin:0 0 40px; }
.wp-webpanda-service .wps-block:last-child{ margin-bottom:0; }
.wp-webpanda-service .wps-block__figure{ margin:22px 0 0; }
.wp-webpanda-service .wps-block__figure img{ width:100%; border-radius:12px; }

/* sticky sidebar */
.wp-webpanda-service .wps-side{ position:sticky; top:24px; align-self:start; }
.wp-webpanda-service .wps-side > * + *{ margin-top:24px; }

/* lead form (static placeholder — no submission) */
.wp-webpanda-service .wps-form{
  background:#ffffff;
  border:1px solid #E3E8F0;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(1,32,95,.10);
}
.wp-webpanda-service .wps-form__header{
  background:var(--wp-brand-primary, #01205F);
  color:#ffffff;
  font-family:var(--wp-brand-font, Oswald, sans-serif);
  text-transform:uppercase;
  font-weight:600;
  font-size:26px;
  text-align:center;
  padding:22px 18px;
}
.wp-webpanda-service .wps-form__body{ padding:24px 22px 26px; }
/* Client's own form-tool embed (HubSpot/Jotform/etc.) — keeps the same card chrome as the built-in
   form above, but the embed provider's own markup fills the padding instead of our fixed field set. */
.wp-webpanda-service .wps-form--embed{ padding:20px; }
.wp-webpanda-service .wps-field{ margin:0 0 16px; }
.wp-webpanda-service .wps-field__label{
  display:block;
  font-size:16px;
  font-weight:600;
  color:#1f2937;
  margin:0 0 6px;
}
.wp-webpanda-service .wps-field__control{
  width:100%;
  padding:12px 14px;
  border:1px solid #D6DCE5;
  border-radius:8px;
  background:#ffffff;
  font-size:16px;
  color:#464646;
}
.wp-webpanda-service textarea.wps-field__control{ min-height:96px; resize:vertical; }
.wp-webpanda-service .wps-form__submit{ margin-top:4px; }

/* service-nav pill buttons — reference: Oswald 22px/600, uppercase, LEFT-aligned */
.wp-webpanda-service .wps-nav-list{ list-style:none; display:flex; flex-direction:column; gap:12px; }
.wp-webpanda-service .wps-nav-link{
  display:block;
  background:var(--wp-brand-secondary, #06319A);
  color:#ffffff;
  font-family:var(--wp-brand-font, Oswald, sans-serif);
  text-transform:uppercase;
  font-weight:600;
  font-size:22px;
  text-align:left;
  padding:14px 22px;
  border-radius:5px;
}


/* --- 5. TESTIMONIALS (3-up review-card grid, Google-reviews style) ----------- */
.wp-webpanda-service .wps-testimonials{ padding:70px 0; background:#F4F6FB; }
.wp-webpanda-service .wps-testimonials__head{
  max-width:720px;
  margin:0 auto 44px;
  text-align:center;
}
.wp-webpanda-service .wps-testimonials__eyebrow{
  display:inline-block;
  font-family:var(--wp-brand-font, Oswald, sans-serif);
  text-transform:uppercase;
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--wp-brand-secondary, #06319A);
  background:#ffffff;
  border-radius:999px;
  padding:9px 20px;
  box-shadow:0 2px 10px rgba(1,32,95,.08);
  margin:0 0 18px;
}
.wp-webpanda-service .wps-testimonials__title{
  font-family:var(--wp-brand-font, Oswald, sans-serif);
  text-transform:uppercase;
  font-size:40px;
  font-weight:700;
  line-height:1.1;
  color:var(--wp-brand-secondary, #06319A);
  margin:0 0 14px;
}
.wp-webpanda-service .wps-testimonials__subtitle{
  color:#5b6472;
  font-size:17px;
  line-height:1.6;
  margin:0;
}

/* The 3-up grid living inside each slide/page. 1 column on mobile, 3 from tablet up — a card
   never grows narrower than it needs for the avatar row to stay on one line. */
.wp-webpanda-service .wps-testimonials-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:24px;
  align-items:stretch;
}
@media (max-width:820px){
  .wp-webpanda-service .wps-testimonials-grid{ grid-template-columns:1fr; }
}

.wp-webpanda-service .wps-review-card{
  background:#ffffff;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(1,32,95,.08);
  padding:28px 26px 24px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
/* Signature top stripe — a brand-accent-to-secondary gradient rather than a flat bar, so the
   card reads as "curated" instead of templated; falls back to the reference red→blue when the
   client has no brand kit set. */
.wp-webpanda-service .wps-review-card__bar{
  align-self:stretch;
  height:5px;
  margin:-28px -26px 22px;
  background:linear-gradient(90deg, var(--wp-brand-accent, #F20505), var(--wp-brand-secondary, #06319A));
}
.wp-webpanda-service .wps-review-card .wps-stars{
  color:var(--wp-brand-highlight, #F5B301);
  font-size:20px;
  letter-spacing:3px;
  margin:0 0 16px;
}
.wp-webpanda-service .wps-review-card__quote{
  color:#464646;
  font-size:16px;
  line-height:1.65;
  margin:0 0 22px;
}
.wp-webpanda-service .wps-review-card__footer{
  margin-top:auto;
  width:100%;
  display:flex;
  align-items:center;
  gap:12px;
}
.wp-webpanda-service .wps-review-card__avatar{
  flex:0 0 auto;
  width:38px;
  height:38px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#ffffff;
  font-family:var(--wp-brand-font, Oswald, sans-serif);
  font-weight:700;
  font-size:15px;
}
.wp-webpanda-service .wps-review-card__who{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
}
.wp-webpanda-service .wps-review-card__name{
  font-weight:700;
  font-size:14px;
  color:#1f2937;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}
.wp-webpanda-service .wps-review-card__when{ font-size:12px; color:#8a93a3; }
.wp-webpanda-service .wps-review-card__google{ flex:0 0 auto; display:flex; }
.wp-webpanda-service .wps-review-card__google svg{ display:block; }

/* --- 5b. TESTIMONIALS SLIDER (one card at a time; CSS scroll-snap = no-JS fallback) --- */
/* The reference shows testimonials as a carousel — ONE card visible at a time — not a
   stacked list. The track is a horizontal flex row and every slide is a full-width
   scroll-snap stop, so even with JavaScript disabled this is a swipeable one-at-a-time
   slider (it NEVER falls back to a vertical stack). The JS enhancer
   (webpanda-service-template.js) layers arrows, clickable dots + auto-advance on top;
   published pages can't inline the script (wp_kses_post strips it), so the plugin
   enqueues it — and this CSS guarantees the slider still works if that JS never runs. */
.wp-webpanda-service .wpps-testimonials{ position:relative; max-width:1290px; margin:0 auto; }
.wp-webpanda-service .wpps-track{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;   /* momentum swipe on iOS */
  scrollbar-width:none;               /* Firefox: hide the scrollbar */
  padding:14px 0 40px;                /* headroom so the card's drop shadow isn't clipped */
}
.wp-webpanda-service .wpps-track::-webkit-scrollbar{ display:none; }  /* WebKit: hide the scrollbar */
.wp-webpanda-service .wpps-slide{
  flex:0 0 100%;                      /* exactly one slide per view */
  width:100%;
  box-sizing:border-box;
  scroll-snap-align:center;
  padding:0 6px;
}
/* Pagination dots — measured off the reference slider (.pp-dots / .pp-dot):
   10x10 circles, 12px gap, centred, 45px below the card, #d0d0d0 idle / #111 active,
   .3s transition and no scale-up. The reference carousel has NO prev/next arrows —
   dots are the only chrome — so we don't add any either. The 45px gap is split as the
   track's 40px bottom padding (shadow headroom) + 5px here. Deliberately NOT brand-var
   driven: the reference dots are neutral greys, not a brand colour. */
.wp-webpanda-service .wpps-dots{
  display:flex; justify-content:center; align-items:center;
  gap:12px; margin-top:5px;
}
.wp-webpanda-service .wpps-dot{
  width:10px; height:10px; padding:0;
  border:none; border-radius:50%;
  background:#d0d0d0;
  cursor:pointer;
  transition:background .3s ease;
}
.wp-webpanda-service .wpps-dot.is-active{
  background:#111111;
}

/* --- 5c. OFFERS SLIDER (coupon ticket in the sidebar; one coupon at a time) --- */
/* Reference: the coupon lives in the RIGHT sidebar under the service-nav pills — a dashed RED
   ticket with open scissors sitting on the top cut line, a bold blue amount, a dark title, gray
   terms + fine print, and dots below. One coupon shows at a time (the shared scroll-snap slider).
   The whole block is dropped by the renderer when the client has no offers. Coupon chrome (red
   border/scissors, blue amount, dark title) is FIXED, not brand-var — a coupon is a universal
   "cut here" convention, and letting a client's brand recolour it turned the title gold/etc. */
.wp-webpanda-service .wps-offers{ position:relative; }
.wp-webpanda-service .wps-offer{
  position:relative;
  width:100%;
  box-sizing:border-box;
  border:2px dashed #E1251D;
  border-radius:10px;
  background:#ffffff;
  padding:34px 22px 26px;
  text-align:center;
}
/* Open scissors on the top cut line, centred, red — its white pad masks the dashed line behind. */
.wp-webpanda-service .wps-offer__scissors{
  position:absolute;
  top:-17px; left:50%;
  transform:translateX(-50%);
  color:#E1251D;
  background:#ffffff;
  padding:0 8px;
  line-height:0;
}
.wp-webpanda-service .wps-offer__amount{
  font-family:var(--wp-brand-font, Oswald, sans-serif);
  text-transform:uppercase;
  font-weight:700;
  font-size:30px;
  line-height:1.05;
  color:#2456D1;
  margin:0 0 8px;
}
.wp-webpanda-service .wps-offer__title{
  font-family:var(--wp-brand-font, Oswald, sans-serif);
  font-weight:700;
  font-size:20px;
  line-height:1.2;
  color:#12233F;
  margin:0 0 12px;
}
.wp-webpanda-service .wps-offer__desc{
  font-size:15px;
  line-height:1.5;
  color:#464646;
  margin:0 0 12px;
}
.wp-webpanda-service .wps-offer__fine{
  font-size:13px;
  font-weight:700;
  color:#464646;
  margin:0 0 4px;
}
.wp-webpanda-service .wps-offer__fine:empty,
.wp-webpanda-service .wps-offer__desc:empty,
.wp-webpanda-service .wps-offer__expires:empty{ display:none; margin:0; }  /* no blank gaps for absent fields */
.wp-webpanda-service .wps-offer__expires{
  font-size:12px;
  color:#7a7f87;
  margin:0;
}

/* --- 6. VIP band (optional) -------------------------------------------------- */
/* reference: solid bright royal blue #2456D1 band with a full-bleed photo on the
   right whose left edge is a curved blue mask (ellipse clip). */
.wp-webpanda-service .wps-vip{
  position:relative;
  background:var(--wp-brand-blue-royal, #2456D1);
  color:#ffffff;
  padding:64px 0;
  overflow:hidden;
}
.wp-webpanda-service .wps-vip__grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,660px) 1fr;
  gap:40px;
  align-items:center;
}
.wp-webpanda-service .wps-vip__title{
  font-family:var(--wp-brand-font, Oswald, sans-serif);
  text-transform:uppercase;
  font-size:44px;
  font-weight:600;
  color:#ffffff;
  line-height:1.05;
  margin:0 0 6px;
}
.wp-webpanda-service .wps-vip__subtitle{
  font-family:var(--wp-brand-font, Oswald, sans-serif);
  text-transform:uppercase;
  font-size:26px;
  font-weight:500;
  color:#ffffff;
  margin:0 0 16px;
}
.wp-webpanda-service .wps-vip__intro{ color:#ffffff; font-size:18px; margin:0 0 24px; }
/* checklist — reference: 3 columns × 2 rows, filled COLUMN-major
   (item 1 & 2 stack in col 1, 3 & 4 in col 2, 5 & 6 in col 3) */
.wp-webpanda-service .wps-vip__list{ list-style:none; display:grid; grid-template-columns:repeat(3,auto); grid-template-rows:repeat(2,auto); grid-auto-flow:column; gap:14px 34px; margin:0 0 26px; justify-content:start; }
.wp-webpanda-service .wps-vip__item{ position:relative; padding-left:32px; color:#ffffff; font-size:17px; }
.wp-webpanda-service .wps-vip__item::before{
  content:"";
  position:absolute;
  left:0; top:3px;
  width:20px; height:20px;
  border-radius:50%;
  background:var(--wp-brand-accent, #F20505);
}
.wp-webpanda-service .wps-vip__item::after{
  content:"";
  position:absolute;
  left:6px; top:9px;
  width:8px; height:4px;
  border-left:2px solid #ffffff;
  border-bottom:2px solid #ffffff;
  transform:rotate(-45deg);
}
.wp-webpanda-service .wps-vip__text .wps-btn{ display:inline-block; width:auto; }
/* full-bleed image with curved blue mask on its left edge */
.wp-webpanda-service .wps-vip__media{
  position:absolute;
  top:0; right:0; bottom:0;
  width:48%;
  z-index:0;
}
.wp-webpanda-service .wps-vip__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:0;
  clip-path:ellipse(88% 150% at 100% 50%);
}

/* --- 7. FAQ (CSS-only accordion, default first open via <details open>) ------ */
.wp-webpanda-service .wps-faq{ padding:90px 0; background:#F7F9FC; }
.wp-webpanda-service .wps-faq__head{ text-align:center; max-width:760px; margin:0 auto 40px; }
.wp-webpanda-service .wps-faq__eyebrow{
  display:block;
  color:var(--wp-brand-accent, #F20505);
  font-family:var(--wp-brand-font, Oswald, sans-serif);
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:14px;
  font-weight:600;
  margin:0 0 10px;
}
/* reference FAQ title: "Mukta Mahee" 42px / weight 800 / #0C1C3C / sentence case */
.wp-webpanda-service .wps-faq__title{
  font-family:var(--wp-brand-font, "Mukta Mahee", sans-serif);
  text-transform:none;
  font-size:48px;
  font-weight:800;
  line-height:1.15;
  color:#0C1C3C;
  margin:0 0 12px;
}
.wp-webpanda-service .wps-faq__sub{ color:#464646; font-size:18px; margin:0; }
.wp-webpanda-service .wps-faq__list{ max-width:900px; margin:0 auto; display:flex; flex-direction:column; gap:24px; }

/* A single CONSISTENT rounded-rectangle radius for both the closed pill and the open card — the old
   design used a 999px stadium pill when closed and a 26px card when open, so the corners visibly
   jumped shape on open/close (the "awkward corners" bug). 16px reads clean in both states. */
.wp-webpanda-service .wps-faq__item{
  border-radius:16px;
  overflow:hidden;
  background:var(--wp-brand-blue-light, #0083EB);
  transition:box-shadow .35s ease, transform .35s ease;
}
.wp-webpanda-service .wps-faq__item:hover{ transform:translateY(-4px); box-shadow:0 18px 45px rgba(1,32,95,.10); }
/* JS accordion adds .is-open (was the native <details>[open]) */
.wp-webpanda-service .wps-faq__item.is-open{
  background:#ffffff;
  box-shadow:0 12px 34px rgba(1,32,95,.08);
}
/* The question is a real <button>, and this template is injected into an ARBITRARY WordPress
   theme — so every property a theme is likely to set on a bare <button> is pinned here with
   !important. Two live bugs came from exactly that bleed-through:
     • theme button:hover/:focus{background:...} rules repainted the pill a stray colour once a
       question had been clicked (the "a different colour appears after open+close" bug), and
     • a theme white-space:nowrap / display:inline-block broke the flex row, so a long
       question ran straight under (and past) the +/× badge instead of wrapping beside it
       (the "cross is out of alignment" bug). */
.wp-webpanda-service .wps-faq__q{
  width:100%;
  margin:0;
  border:0;
  cursor:pointer;
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:20px 30px;
  color:#ffffff !important;
  font-family:var(--wp-brand-font, "Mukta Mahee", sans-serif);
  text-transform:none;
  font-weight:600;
  font-size:20px;
  text-align:left;
  white-space:normal !important;
  background:var(--wp-brand-blue-light, #0083EB) !important;
  background-image:none !important;
  box-shadow:none !important;
  border-radius:16px;
  transition:background-color .3s ease, border-radius .3s ease;
}
/* The closed pill keeps ONE colour in every interaction state — including the focus that a
   theme leaves stuck on the button after a click. Keyboard focus stays visible via outline. */
.wp-webpanda-service .wps-faq__q:hover,
.wp-webpanda-service .wps-faq__q:focus,
.wp-webpanda-service .wps-faq__q:active,
.wp-webpanda-service .wps-faq__q:focus-visible{
  background:var(--wp-brand-blue-light, #0083EB) !important;
  background-image:none !important;
  color:#ffffff !important;
  box-shadow:none !important;
}
.wp-webpanda-service .wps-faq__q:focus{ outline:none; }
.wp-webpanda-service .wps-faq__q:focus-visible{ outline:3px solid rgba(255,255,255,.75); outline-offset:-4px; }
/* Long questions wrap in the space left of the badge instead of overflowing under it. */
.wp-webpanda-service .wps-faq__q-text{
  flex:1 1 auto;
  min-width:0;
  line-height:1.5;
  white-space:normal !important;
  overflow-wrap:anywhere;
  word-break:break-word;
}
/* Open card — the same state pinning, so the darker open colour also survives hover/focus. */
.wp-webpanda-service .wps-faq__item.is-open .wps-faq__q,
.wp-webpanda-service .wps-faq__item.is-open .wps-faq__q:hover,
.wp-webpanda-service .wps-faq__item.is-open .wps-faq__q:focus,
.wp-webpanda-service .wps-faq__item.is-open .wps-faq__q:active,
.wp-webpanda-service .wps-faq__item.is-open .wps-faq__q:focus-visible{
  background:var(--wp-brand-secondary-2, #1743B3) !important;
  background-image:none !important;
  border-radius:16px 16px 0 0;
}
/* The badge never shrinks and never absorbs the row's free space — it is a fixed 32px block
   parked at the right edge, which is what keeps the × centred inside its own circle. */
.wp-webpanda-service .wps-faq__icon{
  display:block !important;
  flex:0 0 32px;
  align-self:center;
  margin:0;
  width:32px; height:32px;
  border-radius:50%;
  background:rgba(255,255,255,.20);
  position:relative;
  transition:transform .35s ease, background .3s ease;   /* smooth rotate + colour change */
}
.wp-webpanda-service .wps-faq__icon::before,
.wp-webpanda-service .wps-faq__icon::after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  background:#ffffff;
  transform:translate(-50%,-50%);
}
.wp-webpanda-service .wps-faq__icon::before{ width:13px; height:2px; }        /* horizontal bar */
.wp-webpanda-service .wps-faq__icon::after{ width:2px; height:13px; }         /* vertical bar → plus */
/* open → the plus rotates 45° into an ×, and the badge fills with the brand ACCENT (both animated) */
.wp-webpanda-service .wps-faq__item.is-open .wps-faq__icon{ transform:rotate(45deg); background:var(--wp-brand-accent, #F20505); }
/* answer — collapsible with a smooth height transition; the JS accordion toggles .is-open */
.wp-webpanda-service .wps-faq__a{ max-height:0; overflow:hidden; background:#ffffff; border-radius:0 0 16px 16px; transition:max-height .45s ease; }
.wp-webpanda-service .wps-faq__item.is-open .wps-faq__a{ max-height:600px; }
.wp-webpanda-service .wps-faq__a p{ margin:0; padding:6px 30px 26px; color:#464646; font-size:17px; line-height:1.8; }
/* NO-JS FALLBACK: if the accordion enhancer never runs, every item shows as an open card so no
   answer is ever hidden (the [data-wps-enhanced] flag is set by the JS once it wires the toggles). */
.wp-webpanda-service .wps-faq__list:not([data-wps-enhanced]) .wps-faq__item{ border-radius:16px; background:#ffffff; }
.wp-webpanda-service .wps-faq__list:not([data-wps-enhanced]) .wps-faq__q{ background:var(--wp-brand-secondary-2, #1743B3) !important; border-radius:16px 16px 0 0; }
.wp-webpanda-service .wps-faq__list:not([data-wps-enhanced]) .wps-faq__icon{ display:none !important; }
.wp-webpanda-service .wps-faq__list:not([data-wps-enhanced]) .wps-faq__a{ max-height:none; }

/* --- 7b. WHY CHOOSE US (dark brand band: trust cards + CTA + photo) ---------- */
.wp-webpanda-service .wps-why{
  position:relative; overflow:hidden; padding:90px 0;
  background:linear-gradient(135deg, var(--wp-brand-primary, #01205F) 0%,
    color-mix(in srgb, var(--wp-brand-primary, #01205F) 68%, #000) 100%);
}
/* Soft decorative blobs (reference design) — a light circle top-left, a brand-accent tint bottom-right. */
.wp-webpanda-service .wps-why::before{ content:""; position:absolute; width:700px; height:700px; background:rgba(255,255,255,.05); border-radius:50%; top:-300px; left:-220px; }
.wp-webpanda-service .wps-why::after{ content:""; position:absolute; width:450px; height:450px; background:color-mix(in srgb, var(--wp-brand-accent, #F20505) 10%, transparent); border-radius:50%; bottom:-180px; right:-120px; }
/* Always two columns — copy on the left, image (or a reserved slot) on the right. */
.wp-webpanda-service .wps-why__grid{ position:relative; z-index:2; display:grid; grid-template-columns:1fr 500px; gap:60px; align-items:center; }
.wp-webpanda-service .wps-why__title{ margin:0 0 22px; font-family:var(--wp-brand-font, Oswald, sans-serif); font-size:52px; line-height:1; text-transform:uppercase; color:#fff; }
.wp-webpanda-service .wps-why__intro{ font-size:18px; line-height:1.8; color:rgba(255,255,255,.9); max-width:640px; margin:0 0 36px; }
.wp-webpanda-service .wps-why__cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-bottom:36px; }
.wp-webpanda-service .wps-why__card{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.10); border-radius:16px; padding:18px; display:flex; align-items:center; gap:14px; text-align:left; transition:transform .35s ease, background .35s ease; }
.wp-webpanda-service .wps-why__card:hover{ transform:translateY(-6px); background:rgba(255,255,255,.14); }
.wp-webpanda-service .wps-why__check{ flex:0 0 auto; width:44px; height:44px; border-radius:50%; background:var(--wp-brand-accent, #F20505); color:#fff; font-size:22px; font-weight:700; line-height:1; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 25px color-mix(in srgb, var(--wp-brand-accent, #F20505) 35%, transparent); }
.wp-webpanda-service .wps-why__card-title{ margin:0; font-size:18px; font-weight:700; color:#fff; }
.wp-webpanda-service .wps-why__card-text{ margin:5px 0 0; font-size:14px; line-height:1.6; color:rgba(255,255,255,.75); }
.wp-webpanda-service .wps-why__btns{ display:flex; gap:16px; flex-wrap:wrap; }
.wp-webpanda-service .wps-why__btn{ display:inline-flex; align-items:center; justify-content:center; min-width:210px; height:58px; padding:0 30px; border-radius:999px; font-size:16px; font-weight:700; text-decoration:none; white-space:nowrap; transition:.35s ease; }
.wp-webpanda-service .wps-why__btn--primary{ background:var(--wp-brand-accent, #F20505); color:#fff; }
.wp-webpanda-service .wps-why__btn--primary:hover{ transform:translateY(-4px); color:#fff; }
.wp-webpanda-service .wps-why__btn--secondary{ background:#fff; color:var(--wp-brand-primary, #01205F); }
.wp-webpanda-service .wps-why__btn--secondary:hover{ transform:translateY(-4px); color:var(--wp-brand-primary, #01205F); }
.wp-webpanda-service .wps-why__media img{ width:100%; display:block; border-radius:24px; box-shadow:0 35px 70px rgba(0,0,0,.35); }
/* Reserved image slot when the client has no synced photo yet — keeps the right-hand column so the
   two-column layout holds and there's a clear place for an image to go. */
.wp-webpanda-service .wps-why__media--empty{ min-height:440px; border-radius:24px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; }
.wp-webpanda-service .wps-why__media-icon{ display:flex; font-size:56px; line-height:1; opacity:.45; }

/* --- 7c. OUR WORK PROCESS (light band: numbered step cards) ------------------ */
.wp-webpanda-service .wps-process{ padding:90px 0; background:#F7F9FC; }
.wp-webpanda-service .wps-process__head{ text-align:center; max-width:820px; margin:0 auto 70px; }
.wp-webpanda-service .wps-process__title{ margin:0 0 18px; font-family:var(--wp-brand-font, Oswald, sans-serif); font-size:48px; line-height:1; text-transform:uppercase; color:var(--wp-brand-secondary, #06319A); }
.wp-webpanda-service .wps-process__intro{ margin:0 auto; font-size:18px; line-height:1.8; color:#555; }
.wp-webpanda-service .wps-process__grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:24px; align-items:stretch; }
.wp-webpanda-service .wps-process__card{ position:relative; background:#fff; border-radius:20px; padding:70px 24px 32px; text-align:center; box-shadow:0 18px 45px rgba(0,0,0,.08); transition:.35s ease; overflow:visible; }
/* The accent→brand top stripe on each card, matching the testimonial cards' signature bar. */
.wp-webpanda-service .wps-process__card::before{ content:""; position:absolute; top:0; left:0; width:100%; height:6px; background:linear-gradient(90deg, var(--wp-brand-accent, #F20505) 0%, var(--wp-brand-secondary, #06319A) 100%); border-radius:20px 20px 0 0; }
.wp-webpanda-service .wps-process__card:hover{ transform:translateY(-10px); box-shadow:0 30px 60px rgba(0,0,0,.15); }
/* The step number floats half-out of the top of each card in a brand circle. */
.wp-webpanda-service .wps-process__step{ position:absolute; top:-32px; left:50%; transform:translateX(-50%); width:66px; height:66px; border-radius:50%; background:var(--wp-brand-secondary, #06319A); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--wp-brand-font, Oswald, sans-serif); font-size:26px; font-weight:700; border:5px solid #fff; box-shadow:0 10px 25px rgba(0,0,0,.2); }
.wp-webpanda-service .wps-process__card-title{ margin:0 0 12px; font-size:24px; font-weight:700; color:#222; }
.wp-webpanda-service .wps-process__card-text{ margin:0; font-size:15px; line-height:1.7; color:#666; }

/* --- 7d. LOCATIONS WE SERVE (dark brand band: real city chips + map) --------- */
.wp-webpanda-service .wps-location{
  position:relative; overflow:hidden; padding:90px 0;
  background:linear-gradient(135deg, var(--wp-brand-primary, #01205F) 0%,
    color-mix(in srgb, var(--wp-brand-primary, #01205F) 68%, #000) 100%);
}
.wp-webpanda-service .wps-location::before{ content:""; position:absolute; width:700px; height:700px; background:rgba(255,255,255,.05); border-radius:50%; top:-300px; left:-220px; }
.wp-webpanda-service .wps-location::after{ content:""; position:absolute; width:450px; height:450px; background:color-mix(in srgb, var(--wp-brand-accent, #F20505) 10%, transparent); border-radius:50%; bottom:-180px; right:-120px; }
.wp-webpanda-service .wps-loc__grid{ position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
/* No address to centre a map on → the city list goes full-width, centred. */
.wp-webpanda-service .wps-loc__grid--nomap{ grid-template-columns:1fr; max-width:920px; margin:0 auto; text-align:center; }
.wp-webpanda-service .wps-loc__title{ margin:0 0 22px; font-family:var(--wp-brand-font, Oswald, sans-serif); font-size:48px; line-height:1; text-transform:uppercase; color:#fff; }
.wp-webpanda-service .wps-loc__intro{ font-size:18px; line-height:1.8; color:rgba(255,255,255,.9); max-width:600px; margin:0 0 36px; }
.wp-webpanda-service .wps-loc__grid--nomap .wps-loc__intro{ margin-left:auto; margin-right:auto; }
.wp-webpanda-service .wps-loc__cities{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px 32px; }
.wp-webpanda-service .wps-loc__grid--nomap .wps-loc__cities{ max-width:660px; margin:0 auto; }
.wp-webpanda-service .wps-loc__city{ display:flex; align-items:center; gap:12px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.10); padding:14px 20px; border-radius:16px; text-align:left; transition:.35s ease; }
.wp-webpanda-service .wps-loc__city:hover{ transform:translateY(-5px); background:rgba(255,255,255,.18); }
.wp-webpanda-service .wps-loc__pin{ flex:0 0 auto; width:40px; height:40px; border-radius:50%; background:var(--wp-brand-accent, #F20505); color:#fff; font-size:18px; line-height:1; display:flex; align-items:center; justify-content:center; }
.wp-webpanda-service .wps-loc__city-name{ color:#fff; font-weight:600; }
.wp-webpanda-service .wps-loc__map{ position:relative; background:rgba(255,255,255,.12); padding:16px; border-radius:24px; border:1px solid rgba(255,255,255,.10); box-shadow:0 25px 70px rgba(0,0,0,.25); }
.wp-webpanda-service .wps-loc__map::before{ content:""; position:absolute; left:0; top:0; width:100%; height:7px; background:linear-gradient(90deg, var(--wp-brand-accent, #F20505), #fff, var(--wp-brand-secondary, #06319A)); border-radius:24px 24px 0 0; }
.wp-webpanda-service .wps-loc__map iframe{ width:100%; height:480px; border:none; border-radius:16px; display:block; }

/* Responsive collapse for the three sections above (Why Choose / Process / Locations). */
@media (max-width:900px){
  .wp-webpanda-service .wps-why__grid,
  .wp-webpanda-service .wps-loc__grid{ grid-template-columns:1fr; gap:44px; text-align:center; }
  .wp-webpanda-service .wps-why__intro,
  .wp-webpanda-service .wps-loc__intro{ margin-left:auto; margin-right:auto; }
  .wp-webpanda-service .wps-why__btns,
  .wp-webpanda-service .wps-loc__cities{ justify-content:center; }
  .wp-webpanda-service .wps-why__media{ max-width:620px; margin:0 auto; }
  /* On one column, a real photo still shows; the empty reserved slot is hidden so it doesn't
     leave a tall blank panel under the copy. */
  .wp-webpanda-service .wps-why__media--empty{ display:none; }
  .wp-webpanda-service .wps-process__grid{ grid-template-columns:repeat(2,1fr); gap:52px 24px; }
  .wp-webpanda-service .wps-why__title,
  .wp-webpanda-service .wps-loc__title,
  .wp-webpanda-service .wps-process__title{ font-size:38px; }
}
@media (max-width:560px){
  .wp-webpanda-service .wps-why,
  .wp-webpanda-service .wps-process,
  .wp-webpanda-service .wps-location{ padding:60px 0; }
  .wp-webpanda-service .wps-why__cards,
  .wp-webpanda-service .wps-loc__cities{ grid-template-columns:1fr; }
  .wp-webpanda-service .wps-process__grid{ grid-template-columns:1fr; gap:58px; }
  .wp-webpanda-service .wps-why__btn{ width:100%; min-width:unset; }
  .wp-webpanda-service .wps-loc__map iframe{ height:340px; }
}

/* --- 8. FINAL CTA (Ready to schedule — benefits checklist + photo) ----------- */
.wp-webpanda-service .wps-schedule{ position:relative; overflow:hidden; padding:90px 0; background:#F7F9FC; }
/* Soft decorative circle, matching the reference final band. */
.wp-webpanda-service .wps-schedule::before{ content:""; position:absolute; width:650px; height:650px; border-radius:50%; background:color-mix(in srgb, var(--wp-brand-secondary, #06319A) 6%, transparent); top:-320px; left:-220px; }
.wp-webpanda-service .wps-schedule__grid{ position:relative; z-index:2; display:grid; grid-template-columns:1fr 520px; gap:60px; align-items:center; }
.wp-webpanda-service .wps-schedule__title{ font-family:var(--wp-brand-font, Oswald, sans-serif); text-transform:uppercase; font-size:48px; line-height:1; color:var(--wp-brand-secondary, #06319A); margin:0 0 20px; }
.wp-webpanda-service .wps-schedule__intro{ font-size:18px; line-height:1.8; color:#555; margin:0 0 32px; max-width:640px; }
.wp-webpanda-service .wps-schedule__intro p{ margin:0 0 14px; }
.wp-webpanda-service .wps-schedule__intro p:last-child{ margin:0; }
.wp-webpanda-service .wps-schedule__benefits{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-bottom:36px; }
.wp-webpanda-service .wps-schedule__benefit{ display:flex; align-items:center; gap:14px; padding:16px 18px; background:#fff; border-radius:16px; box-shadow:0 15px 35px rgba(0,0,0,.08); transition:transform .35s ease, box-shadow .35s ease; }
.wp-webpanda-service .wps-schedule__benefit:hover{ transform:translateY(-5px); box-shadow:0 24px 55px rgba(0,0,0,.13); }
.wp-webpanda-service .wps-schedule__check{ flex:0 0 auto; width:44px; height:44px; border-radius:50%; background:var(--wp-brand-accent, #F20505); color:#fff; font-size:22px; font-weight:700; line-height:1; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 25px color-mix(in srgb, var(--wp-brand-accent, #F20505) 35%, transparent); }
.wp-webpanda-service .wps-schedule__benefit-label{ font-size:16px; font-weight:700; color:#222; }
.wp-webpanda-service .wps-schedule__btns{ display:flex; gap:16px; flex-wrap:wrap; }
.wp-webpanda-service .wps-schedule__btn{ display:inline-flex; align-items:center; justify-content:center; min-width:210px; height:58px; padding:0 30px; border-radius:999px; font-size:16px; font-weight:700; text-decoration:none; white-space:nowrap; transition:.35s ease; }
.wp-webpanda-service .wps-schedule__btn--primary{ background:var(--wp-brand-accent, #F20505); color:#fff; }
.wp-webpanda-service .wps-schedule__btn--primary:hover{ transform:translateY(-4px); color:#fff; }
.wp-webpanda-service .wps-schedule__btn--secondary{ background:var(--wp-brand-secondary, #06319A); color:#fff; }
.wp-webpanda-service .wps-schedule__btn--secondary:hover{ transform:translateY(-4px); color:#fff; }
.wp-webpanda-service .wps-schedule__media img{ width:100%; display:block; border-radius:24px; box-shadow:0 30px 70px rgba(0,0,0,.18); }
/* Reserved image slot when there's no real photo — keeps the right-hand column so the space is kept. */
.wp-webpanda-service .wps-schedule__media--empty{ min-height:440px; border-radius:24px; background:color-mix(in srgb, var(--wp-brand-secondary, #06319A) 5%, #fff); border:1px solid rgba(0,0,0,.06); display:flex; align-items:center; justify-content:center; }
.wp-webpanda-service .wps-schedule__media-icon{ display:flex; font-size:56px; line-height:1; opacity:.35; }

/* --- 9. FOOTER --------------------------------------------------------------- */
/* reference footer surface is cream #FCFBF8 (not gray) */
.wp-webpanda-service .wps-footer{ background:#FCFBF8; }
/* The footer TOP bar (logo + Call Now / email pills + Sitemap/Privacy links) was removed from the
   template, so its rules are gone with it. Only the copyright/social bar below remains. */
.wp-webpanda-service .wps-badges{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.wp-webpanda-service .wps-badges img{ max-height:90px; width:auto; }

/* social bar — reference bg #06319A */
.wp-webpanda-service .wps-footer__bottom{ background:var(--wp-brand-secondary, #06319A); }
.wp-webpanda-service .wps-footer__bottom .wps-container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  padding-top:16px;
  padding-bottom:16px;
}
.wp-webpanda-service .wps-copyright{ color:#ffffff; font-size:14px; }
.wp-webpanda-service .wps-socials{ list-style:none; display:flex; align-items:center; gap:16px; }
.wp-webpanda-service .wps-socials a{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px;
  color:#ffffff;
}
.wp-webpanda-service .wps-socials svg{ width:18px; height:18px; fill:currentColor; }

/* --- responsive -------------------------------------------------------------- */
@media (max-width:900px){
  .wp-webpanda-service .wps-intro__grid,
  .wp-webpanda-service .wps-vip__grid,
  .wp-webpanda-service .wps-schedule__grid{ grid-template-columns:1fr; }
  .wp-webpanda-service .wps-side{ position:static; top:auto; }
  .wp-webpanda-service .wps-vip__list{ grid-template-columns:1fr 1fr; grid-template-rows:none; grid-auto-flow:row; }
  .wp-webpanda-service .wps-vip__media{ position:static; width:100%; margin-top:28px; }
  .wp-webpanda-service .wps-vip__media img{ clip-path:none; border-radius:14px; height:auto; }
  .wp-webpanda-service .wps-hero{ min-height:0; padding:70px 0; }
  .wp-webpanda-service .wps-hero__title{ font-size:48px; }
  .wp-webpanda-service .wps-hero__blurb{ font-size:19px; line-height:1.65; }
  .wp-webpanda-service .wps-section-title{ font-size:34px; }
  .wp-webpanda-service .wps-faq__title{ font-size:38px; }
  .wp-webpanda-service .wps-schedule__title{ font-size:38px; }
  /* stack the final-CTA one column, centre it, image first, and drop the empty image slot */
  .wp-webpanda-service .wps-schedule__grid{ text-align:center; }
  .wp-webpanda-service .wps-schedule__intro{ margin-left:auto; margin-right:auto; }
  .wp-webpanda-service .wps-schedule__benefits{ grid-template-columns:1fr; }
  .wp-webpanda-service .wps-schedule__btns{ justify-content:center; }
  .wp-webpanda-service .wps-schedule__media{ max-width:620px; margin:0 auto; }
  .wp-webpanda-service .wps-schedule__media--empty{ display:none; }
  .wp-webpanda-service .wps-faq__q{ font-size:18px; }
}
@media (max-width:640px){
  .wp-webpanda-service .wps-vip__list{ grid-template-columns:1fr; grid-template-rows:none; grid-auto-flow:row; }
  .wp-webpanda-service .wps-hero__title{ font-size:38px; }
  .wp-webpanda-service .wps-faq__title{ font-size:30px; }
  .wp-webpanda-service .wps-schedule__title{ font-size:32px; }
  .wp-webpanda-service .wps-faq__q{ font-size:17px; padding:16px 20px; }
  .wp-webpanda-service .wps-faq__a p{ padding:6px 20px 22px; }
  /* full-width stacked CTAs so neither pill overflows a narrow screen */
  .wp-webpanda-service .wps-hero__cta{ flex-direction:column; }
  .wp-webpanda-service .wps-hero__btn{ width:100%; }
  .wp-webpanda-service .wps-schedule__btn{ width:100%; min-width:unset; }
}