/* =====================================================================
   PMI Pest Management India — custom styles layered over the base theme.
   ===================================================================== */
/* ---------------------------------------------------------------------
   Theme tokens.

   These are the fallback values. The admin's chosen colours are injected
   as a second :root block by partials/theme.php, which is emitted after
   this file loads and therefore wins. Keep every colour below expressed
   as a token so an admin theme change reaches the whole site — including
   service, blog and career pages.
   --------------------------------------------------------------------- */
:root {
   /* Brand */
   --pmi-brand: #1f9d55;
   --pmi-brand-dark: #17743f;
   --pmi-brand-soft: #7fdca6;
   --pmi-brand-tint: #e6f6ec;

   /* Text */
   --pmi-ink: #0f2a1c;
   --pmi-ink-2: #35433b;
   --pmi-muted: #5f6b64;
   --pmi-muted-2: #9aa8a0;

   /* Surfaces & lines */
   --pmi-surface: #fff;
   --pmi-surface-alt: #f2f7f3;
   --pmi-border: #eef1ef;
   --pmi-border-strong: #d9e6df;

   /* Accents & state */
   --pmi-accent: #f5a623;
   --pmi-danger: #c0392b;

   /* Navbar — themed independently of the page so the header can be
      light-on-dark or dark-on-light without affecting anything else. */
   --pmi-nav-bg: #fff;
   --pmi-nav-fg: #0f2a1c;
   --pmi-nav-fg-hover: #1f9d55;
   --pmi-nav-border: #eef1ef;
   /* Dropdown panel follows the navbar, not the page. */
   --pmi-nav-panel-bg: #fff;
   --pmi-nav-panel-fg: #35433b;

   /* Fixed brand colours — deliberately NOT themeable. */
   --pmi-whatsapp: #25D366;
   /* Phone CTA red. A signal colour, not a brand colour, so it stays put
      whatever palette the admin picks. Lifted to #ff6b6b in dark mode,
      where this red would fail contrast — see theme_helper.php. */
   --pmi-phone: #d32f2f;

   /* Intentionally-dark slabs (page heroes, CTA panels, the "why it works"
      band). These are dark by DESIGN in both themes, so they must NOT follow
      --pmi-ink, which inverts to near-white in dark mode and would leave
      white text on a white panel. Dark mode only deepens them slightly. */
   --pmi-slab: var(--pmi-ink);
   --pmi-slab-fg: #ffffff;
   --pmi-slab-fg-soft: rgba(255, 255, 255, .85);

   /* Back-compat aliases for rules written before the token sweep. */
   --pmi-green: var(--pmi-brand);
   --pmi-green-dark: var(--pmi-brand-dark);
   --pmi-dark: var(--pmi-ink);
   --pmi-soft: var(--pmi-surface-alt);

   /* Steer the vendor theme (main.css) accent to our brand. */
   --tp-theme-1: var(--pmi-brand);
}

/* Re-tint the theme accent toward a pest-control green */
.tp-btn-inner,
.pmi-btn {
   display: inline-block;
   background: var(--pmi-green);
   color: var(--pmi-surface);
   font-weight: 600;
   padding: 12px 26px;
   border-radius: 6px;
   line-height: 1;
   transition: background .3s ease;
}
.tp-btn-inner:hover,
.pmi-btn:hover { background: var(--pmi-green-dark); color: var(--pmi-surface); }

.pmi-btn-outline {
   display: inline-block;
   border: 1.5px solid var(--pmi-green);
   color: var(--pmi-green-dark);
   font-weight: 600;
   padding: 11px 24px;
   border-radius: 6px;
   line-height: 1;
   transition: all .3s ease;
}
.pmi-btn-outline:hover { background: var(--pmi-green); color: var(--pmi-surface); }

/* ---------------------------------------------------------------------
   Header — driven entirely by the --pmi-nav-* tokens so the navbar can be
   themed independently of the page (e.g. a dark header on a light site).
   These override the vendor theme, which hardcodes its own header colours.
   --------------------------------------------------------------------- */
.tp-header-area,
.tp-header-area.tp-header-blur,
#header-sticky {
   background: var(--pmi-nav-bg) !important;
   border-bottom: 1px solid var(--pmi-nav-border);
}
/* Top-level menu links.
   The vendor rule .tp-main-menu nav ul li a (main.css) is more specific than a
   plain override here and hard-codes black, so the admin's colour is forced.
   Without !important only the hover state — which gains specificity from the
   pseudo-class — would follow the theme. */
.tp-header-area .tp-main-menu nav > ul > li > a {
   color: var(--pmi-nav-fg) !important;
}
.tp-header-area .tp-main-menu nav > ul > li:hover > a,
.tp-header-area .tp-main-menu nav > ul > li.active > a {
   color: var(--pmi-nav-fg-hover) !important;
}
/* Mobile toggle bars inherit the navbar foreground. */
.tp-header-area .tp-header-toogle span { background: var(--pmi-nav-fg) !important; }

/* Dropdown / mega-menu panel */
.tp-header-area .tp-main-menu nav ul li .sub-menu {
   background: var(--pmi-nav-panel-bg);
   border: 1px solid var(--pmi-nav-border);
}
.tp-header-area .tp-main-menu nav ul li .sub-menu li a { color: var(--pmi-nav-panel-fg); }

.pmi-header-callus { font-size: 12px; color: var(--pmi-muted); }
.tp-megamenu-heading {
   display: block;
   font-size: 13px;
   letter-spacing: .06em;
   text-transform: uppercase;
   color: var(--pmi-green-dark);
   font-weight: 700;
   margin-bottom: 12px;
}
.tp-megamenu-list ul li a { padding: 6px 0; display: block; }

/* ---------------------------------------------------------------------
   Services mega-menu — the theme forces a 900px panel with 15px gaps,
   which is far too large for our ~20 service links. Tighten it into a
   compact three-column panel sized to its content.
   --------------------------------------------------------------------- */
@media (min-width: 1200px) {
   .tp-main-menu nav ul li .sub-menu.pmi-megamenu {
      width: 660px !important;
      max-width: 660px;
      padding: 20px 22px 14px !important;
      /* Anchor under the Services link rather than the theme's wide panel. */
      left: 0;
      transform: translateX(-30px) translateY(10px);
   }
   .tp-main-menu nav ul li:hover > .sub-menu.pmi-megamenu {
      transform: translateX(-30px) translateY(0);
   }
}

.pmi-megamenu .pmi-megamenu-cols {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 0 18px;
   align-items: start;
}
.pmi-megamenu .tp-megamenu-list-subtitle {
   display: block;
   font-size: 11px;
   line-height: 1.4;
   min-height: 1.4em; /* keeps the spacer column aligned with its heading */
   letter-spacing: .07em;
   text-transform: uppercase;
   font-weight: 700;
   color: var(--pmi-green-dark);
   margin-bottom: 8px;
   white-space: nowrap;
}
.pmi-megamenu .tp-megamenu-list ul { margin: 0; padding: 0; }
.pmi-megamenu .tp-megamenu-list ul li { list-style: none; }
.pmi-megamenu .tp-megamenu-list ul li:not(:last-child) { margin-bottom: 0 !important; }
.pmi-megamenu .tp-megamenu-list ul li a {
   display: block;
   padding: 5px 9px !important;
   border-radius: 6px;
   font-size: 13.5px;
   line-height: 1.3;
   color: var(--pmi-nav-panel-fg);
   white-space: normal;
}
.pmi-megamenu .tp-megamenu-list ul li a:hover {
   background: color-mix(in srgb, var(--pmi-nav-fg-hover) 10%, transparent);
   color: var(--pmi-nav-fg-hover);
}

.pmi-megamenu .pmi-megamenu-foot {
   margin-top: 10px;
   padding-top: 10px;
   border-top: 1px solid var(--pmi-border);
}
/* The grid stretches to the tallest column; keep the footer tight to it. */
.pmi-megamenu .pmi-megamenu-cols > .tp-megamenu-list { align-self: start; }
.pmi-megamenu .pmi-megamenu-foot a {
   font-size: 13.5px;
   font-weight: 600;
   color: var(--pmi-green-dark);
   display: inline-flex;
   align-items: center;
   gap: 7px;
}
.pmi-megamenu .pmi-megamenu-foot a i { font-size: 11px; transition: transform .25s ease; }
.pmi-megamenu .pmi-megamenu-foot a:hover i { transform: translateX(3px); }

/* Offcanvas / mobile: let it flow full width in the drawer. */
@media (max-width: 1199px) {
   .pmi-megamenu .pmi-megamenu-cols { grid-template-columns: 1fr; gap: 0; }
   .pmi-megamenu .pmi-megamenu-foot { display: none; }
}

/* The mobile drawer is built by cloning the mega-menu out of .tp-header-area,
   so the rule that paints the panel's dark background stops matching while the
   panel's light text colour — not header-scoped — still does. That left white
   links on the white drawer. Re-scope colour to the drawer's own palette. */
.tp-offcanvas-menu .pmi-megamenu,
.tp-offcanvas-menu .pmi-megamenu .tp-megamenu-list {
   background: transparent;
   border: 0;
   box-shadow: none;
}
.tp-offcanvas-menu .pmi-megamenu .tp-megamenu-list ul li a {
   color: var(--tp-common-black);
   padding: 8px 0 !important;
   font-size: 15px;
}
.tp-offcanvas-menu .pmi-megamenu .tp-megamenu-list ul li a:hover {
   background: transparent;
   color: var(--pmi-brand);
}
.tp-offcanvas-menu .pmi-megamenu .tp-megamenu-list-subtitle {
   color: var(--pmi-green-dark);
   margin-top: 10px;
}
/* The spacer heading that keeps the desktop columns aligned is dead weight
   once the columns stack. */
.tp-offcanvas-menu .pmi-megamenu .tp-megamenu-list-subtitle[aria-hidden="true"] {
   display: none;
}

/* Generic section helpers */
.pmi-section { padding: 90px 0; }
.pmi-section-sm { padding: 60px 0; }
.pmi-bg-soft { background: var(--pmi-soft); }
.pmi-eyebrow {
   display: inline-block;
   text-transform: uppercase;
   letter-spacing: .08em;
   font-weight: 600;
   font-size: 13px;
   color: var(--pmi-green);
   margin-bottom: 12px;
}
.pmi-title { font-size: 40px; line-height: 1.15; font-weight: 700; color: var(--pmi-dark); }
.pmi-title-sm { font-size: 26px; font-weight: 700; color: var(--pmi-dark); }
.pmi-lead { color: var(--pmi-muted); font-size: 17px; }

/* Page hero / breadcrumb */
.pmi-page-hero {
   background: var(--pmi-slab);
   color: var(--pmi-slab-fg);
   padding: 120px 0 70px;
   text-align: center;
}
.pmi-page-hero h1 { color: var(--pmi-slab-fg); font-size: 44px; font-weight: 700; margin-bottom: 10px; }
.pmi-breadcrumb { color: rgba(255,255,255,.85); font-size: 15px; }
.pmi-breadcrumb a { color: var(--pmi-slab-fg); }
.pmi-breadcrumb span { margin: 0 8px; opacity: .6; }

/* Home hero — index-5 style block */
.pmi-hero-5 { padding-top: 60px; }
.pmi-hero-5-bg {
   background: var(--pmi-slab);
   border-radius: 20px;
   padding: 90px 70px;
   color: var(--pmi-surface);
}
.pmi-hero-5-bg .tp-hero-5-subtitle { color: var(--pmi-brand-soft); letter-spacing: .08em; }
.pmi-hero-5-bg .tp-hero-5-title { color: var(--pmi-surface); font-size: 52px; line-height: 1.1; }
.pmi-hero-5-bg .tp-hero-5-dec { color: rgba(255,255,255,.9); font-size: 18px; max-width: 560px; }
.pmi-hero-5-stats { display: flex; gap: 40px; justify-content: flex-end; }
.pmi-hero-5-stats .pmi-hero-stat h3 { color: var(--pmi-surface); font-size: 44px; font-weight: 700; margin: 0; }
.pmi-hero-5-stats .pmi-hero-stat span { color: rgba(255,255,255,.85); font-size: 15px; }
@media (max-width: 991px) {
   .pmi-hero-5-bg { padding: 60px 28px; }
   .pmi-hero-5-bg .tp-hero-5-title { font-size: 36px; }
}

/* Home hero (legacy) */
.pmi-hero {
   position: relative;
   background: var(--pmi-slab);
   color: var(--pmi-slab-fg);
   padding: 150px 0 110px;
   overflow: hidden;
}
.pmi-hero h1 { color: var(--pmi-surface); font-size: 54px; line-height: 1.08; font-weight: 700; margin-bottom: 20px; }
.pmi-hero p { color: rgba(255,255,255,.9); font-size: 19px; max-width: 560px; margin-bottom: 32px; }
.pmi-hero .pmi-hero-stats { margin-top: 46px; display: flex; gap: 42px; flex-wrap: wrap; }
.pmi-hero-stat h3 { color: var(--pmi-surface); font-size: 40px; font-weight: 700; margin: 0; }
.pmi-hero-stat span { color: rgba(255,255,255,.85); font-size: 15px; }
.pmi-hero-badges { display:flex; gap:14px; flex-wrap:wrap; margin-top:26px; }
.pmi-hero-badge { background: rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); border-radius: 40px; padding: 8px 18px; font-size: 14px; }

