/* =====================================================================
   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;

   /* 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-dark);
   color: var(--pmi-surface);
   padding: 120px 0 70px;
   text-align: center;
}
.pmi-page-hero h1 { color: var(--pmi-surface); 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-surface); }
.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-dark);
   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-dark);
   color: var(--pmi-surface);
   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-dark); color:var(--pmi-surface); border:none; }
.pmi-sd-cta h3 { color:var(--pmi-surface); }
.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-dark); color: var(--pmi-surface); border-radius: 14px; padding: 32px 34px; margin: 30px 0; }
.pmi-assurance .pmi-eyebrow { color: var(--pmi-brand-soft); }
.pmi-assurance h4 { color: var(--pmi-surface); 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-dark); color:var(--pmi-surface); }

/* Floating WhatsApp */
.pmi-whatsapp-float {
   position: fixed; left: 22px; bottom: 22px; 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 */
.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-dark);
   border-color: var(--pmi-dark);
   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: -30px; }
   .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: 220px;
   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. */
@media (max-width: 767px) {
   .pmi-logo { max-width: 200px; }
   /* Beat the inline style="height:NNpx" the views print on the <img>. */
   .tp-header-logo .pmi-logo { height: 64px !important; max-width: 210px; }
}
@media (max-width: 575px) {
   .pmi-logo { max-width: 185px; }
   .tp-header-logo .pmi-logo { height: 56px !important; max-width: 190px; }
}

/* 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 { font-size: 14px; font-weight: 600; color: var(--pmi-brand); }
.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.
   Admin can give the footer its own background or mirror the header.

   The vendor theme hard-codes near-black on the footer's links, contact rows
   and copyright text (main.css: .tp-footer-widget-menu ul li a,
   .tp-footer-contact a/span, .tp-copyright-text p, .tp-copyright-payment p).
   Those selectors are more specific than a plain .tp-footer-area override, so
   each one is matched here explicitly — otherwise a light-on-dark footer keeps
   showing black text while only :hover follows the theme.
   ========================================================================== */
.tp-footer-area {
   background: var(--pmi-footer-bg, var(--pmi-ink));
   color: var(--pmi-footer-fg, #fff);
}
.tp-footer-area .tp-footer-widget-title,
.tp-footer-area h2, .tp-footer-area h3, .tp-footer-area h4 {
   color: var(--pmi-footer-fg, #fff);
}
.tp-footer-area p,
.tp-footer-area .tp-footer-dec,
.tp-footer-area .tp-footer-widget-content span {
   color: var(--pmi-footer-muted, rgba(255,255,255,.75));
}

/* Widget link lists ("Company", "Services" columns). */
.tp-footer-area .tp-footer-widget-menu ul li a {
   color: var(--pmi-footer-muted, rgba(255,255,255,.75));
   transition: color .2s ease;
}
.tp-footer-area .tp-footer-widget-menu ul li a:hover {
   color: var(--pmi-footer-link-hover, var(--pmi-brand));
}

/* Address / phone / email block. */
.tp-footer-area .tp-footer-contact a {
   color: var(--pmi-footer-fg, #fff);
   transition: color .2s ease;
}
.tp-footer-area .tp-footer-contact span {
   color: var(--pmi-footer-muted, rgba(255,255,255,.75));
}
.tp-footer-area .tp-footer-contact a:hover,
.tp-footer-area .tp-footer-contact .phone:hover {
   color: var(--pmi-footer-link-hover, var(--pmi-brand));
}
.tp-footer-area .tp-footer-contact .phone {
   color: var(--pmi-footer-link-hover, var(--pmi-brand));
}

/* Any remaining link in the footer body. */
.tp-footer-area a { transition: color .2s ease; }
.tp-footer-area a:hover { 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 a {
   display: inline-flex; align-items: center; justify-content: center;
   width: 38px; height: 38px; border-radius: 50%;
   border: 1px solid var(--pmi-footer-border, rgba(255,255,255,.18));
   color: var(--pmi-footer-fg, #fff);
}
.tp-footer-area .tp-footer-social a:hover {
   background: var(--pmi-footer-link-hover, var(--pmi-brand));
   border-color: var(--pmi-footer-link-hover, var(--pmi-brand));
   color: #fff;
}

/* Copyright bar. */
.tp-footer-area .tp-copyright-wrap,
.tp-footer-area .tp-copyright-area {
   border-top: 1px solid var(--pmi-footer-border, rgba(255,255,255,.15));
}
.tp-footer-area .tp-copyright-text p,
.tp-footer-area .tp-copyright-payment p {
   color: var(--pmi-footer-muted, rgba(255,255,255,.75));
}
.tp-footer-area .tp-copyright-text p a {
   color: var(--pmi-footer-fg, #fff);
}
.tp-footer-area .tp-copyright-text p a:hover {
   color: var(--pmi-footer-link-hover, var(--pmi-brand));
}

/* --- 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;
}

/* =====================================================================
   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. */
   .pmi-whatsapp-float { width: 48px; height: 48px; font-size: 24px; }
}

@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; }

   /* Footer columns read better centred once they are full width. */
   .tp-footer-widget-wrap { padding-top: 48px !important; padding-bottom: 10px !important; }
   .tp-copyright-wrap .tp-copyright-payment { justify-content: flex-start !important; }
}

/* 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%; }
}