/* Feature / why-choose cards */
.pmi-feature-card {
   background: var(--pmi-surface);
   border: 1px solid var(--pmi-border);
   border-radius: 12px;
   padding: 34px 28px;
   height: 100%;
   transition: transform .3s ease, box-shadow .3s ease;
}
.pmi-feature-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(15,42,28,.08); }
.pmi-feature-icon {
   width: 62px; height: 62px; border-radius: 14px;
   display: flex; align-items: center; justify-content: center;
   background: var(--pmi-soft); color: var(--pmi-green); font-size: 26px; margin-bottom: 20px;
}
.pmi-feature-card h4 { font-size: 20px; font-weight: 700; color: var(--pmi-dark); margin-bottom: 10px; }
.pmi-feature-card p { color: var(--pmi-muted); margin: 0; }

/* Service cards grid */
.pmi-service-card {
   background: var(--pmi-surface);
   border-radius: 14px;
   overflow: hidden;
   border: 1px solid var(--pmi-border);
   height: 100%;
   transition: transform .3s ease, box-shadow .3s ease;
}
.pmi-service-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(15,42,28,.10); }
.pmi-service-card-thumb { position: relative; aspect-ratio: 16/11; overflow: hidden; }
.pmi-service-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.pmi-service-card:hover .pmi-service-card-thumb img { transform: scale(1.06); }
.pmi-service-card-body { padding: 22px 24px 26px; }
.pmi-service-card-body h4 { font-size: 19px; font-weight: 700; margin-bottom: 8px; }
.pmi-service-card-body h4 a { color: var(--pmi-dark); }
.pmi-service-card-body h4 a:hover { color: var(--pmi-green); }
.pmi-service-card-body p { color: var(--pmi-muted); font-size: 15px; margin-bottom: 16px; }
.pmi-service-card-link { color: var(--pmi-green); font-weight: 600; font-size: 15px; }
.pmi-cat-chip {
   position: absolute; top: 14px; left: 14px;
   background: rgba(15,42,28,.85); color:var(--pmi-surface); font-size:12px; font-weight:600;
   padding: 5px 12px; border-radius: 20px; text-transform: capitalize;
}

/* Service detail */
.pmi-sd-sidebar { position: sticky; top: 110px; }
.pmi-sd-box { border: 1px solid var(--pmi-border); border-radius: 12px; padding: 26px; margin-bottom: 26px; background: var(--pmi-surface); }
.pmi-sd-box h3 { font-size: 19px; font-weight: 700; margin-bottom: 16px; color: var(--pmi-dark); }
.pmi-sd-list { list-style: none; padding: 0; margin: 0; }
.pmi-sd-list li { margin-bottom: 4px; }
.pmi-sd-list li a {
   display: flex; justify-content: space-between; align-items: center;
   padding: 11px 14px; border-radius: 8px; color: var(--pmi-ink-2); font-weight: 500;
   transition: all .25s ease;
}
.pmi-sd-list li a:hover,
.pmi-sd-list li.active a { background: var(--pmi-soft); color: var(--pmi-green-dark); }
.pmi-sd-list li a i { opacity: .5; }

.pmi-sd-cta { background: var(--pmi-slab); color: var(--pmi-slab-fg); border:none; }
.pmi-sd-cta h3 { color: var(--pmi-slab-fg); }
.pmi-sd-cta p { color: rgba(255,255,255,.85); }

.pmi-sd-hero-img { border-radius: 14px; overflow: hidden; margin-bottom: 30px; }
.pmi-sd-hero-img img { width: 100%; height: auto; display: block; }

.pmi-highlight-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 28px 0; }
.pmi-highlight-card { background: var(--pmi-soft); border-radius: 12px; padding: 22px 24px; }
.pmi-highlight-card .label { font-size: 12px; text-transform: uppercase; letter-spacing:.06em; color: var(--pmi-green-dark); font-weight: 700; }
.pmi-highlight-card p { margin: 8px 0 0; color: var(--pmi-ink-2); }

.pmi-content-block { margin-bottom: 34px; }
.pmi-content-block h4 { font-size: 22px; font-weight: 700; color: var(--pmi-dark); margin-bottom: 16px; }
.pmi-check-list { list-style: none; padding: 0; margin: 0; }
.pmi-check-list li { position: relative; padding-left: 30px; margin-bottom: 12px; color: var(--pmi-ink-2); }
.pmi-check-list li::before {
   content: "\2713"; position: absolute; left: 0; top: 0;
   width: 20px; height: 20px; border-radius: 50%; background: var(--pmi-green);
   color: var(--pmi-surface); font-size: 12px; display: flex; align-items: center; justify-content: center;
}
.pmi-process { counter-reset: step; }
.pmi-process-step { display: flex; gap: 18px; margin-bottom: 18px; }
.pmi-process-num {
   flex: 0 0 auto; width: 44px; height: 44px; border-radius: 10px;
   background: var(--pmi-green); color: var(--pmi-surface); font-weight: 700;
   display: flex; align-items: center; justify-content: center;
}
.pmi-process-step p { margin: 0; color: var(--pmi-ink-2); align-self: center; }

.pmi-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.pmi-assurance { background: var(--pmi-slab); color: var(--pmi-slab-fg); border-radius: 14px; padding: 32px 34px; margin: 30px 0; }
.pmi-assurance .pmi-eyebrow { color: var(--pmi-brand-soft); }
.pmi-assurance h4 { color: var(--pmi-slab-fg); font-size: 22px; margin-bottom: 12px; }
.pmi-assurance p { color: rgba(255,255,255,.82); margin: 0; }

/* Accordion (FAQ) */
.pmi-accordion .accrodion { border: 1px solid var(--pmi-border); border-radius: 10px; margin-bottom: 14px; overflow: hidden; background:var(--pmi-surface); }
.pmi-accordion .accrodion-title { padding: 18px 22px; cursor: pointer; }
.pmi-accordion .accrodion-title h4 { font-size: 17px; margin: 0; color: var(--pmi-dark); }
.pmi-accordion .accrodion.active .accrodion-title { background: var(--pmi-soft); }
.pmi-accordion .accrodion-content .inner { padding: 0 22px 20px; color: var(--pmi-muted); }

/* CTA band */
.pmi-cta-band {
   background: var(--pmi-green-dark);
   color: var(--pmi-surface); border-radius: 16px; padding: 50px; text-align: center;
}
.pmi-cta-band h2 { color: var(--pmi-surface); font-size: 34px; font-weight: 700; margin-bottom: 12px; }
.pmi-cta-band p { color: rgba(255,255,255,.9); margin-bottom: 26px; }
.pmi-cta-band .pmi-btn { background:var(--pmi-surface); color: var(--pmi-green-dark); }
.pmi-cta-band .pmi-btn:hover { background: var(--pmi-slab); color: var(--pmi-slab-fg); }

/* Floating WhatsApp */
.pmi-whatsapp-float {
   /* bottom offset clears the footer copyright line, which this used to
      sit on top of once the page was scrolled to the end. */
   position: fixed; left: 22px; bottom: 92px; z-index: 999;
   width: 56px; height: 56px; border-radius: 50%;
   background: var(--pmi-whatsapp); color: var(--pmi-surface); font-size: 28px;
   display: flex; align-items: center; justify-content: center;
   box-shadow: 0 8px 24px rgba(0,0,0,.22);
}
.pmi-whatsapp-float:hover { color:var(--pmi-surface); transform: scale(1.06); }

/* =====================================================================
   Contact page
   ===================================================================== */

/* Quick-contact strip — pulled up over the page hero, which ends in 70px of
   padding for the tiles to sit in. */
.pmi-contact-strip { margin-top: -46px; position: relative; z-index: 3; }
.pmi-contact-strip-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 20px;
}
.pmi-contact-tile {
   display: block;
   background: var(--pmi-surface);
   border: 1px solid var(--pmi-border);
   border-radius: 14px;
   padding: 26px 24px;
   box-shadow: 0 12px 30px rgba(15, 42, 28, .06);
   transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
a.pmi-contact-tile:hover {
   transform: translateY(-5px);
   box-shadow: 0 20px 40px rgba(15, 42, 28, .1);
   border-color: var(--pmi-border-strong);
}
.pmi-contact-tile-icon {
   width: 46px; height: 46px; border-radius: 12px;
   display: flex; align-items: center; justify-content: center;
   background: var(--pmi-soft); color: var(--pmi-green);
   font-size: 18px; margin-bottom: 16px;
}
.pmi-contact-tile-icon.is-whatsapp { background: var(--pmi-brand-tint); color: var(--pmi-whatsapp); }
.pmi-contact-tile-label {
   display: block; font-size: 12px; text-transform: uppercase;
   letter-spacing: .07em; font-weight: 700; color: var(--pmi-muted); margin-bottom: 6px;
}
.pmi-contact-tile-value {
   display: block; font-size: 16px; font-weight: 700;
   color: var(--pmi-dark); line-height: 1.4; word-break: break-word;
}
.pmi-contact-tile-sub { display: block; margin-top: 4px; font-size: 13.5px; color: var(--pmi-muted); }

/* Two-column layout: form + business details */
.pmi-contact-layout {
   display: grid;
   grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
   gap: 30px;
   align-items: start;
}
.pmi-contact-panel {
   background: var(--pmi-surface);
   border: 1px solid var(--pmi-border);
   border-radius: 16px;
   padding: 38px 40px;
}
.pmi-contact-panel-dark {
   background: var(--pmi-slab);
   border-color: var(--pmi-slab);
   color: var(--pmi-surface);
}

/* Form */
.pmi-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.pmi-form-group { margin-bottom: 18px; }
.pmi-form-group label {
   display: block; font-size: 14px; font-weight: 600;
   color: var(--pmi-dark); margin-bottom: 7px;
}
.pmi-req { color: var(--pmi-danger); }
.pmi-form-control {
   width: 100%;
   border: 1px solid var(--pmi-border);
   border-radius: 8px;
   padding: 12px 15px;
   font-size: 15px;
   font-family: inherit;
   color: var(--pmi-dark);
   background: var(--pmi-surface);
   transition: border-color .25s ease, box-shadow .25s ease;
}
.pmi-form-control::placeholder { color: var(--pmi-muted-2); }
.pmi-form-control:focus {
   outline: none;
   border-color: var(--pmi-green);
   box-shadow: 0 0 0 3px rgba(31, 157, 85, .12);
}
textarea.pmi-form-control { resize: vertical; min-height: 120px; }
.pmi-form-submit { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 4px; }
.pmi-form-submit .pmi-btn { border: none; cursor: pointer; }
.pmi-form-note { font-size: 13.5px; color: var(--pmi-muted); }

.pmi-alert {
   display: flex; align-items: flex-start; gap: 10px;
   padding: 14px 18px; border-radius: 10px; margin-bottom: 22px; font-size: 15px;
}
.pmi-alert-ok { background: var(--pmi-brand-tint); border: 1px solid var(--pmi-brand-soft); color: var(--pmi-brand-dark); }

/* Business details aside */
.pmi-aside-title { color: var(--pmi-surface); font-size: 21px; font-weight: 700; margin-bottom: 10px; }
.pmi-aside-lead { color: rgba(255,255,255,.78); font-size: 15px; line-height: 1.7; margin-bottom: 26px; }
.pmi-detail-list { list-style: none; padding: 0; margin: 0; }
.pmi-detail-list li {
   display: flex; gap: 14px; padding: 16px 0;
   border-top: 1px solid rgba(255,255,255,.12);
}
.pmi-detail-list li:first-child { border-top: none; padding-top: 0; }
.pmi-detail-list li i {
   flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px;
   background: rgba(255,255,255,.1); color: var(--pmi-brand-soft);
   display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.pmi-detail-list li span {
   display: block; font-size: 12px; text-transform: uppercase;
   letter-spacing: .06em; font-weight: 700; color: var(--pmi-brand-soft); margin-bottom: 3px;
}
.pmi-detail-list li p { margin: 0; color: rgba(255,255,255,.92); font-size: 15px; line-height: 1.6; }
.pmi-detail-list li p a { color: rgba(255,255,255,.92); }
.pmi-detail-list li p a:hover { color: var(--pmi-brand-soft); }

.pmi-aside-social {
   margin-top: 26px; padding-top: 22px;
   border-top: 1px solid rgba(255,255,255,.12);
}
.pmi-aside-social > span {
   display: block; font-size: 12px; text-transform: uppercase;
   letter-spacing: .06em; font-weight: 700; color: var(--pmi-brand-soft); margin-bottom: 12px;
}
.pmi-aside-social a {
   display: inline-flex; align-items: center; justify-content: center;
   width: 38px; height: 38px; border-radius: 50%; margin-right: 8px;
   background: rgba(255,255,255,.1); color: var(--pmi-surface); font-size: 14px;
   transition: background .25s ease;
}
.pmi-aside-social a:hover { background: var(--pmi-green); color: var(--pmi-surface); }

/* WhatsApp prompt card */
.pmi-wa-card {
   display: flex; align-items: center; gap: 16px;
   margin-top: 20px; padding: 22px 24px;
   background: var(--pmi-brand-tint); border: 1px solid var(--pmi-brand-soft); border-radius: 14px;
   transition: transform .3s ease, box-shadow .3s ease;
}
.pmi-wa-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(15, 42, 28, .1); }
.pmi-wa-card i { font-size: 32px; color: var(--pmi-whatsapp); }
.pmi-wa-card strong { display: block; color: var(--pmi-dark); font-size: 16px; }
.pmi-wa-card span { display: block; color: var(--pmi-muted); font-size: 14px; margin-top: 2px; }

/* Map */
.pmi-map-section { padding-bottom: 90px; }
.pmi-map-frame { border-radius: 16px; overflow: hidden; border: 1px solid var(--pmi-border); line-height: 0; }
.pmi-map-frame iframe { display: block; filter: grayscale(.15); }

@media (max-width: 1199px) {
   .pmi-contact-strip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
   .pmi-contact-layout { grid-template-columns: 1fr; }
   .pmi-contact-panel { padding: 30px 26px; }
}
@media (max-width: 575px) {
   .pmi-contact-strip { margin-top: -34px; }
   .pmi-contact-strip-grid { grid-template-columns: 1fr; }
   .pmi-form-row { grid-template-columns: 1fr; }
   .pmi-contact-panel { padding: 26px 20px; }
}

/* Responsive */
@media (max-width: 991px) {
   .pmi-title { font-size: 32px; }
   .pmi-hero { padding: 120px 0 80px; }
   .pmi-hero h1 { font-size: 40px; }
   .pmi-highlight-grid, .pmi-two-col { grid-template-columns: 1fr; }
   .pmi-page-hero h1 { font-size: 34px; }
}

/* =====================================================================
   Image-fit fixes: pest photos are large landscape images placed into
   containers the theme sized for its own (often square/specific-ratio)
   assets. Force object-fit so they fill cleanly. (Only my own selectors
   are scoped here; the base theme CSS is untouched.)
   ===================================================================== */

/* "Common pests we control" — circular thumbs (120x120 / 90x90) */
.tp-destination-6-thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

/* "Pest control services we provide" — service card image (233px tall) */
.tp-tour-thumb .image {
   overflow: hidden;
}
.tp-tour-thumb .image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

/* Destination-7 slider cards below (feature image slides) */
.tp-destination-7-item .tp-destination-one-thumb {
   overflow: hidden;
   border-radius: 12px;
}
.tp-destination-7-item .tp-destination-one-thumb img {
   width: 100%;
   height: 340px;
   object-fit: cover;
   display: block;
}

/* Blog thumbnails */
.tp-blog-5-thumb {
   overflow: hidden;
   border-radius: 12px;
}
.tp-blog-5-thumb img {
   width: 100%;
   height: 240px;
   object-fit: cover;
   display: block;
}

/* About two-column images */
.tp-about-6-thumb img {
   height: 260px;
   object-fit: cover;
}

/* Site logo — image only, height driven by the Site Settings value. */
.pmi-logo {
   display: block;
   width: auto;
   max-width: 280px;
   object-fit: contain;
}
/* Mobile: give the logo more room, not less. The inline height from Site
   Settings still applies, so cap by width only and let height scale. */
/* Mobile sizing for the header/footer logos lives with the footer rules at
   the end of this file, where both are made full width. The offcanvas logo
   still needs a sane cap here. */
@media (max-width: 767px) {
   .tp-offcanvas-logo .pmi-logo { max-width: 200px; height: 64px !important; }
}
@media (max-width: 575px) {
   .tp-offcanvas-logo .pmi-logo { max-width: 185px; height: 56px !important; }
}

/* Flatten the theme's photo scrim to a solid tint (no gradient). */
.tp-tour-dayfilter-thumb::before {
   background: rgba(0, 0, 0, .42) !important;
   mask-image: none !important;
   -webkit-mask-image: none !important;
}

/* Hero call-to-action row */
.tp-hero-5-btn-wrap {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 14px;
}
.tp-hero-5-btn-wrap .pmi-btn-outline { margin-left: 0 !important; }

/* Testimonials */
.pmi-testimonial {
   background: var(--pmi-surface);
   border: 1px solid var(--pmi-border);
   border-radius: 14px;
   padding: 32px 34px;
}
.pmi-testimonial p {
   color: var(--pmi-ink-2);
   font-size: 17px;
   line-height: 1.75;
   margin-bottom: 26px;
}
.pmi-testimonial-stars { display: flex; gap: 4px; font-size: 14px; }
.pmi-testimonial-stars i { color: var(--pmi-border); }
.pmi-testimonial-stars i.is-on { color: var(--pmi-accent); }

.pmi-testimonial-author {
   display: flex;
   align-items: center;
   gap: 14px;
}
.pmi-testimonial-author h2 {
   font-size: 18px;
   font-weight: 700;
   color: var(--pmi-dark);
   margin: 0 0 2px;
}
.pmi-testimonial-author span { color: var(--pmi-muted); font-size: 14px; }
.pmi-testimonial-avatar {
   flex: 0 0 auto;
   width: 48px;
   height: 48px;
   border-radius: 50%;
   background: var(--pmi-soft);
   color: var(--pmi-green-dark);
   font-weight: 700;
   font-size: 19px;
   display: flex;
   align-items: center;
   justify-content: center;
}
@media (max-width: 575px) {
   .pmi-testimonial { padding: 26px 22px; }
   .pmi-testimonial p { font-size: 16px; }
}

/* =====================================================================
   Blog, careers and contact additions.

   Every colour below is a theme token, so an admin colour change reaches
   these pages too. Flat surfaces only — no gradients by design.
   ===================================================================== */

/* --- shared utilities ------------------------------------------------ */
.pmi-sr-only {
   position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
   overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* Honeypot: off-screen rather than display:none, which some bots detect. */
.pmi-hp {
   position: absolute !important; left: -9999px !important;
   width: 1px; height: 1px; overflow: hidden;
}
.pmi-hero-intro {
   max-width: 60ch; margin: 14px auto 0;
   color: rgba(255,255,255,.85); font-size: 16px; line-height: 1.7;
}
.pmi-section-head { margin-bottom: 26px; }
.pmi-blog-intro { max-width: 62ch; margin-bottom: 34px; }
.pmi-muted-text { color: var(--pmi-muted); font-size: 14.5px; }

.pmi-empty {
   text-align: center; padding: 56px 24px;
   border: 1px solid var(--pmi-border); border-radius: 14px;
   background: var(--pmi-surface);
}
.pmi-empty i { font-size: 34px; color: var(--pmi-brand-soft); margin-bottom: 14px; display: block; }
.pmi-empty h2, .pmi-empty h3 { font-size: 21px; font-weight: 700; color: var(--pmi-ink); margin-bottom: 8px; }
.pmi-empty p { color: var(--pmi-muted); max-width: 46ch; margin: 0 auto 20px; }

.pmi-chip {
   display: inline-flex; align-items: center; gap: 6px;
   padding: 5px 11px; border-radius: 100px;
   background: var(--pmi-surface-alt); border: 1px solid var(--pmi-border);
   font-size: 12.5px; font-weight: 600; color: var(--pmi-ink-2);
}
.pmi-chip i { font-size: 11px; color: var(--pmi-brand); }
.pmi-post-chip {
   display: inline-block; padding: 4px 11px; border-radius: 100px;
   background: var(--pmi-brand-tint); color: var(--pmi-brand-dark);
   font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
   text-transform: uppercase; margin-bottom: 10px;
}

.pmi-alert-error {
   background: #fdecea; border-color: #f5c6c0; color: #8a2c20;
}
.pmi-alert-error p { margin: 0; }
.pmi-alert-error ul { margin: 0; padding-left: 18px; }

/* --- blog index ------------------------------------------------------ */
.pmi-post-grid {
   display: grid; gap: 26px;
   grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}
.pmi-post-card {
   display: flex; flex-direction: column;
   background: var(--pmi-surface);
   border: 1px solid var(--pmi-border); border-radius: 14px;
   overflow: hidden;
   transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.pmi-post-card:hover {
   transform: translateY(-3px);
   border-color: var(--pmi-brand-soft);
   box-shadow: 0 10px 28px rgba(0,0,0,.07);
}
.pmi-post-card-media {
   display: block; aspect-ratio: 16 / 10; overflow: hidden;
   background: var(--pmi-surface-alt);
}
.pmi-post-card-media img {
   width: 100%; height: 100%; object-fit: cover; display: block;
   transition: transform .4s ease;
}
.pmi-post-card:hover .pmi-post-card-media img { transform: scale(1.04); }
.pmi-post-card-placeholder {
   display: flex; align-items: center; justify-content: center;
   width: 100%; height: 100%; font-size: 30px; color: var(--pmi-brand-soft);
}
.pmi-post-card-body { padding: 20px 20px 22px; display: flex; flex-direction: column; flex: 1 1 auto; }
.pmi-post-card-title { font-size: 18.5px; line-height: 1.4; font-weight: 700; margin: 0 0 10px; }
.pmi-post-card-title a { color: var(--pmi-ink); }
.pmi-post-card-title a:hover { color: var(--pmi-brand-dark); }
.pmi-post-card-text {
   color: var(--pmi-muted); font-size: 14.5px; line-height: 1.65;
   margin: 0 0 16px; flex: 1 1 auto;
}
.pmi-post-meta {
   display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
   font-size: 13px; color: var(--pmi-muted-2); margin-top: auto;
}
.pmi-post-meta-dot { opacity: .7; }

/* Featured lead post */
.pmi-post-featured {
   display: grid; grid-template-columns: 1.15fr 1fr; gap: 0;
   background: var(--pmi-surface);
   border: 1px solid var(--pmi-border); border-radius: 16px;
   overflow: hidden; margin-bottom: 34px;
}
.pmi-post-featured-media { display: block; min-height: 320px; background: var(--pmi-surface-alt); }
.pmi-post-featured-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pmi-post-featured-body { padding: 38px 36px; display: flex; flex-direction: column; justify-content: center; }
.pmi-post-featured-title { font-size: 30px; line-height: 1.25; font-weight: 700; margin: 6px 0 12px; }
.pmi-post-featured-title a { color: var(--pmi-ink); }
.pmi-post-featured-title a:hover { color: var(--pmi-brand-dark); }
.pmi-post-featured-text { color: var(--pmi-muted); font-size: 16px; line-height: 1.7; margin-bottom: 16px; }
.pmi-post-featured .pmi-post-meta { margin-bottom: 22px; }
.pmi-post-featured .pmi-btn { align-self: flex-start; }

@media (max-width: 991px) {
   .pmi-post-featured { grid-template-columns: 1fr; }
   .pmi-post-featured-media { min-height: 220px; aspect-ratio: 16/9; }
   .pmi-post-featured-body { padding: 26px 22px; }
   .pmi-post-featured-title { font-size: 24px; }
}

/* Pagination */
.pmi-pagination {
   display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
   margin-top: 42px;
}
.pmi-page-link {
   display: inline-flex; align-items: center; gap: 7px;
   min-width: 40px; height: 40px; padding: 0 14px; justify-content: center;
   border: 1px solid var(--pmi-border); border-radius: 8px;
   background: var(--pmi-surface); color: var(--pmi-ink-2);
   font-size: 14px; font-weight: 600;
   transition: all .2s ease;
}
.pmi-page-link:hover { border-color: var(--pmi-brand); color: var(--pmi-brand-dark); }
.pmi-page-link.is-active {
   background: var(--pmi-brand); border-color: var(--pmi-brand); color: var(--pmi-surface);
}

/* --- post detail ----------------------------------------------------- */
.pmi-post-head { padding: 54px 0 26px; text-align: center; }
.pmi-post-crumb { font-size: 13.5px; color: var(--pmi-muted); margin-bottom: 16px; }
.pmi-post-crumb a { color: var(--pmi-muted); }
.pmi-post-crumb a:hover { color: var(--pmi-brand-dark); }
.pmi-post-crumb span { margin: 0 8px; opacity: .5; }
.pmi-post-title {
   font-size: 44px; line-height: 1.15; font-weight: 700; color: var(--pmi-ink);
   max-width: 20ch; margin: 6px auto 16px;
}
.pmi-post-standfirst {
   font-size: 19px; line-height: 1.65; color: var(--pmi-muted);
   max-width: 60ch; margin: 0 auto 22px;
}
.pmi-post-byline {
   display: flex; align-items: center; justify-content: center;
   gap: 18px; flex-wrap: wrap;
   font-size: 14px; color: var(--pmi-muted);
}
.pmi-post-author { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; color: var(--pmi-ink-2); }
.pmi-post-avatar {
   display: inline-flex; align-items: center; justify-content: center;
   width: 32px; height: 32px; border-radius: 50%;
   background: var(--pmi-brand); color: var(--pmi-surface);
   font-size: 14px; font-weight: 700;
}

.pmi-post-cover { margin: 10px 0 6px; }
.pmi-post-cover img {
   width: 100%; max-height: 460px; object-fit: cover;
   border-radius: 16px; display: block;
}

/* Share rail + measure. The 68ch body measure is the main readability lever. */
.pmi-post-layout {
   display: grid; grid-template-columns: 64px minmax(0, 68ch); gap: 34px;
   justify-content: center; padding: 34px 0 10px;
}
.pmi-post-share {
   display: flex; flex-direction: column; align-items: center; gap: 10px;
   position: sticky; top: 110px; align-self: start;
}
.pmi-post-share-label {
   font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
   font-weight: 700; color: var(--pmi-muted-2); margin-bottom: 2px;
}
.pmi-share-btn {
   display: inline-flex; align-items: center; justify-content: center;
   width: 40px; height: 40px; border-radius: 50%;
   border: 1px solid var(--pmi-border); background: var(--pmi-surface);
   color: var(--pmi-ink-2); font-size: 15px; cursor: pointer;
   transition: all .2s ease;
}
.pmi-share-btn:hover {
   background: var(--pmi-brand); border-color: var(--pmi-brand); color: var(--pmi-surface);
}
.pmi-share-btn.is-copied {
   background: var(--pmi-brand-dark); border-color: var(--pmi-brand-dark); color: var(--pmi-surface);
}

/* Article body */
.pmi-post-body { font-size: 17.5px; line-height: 1.8; color: var(--pmi-ink-2); }
.pmi-post-body > p { margin: 0 0 22px; }
/* Drop cap on the opening paragraph. pmi_first_char_upper() has already
   uppercased the letter server-side. */
.pmi-post-body > p:first-of-type::first-letter {
   float: left; font-size: 62px; line-height: .84;
   font-weight: 700; color: var(--pmi-brand);
   margin: 6px 12px 0 0;
}
.pmi-post-body h2 {
   font-size: 27px; line-height: 1.3; font-weight: 700;
   color: var(--pmi-ink); margin: 38px 0 14px;
}
.pmi-post-body h3 {
   font-size: 21px; line-height: 1.35; font-weight: 700;
   color: var(--pmi-ink); margin: 30px 0 12px;
}
.pmi-post-body h4 { font-size: 18px; font-weight: 700; color: var(--pmi-ink); margin: 24px 0 10px; }
.pmi-post-body ul, .pmi-post-body ol { margin: 0 0 22px; padding-left: 22px; }
.pmi-post-body li { margin-bottom: 9px; }
.pmi-post-body a { color: var(--pmi-brand-dark); text-decoration: underline; text-underline-offset: 3px; }
.pmi-post-body a:hover { color: var(--pmi-brand); }
.pmi-post-body strong { color: var(--pmi-ink); font-weight: 700; }
.pmi-post-body blockquote {
   margin: 28px 0; padding: 4px 0 4px 22px;
   border-left: 3px solid var(--pmi-brand);
   font-size: 19px; line-height: 1.65; color: var(--pmi-ink); font-style: italic;
}
.pmi-post-body img { max-width: 100%; height: auto; border-radius: 12px; }
.pmi-post-body pre {
   background: var(--pmi-surface-alt); border: 1px solid var(--pmi-border);
   border-radius: 10px; padding: 16px; overflow-x: auto; font-size: 14px;
}
.pmi-post-body hr { border: 0; border-top: 1px solid var(--pmi-border); margin: 32px 0; }
.pmi-post-figure { margin: 30px 0; }
.pmi-post-figure img { width: 100%; border-radius: 12px; display: block; }
.pmi-post-figure figcaption {
   margin-top: 10px; font-size: 13.5px; color: var(--pmi-muted-2); text-align: center;
}

.pmi-post-cta {
   display: flex; align-items: center; justify-content: space-between;
   gap: 26px; flex-wrap: wrap;
   max-width: 68ch; margin: 20px auto 0; padding: 28px 30px;
   background: var(--pmi-surface-alt);
   border: 1px solid var(--pmi-border); border-radius: 14px;
}
.pmi-post-cta h2 { font-size: 21px; font-weight: 700; color: var(--pmi-ink); margin: 0 0 6px; }
.pmi-post-cta p { color: var(--pmi-muted); margin: 0; max-width: 52ch; font-size: 15px; }
.pmi-related { margin-top: 56px; }
.pmi-related .pmi-title-sm { margin-bottom: 24px; }

@media (max-width: 991px) {
   .pmi-post-title { font-size: 32px; max-width: none; }
   .pmi-post-standfirst { font-size: 17px; }
   .pmi-post-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
   .pmi-post-share {
      position: static; flex-direction: row; justify-content: center;
      flex-wrap: wrap; padding-bottom: 8px;
   }
   .pmi-post-share-label { margin: 0 4px 0 0; align-self: center; }
   .pmi-post-body { font-size: 16.5px; }
   .pmi-post-body > p:first-of-type::first-letter { font-size: 50px; }
   .pmi-post-cta { padding: 22px; }
}

/* --- careers --------------------------------------------------------- */
.pmi-value-grid {
   display: grid; gap: 20px;
   grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.pmi-value-card {
   padding: 26px 24px;
   background: var(--pmi-surface);
   border: 1px solid var(--pmi-border); border-radius: 14px;
}
.pmi-value-icon {
   display: inline-flex; align-items: center; justify-content: center;
   width: 46px; height: 46px; border-radius: 11px;
   background: var(--pmi-brand-tint); color: var(--pmi-brand-dark);
   font-size: 19px; margin-bottom: 16px;
}
.pmi-value-card h3 { font-size: 17.5px; font-weight: 700; color: var(--pmi-ink); margin-bottom: 8px; }
.pmi-value-card p { color: var(--pmi-muted); font-size: 14.5px; line-height: 1.65; margin: 0; }

.pmi-job-list { display: flex; flex-direction: column; gap: 16px; }
.pmi-job-row {
   display: flex; align-items: center; justify-content: space-between;
   gap: 26px; flex-wrap: wrap;
   padding: 24px 26px;
   background: var(--pmi-surface);
   border: 1px solid var(--pmi-border); border-radius: 14px;
   transition: border-color .2s ease, box-shadow .2s ease;
}
.pmi-job-row:hover { border-color: var(--pmi-brand-soft); box-shadow: 0 6px 20px rgba(0,0,0,.05); }
.pmi-job-main { flex: 1 1 340px; min-width: 0; }
.pmi-job-title { font-size: 20px; font-weight: 700; margin: 0 0 7px; }
.pmi-job-title a { color: var(--pmi-ink); }
.pmi-job-title a:hover { color: var(--pmi-brand-dark); }
.pmi-job-summary { color: var(--pmi-muted); font-size: 14.5px; line-height: 1.6; margin: 0 0 12px; max-width: 62ch; }
.pmi-job-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.pmi-job-action { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; }
.pmi-job-closes { font-size: 12.5px; color: var(--pmi-muted-2); }

.pmi-job-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 40px; align-items: start; }
.pmi-job-content { min-width: 0; }
.pmi-job-section { margin-bottom: 32px; }
.pmi-job-section .pmi-title-sm { margin-bottom: 14px; }
.pmi-prose { color: var(--pmi-ink-2); font-size: 16px; line-height: 1.75; max-width: 66ch; }

.pmi-tick-list { list-style: none; margin: 0; padding: 0; max-width: 66ch; }
.pmi-tick-list li {
   position: relative; padding-left: 30px; margin-bottom: 11px;
   color: var(--pmi-ink-2); font-size: 15.5px; line-height: 1.65;
}
.pmi-tick-list li::before {
   content: "\2713";
   position: absolute; left: 0; top: 1px;
   display: inline-flex; align-items: center; justify-content: center;
   width: 20px; height: 20px; border-radius: 50%;
   background: var(--pmi-brand-tint); color: var(--pmi-brand-dark);
   font-size: 11px; font-weight: 700;
}

.pmi-job-aside { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 16px; }
.pmi-job-facts, .pmi-job-help {
   padding: 24px 22px;
   background: var(--pmi-surface);
   border: 1px solid var(--pmi-border); border-radius: 14px;
}
.pmi-job-facts h3, .pmi-job-help h3 { font-size: 16.5px; font-weight: 700; color: var(--pmi-ink); margin-bottom: 14px; }
.pmi-job-facts dl { margin: 0 0 18px; }
.pmi-job-facts dl > div {
   display: flex; justify-content: space-between; gap: 14px;
   padding: 9px 0; border-bottom: 1px solid var(--pmi-border);
}
.pmi-job-facts dl > div:last-child { border-bottom: 0; }
.pmi-job-facts dt { color: var(--pmi-muted); font-size: 13.5px; }
.pmi-job-facts dd { margin: 0; color: var(--pmi-ink); font-size: 13.5px; font-weight: 600; text-align: right; }
.pmi-job-help p { color: var(--pmi-muted); font-size: 14px; line-height: 1.6; margin-bottom: 14px; }
.pmi-btn-block { display: block; width: 100%; text-align: center; }

.pmi-apply {
   padding: 30px 28px; margin-top: 8px;
   background: var(--pmi-surface-alt);
   border: 1px solid var(--pmi-border); border-radius: 14px;
}
.pmi-apply .pmi-title-sm { margin-bottom: 6px; }
.pmi-apply form { margin-top: 20px; }
.pmi-file { padding: 10px 12px; background: var(--pmi-surface); }
.pmi-form-hint { display: block; margin-top: 6px; font-size: 12.5px; color: var(--pmi-muted-2); }

@media (max-width: 991px) {
   .pmi-job-layout { grid-template-columns: 1fr; gap: 28px; }
   .pmi-job-aside { position: static; }
   .pmi-job-row { flex-direction: column; align-items: flex-start; }
   .pmi-job-action { align-items: flex-start; width: 100%; }
   .pmi-apply { padding: 22px 18px; }
}

/* --- contact page blocks --------------------------------------------- */
.pmi-office-grid {
   display: grid; gap: 20px;
   grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.pmi-office-card {
   padding: 24px 22px;
   background: var(--pmi-surface);
   border: 1px solid var(--pmi-border); border-radius: 14px;
}
.pmi-office-icon {
   display: inline-flex; align-items: center; justify-content: center;
   width: 42px; height: 42px; border-radius: 11px;
   background: var(--pmi-brand-tint); color: var(--pmi-brand-dark);
   font-size: 17px; margin-bottom: 14px;
}
.pmi-office-card h3 { font-size: 17px; font-weight: 700; color: var(--pmi-ink); margin-bottom: 8px; }
.pmi-office-card p { color: var(--pmi-muted); font-size: 14.5px; line-height: 1.7; margin: 0; }

.pmi-faq-list { display: flex; flex-direction: column; gap: 12px; }
.pmi-faq-narrow { max-width: 800px; margin: 0 auto; }
.pmi-faq-item {
   background: var(--pmi-surface);
   border: 1px solid var(--pmi-border); border-radius: 12px; overflow: hidden;
}
.pmi-faq-q {
   display: flex; align-items: center; justify-content: space-between; gap: 16px;
   width: 100%; padding: 18px 22px; text-align: left;
   background: none; border: 0; cursor: pointer;
   font-size: 16px; font-weight: 600; color: var(--pmi-ink);
}
.pmi-faq-q i { flex: 0 0 auto; font-size: 13px; color: var(--pmi-brand); transition: transform .25s ease; }
.pmi-faq-item.is-open .pmi-faq-q i { transform: rotate(45deg); }
.pmi-faq-a { display: none; padding: 0 22px 20px; }
.pmi-faq-item.is-open .pmi-faq-a { display: block; }
.pmi-faq-a p { color: var(--pmi-muted); font-size: 15px; line-height: 1.75; margin: 0; }

/* ---------------------------------------------------------------------
   Navbar fit.

   The vendor theme spaces top-level items 35px apart, which was fine for
   the original five links. With Blog and Careers added, seven items plus
   the CTA overflowed the row and pushed "Get a Free Quote" onto a second
   line. Tighten the gaps and stop the right-hand column shrinking so the
   whole bar stays on one line.
   --------------------------------------------------------------------- */
@media (min-width: 1200px) {
   .tp-header-area .tp-main-menu nav > ul > li:not(:last-child) {
      margin-right: 26px;
   }
   /* The CTA must never wrap or be squeezed by the menu beside it. */
   .tp-header-area .tp-header-option { flex-wrap: nowrap; }
   .tp-header-area .tp-header-btn { flex: 0 0 auto; }
   .tp-header-area .tp-header-btn .tp-btn-inner { white-space: nowrap; }
   .tp-header-area .tp-header-left { flex-wrap: nowrap; min-width: 0; }
   .tp-header-area .tp-main-menu { min-width: 0; }
}

/* The dropdown caret is drawn at right:-15px, i.e. OUTSIDE the link box, so
   a plain margin leaves it overlapping the next item. Give the item with a
   dropdown enough extra room for the caret to sit in. */
@media (min-width: 1200px) {
   .tp-header-area .tp-main-menu nav > ul > li.has-dropdown:not(:last-child) {
      margin-right: 44px;
   }
}

/* Between 1200 and 1400px the row is tightest — trim a little further. */
@media (min-width: 1200px) and (max-width: 1399px) {
   .tp-header-area .tp-main-menu nav > ul > li:not(:last-child) {
      margin-right: 22px;
   }
   .tp-header-area .tp-main-menu nav > ul > li.has-dropdown:not(:last-child) {
      margin-right: 40px;
   }
   .tp-header-area .tp-header-logo.mr-40 { margin-right: 22px !important; }
   .tp-header-area .tp-header-btn .tp-btn-inner {
      padding-left: 18px; padding-right: 18px; font-size: 14px;
   }
}

/* ---------------------------------------------------------------------
   Client logo strip.

   The vendor theme greys the logos out with mix-blend-mode. Keep that as
   the resting state but bring the real colours back on hover, and make
   every logo occupy the same box so mismatched uploads still line up.
   --------------------------------------------------------------------- */
.tp-brands-5 .tp-brands-item img,
.tp-brands-5 .tp-brands-item .tp-brands-static img {
   max-height: 54px;
   width: auto;
   object-fit: contain;
   transition: opacity .3s ease, filter .3s ease;
}
.tp-brands-5 .tp-brands-item:hover img {
   mix-blend-mode: normal;
   opacity: 1;
}
/* A logo without a website link must not look clickable. */
.tp-brands-5 .tp-brands-item .tp-brands-static {
   display: inline-flex; align-items: center; justify-content: center;
   cursor: default;
}

/* =====================================================================
   Team page
   ===================================================================== */
.pmi-team-card {
   display: flex; flex-direction: column;
   background: var(--pmi-surface);
   border: 1px solid var(--pmi-border);
   border-radius: 14px; overflow: hidden;
   transition: box-shadow .25s ease, transform .25s ease;
}
.pmi-team-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 14px 32px rgba(15,42,28,.10);
}
/* Photos are admin-uploaded at whatever size — a fixed ratio plus cover
   keeps every card the same height without distorting faces. */
.pmi-team-photo { aspect-ratio: 4 / 5; background: var(--pmi-surface-alt); overflow: hidden; }
.pmi-team-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pmi-team-body { padding: 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.pmi-team-name { font-size: 19px; font-weight: 700; color: var(--pmi-ink); margin: 0; }
.pmi-team-role { display: block; font-size: 14px; font-weight: 600; color: var(--pmi-brand); }
/* Degree sits on its own line under the role, quieter than it. */
.pmi-team-qual {
   display: block; margin-top: 3px;
   font-size: 13px; font-weight: 500; line-height: 1.45;
   color: var(--pmi-muted);
}
.pmi-team-bio { font-size: 14.5px; color: var(--pmi-muted); margin: 6px 0 0; }

.pmi-team-contact { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 5px; }
.pmi-team-contact a {
   font-size: 14px; color: var(--pmi-muted); display: inline-flex;
   align-items: center; gap: 8px; word-break: break-word;
}
.pmi-team-contact a:hover { color: var(--pmi-brand); }
.pmi-team-contact i { color: var(--pmi-brand); width: 15px; text-align: center; }

/* Pushed to the bottom so the icon row lines up across cards of
   different bio lengths. */
.pmi-team-social { display: flex; gap: 8px; margin-top: auto; padding-top: 14px; }
.pmi-team-social a {
   width: 32px; height: 32px; border-radius: 50%;
   background: var(--pmi-brand-tint); color: var(--pmi-brand);
   display: inline-flex; align-items: center; justify-content: center; font-size: 14px;
   transition: background .2s ease, color .2s ease;
}
.pmi-team-social a:hover { background: var(--pmi-brand); color: var(--pmi-surface); }

@media (max-width: 575.98px) {
   .pmi-team-body { padding: 16px; }
}

/* ==========================================================================
   Footer — colours driven by Site Settings › Theme.

   Three stacked bands, each with its own background so they read as
   separate zones rather than one long block:
     .pmi-foot-cta   accent strip with the headline call to action
     .tp-footer-area the columns
     .pmi-foot-bar   the "all rights reserved" bar

   Layout is CSS grid with auto-fitting columns rather than Bootstrap's
   row/col classes. The column count varies at runtime — "Areas We Serve"
   only appears once cities are set — so a fixed 12-column split would
   leave a gap whenever a column is absent.

   The vendor theme hard-codes near-black on footer links and contact text
   (main.css: .tp-footer-widget-menu ul li a, .tp-footer-contact a/span).
   The classes here are our own, so those rules no longer apply — but
   .tp-footer-area is kept on the wrapper for the vendor's own background
   and spacing resets, and the overrides below stay for anything that
   still matches.
   ========================================================================== */

/* --- CTA strip -------------------------------------------------------- */
.pmi-foot-cta {
   background: var(--pmi-footer-cta-bg, var(--pmi-accent));
   color: var(--pmi-footer-cta-fg, #0f2a1c);
   padding: 30px 0;
}
.pmi-foot-cta-inner {
   display: flex; flex-wrap: wrap; align-items: center;
   justify-content: space-between; gap: 20px 30px;
}
.pmi-foot-cta-copy { flex: 1 1 340px; min-width: 0; }
.pmi-foot-cta-title {
   margin: 0 0 6px; line-height: 1.25;
   font-size: 30px; font-weight: 700;
   color: var(--pmi-footer-cta-fg, #0f2a1c);
}
.pmi-foot-cta-text {
   margin: 0; line-height: 1.5; font-size: 16px;
   color: var(--pmi-footer-cta-muted, rgba(0,0,0,.7));
}
.pmi-foot-cta-actions {
   display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
   flex: 0 1 auto;
}
.pmi-foot-cta-btn,
.pmi-foot-cta-phone {
   display: inline-flex; align-items: center; gap: 10px;
   padding: 14px 24px; border-radius: 6px;
   font-size: 15px; font-weight: 700; letter-spacing: .02em;
   text-transform: uppercase; white-space: nowrap;
   transition: transform .2s ease, opacity .2s ease, background-color .2s ease, color .2s ease;
}
.pmi-foot-cta-btn {
   background: var(--pmi-footer-cta-btn-bg, var(--pmi-ink));
   color: var(--pmi-footer-cta-btn-fg, #fff);
}
.pmi-foot-cta-btn:hover,
.pmi-foot-cta-btn:focus-visible {
   color: var(--pmi-footer-cta-btn-fg, #fff);
   transform: translateY(-2px); opacity: .92;
}
/* The phone sits on the strip itself, so it inverts: strip colour on a
   plain ground, which keeps it secondary to the button beside it. */
.pmi-foot-cta-phone {
   background: #fff;
   color: var(--pmi-footer-cta-bg, var(--pmi-accent));
   text-transform: none; font-size: 17px;
}
.pmi-foot-cta-phone:hover,
.pmi-foot-cta-phone:focus-visible {
   color: var(--pmi-footer-cta-bg, var(--pmi-accent));
   transform: translateY(-2px);
}
.pmi-foot-cta-btn i, .pmi-foot-cta-phone i { font-size: 14px; }

/* --- Footer body ------------------------------------------------------ */
.tp-footer-area {
   background: var(--pmi-footer-bg, var(--pmi-ink));
   color: var(--pmi-footer-fg, #fff);
}

/* Flex rather than grid: the column count varies at runtime — "Areas We
   Serve" only appears once cities are set — and `repeat(auto-fit, …)` cannot
   be mixed with a wider leading track for the About column. Flex gives the
   About column a larger basis and lets the rest share what is left, with no
   empty cell when a column is absent. */
.pmi-foot-grid {
   display: flex; flex-wrap: wrap;
   gap: 34px 30px;
   padding: 60px 0 46px;
   align-items: flex-start;
}
.pmi-foot-col { flex: 1 1 160px; min-width: 0; }
/* The About block leads the row and takes roughly twice a link column. */
.pmi-foot-col-about { flex: 1 1 300px; max-width: 380px; }

/* Column headings with the short accent rule underneath. */
.tp-footer-area .pmi-foot-title {
   position: relative;
   margin: 0 0 22px; padding-bottom: 10px;
   font-size: 17px; font-weight: 700; line-height: 1.3;
   letter-spacing: .04em; text-transform: uppercase;
   color: var(--pmi-footer-heading, var(--pmi-footer-fg, #fff));
}
.tp-footer-area .pmi-foot-title::after {
   content: ""; position: absolute; left: 0; bottom: 0;
   width: 42px; height: 3px; border-radius: 2px;
   background: var(--pmi-footer-heading-rule, var(--pmi-accent));
}

/* About column. */
.tp-footer-area .tp-footer-logo { margin: 0 0 16px; line-height: 1; }
.tp-footer-area .tp-footer-logo a { display: inline-block; line-height: 0; }
.tp-footer-area .tp-footer-logo img { display: block; margin: 0; }
.tp-footer-area .tp-footer-dec {
   margin: 0 0 14px; line-height: 1.7; font-size: 15px;
   color: var(--pmi-footer-muted, rgba(255,255,255,.75));
}
.tp-footer-area .pmi-foot-note {
   margin: 0 0 18px; padding-top: 14px;
   border-top: 1px solid var(--pmi-footer-border, rgba(255,255,255,.15));
   font-size: 13px; font-weight: 700; line-height: 1.5;
   letter-spacing: .03em; text-transform: uppercase;
   color: var(--pmi-footer-heading-rule, var(--pmi-accent));
}

/* Link lists. A chevron marks each row, matching the reference design. */
.pmi-foot-links { list-style: none; margin: 0; padding: 0; }
.pmi-foot-links li { margin-bottom: 10px; line-height: 1.5; }
.pmi-foot-links li:last-child { margin-bottom: 0; }
.tp-footer-area .pmi-foot-links a,
.tp-footer-area .pmi-foot-links > li > span {
   position: relative; display: inline-block; padding-left: 16px;
   font-size: 15px; line-height: 1.5;
   color: var(--pmi-footer-muted, rgba(255,255,255,.75));
   transition: color .2s ease, transform .2s ease;
}
.tp-footer-area .pmi-foot-links a::before,
.tp-footer-area .pmi-foot-links > li > span::before {
   content: "\203A";           /* › — no icon font needed for a chevron. */
   position: absolute; left: 0; top: -1px;
   font-size: 16px; line-height: 1.5;
   color: var(--pmi-footer-heading-rule, var(--pmi-accent));
}
.tp-footer-area .pmi-foot-links a:hover,
.tp-footer-area .pmi-foot-links a:focus-visible {
   color: var(--pmi-footer-link-hover, var(--pmi-brand));
   transform: translateX(3px);
}

/* Contact column: icon in its own gutter, label above the value. */
.pmi-foot-contact { list-style: none; margin: 0; padding: 0; }
.pmi-foot-contact li {
   display: flex; align-items: flex-start; gap: 12px;
   margin-bottom: 16px; line-height: 1.5;
}
.pmi-foot-contact li:last-child { margin-bottom: 0; }
.pmi-foot-contact li > i {
   flex: 0 0 auto; width: 18px; margin-top: 3px;
   text-align: center; font-size: 15px;
   color: var(--pmi-footer-heading-rule, var(--pmi-accent));
}
.pmi-foot-contact li > span {
   flex: 1 1 auto; min-width: 0;
   display: flex; flex-direction: column; gap: 2px;
}
.tp-footer-area .pmi-foot-contact small {
   font-size: 12px; letter-spacing: .05em; text-transform: uppercase;
   color: var(--pmi-footer-muted, rgba(255,255,255,.7));
}
.tp-footer-area .pmi-foot-contact a,
.tp-footer-area .pmi-foot-contact .location,
.tp-footer-area .pmi-foot-contact .support {
   font-size: 15px; line-height: 1.55;
   /* An email or long street name must wrap inside its column. overflow-wrap
      breaks only when a word genuinely cannot fit, which keeps ordinary text
      breaking at spaces; `word-break: break-word` is non-standard and would
      not apply consistently. */
   overflow-wrap: anywhere;
   color: var(--pmi-footer-fg, #fff);
   transition: color .2s ease;
}
.tp-footer-area .pmi-foot-contact a { font-weight: 600; }
.tp-footer-area .pmi-foot-contact a:hover,
.tp-footer-area .pmi-foot-contact a:focus-visible {
   color: var(--pmi-footer-link-hover, var(--pmi-brand));
}

/* Social icons sit on a tinted chip so they read on any footer colour. */
.tp-footer-area .tp-footer-social {
   display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px;
}
.tp-footer-area .tp-footer-social a {
   display: inline-flex; align-items: center; justify-content: center;
   width: 38px; height: 38px; border-radius: 8px;
   border: 1px solid var(--pmi-footer-border, rgba(255,255,255,.18));
   color: var(--pmi-footer-fg, #fff);
   transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.tp-footer-area .tp-footer-social a:hover,
.tp-footer-area .tp-footer-social a:focus-visible {
   background: var(--pmi-footer-link-hover, var(--pmi-brand));
   border-color: var(--pmi-footer-link-hover, var(--pmi-brand));
   color: #fff;
}

/* --- Bottom bar ("© … All rights reserved") --------------------------- */
.pmi-foot-bar {
   background: var(--pmi-footer-bar-bg, rgba(0,0,0,.25));
   border-top: 1px solid var(--pmi-footer-bar-border, rgba(255,255,255,.1));
   padding: 18px 0;
}
.pmi-foot-bar-inner {
   display: flex; flex-wrap: wrap; align-items: center;
   justify-content: space-between; gap: 10px 24px;
}
.tp-footer-area .pmi-foot-bar-copy {
   margin: 0; font-size: 14px; line-height: 1.6;
   color: var(--pmi-footer-bar-muted, rgba(255,255,255,.7));
}
.tp-footer-area .pmi-foot-bar-copy a {
   color: var(--pmi-footer-bar-fg, #fff); font-weight: 600;
}
.tp-footer-area .pmi-foot-bar-copy a:hover,
.tp-footer-area .pmi-foot-bar-copy a:focus-visible {
   color: var(--pmi-footer-bar-link-hover, var(--pmi-brand));
}
.pmi-foot-bar-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.tp-footer-area .pmi-foot-bar-links a {
   font-size: 14px; line-height: 1.6;
   color: var(--pmi-footer-bar-muted, rgba(255,255,255,.7));
   transition: color .2s ease;
}
.tp-footer-area .pmi-foot-bar-links a:hover,
.tp-footer-area .pmi-foot-bar-links a:focus-visible {
   color: var(--pmi-footer-bar-link-hover, var(--pmi-brand));
}

/* Generic fallbacks for any vendor markup still inside the footer. */
.tp-footer-area h2, .tp-footer-area h3, .tp-footer-area h4 {
   color: var(--pmi-footer-fg, #fff);
}
.tp-footer-area a { transition: color .2s ease; }

/* --- Footer responsive ------------------------------------------------ */

/* Tablet: the About column stops leading the row and spans the full width
   above the link columns, which then wrap on their own. */
@media (max-width: 991.98px) {
   .pmi-foot-grid { gap: 30px 26px; padding: 50px 0 40px; }
   /* 100% basis forces a wrap, so the link columns start a fresh row. */
   .pmi-foot-col-about { flex: 1 1 100%; max-width: 560px; }
   .pmi-foot-cta-title { font-size: 26px; }
}

@media (max-width: 767.98px) {
   .pmi-foot-cta { padding: 26px 0; }
   .pmi-foot-cta-inner { flex-direction: column; align-items: flex-start; }
   /* The copy keeps a 340px flex-basis from the desktop rule; in a column
      that basis becomes a *height*, opening a gap above the buttons. */
   .pmi-foot-cta-copy { flex: 0 0 auto; width: 100%; }
   .pmi-foot-cta-title { font-size: 23px; }
   .pmi-foot-cta-text { font-size: 15px; }
   /* Buttons go full width so both are equally easy to hit on a phone. */
   .pmi-foot-cta-actions { width: 100%; }
   .pmi-foot-cta-btn, .pmi-foot-cta-phone {
      flex: 1 1 100%; justify-content: center; padding: 14px 18px;
   }

   /* Two columns on every phone width. Only the About block spans, because
      it carries the logo and the description paragraph; the link lists and
      the contact block all pair up. calc() accounts for the column gap so
      the two tracks fit exactly. */
   .pmi-foot-grid { gap: 26px 20px; padding: 34px 0 26px; }
   .pmi-foot-col:not(.pmi-foot-col-about):not(.pmi-foot-col-contact) {
      flex: 0 1 calc(50% - 10px); min-width: 0;
   }
   /* About and Contact span the row: About carries the logo and paragraph,
      and Contact splits into its own two columns below, which needs the
      full width to breathe rather than the ~72px a half track would give. */
   .pmi-foot-col-about,
   .pmi-foot-col-contact { flex: 1 1 100%; max-width: none; }
   .tp-footer-area .pmi-foot-title { font-size: 15px; margin-bottom: 14px; }

   /* Logo keeps the height configured in Site Settings and is capped by
      width only, so the footer mark never renders smaller than the header's.
      The view prints the height inline, so width must lead here. */
   .tp-footer-area .tp-footer-logo,
   .tp-footer-area .tp-footer-logo a { display: block; width: 100%; }
   .tp-footer-area .tp-footer-logo .pmi-logo {
      width: auto; max-width: 100%;
      max-height: 100px;
      object-fit: contain; object-position: left center;
   }

   /* Contact rows pair up too, so the block reads as two columns like the
      link lists above it rather than one long stack. */
   .pmi-foot-contact {
      display: flex; flex-wrap: wrap; gap: 16px 20px;
   }
   .pmi-foot-contact li {
      flex: 0 1 calc(50% - 10px); min-width: 0; margin-bottom: 0;
   }

   .pmi-foot-bar-inner { justify-content: center; text-align: center; }
   .pmi-foot-bar-links { justify-content: center; }
}

@media (max-width: 575.98px) {
   .pmi-foot-cta-title { font-size: 21px; }
   .pmi-foot-grid { gap: 24px 16px; padding: 30px 0 24px; }
   .tp-footer-area .pmi-foot-links a,
   .tp-footer-area .pmi-foot-links > li > span { font-size: 14px; }
   .pmi-foot-links li { margin-bottom: 9px; }
   .tp-footer-area .tp-footer-social a { width: 34px; height: 34px; }
   .tp-footer-area .pmi-foot-bar-copy,
   .tp-footer-area .pmi-foot-bar-links a { font-size: 13px; }
}

@media (max-width: 439.98px) {
   /* Still two columns — the narrow tracks are why the type steps down
      here rather than the layout collapsing to a single column. The About
      block is excluded so it keeps spanning the full row; without :not()
      this rule would win on equal specificity and halve it. */
   .pmi-foot-grid { gap: 22px 14px; }
   .pmi-foot-col:not(.pmi-foot-col-about):not(.pmi-foot-col-contact) {
      flex: 0 1 calc(50% - 7px);
   }
   .tp-footer-area .pmi-foot-title { font-size: 14px; letter-spacing: .03em; }
   .tp-footer-area .pmi-foot-links a,
   .tp-footer-area .pmi-foot-links > li > span { font-size: 13.5px; padding-left: 13px; }
   .tp-footer-area .pmi-foot-contact a,
   .tp-footer-area .pmi-foot-contact .location,
   .tp-footer-area .pmi-foot-contact .support { font-size: 13.5px; }
   .pmi-foot-contact { gap: 14px; }
   .pmi-foot-contact li { gap: 8px; flex-basis: calc(50% - 7px); }
   /* An email needs ~146px and the column is ~131px here, so it wraps. Step
      the address down slightly so it stays on one line instead of splitting
      the domain across two ("…pestmgtindia.co / m"). */
   .tp-footer-area .pmi-foot-contact a[href^="mailto"] { font-size: 12.5px; }
}

/* The narrowest phones leave ~131px per contact column, a few px short of a
   typical address; one more step keeps it on a single line. */
@media (max-width: 374.98px) {
   .tp-footer-area .pmi-foot-contact a[href^="mailto"] { font-size: 11.5px; }
}

/* Below ~340px the contact pairs stop being worth it: an email cannot fit a
   ~120px column at a readable size, so those rows go full width. The link
   lists above still pair — they are short enough. */
@media (max-width: 339.98px) {
   .pmi-foot-contact li { flex-basis: 100%; }
   .tp-footer-area .pmi-foot-contact a[href^="mailto"] { font-size: 13.5px; }
   .pmi-foot-cta-btn, .pmi-foot-cta-phone { font-size: 14px; }
}

/* The header logo shares a col-6 with the hamburger, so "full width"
   means filling that column — capped in height so the sticky navbar
   does not grow tall. */
@media (max-width: 767px) {
   /* main.css gives .tp-header-lg-ptb 13px of padding on mobile, around a
      logo that is already 64px tall. Halving it reclaims dead space above
      the fold without crowding the hamburger. */
   .tp-header-area.tp-header-lg-ptb { padding: 6px 0 !important; }
   .tp-header-logo { margin-right: 0 !important; width: 100%; }
   .tp-header-logo a { display: block; width: 100%; }
   .tp-header-logo .pmi-logo {
      width: 100%; max-width: 100%;
      height: auto !important;
      max-height: 72px;
      object-fit: contain; object-position: left center;
   }
}
@media (max-width: 575px) {
   /* Slightly smaller than the 767px cap, but still well above the old 58px. */
   .tp-header-logo .pmi-logo { max-height: 64px; }
}

/* --- Team: category groups + compact round avatars --------------------- */
.pmi-team-group { margin-bottom: 54px; }
.pmi-team-group:last-child { margin-bottom: 0; }
.pmi-team-group-title {
   font-size: 22px; font-weight: 700; color: var(--pmi-ink);
   text-align: center; margin: 0 0 26px; padding-bottom: 12px; position: relative;
}
/* Short brand underline centred beneath the group name. */
.pmi-team-group-title::after {
   content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
   width: 54px; height: 3px; border-radius: 2px; background: var(--pmi-brand);
}

/* Round variant: a small circular portrait above centred details, so the
   photo no longer dominates the card. */
.pmi-team-card-round { align-items: center; text-align: center; padding: 26px 18px 22px; }
.pmi-team-avatar {
   width: 132px; height: 132px; border-radius: 50%; overflow: hidden;
   background: var(--pmi-surface-alt);
   border: 3px solid var(--pmi-surface);
   box-shadow: 0 0 0 2px var(--pmi-brand);
   flex: 0 0 auto;
}
.pmi-team-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pmi-team-card-round .pmi-team-body { padding: 16px 0 0; align-items: center; text-align: center; }
.pmi-team-card-round .pmi-team-contact { justify-items: center; }
.pmi-team-card-round .pmi-team-social { justify-content: center; }

@media (max-width: 575px) {
   .pmi-team-avatar { width: 110px; height: 110px; }
   .pmi-team-group-title { font-size: 19px; }
}

/* =====================================================================
   Our Trainings — centre stage album + thumbnail strip + slideshow
   ===================================================================== */
.pmi-tr { margin-top: 10px; }

/* Stage: the active album, large. */
.pmi-tr-stage {
   position: relative;
   border-radius: 18px;
   overflow: hidden;
   background: var(--pmi-surface-alt);
   aspect-ratio: 16 / 9;
   /* A full-width 16:9 stage grows very tall on a wide screen. Centre it and
      cap the height so the preview stays a preview, not a hero image. */
   max-width: 900px;
   max-height: 480px;
   margin: 0 auto;
   box-shadow: 0 18px 44px rgba(15,42,28,.14);
}
.pmi-tr-slide { margin: 0; position: absolute; inset: 0; }
.pmi-tr-slide img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }

/* Caption sits on a gradient so text stays readable over any photo. */
.pmi-tr-cap {
   position: absolute; left: 0; right: 0; bottom: 0;
   padding: 30px 32px 26px;
   background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,0) 100%);
   color: #fff;
}
.pmi-tr-eyebrow {
   display: block; font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
   color: rgba(255,255,255,.85); margin-bottom: 8px;
}
.pmi-tr-cap h3 { color: #fff; font-size: 27px; font-weight: 700; margin: 0 0 6px; }
.pmi-tr-cap p  { color: rgba(255,255,255,.9); font-size: 16px; margin: 0 0 14px; max-width: 620px; }
.pmi-tr-open { border: none; }

/* Arrows, shared by the stage and the lightbox. */
.pmi-tr-nav {
   position: absolute; top: 50%; transform: translateY(-50%);
   width: 46px; height: 46px; border-radius: 50%;
   border: none; cursor: pointer; z-index: 3;
   background: rgba(255,255,255,.92); color: var(--pmi-ink);
   display: flex; align-items: center; justify-content: center;
   transition: background .2s ease, color .2s ease;
}
.pmi-tr-nav:hover { background: var(--pmi-brand); color: #fff; }
.pmi-tr-prev { left: 16px; }
.pmi-tr-next { right: 16px; }

/* Thumbnail strip below the stage. */
.pmi-tr-strip {
   display: flex; gap: 14px; margin-top: 18px;
   overflow-x: auto; padding: 4px 2px 10px;
   scrollbar-width: thin;
   max-width: 900px; margin-left: auto; margin-right: auto;
}
.pmi-tr-thumb {
   position: relative; flex: 0 0 auto;
   width: 168px; height: 104px; padding: 0;
   border: 2px solid transparent; border-radius: 12px;
   overflow: hidden; cursor: pointer; background: var(--pmi-surface-alt);
   transition: border-color .2s ease, transform .2s ease, opacity .2s ease;
   opacity: .68;
}
.pmi-tr-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pmi-tr-thumb:hover { opacity: 1; transform: translateY(-2px); }
.pmi-tr-thumb.is-active { opacity: 1; border-color: var(--pmi-brand); }
.pmi-tr-thumb-label {
   position: absolute; left: 0; right: 0; bottom: 0;
   padding: 14px 8px 6px; font-size: 12px; font-weight: 600; color: #fff;
   background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,0));
   white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Slideshow overlay. */
.pmi-tr-lightbox {
   position: fixed; inset: 0; z-index: 9999;
   background: rgba(8,16,12,.94);
   display: flex; align-items: center; justify-content: center;
   padding: 40px 72px;
}
.pmi-tr-lightbox[hidden] { display: none; }
.pmi-tr-lb-figure { margin: 0; max-width: 100%; max-height: 100%; text-align: center; }
.pmi-tr-lb-figure img {
   max-width: 100%; max-height: 76vh; object-fit: contain;
   border-radius: 10px; display: block; margin: 0 auto;
}
.pmi-tr-lb-figure figcaption { margin-top: 16px; color: #fff; }
.pmi-tr-lb-figure strong { display: block; font-size: 18px; font-weight: 700; }
.pmi-tr-lb-figure span   { display: block; font-size: 15px; color: rgba(255,255,255,.82); margin-top: 4px; }
.pmi-tr-lb-figure small  { display: block; font-size: 13px; color: rgba(255,255,255,.6); margin-top: 8px; }
.pmi-tr-close {
   position: absolute; top: 22px; right: 26px;
   width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
   background: rgba(255,255,255,.14); color: #fff; font-size: 18px;
   display: flex; align-items: center; justify-content: center;
}
.pmi-tr-close:hover { background: var(--pmi-brand); }

@media (max-width: 991px) {
   .pmi-tr-cap { padding: 22px 20px 18px; }
   .pmi-tr-cap h3 { font-size: 21px; }
   .pmi-tr-cap p { font-size: 14.5px; }
}
@media (max-width: 767px) {
   .pmi-tr-stage { aspect-ratio: 4 / 3; }
   .pmi-tr-thumb { width: 132px; height: 84px; }
   .pmi-tr-lightbox { padding: 60px 14px 24px; }
   .pmi-tr-nav { width: 38px; height: 38px; }
   .pmi-tr-prev { left: 8px; }
   .pmi-tr-next { right: 8px; }
}

/* =====================================================================
   Hero eyebrow — the theme tilts this badge (rotate(-17deg)) and pulls it
   left. Keep it upright and in flow so it reads as a normal pill.
   ===================================================================== */
.tp-hero-5-subtitle {
   transform: none !important;
   margin-left: 0 !important;
   letter-spacing: .02em;
   /* The badge sat flush against the headline below it — zero gap, because
      the pill has no margin of its own and its wrapper is a bare div. Lift
      it clear so it reads as its own element rather than part of the title. */
   margin-bottom: 8px;
}

/* =====================================================================
   Responsive layer
   The theme scales headings but leaves body copy, section padding and a
   few fixed-height blocks at desktop values. These rules load after
   main.css, so they tune those down for tablet and phone widths.
   ===================================================================== */

/* --- Tablet / small laptop ------------------------------------------ */
@media (max-width: 991px) {
   .tp-hero-5-dec { font-size: 18px; }

   /* Section rhythm: the theme's pt-1xx/pb-1xx utilities are desktop-sized. */
   .tp-chose-area,
   .tp-about-area,
   .tp-destination-area,
   .tp-tour-area,
   .tp-testimonial-area,
   .tp-blog-area {
      padding-top: 70px !important;
      padding-bottom: 60px !important;
   }

   .tp-section-title { font-size: 34px; line-height: 1.2; }
   .tp-about-6-thumb img { height: 220px; }
}

/* --- Phone ----------------------------------------------------------- */
@media (max-width: 767px) {
   .tp-hero-5-title { font-size: 42px; line-height: 1.06; }
   .tp-hero-5-dec   { font-size: 16px; line-height: 1.6; }
   .tp-hero-5-content { padding-top: 60px; padding-bottom: 40px; }

   /* The hero gallery is decorative and eats a whole screen on a phone. */
   .tp-hero-5-gallery { height: 340px; }

   .tp-section-title { font-size: 27px; }
   .tp-section-two-subtitle { font-size: 13px; }

   .tp-chose-area,
   .tp-about-area,
   .tp-destination-area,
   .tp-tour-area,
   .tp-testimonial-area,
   .tp-blog-area {
      padding-top: 48px !important;
      padding-bottom: 40px !important;
   }

   /* The theme leaves this at ml-110, pushing the slider off-screen. */
   .tp-testimonial-two-slider { margin-left: 0 !important; }

   /* Buttons: stack full width so they are easy to tap. */
   .tp-hero-5-btn-wrap { display: flex; flex-direction: column; gap: 10px; }
   .tp-hero-5-btn-wrap > a { width: 100%; text-align: center; margin-left: 0 !important; }

   .tp-about-6-thumb img { height: 190px; }

   /* Keep the floating WhatsApp clear of the back-to-top button and of the
      footer copyright line. */
   .pmi-whatsapp-float { width: 48px; height: 48px; font-size: 24px; bottom: 80px; }
}

@media (max-width: 575px) {
   .tp-hero-5-title { font-size: 34px; }
   .tp-section-title { font-size: 23px; }
   .tp-hero-5-gallery { height: 260px; }
   .tp-about-6-thumb img { height: 160px; }

}

/* Nothing may force a horizontal scrollbar on a phone. */
@media (max-width: 991px) {
   html, body { overflow-x: hidden; }
   img, svg, video, table { max-width: 100%; }
}

/* =====================================================================
   Association memberships — Contact page
   Logos sit in a centred wrapping row at a medium, uniform height so
   mismatched uploads still line up. Sizes come from Site Settings, with
   a per-logo override written inline by the view.
   ===================================================================== */
.pmi-assoc-section .pmi-section-head { text-align: center; margin-bottom: 22px; }
.pmi-assoc-title {
   font-size: 20px; font-weight: 700;
   letter-spacing: .12em; text-transform: uppercase;
   color: var(--pmi-ink); margin: 0;
}
.pmi-assoc-grid {
   display: flex; flex-wrap: wrap;
   align-items: center; justify-content: center;
   gap: 26px 40px;
}
.pmi-assoc-item {
   display: inline-flex; align-items: center; justify-content: center;
   cursor: default;
}
.pmi-assoc-item[href] { cursor: pointer; }
.pmi-assoc-item img {
   max-width: 100%;
   object-fit: contain;
   transition: transform .25s ease;
}
.pmi-assoc-item[href]:hover img { transform: translateY(-3px); }

@media (max-width: 767px) {
   .pmi-assoc-title { font-size: 17px; letter-spacing: .08em; }
   .pmi-assoc-grid { gap: 20px 26px; }
   /* Beat the inline height so logos stay medium-sized on a phone. */
   .pmi-assoc-item img { height: 84px !important; width: auto !important; }
}
@media (max-width: 480px) {
   .pmi-assoc-item img { height: 70px !important; }
}

/* =====================================================================
   Client logo strip — larger logos, tighter spacing
   The vendor theme sets margin: 0 80px on each slide, which leaves the
   logos small and marooned. Grow the logo box and close the gap.
   ===================================================================== */
/* The logo strip carried no vertical spacing at all, so it collided with
   the section below it. Every neighbouring section uses 80-130px padding;
   this keeps the strip in that rhythm without making it a huge empty band. */
.tp-brands-area {
   padding-top: 30px;
   padding-bottom: 70px;
}

/* --- "Our Prestigious Clients" heading -------------------------------
   Centred above the logo strip. The strip previously ran straight into the
   section above it with nothing naming it, so the logos read as decoration
   rather than as a claim about who the company works for.

   The short rule underneath is the same device the footer column headings
   use, which is what ties the two together as one system. */
.pmi-brands-head {
   max-width: 620px;
   margin: 0 auto 40px;
}
.tp-brands-area .pmi-brands-head .tp-section-title {
   position: relative;
   margin: 0;
   padding-bottom: 18px;
}
.tp-brands-area .pmi-brands-head .tp-section-title::after {
   content: "";
   position: absolute; left: 50%; bottom: 0;
   transform: translateX(-50%);
   width: 64px; height: 3px; border-radius: 2px;
   background: var(--pmi-accent, #f5a623);
}
/* The eyebrow follows the brand, as it does in every other section. */
.tp-brands-area .pmi-brands-head .tp-section-two-subtitle {
   color: var(--pmi-brand);
   font-weight: 700;
   letter-spacing: .12em;
   text-transform: uppercase;
}
@media (max-width: 991px) {
   .pmi-brands-head { margin-bottom: 30px; }
}
@media (max-width: 574.98px) {
   .pmi-brands-head { margin-bottom: 24px; padding: 0 4px; }
   .tp-brands-area .pmi-brands-head .tp-section-title { padding-bottom: 14px; }
   .tp-brands-area .pmi-brands-head .tp-section-title::after { width: 52px; }
}

.tp-brands-slider .swiper-slide { margin: 0 22px; }
.tp-brands-5 .tp-brands-item img,
.tp-brands-5 .tp-brands-item .tp-brands-static img {
   max-height: 92px;
}
@media (max-width: 991px) {
   .tp-brands-area { padding-top: 22px; padding-bottom: 50px; }
   .tp-brands-slider .swiper-slide { margin: 0 16px; }
   .tp-brands-5 .tp-brands-item img,
   .tp-brands-5 .tp-brands-item .tp-brands-static img { max-height: 76px; }
}
@media (max-width: 574.98px) {
   .tp-brands-area { padding-top: 18px; padding-bottom: 40px; }
   .tp-brands-slider .swiper-slide { margin: 0 12px; }
   .tp-brands-5 .tp-brands-item img,
   .tp-brands-5 .tp-brands-item .tp-brands-static img { max-height: 64px; }
}

/* =====================================================================
   Awards & Certificates
   Certificates are portrait scans of wildly varying proportions, so each
   card gives them a fixed-ratio window with `contain` — the whole
   document stays visible and uncropped, and the grid still lines up.
   ===================================================================== */
.pmi-cert-group { margin-bottom: 54px; }
.pmi-cert-group:last-child { margin-bottom: 0; }
.pmi-cert-grid {
   display: grid; gap: 26px;
   grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
}
.pmi-cert-card {
   display: flex; flex-direction: column; margin: 0;
   background: var(--pmi-surface);
   border: 1px solid var(--pmi-border); border-radius: 14px;
   overflow: hidden;
   transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.pmi-cert-card:hover {
   transform: translateY(-4px);
   border-color: var(--pmi-brand-soft);
   box-shadow: 0 14px 32px rgba(15,42,28,.10);
}
.pmi-cert-thumb {
   position: relative; display: block; width: 100%; padding: 14px;
   border: 0; border-bottom: 1px solid var(--pmi-border);
   background: var(--pmi-surface-alt); cursor: zoom-in;
   aspect-ratio: 4 / 3;
}
.pmi-cert-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Magnifier chip — only a hint, so it stays out of the way until hover. */
.pmi-cert-zoom {
   position: absolute; right: 12px; bottom: 12px;
   width: 32px; height: 32px; border-radius: 50%;
   display: inline-flex; align-items: center; justify-content: center;
   background: var(--pmi-brand); color: var(--pmi-surface); font-size: 13px;
   opacity: 0; transition: opacity .25s ease;
}
.pmi-cert-card:hover .pmi-cert-zoom,
.pmi-cert-thumb:focus-visible .pmi-cert-zoom { opacity: 1; }

.pmi-cert-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.pmi-cert-title { font-size: 17px; line-height: 1.4; font-weight: 700; color: var(--pmi-ink); margin: 0; }
.pmi-cert-issuer { font-size: 14px; font-weight: 600; color: var(--pmi-brand); }
.pmi-cert-text { font-size: 14.5px; line-height: 1.6; color: var(--pmi-muted); margin: 4px 0 0; }
/* Pushed to the bottom so the meta line sits level across a row of cards. */
.pmi-cert-meta { margin-top: auto; padding-top: 10px; font-size: 12.5px; color: var(--pmi-muted-2); }

@media (max-width: 575px) {
   .pmi-cert-grid { gap: 18px; grid-template-columns: 1fr; }
   .pmi-cert-body { padding: 16px; }
}

/* CTA band with two buttons. The band is dark, so the outline variant has to
   invert — its default green-on-green would be unreadable there. */
.pmi-cta-band-actions {
   display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
}
.pmi-cta-band .pmi-btn-outline {
   border-color: rgba(255,255,255,.65);
   color: var(--pmi-surface);
}
.pmi-cta-band .pmi-btn-outline:hover {
   background: var(--pmi-surface);
   border-color: var(--pmi-surface);
   color: var(--pmi-green-dark);
}

/* =====================================================================
   Header phone CTA, Book Now button, theme toggle, mobile call strip

   Phone is the primary conversion channel for this business, so the
   numbers sit beside the CTA in the header rather than only in the
   footer. --pmi-phone is a fixed signal red (see the token block at the
   top of this file), not part of the admin's themeable palette.
   ===================================================================== */
.pmi-header-call {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-right: 18px;
   color: var(--pmi-phone);
   line-height: 1.25;
   white-space: nowrap;
}
.pmi-header-call > i { font-size: 19px; flex: none; }
.pmi-header-call-nums { display: flex; flex-direction: column; }
.pmi-header-call-nums a {
   color: var(--pmi-phone);
   font-weight: 700;
   font-size: 16px;
   letter-spacing: .2px;
}
.pmi-header-call-nums a:hover { color: var(--pmi-phone); text-decoration: underline; }

/* The ringing-phone animation, standing in for an animated GIF: crisp at
   any size, themeable, and free of an extra request. */
@keyframes pmi-ring {
   0%, 62%, 100% { transform: rotate(0); }
   64%, 72%, 80% { transform: rotate(-13deg); }
   68%, 76%, 84% { transform: rotate(13deg); }
}
.pmi-ring {
   display: inline-block;
   transform-origin: 50% 60%;
   animation: pmi-ring 2.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
   .pmi-ring { animation: none; }
}

/* Book Now — icon + label on one baseline. */
.pmi-btn-book { display: inline-flex; align-items: center; gap: 9px; }
.pmi-btn-book i { font-size: .95em; }
.pmi-btn-call { display: inline-flex; align-items: center; gap: 8px; }

/* Light/dark switch. Only one of the two icons is ever shown. */
.pmi-theme-toggle {
   display: inline-flex; align-items: center; justify-content: center;
   /* flex: none stops the flex row squeezing the width and turning the
      circle into an oval; the fixed basis keeps it perfectly round. */
   flex: 0 0 38px;
   width: 38px; height: 38px; min-width: 38px; max-width: 38px;
   margin-right: 12px; padding: 0; box-sizing: border-box;
   border: 1px solid var(--pmi-nav-border);
   border-radius: 50%;
   background: transparent;
   color: var(--pmi-nav-fg);
   font-size: 16px;
   cursor: pointer;
   transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.pmi-theme-toggle:hover {
   color: var(--pmi-nav-fg-hover);
   border-color: var(--pmi-nav-fg-hover);
}
.pmi-theme-toggle .pmi-theme-icon-dark { display: none; }
[data-theme="dark"] .pmi-theme-toggle .pmi-theme-icon-light { display: none; }
[data-theme="dark"] .pmi-theme-toggle .pmi-theme-icon-dark { display: inline-block; }

/* Mobile call strip. The desktop phone block and Book Now are hidden
   below 1200px, so this carries the same actions on phones. */
.pmi-call-strip {
   display: flex;
   align-items: stretch;
   gap: 1px;
   background: var(--pmi-nav-border);
   border-top: 1px solid var(--pmi-nav-border);
}
.pmi-call-strip-item,
.pmi-call-strip-book {
   flex: 1 1 0;
   display: flex; align-items: center; justify-content: center; gap: 7px;
   min-height: 44px;                      /* comfortable tap target */
   padding: 9px 6px;
   background: var(--pmi-nav-bg);
   font-weight: 700; font-size: 14.5px;
   white-space: nowrap;
}
.pmi-call-strip-item { color: var(--pmi-phone); }
.pmi-call-strip-item:hover { color: var(--pmi-phone); }
.pmi-call-strip-book { background: var(--pmi-brand); color: var(--pmi-surface); flex: 0 0 33%; }
.pmi-call-strip-book:hover { background: var(--pmi-brand-dark); color: var(--pmi-surface); }
.pmi-call-strip i { font-size: 14px; }

@media (max-width: 400px) {
   .pmi-call-strip-item, .pmi-call-strip-book { font-size: 13px; padding: 8px 4px; }
   .pmi-call-strip i { font-size: 13px; }
}

/* Between 1200px and 1400px the header is tight: keep one number rather
   than letting the row wrap. */
@media (min-width: 1200px) and (max-width: 1399px) {
   .pmi-header-call { margin-right: 12px; gap: 7px; }
   .pmi-header-call-nums a { font-size: 14.5px; }
   .pmi-header-call-alt { display: none; }
   .pmi-theme-toggle { flex: 0 0 34px; width: 34px; height: 34px; min-width: 34px; max-width: 34px; margin-right: 8px; }
}

/* =====================================================================
   Dark mode

   The token values come from pmi_theme_css_dark() in theme_helper.php,
   derived from the admin's brand colour.

   The important part is the vendor remap below. main.css resolves almost
   all of its colour through its own --tp-* tokens (--tp-common-black
   alone is used 272 times), so redefining those few tokens flips the
   whole vendor theme at once. Chasing individual vendor selectors here
   would be endless and would break on any template update.
   ===================================================================== */
:root[data-theme="dark"] {
   /* Intentionally-dark slabs stay dark. Without this they would follow
      --pmi-ink, which is near-white in dark mode — that is what put white
      text on a white page hero. Deepened below the page surface so the slab
      still reads as a distinct band. */
   --pmi-slab: #0b1116;

   /* Vendor token remap — this is what actually turns main.css dark. */
   --tp-common-white: var(--pmi-surface-alt);
   --tp-common-white-2: var(--pmi-surface-alt);
   --tp-common-black: var(--pmi-ink);
   --tp-grey-1: var(--pmi-muted);
   --tp-grey-2: var(--pmi-muted-2);
   --tp-grey-3: var(--pmi-surface-alt);
   --tp-common-petals: var(--pmi-brand-tint);
   --tp-border-1: var(--pmi-border);
}

[data-theme="dark"] body {
   background: var(--pmi-surface);
   color: var(--pmi-muted);
}

/*
 * Panels the vendor paints with a literal hex rather than a token, so the
 * remap above cannot reach them. Each of these is a light slab that would
 * otherwise stay bright in dark mode — .tp-about-6-bg is the half-width
 * panel behind the "About / years protecting" block on the homepage.
 *
 * Only the vendor hexes that this site actually renders are listed; the
 * template ships many more for pages this site does not use.
 */
[data-theme="dark"] .tp-hero-5-bg,
[data-theme="dark"] .tp-about-6-bg,
[data-theme="dark"] .tp-feature-item,
[data-theme="dark"] .tp-testimonial-7-wrap,
[data-theme="dark"] .tp-career-perks-icon,
[data-theme="dark"] .white-bg,
[data-theme="dark"] .grey-bg {
   background: var(--pmi-surface-alt) !important;
}

/* Menu hover slab. */
[data-theme="dark"] .tp-megamenu-list ul li a:hover {
   background: var(--pmi-brand-tint) !important;
}

[data-theme="dark"] .tp-header-area,
[data-theme="dark"] #header-sticky,
[data-theme="dark"] .tp-offcanvas,
[data-theme="dark"] .tp-megamenu-wrapper,
[data-theme="dark"] .sub-menu {
   background-color: var(--pmi-nav-bg) !important;
}

/* Cards and panels defined in this file. */
[data-theme="dark"] .pmi-card,
[data-theme="dark"] .pmi-cert-card,
[data-theme="dark"] .pmi-contact-tile,
[data-theme="dark"] .pmi-wa-card,
[data-theme="dark"] .accrodion {
   background-color: var(--pmi-surface-alt);
   border-color: var(--pmi-border);
}

/* Form controls: the vendor styles assume a white page. */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] select,
[data-theme="dark"] textarea {
   background-color: var(--pmi-surface-alt);
   border-color: var(--pmi-border);
   color: var(--pmi-ink);
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: var(--pmi-muted-2); }
[data-theme="dark"] .nice-select,
[data-theme="dark"] .nice-select .list {
   background-color: var(--pmi-surface-alt);
   border-color: var(--pmi-border);
   color: var(--pmi-ink);
}
[data-theme="dark"] .nice-select .option:hover,
[data-theme="dark"] .nice-select .option.selected { background-color: var(--pmi-brand-tint); }

/* Photo scrims need to be heavier on a dark page or captions wash out. */
[data-theme="dark"] .tp-tour-dayfilter-thumb::before { background: rgba(0, 0, 0, .55) !important; }

/* Images and logos carry their own white; soften the glare a little. */
[data-theme="dark"] .tp-brands-item img,
[data-theme="dark"] .pmi-assoc-logo img { filter: brightness(.94); }

/* Dark-mode logo. Both files are in the markup; only one is ever shown, so
   the correct logo is present on first paint with no script involved. */
.pmi-logo-dark { display: none; }
[data-theme="dark"] .tp-header-logo .pmi-logo:not(.pmi-logo-dark) { display: none; }
[data-theme="dark"] .tp-header-logo .pmi-logo-dark { display: block; }

/* =====================================================================
   Dark mode — round two

   These are the cases the vendor token remap cannot reach:
   inline style attributes, Bootstrap !important utilities, and blocks
   that are dark BY DESIGN in both themes.
   ===================================================================== */

/* Buttons that sit on a dark slab (service-detail sidebar CTA). These
   replaced inline style="background:#fff" attributes, which no
   stylesheet could override — an inline style always wins. */
.pmi-btn-on-slab {
   background: var(--pmi-slab-fg);
   color: var(--pmi-brand-dark);
}
.pmi-btn-on-slab:hover {
   background: var(--pmi-brand-tint);
   color: var(--pmi-brand-dark);
}
.pmi-btn-on-slab-alt { background: var(--pmi-brand); color: #fff; }
.pmi-btn-on-slab-alt:hover { background: var(--pmi-brand-dark); color: #fff; }
.pmi-btn-whatsapp { background: var(--pmi-whatsapp); color: #fff; }
.pmi-btn-whatsapp:hover { background: #1da851; color: #fff; }

/* Bootstrap's .text-black is `color: #000 !important`, so the service
   title stayed black on the dark page. Only an equally-!important rule
   can beat it. */
[data-theme="dark"] .text-black { color: var(--pmi-ink) !important; }
[data-theme="dark"] .tp-breadcrumb-title { color: var(--pmi-ink); }

/* Text inside the intentionally-dark slabs must stay light in BOTH
   themes — the slab does not invert, so the text must not either. */
.pmi-page-hero p,
.pmi-page-hero .pmi-breadcrumb,
.pmi-assurance p,
.pmi-sd-cta p { color: var(--pmi-slab-fg-soft); }

[data-theme="dark"] .pmi-page-hero,
[data-theme="dark"] .pmi-page-hero h1,
[data-theme="dark"] .pmi-assurance,
[data-theme="dark"] .pmi-assurance h4,
[data-theme="dark"] .pmi-sd-cta,
[data-theme="dark"] .pmi-sd-cta h3 { color: var(--pmi-slab-fg); }

[data-theme="dark"] .pmi-page-hero p,
[data-theme="dark"] .pmi-page-hero .pmi-breadcrumb,
[data-theme="dark"] .pmi-assurance p,
[data-theme="dark"] .pmi-sd-cta p { color: var(--pmi-slab-fg-soft); }

/* Contact tiles (Address / Phone / Email / Working Hours) and the
   service-detail sidebar boxes. */
[data-theme="dark"] .pmi-sd-box,
[data-theme="dark"] .pmi-contact-tile,
[data-theme="dark"] .pmi-info-card,
[data-theme="dark"] .pmi-cert-card,
[data-theme="dark"] .pmi-tr-card,
[data-theme="dark"] .pmi-team-card {
   background: var(--pmi-surface-alt);
   border-color: var(--pmi-border);
}
[data-theme="dark"] .pmi-sd-box h3,
[data-theme="dark"] .pmi-contact-tile-value,
[data-theme="dark"] .pmi-contact-tile-label { color: var(--pmi-ink); }
[data-theme="dark"] .pmi-contact-tile-sub { color: var(--pmi-muted); }

/* The sidebar CTA keeps its slab colouring even in dark mode. */
[data-theme="dark"] .pmi-sd-cta { background: var(--pmi-slab); border-color: var(--pmi-slab); }

/* Section headings and eyebrows across every page. */
[data-theme="dark"] .pmi-eyebrow { color: var(--pmi-brand); }
[data-theme="dark"] .pmi-lead { color: var(--pmi-muted); }
[data-theme="dark"] .tp-tour-details-title,
[data-theme="dark"] .tp-section-title,
[data-theme="dark"] .tp-tour-details h3,
[data-theme="dark"] .tp-tour-details h4 { color: var(--pmi-ink); }

/* Check lists, process steps and accordions on the service pages. */
[data-theme="dark"] .pmi-check-list li,
[data-theme="dark"] .pmi-sd-list li,
[data-theme="dark"] .pmi-process-step p { color: var(--pmi-muted); }
[data-theme="dark"] .pmi-process-step h4,
[data-theme="dark"] .pmi-process-num { color: var(--pmi-ink); }
[data-theme="dark"] .accrodion-title h4 { color: var(--pmi-ink); }
[data-theme="dark"] .accrodion-content p { color: var(--pmi-muted); }