/* ================================================================
   PKC TYPOGRAPHY SYSTEM — pkc-typography.css
   Created: 2026-05-13

   TO REVERT EVERYTHING: open functions.php and comment out the
   single line:  wp_enqueue_style( 'pkc-typography', ... )
   That one change removes this entire file from the site.

   TO ADJUST ANY SIZE: edit the CSS variables in :root below.
   Everything else in this file references those variables, so
   changing one value cascades correctly across the whole site.
   ================================================================ */

/* ── 1. CSS Custom Properties ──────────────────────────────────
   All font decisions live here.  Change a value once, it applies
   everywhere the variable is used.                              */
:root {
  /* Font family stack
     Poppins is loaded from Google Fonts.  System fonts are the
     fallback so text is always readable even if the CDN is slow. */
  --pkc-font: 'Poppins', -apple-system, BlinkMacSystemFont,
              'Segoe UI', Helvetica, Arial, sans-serif;

  /* ── Type scale (desktop) ───────────────────────────────────
     Base unit is 16px (browser default, preserved in html rule).
     All sizes below are relative so they scale with zoom / a11y. */
  --t-xs:    0.75rem;    /*  12px – captions, labels              */
  --t-sm:    0.875rem;   /*  14px – footer links, small meta      */
  --t-base:  1rem;       /*  16px – body / paragraph text         */
  --t-md:    1.125rem;   /*  18px – intro paragraphs, blockquotes */
  --t-lg:    1.375rem;   /*  22px – card sub-headings (h5)        */
  --t-xl:    1.75rem;    /*  28px – sub-section titles   (h4)     */
  --t-2xl:   2rem;       /*  32px – section titles       (h3/h2)  */
  --t-3xl:   2.5rem;     /*  40px – page titles          (h1)     */
  --t-hero:  2.5rem;     /*  40px – hero banner headline (.lxd)   */

  /* ── Font weights ───────────────────────────────────────────
     Poppins is loaded with wght 300;400;500;600;700
     (footer.php Google Fonts URL updated to include 700).       */
  --wt-light:    300;
  --wt-regular:  400;
  --wt-medium:   500;
  --wt-semibold: 600;
  --wt-bold:     700;

  /* ── Line heights ───────────────────────────────────────────
     Unitless values so they scale with font-size (never use px
     for line-height on body text).                              */
  --lh-tight:   1.2;
  --lh-snug:    1.35;
  --lh-body:    1.65;
  --lh-loose:   1.8;
}

/* ── 2. HTML root ──────────────────────────────────────────────
   Locking the html font-size to 16px means 1rem is always 16px
   regardless of Bootstrap or other framework resets.            */
html {
  font-size: 16px !important;
}

/* ── 3. Body ───────────────────────────────────────────────────
   Sets Poppins as the universal default for every element that
   doesn't have its own font-family rule.                        */
body {
  font-family: var(--pkc-font) !important;
  font-size:   var(--t-base)   !important;
  font-weight: var(--wt-regular);
  line-height: var(--lh-body)  !important;
  color: #2d2d2d;
}

/* ── 4. Heading scale ──────────────────────────────────────────
   Clear size + weight hierarchy.  All six levels are defined so
   no heading ever falls back to an unexpected browser default.   */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--pkc-font) !important;
  line-height: var(--lh-tight);
  margin-top:  0;
}

h1 {
  font-size:   var(--t-3xl)          !important;  /* 40px */
  font-weight: var(--wt-bold)        !important;
  letter-spacing: -0.02em;
}

h2 {
  font-size:   var(--t-2xl)          !important;  /* 32px */
  font-weight: var(--wt-bold)        !important;
  letter-spacing: -0.01em;
}

h3 {
  font-size:   var(--t-xl)           !important;  /* 28px */
  font-weight: var(--wt-semibold)    !important;
}

h4 {
  font-size:   var(--t-lg)           !important;  /* 22px */
  font-weight: var(--wt-semibold)    !important;
}

h5 {
  font-size:   var(--t-md)           !important;  /* 18px */
  font-weight: var(--wt-medium)      !important;
}

h6 {
  font-size:   var(--t-base)         !important;  /* 16px */
  font-weight: var(--wt-medium)      !important;
}

/* ── 5. Paragraphs & body copy ─────────────────────────────────
   Fixes the rogue "line-height: 15px / 1px" overrides that
   were compressing text illegibly in several sections.           */
p {
  font-family: var(--pkc-font) !important;
  font-size:   var(--t-base);
  line-height: var(--lh-body)  !important;
  font-weight: var(--wt-regular);
}

/* ── 6. Links ──────────────────────────────────────────────────*/
a {
  font-family: inherit;
}

/* ── 7. Hero banner headline (.lxd) ────────────────────────────
   Used in the homepage Owl Carousel slider.
   Keeps the existing 2.5rem desktop size but fixes the mobile
   breakpoint that was missing a proper cascade.                  */
.lxd {
  font-family: var(--pkc-font)   !important;
  font-size:   var(--t-hero)     !important;  /* 40px desktop */
  font-weight: var(--wt-bold)    !important;
  line-height: var(--lh-tight)   !important;
  letter-spacing: -0.02em;
}

/* ── 8. Buttons ────────────────────────────────────────────────
   btn-primary was 20px — too large, felt heavy and misaligned
   with surrounding body text.  16px matches body and reads as
   a clear action without dominating the page.                    */
.btn,
.btn-primary,
.btn-secondary,
.btn-lg,
.btn-sm {
  font-family:     var(--pkc-font)    !important;
  font-size:       var(--t-base)      !important;  /* 16px — was 20px */
  font-weight:     var(--wt-medium)   !important;
  letter-spacing:  0.03em;
  line-height:     1.5;
}

input[type="submit"],
input[type="button"],
button {
  font-family: var(--pkc-font) !important;
  font-size:   var(--t-base)   !important;
  font-weight: var(--wt-medium);
}

/* ============================================================
   ── 9. NAVIGATION (complete rewrite) ─────────────────────────
   Goals:
     • One readable type/colour/spacing scale across top nav,
       mega-menu, and CTAs.
     • Zero stray underlines, triangles, or shadow lines —
       the legacy style.css adds several pseudo-elements that
       leak through. Disable them all on every nav descendant.
     • Top-bar hover/active = dark navy (gold on yellow = invisible).
     • Mega-panel anchored to the same width as page .container.
   ============================================================ */

/* 9.-1 Sticky header — keep the nav bar pinned to the top of the
   viewport while the user scrolls. `position: sticky` is purely
   CSS-driven; script.js (line 370) toggles the `.fixHeader` class
   at scroll>=10px which swaps the bar to white + adds a shadow.   */
#masthead {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #ffffff;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

/* When the bar is pinned (user has scrolled), switch to white +
   subtle shadow. Reinforce over the legacy style.css declaration
   so the yellow background can't bleed through.                   */
#masthead.fixHeader,
#masthead.fixHeader .main-navigation,
#masthead.fixHeader .container-fluid {
  background: #ffffff !important;
}

#masthead.fixHeader {
  box-shadow: 0 2px 12px rgba(0, 38, 122, 0.12);
}

/* Sticky breaks if any ancestor has `overflow: hidden`. Common
   culprits are html/body (some themes set them). Ensure they're
   clear so the header can pin correctly.                         */
html, body {
  overflow-x: clip;     /* clip = doesn't break sticky like `hidden` does */
}

/* 9.0 Align the header content with the page Bootstrap .container
   so the menu sits over the same gutters as the page sections.
   .header-row is the anchor for the absolutely-positioned mega-menu;
   keeping it position:relative + bounded width = panel aligns to
   the page grid.                                                  */
#masthead .header-row {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  align-items: center;
  position: relative;
}
.site-header .container-fluid {
    padding-right: 0;
}
@media (max-width: 1199px) { #masthead .header-row { max-width: 960px; } }
@media (max-width: 991px)  { #masthead .header-row { max-width: 720px; } }

/* 9.0b — Force every element BETWEEN .header-row and the mega-menu
   to be position:static so .sub-menu absolute-positions against
   .header-row, not against Bootstrap's .col-md-10 (which is
   position:relative by default and pushes the panel off-screen).
   DESKTOP ONLY — on mobile, the menu is a slide-out (position:fixed)
   and overflow:hidden + position:static break it completely. */
@media (min-width: 1025px) {
  .main-navigation {overflow: hidden !important;padding: 0px 20px;}
  #masthead .main-navigation,
  #masthead .main-navigation #primary-menu,
  #masthead .main-navigation #primary-menu > li {
    position: static !important;
  }
}

/* 9.1 Nuke every legacy nav pseudo-element and inset shadow.
   The source rule `.main-navigation ul li::after` has specificity
   0,1,3 so our override must match or exceed it.                  */
.main-navigation ul li::before,
.main-navigation ul li::after,
.main-navigation ul li:hover::before,
.main-navigation ul li:hover::after,
.main-navigation ul li.current-menu-item::before,
.main-navigation ul li.current-menu-item::after,
.main-navigation ul li.current-menu-parent::before,
.main-navigation ul li.current-menu-parent::after,
.main-navigation ul ul li::before,
.main-navigation ul ul li::after,
.main-navigation ul ul li:hover::before,
.main-navigation ul ul li:hover::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  background: transparent !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

.main-navigation li,
.main-navigation li:hover,
.main-navigation ul ul li,
.main-navigation ul ul li:hover,
.main-navigation ul ul ul li:hover {
  box-shadow: none !important;
  background-color: transparent !important;
}

/* Force-disable underlines on every nav anchor, every state */
.main-navigation a,
.main-navigation a:link,
.main-navigation a:visited,
.main-navigation a:hover,
.main-navigation a:focus,
.main-navigation a:active {
  text-decoration: none !important;
  border-bottom: 0 !important;
}

/* 9.2 Top-level nav: layout & typography */
.main-navigation #primary-menu {
  align-items: center;
  gap: 4px;
}

.main-navigation #primary-menu > li > a {
  font-family:    var(--pkc-font)     !important;
  font-size:      1rem                !important;  /* 16px */
  font-weight:    var(--wt-semibold)  !important;
  color:          #00267a             !important;  /* PKC navy */
  letter-spacing: 0;
  padding:        2em 1.8em         !important;
  line-height:    1;
  border-radius:  4px;
  transition:     color 0.15s ease, background-color 0.15s ease;
}

/* Top-level hover/focus/active — dark navy + soft white wash.
   Gold on the yellow header bar reads as invisible, so use
   contrast instead of colour-shift to indicate the state.
   DESKTOP ONLY — on the navy mobile slide-out panel this navy
   colour reads as invisible. Mobile state colour comes from
   pkc-responsive-fixes.css. */
@media (min-width: 1025px) {
  .main-navigation #primary-menu > li:not(.pkc-menu-cta):not(.pkc-menu-cta) > a:hover,
  .main-navigation #primary-menu > li:not(.pkc-menu-cta):not(.pkc-menu-cta) > a:focus,
  .main-navigation #primary-menu > li.current-menu-item:not(.pkc-menu-cta):not(.pkc-menu-cta) > a,
  .main-navigation #primary-menu > li.current-menu-parent:not(.pkc-menu-cta):not(.pkc-menu-cta) > a,
  .main-navigation #primary-menu > li.current-menu-ancestor:not(.pkc-menu-cta):not(.pkc-menu-cta) > a {
    color:            #00267a               !important;
    outline: none;
  }
}

/* 9.3 CTAs: Contact Us (.pkc-menu-cta) + phone (.pkc-menu-cta)
   Filled navy pill buttons sitting inside the yellow bar.        */
.main-navigation #primary-menu > li.pkc-menu-cta,
.main-navigation #primary-menu > li.pkc-menu-cta {
  background-color: #00267a !important;
  border-radius:    6px     !important;
  padding:          0       !important;
  margin:           0 0 0 10px !important;
  align-self:       center;
  overflow:         hidden;
  transition:       background-color 0.18s ease, transform 0.18s ease;
}

.main-navigation #primary-menu > li.pkc-menu-cta > a,
.main-navigation #primary-menu > li.pkc-menu-cta > a {
  display:        block;
  padding:        11px 20px            !important;
  color:          #ffffff              !important;
  font-size:      0.9375rem            !important;  /* 15px */
  font-weight:    var(--wt-semibold)   !important;
  letter-spacing: 0.02em;
  line-height:    1.2;
  background:     transparent          !important;
  border-radius:  6px;
}

.main-navigation #primary-menu > li.pkc-menu-cta:hover,
.main-navigation #primary-menu > li.pkc-menu-cta:hover,
.main-navigation #primary-menu > li.pkc-menu-cta:focus-within,
.main-navigation #primary-menu > li.pkc-menu-cta:focus-within {
  background-color: #193b87 !important;
  transform:        translateY(-1px);
}

.main-navigation #primary-menu > li.pkc-menu-cta > a:hover,
.main-navigation #primary-menu > li.pkc-menu-cta > a:focus,
.main-navigation #primary-menu > li.pkc-menu-cta > a:hover,
.main-navigation #primary-menu > li.pkc-menu-cta > a:focus {
  color:      #ffffff      !important;
  background: transparent  !important;
}

/* Defeat the legacy pkc-custom.css padding (5px 0) on the CTAs */
li.pkc-menu-cta,
li.pkc-menu-cta {
  padding: 0 !important;
}

/* Mobile menu widget text */
.wpr-nav-link span,
.wpr-mobile-menu-item {
  font-family:    var(--pkc-font)     !important;
  font-size:      var(--t-sm)         !important;
  font-weight:    var(--wt-medium)    !important;
  letter-spacing: 0.02em;
}

/* Royal Addons mega-menu hover bold (pkc-custom.css:760) */
.wpr-sub-mega-menu a:hover,
.wpr-sub-mega-menu a:focus {
  font-weight: var(--wt-regular) !important;
}

/* ── 9b. Services mega-menu panel ─────────────────────────────
   Services <li> (.pkc-menu-services) gets position:static so its
   .sub-menu absolutely positions against the header row. The
   panel is anchored under the Services trigger, centred to the
   page container, and laid out as a 3-column grid of category
   cells.                                                          */
.main-navigation #primary-menu > li.pkc-menu-services {
  position: static;
}

/* Panel anchored to .header-row (1140px wide, centred on viewport).
   left:0 + right:0 stretches the panel across that 1140px box, so it
   visually aligns to the page container without arithmetic.        */
.pkc-menu-services > .sub-menu {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  transform: translateY(6px);
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(0, 38, 122, 0.12);
  border-radius: 10px;
  border-top: 3px solid #f2c433;
  padding: 32px 40px;
  z-index: 1000;
  list-style: none;
  margin: 8px 0 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 40px;
  row-gap: 28px;
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.pkc-menu-services:hover > .sub-menu,
.pkc-menu-services:focus-within > .sub-menu {
  display: grid;
  opacity: 1;
  transform: translateY(0);
}

/* Each category cell — no separators, just whitespace */
.pkc-menu-services > .sub-menu > li {
  list-style: none;
  position: static;
  padding: 0;
  margin: 0;
}

/* Category title — clean text only, no underline. Hover = gold tint */
.pkc-menu-services > .sub-menu > li > a {
  display: block;
  padding: 4px 0 12px 12px !important;
  margin: 0 0 6px 0;
  font-size: var(--t-md)             !important;  /* 18px */
  font-weight: var(--wt-bold)        !important;
  color: #00267a                     !important;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
  background: transparent            !important;
  transition: color 0.15s ease;
}

.pkc-menu-services > .sub-menu > li > a:hover,
.pkc-menu-services > .sub-menu > li > a:focus {
  color: #f2c433 !important;
  background: transparent !important;
}

/* Leaf list — flatten the third-level <ul> in place */
.pkc-menu-services > .sub-menu > li > .sub-menu {
  display: block       !important;
  position: static     !important;
  box-shadow: none     !important;
  background: transparent !important;
  border: 0            !important;
  padding: 0           !important;
  margin: 0            !important;
  list-style: none;
  opacity: 1           !important;
  transform: none      !important;
  width: auto          !important;
  max-width: none      !important;
  border-radius: 0     !important;
}

.pkc-menu-services > .sub-menu > li > .sub-menu li {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Suppress style.css's "—" em-dash prefix on 3rd-level links */
.pkc-menu-services > .sub-menu > li > .sub-menu a::before,
.pkc-menu-services > .sub-menu > li > .sub-menu a::after {
  content: none !important;
  display: none !important;
  padding: 0    !important;
}

/* Leaf link — neutral state */
.pkc-menu-services > .sub-menu > li > .sub-menu a {
  display: block;
  padding: 6px 10px       !important;
  margin: 0;
  font-family: var(--pkc-font) !important;
  font-size: var(--t-sm)  !important;        /* 14px */
  font-weight: var(--wt-regular) !important;
  color: #4a4a4a          !important;
  line-height: 1.45;
  letter-spacing: 0;
  border-radius: 4px;
  background: transparent !important;
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* Leaf link — hover/focus: soft navy-tinted background, navy text */
.pkc-menu-services > .sub-menu > li > .sub-menu a:hover,
.pkc-menu-services > .sub-menu > li > .sub-menu a:focus {
  background-color: #f4f6fb !important;    /* very pale blue, no underline */
  color: #00267a            !important;
}

/* Mobile (≤ 991px) — collapse the panel back to a standard accordion */
@media (max-width: 991px) {
  .pkc-menu-services > .sub-menu,
  .pkc-menu-services:hover > .sub-menu,
  .pkc-menu-services:focus-within > .sub-menu {
    display: block;
    position: static;
    left: auto;
    right: auto;
    width: auto;
    max-width: none;
    box-shadow: none;
    border-radius: 0;
    border-top: 0;
    padding: 0 0 0 16px;
    margin: 0;
    opacity: 1;
    transform: none;
  }
  .pkc-menu-services > .sub-menu > li > a {
    margin-top: 12px;
    border-bottom: 0;
  }
}

/* ── 10. Homepage section backgrounds ──────────────────────────
   Five consecutive sections share the same white background.
   Alternating white / light-gray (#f4f4f4) creates visual rhythm
   and makes the 80px section padding feel intentional rather than
   excessive.

   Sequence:
     home-anim-banner  → white        (hero, clean)
     hp_logos          → #f4f4f4      ← alternate
     strategies-sec    → white
     hp-plan           → white        (internal tiles are coloured)
     hp-testis         → #f4f4f4      ← alternate
     hp-servi          → white        (inner .serv-vert-det is #eee)
     hp-blogs          → #f4f4f4      ← replace barely-visible #FAFAFA
     hp-postsi         → white
     hp-casestudy      → #00267a      (dark navy — unchanged)        */

#hp_logos   { background-color: #f4f4f4 !important; }
#hp-testis  { background-color: #f4f4f4 !important; }
#hp-blogs   { background-color: #f4f4f4 !important; }  /* was #FAFAFA inline style */

/* Ensure white sections are explicitly white so no bleed-over */
#home-anim-banner,
.strategies-sec,
#hp-plan,
#hp-servi,
#hp-postsi {
  background-color: #ffffff !important;
}

/* ── 11. Homepage section vertical padding ──────────────────────
   Every .hp-sec section on the homepage has a different padding
   class (.padding-tb-3/4/5, .pb-6, inline style, or none).
   Normalise to 80px top + bottom on desktop, scaling down on
   smaller viewports.  Horizontal padding is left to each section's
   inner .container/.container-fluid so Bootstrap gutters are kept.

   #hp-casestudy has  section#hp-casestudy { padding:5% !important }
   (specificity 0,1,1).  We match that selector so our later-loaded
   file wins at equal specificity.                                  */

.hp-sec.common-class,
.strategies-sec.common-class {
  padding-top:    80px !important;
  padding-bottom: 80px !important;
}

section#hp-casestudy {
  padding-top:    80px !important;
  padding-bottom: 80px !important;
}

/* Hero banner sits above the fold — slightly less vertical padding */
section#home-anim-banner {
  padding-top:    60px !important;
  padding-bottom: 60px !important;
}

/* ── 12. Homepage section content overrides ─────────────────────
   Several headings in template-home.php use inline style=""
   attributes.  The !important here wins over inline styles and
   pulls those sizes into the design system.                      */

/* Section label heading (.hp-section-heading) — used on h3 ("Blog") and h5 ("Newsroom")
   Normalize to a consistent section-title size regardless of heading level. */
.hp-section-heading {
  font-size:   var(--t-lg)        !important;  /* 22px — section label */
  font-weight: var(--wt-semibold) !important;
  letter-spacing: 0.01em;
}

/* hp-plan nav tiles — h2.lxd gets .lxd=40px which is huge in a 5-col grid.
   These are compact clickable tiles, not page headlines. */
#hp-plan h2.lxd {
  font-size:   1.25rem            !important;  /* 20px — compact tile label */
  font-weight: var(--wt-bold)     !important;
  line-height: var(--lh-snug)     !important;
  letter-spacing: 0;
}

/* "Our Services" eyebrow label — h4.lxd, but .lxd=40px > h4=22px
   creating an inverted hierarchy. Correct the eyebrow to be small. */
#hp-servi h4.lxd {
  font-size:   0.8125rem          !important;  /* 13px — eyebrow/kicker label */
  font-weight: var(--wt-semibold) !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.5 !important;
}

/* "Awards and Recognition" cards — markup uses `<h3/h4 class="awd_desc lxd">`,
   so .lxd forces 40px, blowing each award title onto 3 lines and outside the
   yellow card. Cap to ~20px so titles read like card labels, not page heroes. */
.awrds-cont .awd_desc,
.awrds-cont .awd_desc.lxd {
  font-size:   1.25rem            !important;  /* 20px */
  font-weight: var(--wt-bold)     !important;
  line-height: 1.3                !important;
  letter-spacing: 0               !important;
  margin: 0 0 8px                 !important;
}

/* Video Testimonials block (`#page-anim-banner`) — dark-blue section used
   on the pkcpromis-style landing pages. Without overrides, the global h3
   rule makes each name render at hero-banner size and the .ytp-img wrappers
   render at their natural aspect ratios → uneven card heights. Lock the
   typography + thumbnail aspect ratio so the section reads as a clean grid. */
#page-anim-banner { padding: 50px 0 60px; }
#page-anim-banner .casestudy-ttl { margin-bottom: 30px; }
#page-anim-banner .casestudy-ttl h2 {
  font-size: 1.875rem            !important;  /* 30px section heading */
  font-weight: var(--wt-bold)    !important;
  letter-spacing: 0              !important;
  color: #fff;
  margin: 14px 0 0               !important;
}
#page-anim-banner .pgb { row-gap: 32px; justify-content: center; }
#page-anim-banner .yt-links {
  display: block;
  color: #fff !important;
  text-decoration: none !important;
  background: rgba(255,255,255,0.04);
  border-radius: 12px;
  padding: 14px 14px 18px;
  height: 100%;
  transition: background .2s ease, transform .2s ease;
}
#page-anim-banner .yt-links:hover {
  background: rgba(255,255,255,0.08);
  transform: translateY(-3px);
}
#page-anim-banner .ytp-img {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
  background: #000;
  margin-bottom: 14px;
}
#page-anim-banner .ytp-img img,
#page-anim-banner .ytp-img .card-img-top {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Centered play-button overlay (CSS-only, no extra markup needed). */
#page-anim-banner .ytp-img::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 50%;
  border: 2px solid #fff;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'><polygon points='8,5 19,12 8,19'/></svg>")
    center / 22px 22px no-repeat;
  pointer-events: none;
  opacity: 0.95;
  transition: transform .2s ease, opacity .2s ease;
}
#page-anim-banner .yt-links:hover .ytp-img::after {
  transform: scale(1.08);
  opacity: 1;
}
#page-anim-banner .yt-links h3 {
  font-size: 1.0625rem           !important;  /* 17px name */
  font-weight: var(--wt-bold)    !important;
  line-height: 1.35              !important;
  letter-spacing: 0              !important;
  color: #fff                    !important;
  margin: 0 0 6px                !important;
}
#page-anim-banner .yt-links p {
  font-size: 0.875rem;                          /* 14px role/company */
  line-height: 1.45;
  color: rgba(255,255,255,0.78);
  margin: 0;
}
@media (max-width: 575px) {
  #page-anim-banner { padding: 40px 0 48px; }
  #page-anim-banner .casestudy-ttl h2 { font-size: 1.5rem !important; }
  #page-anim-banner .yt-links h3 { font-size: 1rem !important; }
}

/* ── Single Blog Post (single.php + template-parts/content.php) ─────
   Three-column layout: TOC sidebar | article | sticky Zoho form.
   Tightens typography, polishes sidebars, modernises the CTA banner,
   post navigation and related-posts grid. Many !importants because
   style.css has aggressive blanket rules (e.g. body.single-post h1
   { 36px !important }) and `.entry-title { font-size: 2.4em }`. */
body.single-post .container-fluid.my-5 { background: #f6f8fb !important; padding: 32px 0 56px; margin: 0 !important; }
body.single-post .row.padding-both { max-width: 1320px; margin: 0 auto; }
body.single-post .sitemein article,
body.single-post .site-main > article {
  background: #fff                          !important;
  border: 1px solid #eef1f7                 !important;
  border-radius: 14px                       !important;
  padding: 32px                             !important;
  box-shadow: 0 6px 24px rgba(0, 38, 122, 0.06) !important;
}
body.single-post .sitemein .wp-post-image,
body.single-post article .wp-post-image,
body.single-post .post-thumbnail img {
  width: 100%                               !important;
  height: auto                              !important;
  border-radius: 10px                       !important;
  margin: 0 0 22px                          !important;
  display: block;
}

/* Entry header */
body.single-post .entry-header {
  margin: 0 0 22px                          !important;
  padding: 0 0 20px                         !important;
  border-bottom: 1px solid #eef1f7          !important;
  text-align: left                          !important;
}
body.single-post .entry-header .entry-title {
  font-size: 2rem                           !important;   /* 32px */
  font-weight: 800                          !important;
  line-height: 1.2                          !important;
  letter-spacing: 0                         !important;
  color: #0d1937                            !important;
  margin: 0 0 12px                          !important;
  padding: 0                                !important;
  font-family: 'Poppins', sans-serif        !important;
  text-transform: none                      !important;
}
body.single-post .entry-meta {
  text-transform: none                      !important;
  font-size: 0.875rem                       !important;
  color: #5a6072                            !important;
}
body.single-post .entry-meta .posted-on {
  font-size: 0.875rem                       !important;
  color: #5a6072                            !important;
  display: inline-flex                      !important;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  text-transform: none                      !important;
  background: #f9fafd;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid #eef1f7;
}
body.single-post .entry-meta .posted-on time { color: #1f2a44 !important; font-weight: 600 !important; }
body.single-post .entry-meta .posted-on img { vertical-align: middle; margin-right: 4px; height: 16px; width: auto; }

/* Entry content typography */
body.single-post .entry-content {
  font-size: 1rem                          !important;
  line-height: 1.75                        !important;
  color: #2c2f36                           !important;
  font-family: 'Poppins', sans-serif       !important;
}
body.single-post .entry-content p { margin: 0 0 16px !important; font-size: 1rem !important; }
body.single-post .entry-content a { color: #1a4cd0; text-decoration: underline; text-decoration-color: rgba(26, 76, 208, 0.35); text-underline-offset: 3px; }
body.single-post .entry-content a:hover { color: #00267a; text-decoration-color: currentColor; }
body.single-post .entry-content h2 {
  font-size: 1.5rem             !important;   /* 24px */
  font-weight: 700              !important;
  color: #0d1937;
  line-height: 1.3              !important;
  letter-spacing: 0             !important;
  margin: 32px 0 12px           !important;
  scroll-margin-top: 100px;                   /* clears sticky header on TOC jumps */
}
body.single-post .entry-content h3 {
  font-size: 1.25rem            !important;   /* 20px */
  font-weight: 700              !important;
  color: #1f2a44;
  line-height: 1.35             !important;
  letter-spacing: 0             !important;
  margin: 24px 0 10px           !important;
  scroll-margin-top: 100px;
}
body.single-post .entry-content h4 {
  font-size: 1.0625rem          !important;
  font-weight: 700              !important;
  color: #1f2a44;
  line-height: 1.4              !important;
  letter-spacing: 0             !important;
  margin: 20px 0 8px            !important;
}
body.single-post .entry-content ul,
body.single-post .entry-content ol { padding-left: 22px; margin: 0 0 18px; }
body.single-post .entry-content li { margin-bottom: 8px; font-weight: 400 !important; }
body.single-post .entry-content li strong { color: #1f2a44; }
body.single-post .entry-content blockquote {
  border-left: 4px solid #f2c433;
  background: #fff8e1;
  padding: 18px 22px;
  border-radius: 0 8px 8px 0;
  margin: 22px 0;
  font-style: italic;
  color: #3a3f4d;
}
body.single-post .entry-content img,
body.single-post .entry-content figure img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
  margin: 18px auto;
}
body.single-post .entry-content figure { margin: 18px 0; }
body.single-post .entry-content figcaption {
  text-align: center;
  font-size: 0.8125rem;
  color: #6b7280;
  margin-top: 6px;
}
body.single-post .entry-content table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 0.9375rem; }
body.single-post .entry-content table th,
body.single-post .entry-content table td { padding: 10px 12px; border: 1px solid #e5e9f2; text-align: left; }
body.single-post .entry-content table th { background: #f6f8fb; font-weight: 700; color: #1f2a44; }
body.single-post .entry-content code {
  background: #f5f7fb;
  border: 1px solid #eef1f7;
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 0.875rem;
  color: #1f2a44;
}

/* ── Left sidebar: TOC (.sticky-lefts) ── */
body.single-post .sticky-lefts {
  background: #fff;
  border: 1px solid #eef1f7;
  border-radius: 12px;
  padding: 18px 16px;
  box-shadow: 0 4px 14px rgba(0, 38, 122, 0.05);
}
body.single-post .sticky-lefts p { text-align: left !important; color: #1f2a44 !important; margin: 0 !important; }
body.single-post .sticky-lefts .ez-toc-title-container { display: none; }
body.single-post .sticky-lefts nav.ez-toc-container { padding: 0; background: transparent; border: 0; }
body.single-post .sticky-lefts ul.ez-toc-list { list-style: none; padding: 0; margin: 0; }
body.single-post .sticky-lefts ul.ez-toc-list li { font-size: 0.875rem !important; margin: 0 !important; padding: 2px 0; }
body.single-post .sticky-lefts ul.ez-toc-list ul { padding-left: 16px; }
body.single-post .sticky-lefts a.ez-toc-link {
  display: block;
  padding: 6px 10px;
  border-radius: 6px;
  color: #4a505d !important;
  text-decoration: none !important;
  border-left: 3px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
body.single-post .sticky-lefts a.ez-toc-link:hover { background: #fff8e1; color: #00267a !important; }
body.single-post .sticky-lefts a.ez-toc-link.active {
  background: rgba(0, 38, 122, 0.06);
  color: #00267a !important;
  font-weight: 600;
  border-left-color: #f2c433;
}

/* ── #post-signup CTA banner ── */
body.single-post #post-signup {
  background: linear-gradient(135deg, #00267a 0%, #1438a6 100%) !important;
  border-radius: 14px;
  padding: 0 !important;
  margin: 32px 0;
  overflow: hidden;
  box-shadow: 0 14px 30px rgba(0, 38, 122, 0.18);
}
body.single-post #post-signup .pg-serv-sucont { margin: 0; }
body.single-post #post-signup .pg-serv-suttl {
  padding: 26px 30px !important;
  color: #fff;
}
body.single-post #post-signup .pg-serv-suttl h2 {
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  color: #fff !important;
  margin: 0 0 8px !important;
  letter-spacing: 0 !important;
}
body.single-post #post-signup .pg-serv-suttl p {
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 4px;
}
body.single-post #post-signup .pg-serv-suttl p a {
  color: #f2c433 !important;
  font-weight: 700;
  text-decoration: none;
}
body.single-post #post-signup a.frm-mdl-lnk.popfrm {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  height: auto !important;
  padding: 22px 28px !important;
  background: #f2c433;
  color: #1f2a44 !important;
  font-weight: 700;
  font-size: 1.0625rem;
  text-decoration: none;
  transition: background .15s ease;
}
body.single-post #post-signup a.frm-mdl-lnk.popfrm span { padding: 0 !important; }
body.single-post #post-signup a.frm-mdl-lnk.popfrm:hover { background: #ffd84a; }
body.single-post #post-signup a.frm-mdl-lnk.popfrm .arr_svg { width: 28px; height: 28px; flex-shrink: 0; }
body.single-post #post-signup a.frm-mdl-lnk.popfrm .arr_svg svg { width: 100%; height: auto; fill: #1f2a44; transition: transform .15s ease; }
body.single-post #post-signup a.frm-mdl-lnk.popfrm:hover .arr_svg svg { transform: translateX(4px); }

/* ── Post navigation (Previous / Next blog post) ── */
body.single-post .post-navigation { margin: 32px 0; }
body.single-post .post-navigation .nav-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
body.single-post .post-navigation a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid #e5e9f2;
  border-radius: 10px;
  color: #1f2a44 !important;
  text-decoration: none !important;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
body.single-post .post-navigation a:hover {
  border-color: rgba(0, 38, 122, 0.25);
  box-shadow: 0 8px 18px rgba(0, 38, 122, 0.08);
  transform: translateY(-2px);
}
body.single-post .post-navigation .nav-subtitle {
  font-size: 0.75rem;
  font-weight: 600;
  color: #00267a;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
body.single-post .post-navigation .nav-next { text-align: right; }

/* ── YARPP Related posts ── */
body.single-post .yarpp-related,
body.single-post .yarpp-thumbnails-horizontal {
  margin: 32px 0;
  padding: 22px 0 0;
  border-top: 1px solid #eef1f7;
}
body.single-post .yarpp-related h3 {
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  color: #0d1937 !important;
  margin: 0 0 16px !important;
}
body.single-post .yarpp-thumbnails-horizontal .yarpp-thumbnail {
  display: inline-block;
  vertical-align: top;
  width: calc(33.333% - 12px);
  margin: 0 12px 16px 0;
  background: #fff;
  border: 1px solid #e5e9f2;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none !important;
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
body.single-post .yarpp-thumbnails-horizontal .yarpp-thumbnail:hover {
  border-color: rgba(0, 38, 122, 0.18);
  box-shadow: 0 10px 22px rgba(0, 38, 122, 0.10);
  transform: translateY(-2px);
}
body.single-post .yarpp-thumbnails-horizontal img {
  width: 100% !important;
  height: 140px !important;
  object-fit: cover;
  display: block;
}
body.single-post .yarpp-thumbnails-horizontal .yarpp-thumbnail-title {
  display: block !important;
  padding: 12px 14px 14px;
  font-size: 0.9375rem !important;
  font-weight: 700;
  color: #1f2a44 !important;
  line-height: 1.4;
}

/* ── Right sidebar Zoho form (.cform sticky) ── */
body.single-post .pb-r-40 .cform {
  background: #fff !important;
  border: 1px solid #e5e9f2;
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0, 38, 122, 0.08);
}
body.single-post .pb-r-40 #crmWebToEntityForm {
  background: #fff !important;
  padding: 22px !important;
}
body.single-post .pb-r-40 .zcwf_title {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #1f2a44 !important;
  font-family: inherit !important;
  padding: 0 0 14px !important;
  border-bottom: 1px solid #eef1f7;
  margin-bottom: 16px !important;
  line-height: 1.4;
}
body.single-post .pb-r-40 .zcwf_title a { color: #00267a !important; font-weight: 700; }
body.single-post .pb-r-40 .zcwf_row {
  display: flex !important;
  flex-direction: column !important;
  margin: 0 0 12px !important;
  overflow: visible !important;
}
body.single-post .pb-r-40 .zcwf_col_lab {
  width: 100% !important;
  float: none !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
  font-size: 0.8125rem !important;
  font-weight: 600;
  color: #4a505d !important;
  font-family: inherit !important;
}
body.single-post .pb-r-40 .zcwf_col_fld {
  width: 100% !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
  color: inherit !important;
}
body.single-post .pb-r-40 .zcwf_col_fld input[type=text],
body.single-post .pb-r-40 .zcwf_col_fld input[type=email],
body.single-post .pb-r-40 .zcwf_col_fld input[type=tel],
body.single-post .pb-r-40 .zcwf_col_fld textarea,
body.single-post .pb-r-40 .zcwf_col_fld_slt {
  width: 100% !important;
  background: #f9fafd !important;
  border: 1px solid #d6dce8 !important;
  border-radius: 8px !important;
  padding: 9px 12px !important;
  font-size: 0.9375rem !important;
  font-family: inherit !important;
  color: #1f2a44 !important;
  float: none !important;
  margin: 0 !important;
  height: auto !important;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
body.single-post .pb-r-40 .zcwf_col_fld input:focus,
body.single-post .pb-r-40 .zcwf_col_fld textarea:focus,
body.single-post .pb-r-40 .zcwf_col_fld_slt:focus {
  outline: none !important;
  background: #fff !important;
  border-color: #00267a !important;
  box-shadow: 0 0 0 3px rgba(0, 38, 122, 0.12) !important;
}
body.single-post .pb-r-40 .zcwf_button,
body.single-post .pb-r-40 input[type=submit],
body.single-post .pb-r-40 input[type=reset] {
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  padding: 10px 22px !important;
  border-radius: 8px !important;
  border: 0 !important;
  cursor: pointer;
  margin: 4px 4px 0 0 !important;
  transition: background .15s ease, transform .15s ease;
}
body.single-post .pb-r-40 input[type=submit] {
  background: #f2c433 !important;
  color: #1f2a44 !important;
  box-shadow: 0 6px 14px rgba(242, 196, 51, 0.30);
  max-width: none !important;
}
body.single-post .pb-r-40 input[type=submit]:hover { background: #ffd84a !important; transform: translateY(-1px); }
body.single-post .pb-r-40 input[type=reset] {
  background: #fff !important;
  color: #00267a !important;
  border: 1px solid #d0d7e3 !important;
}

@media (max-width: 991px) {
  body.single-post .post-navigation .nav-links { grid-template-columns: 1fr; }
  body.single-post .yarpp-thumbnails-horizontal .yarpp-thumbnail { width: calc(50% - 8px); }
  body.single-post #post-signup .pg-serv-sucont > [class*="col-"] { padding: 0; }
}
@media (max-width: 575px) {
  body.single-post .sitemein article,
  body.single-post .site-main > article { padding: 20px 18px; border-radius: 10px; }
  body.single-post .entry-header .entry-title { font-size: 1.625rem !important; }
  body.single-post .entry-content h2 { font-size: 1.25rem !important; }
  body.single-post .entry-content h3 { font-size: 1.0625rem !important; }
  body.single-post .yarpp-thumbnails-horizontal .yarpp-thumbnail { width: 100%; margin-right: 0; }
}

/* ── Generic "How PKC can help you" banner (.pg-serv-sucont) ─────────
   Used on the homepage and several service/landing templates. The
   default `.frm-mdl-lnk` from style.css is a flex bar that fills its
   column edge-to-edge with a 1.5em font and a 160px arrow — looks
   like a billboard, not a CTA. Wrap the row in a navy gradient card
   and contain the button so it reads like an action, not a banner.    */
.pg-serv-sucont {
    display: flex                       !important;
    flex-wrap: wrap                     !important;
    align-items: center                 !important;
    background: linear-gradient(135deg, #00267a 0%, #1438a6 100%);
    border-radius: 14px;
    padding: 24px 32px;
    margin: 32px 0;
    box-shadow: 0 14px 30px rgba(0, 38, 122, 0.18);
    gap: 18px;
}
.pg-serv-sucont > [class*="col-"] { padding: 0 !important; }
.pg-serv-sucont .pg-serv-suttl,
.pg-serv-sucont .col-md-6:first-child,
.pg-serv-sucont .align-cen-padd-0 {
    flex: 1 1 auto;
    color: #fff !important;
    min-width: 0;
}
.pg-serv-sucont .hp-section-heading,
.pg-serv-sucont h2,
.pg-serv-sucont h5 {
    font-size: 1.5rem                  !important;   /* 24px */
    font-weight: 800                   !important;
    color: #fff                        !important;
    margin: 0 0 6px                    !important;
    line-height: 1.25                  !important;
    letter-spacing: 0                  !important;
    text-transform: none               !important;
    font-family: 'Poppins', sans-serif !important;
    border: 0                          !important;
    padding: 0                         !important;
}
.pg-serv-sucont .hp-section-subheading,
.pg-serv-sucont p {
    font-size: 0.9375rem               !important;   /* 15px */
    color: rgba(255, 255, 255, 0.88)   !important;
    margin: 0                          !important;
    line-height: 1.55                  !important;
    font-family: 'Poppins', sans-serif !important;
}
/* Contain the CTA — was a full-width slab, now an inline pill button.
   This catches the homepage instance which doesn't have `.popfrm`.    */
.pg-serv-sucont a.frm-mdl-lnk {
    display: inline-flex               !important;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: auto                        !important;
    height: auto                       !important;
    flex: 0 0 auto                     !important;
    background: #f2c433                !important;
    color: #1f2a44                     !important;
    padding: 14px 26px                 !important;
    font-size: 1rem                    !important;
    font-weight: 700                   !important;
    line-height: 1.3                   !important;
    border-radius: 8px                 !important;
    text-decoration: none              !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.20);
    transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
    white-space: nowrap;
    font-family: 'Poppins', sans-serif !important;
    margin: 0                          !important;
}
.pg-serv-sucont a.frm-mdl-lnk:hover {
    background: #ffd84a                !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.24);
}
.pg-serv-sucont a.frm-mdl-lnk > span:first-child {
    padding: 0                         !important;
    margin: 0                          !important;
    color: inherit                     !important;
}
/* Defeat style.css `.arr_svg { width: 160px; background: white on hover }` */
.pg-serv-sucont a.frm-mdl-lnk .arr_svg,
.pg-serv-sucont a.frm-mdl-lnk:hover .arr_svg {
    width: 22px                        !important;
    height: 22px                       !important;
    padding: 0                         !important;
    background: transparent            !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform .15s ease;
}
.pg-serv-sucont a.frm-mdl-lnk:hover .arr_svg { transform: translateX(4px); }
.pg-serv-sucont a.frm-mdl-lnk .arr_svg svg {
    width: 22px                        !important;
    height: 22px                       !important;
    margin: 0                          !important;
    display: block;
}
.pg-serv-sucont a.frm-mdl-lnk .arr_svg svg path,
.pg-serv-sucont a.frm-mdl-lnk:hover .arr_svg svg path {
    fill: #1f2a44                      !important;
}
.pg-serv-sucont .col-md-6:last-child,
.pg-serv-sucont .col-12.col-md-6:last-child {
    flex: 0 0 auto                     !important;
    width: auto                        !important;
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 575px) {
    .pg-serv-sucont { padding: 20px 22px; flex-direction: column; align-items: stretch !important; }
    .pg-serv-sucont .hp-section-heading,
    .pg-serv-sucont h2,
    .pg-serv-sucont h5 { font-size: 1.25rem !important; }
    .pg-serv-sucont .col-md-6:last-child { width: 100% !important; justify-content: stretch; }
    .pg-serv-sucont a.frm-mdl-lnk { width: 100% !important; padding: 12px 22px !important; font-size: 0.9375rem !important; }
}

/* ── "Get a call back in 2 hours" popup modal (#popfrmModal) ────────
   Used across ~30+ templates with a Zoho CRM web-to-lead form. The
   default Zoho styles use left-floated labels, ALL-CAPS small fonts
   and unstyled buttons. Modernise into a clean stacked form with
   proper input styling + primary/secondary action buttons.            */
#popfrmModal .modal-dialog {
  max-width: 480px              !important;
  margin: 1.75rem auto;
}
#popfrmModal .modal-content {
  background: #00267a            !important;
  border: 0;
  border-radius: 16px            !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
#popfrmModal .modal-header {
  background: #00267a            !important;
  color: #f2c433                 !important;
  border: 0                      !important;
  padding: 24px 28px 6px         !important;
  max-width: none                !important;
  margin: 0                      !important;
  position: relative;
  display: block;
}
#popfrmModal #popfrmModalLabel {
  font-size: 1.5rem              !important;
  font-weight: 700               !important;
  line-height: 1.25              !important;
  letter-spacing: 0              !important;
  color: #f2c433                 !important;
  font-family: 'Poppins', sans-serif !important;
  text-align: center             !important;
  margin: 0                      !important;
}
#popfrmModal .modal-header .close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 32px;
  height: 32px;
  font-size: 22px                !important;
  font-weight: 300               !important;
  color: #fff                    !important;
  opacity: 0.7;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  text-shadow: none;
  transition: background .15s ease, opacity .15s ease;
}
#popfrmModal .modal-header .close:hover {
  opacity: 1;
  background: rgba(242, 196, 51, 0.20);
}

#popfrmModal .modal-body {
  background: #00267a            !important;
  padding: 18px 28px 24px        !important;
}

/* Zoho form: stack labels above inputs, full-width inputs */
#popfrmModal .zcwf_lblLeft.callback,
#popfrmModal #crmWebToEntityForm {
  color: #fff                    !important;
  max-width: none                !important;
  width: 100%                    !important;
  padding: 0                     !important;
  margin: 0                      !important;
}
#popfrmModal .zcwf_row {
  display: flex                  !important;
  flex-direction: column         !important;
  margin: 0 0 14px               !important;
  overflow: visible              !important;
}
#popfrmModal .zcwf_row::after,
#popfrmModal .zcwf_col_fld.callback::after { display: none !important; }
#popfrmModal .zcwf_col_lab.callback,
#popfrmModal .zcwf_lblLeft .zcwf_col_lab {
  width: 100%                    !important;
  float: none                    !important;
  margin: 0 0 6px                !important;
  padding: 0                     !important;
  font-size: 0.875rem            !important;
  font-weight: 600               !important;
  color: rgba(255, 255, 255, 0.92) !important;
  line-height: 1.3               !important;
}
#popfrmModal .zcwf_col_fld.callback,
#popfrmModal .zcwf_lblLeft .zcwf_col_fld {
  width: 100%                    !important;
  float: none                    !important;
  padding: 0                     !important;
  margin: 0                      !important;
}
#popfrmModal .zcwf_col_fld input[type=text],
#popfrmModal .zcwf_col_fld input[type=email],
#popfrmModal .zcwf_col_fld input[type=tel],
#popfrmModal .zcwf_col_fld textarea,
#popfrmModal .zcwf_col_fld_slt {
  width: 100%                    !important;
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
  border-radius: 8px             !important;
  font-size: 0.9375rem           !important;
  font-family: inherit           !important;
  color: #1f2a44                 !important;
  padding: 11px 14px             !important;
  float: none                    !important;
  margin: 0                      !important;
  height: auto                   !important;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
#popfrmModal .zcwf_col_fld input:focus,
#popfrmModal .zcwf_col_fld textarea:focus,
#popfrmModal .zcwf_col_fld_slt:focus {
  outline: none                  !important;
  background: #fff               !important;
  border-color: #f2c433          !important;
  box-shadow: 0 0 0 3px rgba(242, 196, 51, 0.30) !important;
}

/* Required-field star */
#popfrmModal .zcwf_col_lab em,
#popfrmModal em {
  color: #ff7a7a                 !important;
  margin-left: 2px;
  font-style: normal;
  font-weight: 600;
}

/* Action buttons row */
#popfrmModal .zcwf_button,
#popfrmModal input[type=submit],
#popfrmModal input[type=reset] {
  display: inline-block          !important;
  font-size: 0.9375rem           !important;
  font-weight: 700               !important;
  padding: 11px 28px             !important;
  border-radius: 8px             !important;
  border: 0                      !important;
  cursor: pointer;
  letter-spacing: 0.02em;
  margin: 6px 6px 0 0            !important;
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
  min-width: 110px;
}
#popfrmModal input[type=submit] {
  background: #f2c433            !important;
  color: #1f2a44                 !important;
  box-shadow: 0 6px 18px rgba(242, 196, 51, 0.35);
}
#popfrmModal input[type=submit]:hover {
  background: #ffd84a            !important;
  transform: translateY(-2px);
}
#popfrmModal input[type=reset] {
  background: rgba(255, 255, 255, 0.10) !important;
  color: #fff                    !important;
  border: 1px solid rgba(255, 255, 255, 0.30) !important;
}
#popfrmModal input[type=reset]:hover {
  background: rgba(255, 255, 255, 0.18) !important;
}

/* "or Call us on …" footer line */
#popfrmModal .modal-body > div:last-child p,
#popfrmModal .modal-body p[style*="f2c433"] {
  color: #f2c433                 !important;
  font-size: 0.9375rem           !important;
  font-weight: 500               !important;
  text-align: center             !important;
  margin: 18px 0 0               !important;
  padding: 14px 0 0              !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

@media (max-width: 575px) {
  #popfrmModal .modal-dialog { max-width: calc(100% - 24px); margin: 12px auto; }
  #popfrmModal .modal-header { padding: 20px 22px 4px !important; }
  #popfrmModal .modal-body   { padding: 16px 22px 22px !important; }
  #popfrmModal #popfrmModalLabel { font-size: 1.25rem !important; }
}

/* ── Single Publication: "20 Game Changing Retail Strategies" (id 12928)
   The page is raw Gutenberg content (2 cover figures + headings + paras
   + 3 buy links). A `the_content` filter (inc/publication-page.php) wraps
   the figures into a `.pkc-pub-slider` and the rest into a `.pkc-pub-info`
   container so we can do a proper 2-column product layout with a swipe-
   able book-cover slider.                                                */
body.page-id-12928 .entry-header > .entry-title { display: none; }
body.page-id-12928 .pkc-pub-page {
  display: grid;
  grid-template-columns: minmax(260px, 380px) 1fr;
  gap: 48px;
  align-items: start;
  max-width: 1100px;
  margin: 48px auto 64px;
  padding: 0 16px;
}

/* ── Cover slider ── */
.pkc-pub-slider {
  position: relative;
  background: #f5f7fb;
  border: 1px solid #eef1f7;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0, 38, 122, 0.08);
}
.pkc-pub-slider-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.pkc-pub-slider-track::-webkit-scrollbar { display: none; }
.pkc-pub-slider-track figure {
  flex: 0 0 100%;
  margin: 0;
  scroll-snap-align: start;
}
.pkc-pub-slider-track figure img {
  width: 100%;
  height: auto;
  display: block;
}
.pkc-pub-slider-btn {
  position: absolute;
  padding:0;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #e5e9f2;
  color: #00267a;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 38, 122, 0.15);
  z-index: 2;
  transition: background .15s ease, transform .15s ease;
}
.pkc-pub-slider-btn:hover { background: #fff8e1; transform: translateY(-50%) scale(1.05); }
.pkc-pub-slider-btn[data-dir="prev"] { left: 12px; }
.pkc-pub-slider-btn[data-dir="next"] { right: 12px; }
.pkc-pub-slider-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 2;
}
.pkc-pub-slider-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(0, 38, 122, 0.25);
  cursor: pointer;
  padding: 0;
  transition: background .15s ease, transform .15s ease;
}
.pkc-pub-slider-dot.is-active { background: #00267a; border-color: #00267a; transform: scale(1.15); }

/* ── Info column ── */
.pkc-pub-info { display: flex; flex-direction: column; gap: 0; }
.pkc-pub-info h1 {
  font-size: 2.25rem            !important;
  font-weight: 800              !important;
  color: #0d1937;
  line-height: 1.15             !important;
  margin: 0 0 6px               !important;
  letter-spacing: 0             !important;
}
.pkc-pub-info h1 + h2 {
  font-size: 1.125rem           !important;
  font-weight: 500              !important;
  color: #5a6072                !important;
  font-style: italic;
  margin: 0 0 22px              !important;
  letter-spacing: 0             !important;
  border: 0                     !important;
  text-transform: none          !important;
}
.pkc-pub-info h2 {
  font-size: 0.8125rem          !important;
  font-weight: 700              !important;
  text-transform: uppercase;
  letter-spacing: 0.08em        !important;
  color: #8c8f94                !important;
  margin: 18px 0 8px            !important;
  border: 0                     !important;
}
/* Price (the last h2 — "₹450.00") gets a prominent style */
.pkc-pub-info .pkc-pub-price {
  font-size: 2rem               !important;
  font-weight: 800              !important;
  color: #00267a               !important;
  text-transform: none          !important;
  letter-spacing: 0             !important;
  margin: 22px 0 4px            !important;
  font-style: normal            !important;
}
.pkc-pub-info p {
  font-size: 1rem;
  line-height: 1.6;
  color: #3a3f4d;
  margin: 0 0 10px;
}
.pkc-pub-info p:last-of-type { margin-bottom: 0; }

/* Buy CTAs row */
.pkc-pub-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 0;
}
.pkc-pub-cta-row a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  font-weight: 700;
  font-size: 0.9375rem;
  border-radius: 8px;
  text-decoration: none         !important;
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.pkc-pub-cta-row a[href*="amazon"] {
  background: #f2c433;
  color: #1f2a44               !important;
  border: 1px solid #e6b71f;
  box-shadow: 0 4px 12px rgba(242, 196, 51, 0.30);
}
.pkc-pub-cta-row a[href*="flipkart"],
.pkc-pub-cta-row a[href*="notionpress"] {
  background: #fff;
  color: #00267a               !important;
  border: 1px solid #d0d7e3;
  box-shadow: 0 4px 12px rgba(0, 38, 122, 0.08);
}
.pkc-pub-cta-row a:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0, 38, 122, 0.15); }
.pkc-pub-cta-row a[href*="amazon"]:hover { background: #ffd84a; }
.pkc-pub-cta-row a[href*="flipkart"]:hover,
.pkc-pub-cta-row a[href*="notionpress"]:hover { background: #fff8e1; border-color: #f2c433; }

@media (max-width: 767px) {
  body.page-id-12928 .pkc-pub-page {
    grid-template-columns: 1fr;
    gap: 24px;
    margin: 32px auto 48px;
  }
  .pkc-pub-info h1 { font-size: 1.75rem !important; }
  .pkc-pub-info .pkc-pub-price { font-size: 1.625rem !important; }
}

/* ── Press Releases / Publications page (template-press-realse.php) ──
   The template renders 9 cards per page from the `pkc-press_releases`
   CPT in a Bootstrap col-md-4 grid. The default archive partial wraps
   each in `.archive-post > article > thumbnail + h3 .entry-title`, and
   the template ships with an inline rule (`border-bottom: 2px solid
   #212529`) that gives every card a heavy black baseline — looks dated
   and the card titles inherit the global `h3 { 28px !important }` rule.
   Modernise the whole grid.                                             */
body.page-template-template-press-realse-php .site-main {
  padding-top: 56px;
  padding-bottom: 64px;
}
body.page-template-template-press-realse-php .site-main header > .page-title {
  font-size: 1.875rem            !important;   /* 30px H1 */
  font-weight: 700               !important;
  line-height: 1.25              !important;
  letter-spacing: 0              !important;
  color: #0d1937;
  text-align: center;
  margin: 0 auto 36px            !important;
  max-width: 820px;
}
body.page-template-template-press-realse-php .archive-post {
  background: #fff;
  border: 1px solid #e5e9f2     !important;
  border-bottom-color: #e5e9f2  !important;   /* override inline 2px black */
  border-radius: 12px;
  overflow: hidden;
  height: 100%;
  box-shadow: 0 4px 14px rgba(0, 38, 122, 0.05);
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
  margin-bottom: 28px           !important;
}
body.page-template-template-press-realse-php .archive-post:hover {
  border-color: rgba(0, 38, 122, 0.18) !important;
  box-shadow: 0 14px 30px rgba(0, 38, 122, 0.12);
  transform: translateY(-3px);
}
body.page-template-template-press-realse-php .archive-post article {
  display: flex;
  flex-direction: column;
  height: 100%;
}
body.page-template-template-press-realse-php .archive-post a:first-child {
  display: block;
  line-height: 0;
  overflow: hidden;
  background: #f5f7fb;
}
body.page-template-template-press-realse-php .archive-post a:first-child img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  transition: transform .25s ease;
}
body.page-template-template-press-realse-php .archive-post:hover a:first-child img {
  transform: scale(1.03);
}
body.page-template-template-press-realse-php .archive-post .entry-header {
  padding: 18px 22px 22px;
  border-top: 1px solid #eef1f7;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
body.page-template-template-press-realse-php .archive-post .entry-title {
  font-size: 1.0625rem          !important;  /* 17px */
  font-weight: 700              !important;
  line-height: 1.4              !important;
  letter-spacing: 0             !important;
  margin: 0                     !important;
  border: 0                     !important;
  padding: 0                    !important;
}
body.page-template-template-press-realse-php .archive-post .entry-title a {
  color: #1f2a44                !important;
  text-decoration: none         !important;
  display: block;
  transition: color .15s ease;
}
body.page-template-template-press-realse-php .archive-post:hover .entry-title a {
  color: #00267a                !important;
}
body.page-template-template-press-realse-php .archive-post .entry-header::after {
  content: "Read more →";
  font-size: 0.875rem;
  font-weight: 600;
  color: #00267a;
  margin-top: auto;
  transition: transform .15s ease;
}
body.page-template-template-press-realse-php .archive-post:hover .entry-header::after {
  transform: translateX(4px);
}

/* Pagination */
body.page-template-template-press-realse-php .posts-navigation,
body.page-template-template-press-realse-php .navigation.posts-navigation {
  width: 100%;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #eef1f7;
}
body.page-template-template-press-realse-php .posts-navigation .nav-links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 0.9375rem;
}
body.page-template-template-press-realse-php .posts-navigation a {
  display: inline-block;
  padding: 8px 18px;
  background: #fff;
  color: #00267a               !important;
  border: 1px solid #e5e9f2;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none        !important;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
body.page-template-template-press-realse-php .posts-navigation a:hover {
  background: #fff8e1;
  border-color: #f2c433;
  transform: translateY(-1px);
}

@media (max-width: 991px) {
  body.page-template-template-press-realse-php .archive-post a:first-child img { height: 200px; }
}
@media (max-width: 575px) {
  body.page-template-template-press-realse-php .site-main { padding-top: 36px; padding-bottom: 44px; }
  body.page-template-template-press-realse-php .site-main header > .page-title { font-size: 1.5rem !important; margin-bottom: 24px !important; }
  body.page-template-template-press-realse-php .archive-post a:first-child img { height: 180px; }
}

/* ── Testimonials page (page-id 7083 / /testimonials/) ───────────────
   Modernise the four-section layout:
     1. Page H1
     2. Featured video player (#tstpg-player .container > .row > .col-12)
     3. Video-thumbnail grid (#tstpg-player .yt-links + .ytp-img)
     4. Quote carousels (#tstpg-1 / -2 / -3 .tstmnl)
   No markup changes — only typography + card styling.                   */
/* Page-title banner: the template uses `.entry-header.pg-sec.py-1` which
   inherits a huge top/bottom padding from the global `.pg-sec` rule and
   only a 4px override from `py-1` — they fight, leaving the title with
   inconsistent gutters. Lock to a balanced 56px top / 32px bottom so the
   H1 sits a clear distance below the sticky header and a clean step
   above the first testimonial section.                                  */
body.page-template-template-testimonial-php #primary > .entry-header.pg-sec {
  padding: 56px 0 32px           !important;
  margin: 0                      !important;
  background: #f6f8fb;
  border-bottom: 1px solid #eef1f7;
}
body.page-template-template-testimonial-php #primary > .entry-header > .container,
body.page-template-template-testimonial-php #primary > .entry-header > .container-fluid {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}
body.page-template-template-testimonial-php #primary > .entry-header h1 {
  font-size: 1.875rem            !important;  /* 30px H1 */
  font-weight: 700               !important;
  line-height: 1.25             !important;
  letter-spacing: 0              !important;
  color: #0d1937;
  text-align: center;
  margin: 0 auto                 !important;
  padding: 0                     !important;
  max-width: 820px;
}
@media (max-width: 575px) {
  body.page-template-template-testimonial-php #primary > .entry-header.pg-sec { padding: 36px 0 24px !important; }
}

/* ── 2. Featured player + ── 3. Video thumb grid ── */
body.page-template-template-testimonial-php #tstpg-player { padding-top: 8px; padding-bottom: 56px; }
body.page-template-template-testimonial-php #tstpg-player > .container > .row > .col-12 .p-5 {
  border-radius: 14px;
  padding: 22px !important;
  box-shadow: 0 14px 30px rgba(0, 38, 122, 0.18);
}
body.page-template-template-testimonial-php #tstpg-player > .container > .row > .col-12 .embed-responsive {
  border-radius: 10px;
  overflow: hidden;
}
body.page-template-template-testimonial-php #tstpg-player .yt-links {
  background: #fff !important;
  border: 1px solid #e5e9f2;
  border-radius: 12px;
  padding: 0 !important;
  overflow: hidden;
  color: #1f2a44 !important;
  box-shadow: 0 4px 14px rgba(0, 38, 122, 0.05);
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
  margin: 16px auto 0 !important;
}
body.page-template-template-testimonial-php #tstpg-player .yt-links:hover {
  border-color: rgba(0, 38, 122, 0.20);
  box-shadow: 0 14px 30px rgba(0, 38, 122, 0.12);
  transform: translateY(-3px);
  color: #00267a !important;
  text-decoration: none !important;
}
body.page-template-template-testimonial-php #tstpg-player .yt-links.playin {
  border-color: #f2c433;
  box-shadow: 0 12px 24px rgba(242, 196, 51, 0.30);
  color: #00267a !important;
}
body.page-template-template-testimonial-php #tstpg-player .yt-links .ytp-img {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
  border-radius: 12px 12px 0 0;
}
body.page-template-template-testimonial-php #tstpg-player .yt-links .ytp-img img,
body.page-template-template-testimonial-php #tstpg-player .yt-links .ytp-img .card-img-top {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 1                !important;
  transition: opacity .25s ease;
}
body.page-template-template-testimonial-php #tstpg-player .yt-links.playin .ytp-img img { opacity: 0.55 !important; }
body.page-template-template-testimonial-php #tstpg-player .yt-links h3 {
  font-size: 1.0625rem      !important;   /* 17px name */
  font-weight: 700          !important;
  color: #1f2a44            !important;
  margin: 12px 16px 4px     !important;
  padding: 0                !important;
  line-height: 1.35         !important;
  letter-spacing: 0         !important;
}
body.page-template-template-testimonial-php #tstpg-player .yt-links p {
  font-size: 0.875rem;
  font-weight: 500;
  color: #5a6072;
  margin: 0 16px 14px !important;
  padding: 0 !important;
  line-height: 1.4;
}
/* Default 16x16 play icon → larger 64×64 white circle */
body.page-template-template-testimonial-php #tstpg-player .yt-links .ytp-img::before {
  background-image: none !important;
  background: rgba(0, 38, 122, 0.55);
  width: 100%;
  height: 100%;
  transition: background .2s ease;
}
body.page-template-template-testimonial-php #tstpg-player .yt-links .ytp-img::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 56px; height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 50%;
  border: 2px solid #fff;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'><polygon points='8,5 19,12 8,19'/></svg>")
    center / 22px 22px no-repeat,
    rgba(0, 0, 0, 0.45);
  z-index: 10;
  pointer-events: none;
  transition: transform .2s ease, opacity .2s ease;
  opacity: 0.95;
}
body.page-template-template-testimonial-php #tstpg-player .yt-links:hover .ytp-img::before { background: rgba(0, 38, 122, 0.35); }
body.page-template-template-testimonial-php #tstpg-player .yt-links:hover .ytp-img::after { transform: scale(1.08); opacity: 1; }
body.page-template-template-testimonial-php #tstpg-player .yt-links.playin .ytp-img::after { opacity: 0; }

/* ── 4. Quote carousels (#tstpg-1 / -2 / -3) ── */
body.page-template-template-testimonial-php [id^="tstpg-"]:not(#tstpg-player) {
  padding: 56px 0;
}
body.page-template-template-testimonial-php .item.tstmnl {
  background: #fff;
  border: 1px solid #e5e9f2;
  border-radius: 14px;
  padding: 32px 28px 28px;
  margin: 8px;
  box-shadow: 0 8px 22px rgba(0, 38, 122, 0.06);
  display: flex !important;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: 100%;
  position: relative;
}
body.page-template-template-testimonial-php .item.tstmnl::before {
  content: "“";
  position: absolute;
  top: 8px; left: 22px;
  font-family: Georgia, serif;
  font-size: 4.5rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(242, 196, 51, 0.55);
  pointer-events: none;
}
body.page-template-template-testimonial-php .tstmnl-quote {
  width: 100%;
  margin: 0 0 18px;
}
body.page-template-template-testimonial-php .tstmnl-quote p {
  font-size: 1rem;
  line-height: 1.6;
  color: #3a3f4d;
  margin: 0;
  font-style: italic;
}
body.page-template-template-testimonial-php .tstmnl-spacer {
  width: 60px;
  height: 2px;
  background: #f2c433;
  margin: 6px auto 18px;
  border-radius: 2px;
}
body.page-template-template-testimonial-php .tstmnl-spacer span { display: none; }
body.page-template-template-testimonial-php .tstmnl-person { width: 100%; }
/* Photo/logo container. The CPT thumbnail mixes headshots (round photos
   work) with company logos (circular crop chops letters off the sides).
   Use a square soft-rounded tile with `object-fit: contain` so any aspect
   ratio renders cleanly — entire logo visible, headshots still centred. */
body.page-template-template-testimonial-php .tstmnl-person img {
  width: 110px  !important;
  height: 80px  !important;
  border-radius: 10px;
  object-fit: contain;
  background: #f9fafd;
  border: 1px solid #eef1f7;
  padding: 6px;
  margin: 0 auto 12px;
  display: block;
}
body.page-template-template-testimonial-php .tstmnl-person h4 {
  font-size: 1.0625rem      !important;
  font-weight: 700          !important;
  color: #1f2a44            !important;
  margin: 0 0 4px           !important;
  line-height: 1.3          !important;
  letter-spacing: 0         !important;
}
body.page-template-template-testimonial-php .tstmnl-person p {
  font-size: 0.875rem;
  font-weight: 500;
  color: #5a6072;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Owl Carousel dots/nav theming + spacing */
body.page-template-template-testimonial-php .tstpg-oc.owl-carousel { padding: 0 28px; }
body.page-template-template-testimonial-php .tstpg-oc .owl-dots {
  text-align: center;
  margin-top: 22px;
}
body.page-template-template-testimonial-php .tstpg-oc .owl-dot {
  background: transparent !important;
  border: none;
}
body.page-template-template-testimonial-php .tstpg-oc .owl-dot span {
  width: 9px; height: 9px;
  background: rgba(0, 38, 122, 0.25);
  border-radius: 50%;
  margin: 0 4px;
  transition: background .2s ease, transform .2s ease;
}
body.page-template-template-testimonial-php .tstpg-oc .owl-dot.active span,
body.page-template-template-testimonial-php .tstpg-oc .owl-dot:hover span {
  background: #00267a;
  transform: scale(1.2);
}
body.page-template-template-testimonial-php .tstpg-oc .owl-nav button {
  width: 38px; height: 38px;
  background: #fff !important;
  border: 1px solid #e5e9f2 !important;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 38, 122, 0.12);
  color: #00267a !important;
}
body.page-template-template-testimonial-php .tstpg-oc .owl-nav button:hover { background: #f2c433 !important; }

/* When the Owl carousel JS hasn't initialised yet (or fails to), make
   the raw `.tstmnl` items still render as a clean static grid so the
   page never looks empty / broken. */
body.page-template-template-testimonial-php .owl-carousel:not(.owl-loaded) {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 991px) {
  body.page-template-template-testimonial-php .owl-carousel:not(.owl-loaded) { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
  body.page-template-template-testimonial-php .owl-carousel:not(.owl-loaded) { grid-template-columns: 1fr; }
  body.page-template-template-testimonial-php #primary > .entry-header h1 { font-size: 1.5rem !important; }
  body.page-template-template-testimonial-php .item.tstmnl { padding: 24px 20px 22px; }
}

/* ── Downloads page (page-id 7446 / /downloads/) ──────────────────────
   Cards are now rendered from the custom Downloads meta-box via a
   `the_content` filter (inc/downloads-meta-box.php), producing a clean
   `.pkc-downloads-grid > .pkc-dl-card` structure — no more Gutenberg
   duplicates. Style as a 3-up responsive card grid.                    */
body.page-id-7446 .entry-title {
  font-size: 2rem               !important;   /* 32px page H1 */
  font-weight: var(--wt-bold)   !important;
  line-height: 1.2              !important;
  letter-spacing: 0             !important;
  color: #0d1937;
  text-align: center;
  margin: 0 auto 24px           !important;
  max-width: 800px;
}
.pkc-downloads-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin: 24px 0 8px;
}
.pkc-dl-card {
  background: #fff;
  border: 1px solid #e5e9f2;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 38, 122, 0.05);
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.pkc-dl-card:hover {
  border-color: rgba(0, 38, 122, 0.18);
  box-shadow: 0 14px 30px rgba(0, 38, 122, 0.12);
  transform: translateY(-3px);
}
.pkc-dl-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit !important;
  text-decoration: none !important;
}
.pkc-dl-card-img-wrap {
  background: #f5f7fb;
  overflow: hidden;
}
.pkc-dl-card-img-wrap img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  transition: transform .25s ease;
}
.pkc-dl-card:hover .pkc-dl-card-img-wrap img { transform: scale(1.03); }
.pkc-dl-card-body {
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  flex: 1;
  border-top: 1px solid #eef1f7;
}
.pkc-dl-card-title {
  font-size: 1.0625rem          !important;  /* 17px */
  font-weight: 700              !important;
  line-height: 1.35             !important;
  letter-spacing: 0             !important;
  color: #1f2a44                !important;
  margin: 0                     !important;
  flex: 1;
}
.pkc-dl-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 18px;
  background: #fff8e1;
  color: #00267a;
  border: 1px solid #f2c433;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background .15s ease, transform .15s ease;
}
.pkc-dl-card:hover .pkc-dl-card-cta {
  background: #f2c433;
  transform: translateY(-1px);
}
.pkc-dl-card-cta svg { stroke: currentColor; }

@media (max-width: 991px) {
  .pkc-downloads-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .pkc-dl-card-img-wrap img { height: 200px; }
}
@media (max-width: 575px) {
  .pkc-downloads-grid { grid-template-columns: 1fr; gap: 18px; }
  .pkc-dl-card-img-wrap img { height: 180px; }
  body.page-id-7446 .entry-title { font-size: 1.5rem !important; }
}

/* ── Case Studies archive page (archive-pkc-casestudy.php) ───────────
   The page-title h1 was firing at 40px hero and the card titles inherited
   the global `h3 { 28px !important }` rule, making the dark overlay band
   on each card balloon to 4 lines tall even for short titles. Tighten
   typography to give the archive grid a calmer, uniform rhythm.        */
body.post-type-archive-pkc-casestudy .indx-ttl .page-title,
body.tax-service  .indx-ttl .page-title,
body.tax-industry .indx-ttl .page-title,
body.tax-value    .indx-ttl .page-title {
  font-size: 1.875rem        !important;   /* 30px — readable page H1 */
  font-weight: var(--wt-bold) !important;
  line-height: 1.2           !important;
  letter-spacing: 0          !important;
  color: #0d1937;
  margin: 0 0 6px            !important;
}
body.post-type-archive-pkc-casestudy .cs-filter,
body.tax-service  .cs-filter,
body.tax-industry .cs-filter,
body.tax-value    .cs-filter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.9375rem;
}
body.post-type-archive-pkc-casestudy .cs-filter .btn,
body.tax-service  .cs-filter .btn,
body.tax-industry .cs-filter .btn,
body.tax-value    .cs-filter .btn {
  font-size: 0.9375rem;
  padding: 7px 14px;
  border-radius: 6px;
}

/* Card overlay typography */
.archive-cs .cs-article { border-radius: 10px; }
.archive-cs .cs-header { padding: 0; }
.archive-cs .cs-header h3.entry-title {
  font-size: 1.0625rem       !important;   /* 17px — clean card title */
  font-weight: 600           !important;
  letter-spacing: 0          !important;
  margin: 0                  !important;
  padding: 14px 18px         !important;
}
.archive-cs .cs-header h3.entry-title a {
  display: -webkit-box       !important;
  -webkit-line-clamp: 3;                   /* cap at 3 lines + ellipsis */
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: auto               !important;
  line-height: 1.35          !important;
  font-weight: 600           !important;
  color: #fff                !important;
}

@media (max-width: 575px) {
  body.post-type-archive-pkc-casestudy .indx-ttl .page-title,
  body.tax-service  .indx-ttl .page-title,
  body.tax-industry .indx-ttl .page-title,
  body.tax-value    .indx-ttl .page-title { font-size: 1.5rem !important; }
  .archive-cs .cs-header h3.entry-title { font-size: 1rem !important; padding: 12px 14px !important; }
}

/* Case Studies archive filter dropdowns (.cs-filter) — shared visual
   polish for all three filter menus (Service / Industry / Value). */
.cs-filter .dropdown-menu {
  min-width: 220px;
  max-width: 280px;
  border-radius: 8px;
  border: 1px solid #e5e9f2;
  box-shadow: 0 8px 20px rgba(0, 38, 122, 0.10);
  padding: 6px 0;
  margin-top: 4px;
}
.cs-filter .dropdown-menu .dropdown-item {
  font-size: 0.9375rem;
  padding: 8px 16px;
  white-space: normal;             /* allow long labels to wrap */
  color: #1f2a44;
  transition: background .12s ease;
}
.cs-filter .dropdown-menu .dropdown-item:hover,
.cs-filter .dropdown-menu .dropdown-item:focus {
  background: #fff8e1;
  color: #00267a;
}
/* Only the LAST dropdown ("Value") sits flush with the right edge of the
   viewport, so only its menu needs the right-anchored flip. The first two
   (Service / Industry) keep Bootstrap's default left-anchored opening.   */
.cs-filter .dropdown:last-child .dropdown-menu {
  right: -40px   !important;
  left: auto !important;
}
@media (max-width: 575px) {
  .cs-filter { flex-wrap: wrap; gap: 6px; }
  .cs-filter .dropdown-menu { min-width: 180px; }
}

/* Contact / Locations section (`#cp-cont`) used across the contact, pkcpromis,
   sap-implementation, mumbai-location and other landing templates.
   Modernise into a clean three-block layout:
     1. Top contact strip — three pill cards (chat / email / phone)
     2. Locations panel    — white card with a grid of city tiles
     3. Form panel         — white card with the Drop-us-a-note CF7 form
   Everything sits on a soft grey background for a calmer feel.            */
#cp-cont { padding: 64px 0 80px; background: #f6f8fb; }
#cp-cont h2.lxd {
  font-size: 2rem               !important;
  font-weight: var(--wt-bold)   !important;
  color: #0d1937;
  letter-spacing: 0             !important;
  margin: 12px 0 36px           !important;
}
#cp-cont .cp-ttl {
  font-size: 1.5rem             !important;
  font-weight: var(--wt-bold)   !important;
  color: #0d1937;
  letter-spacing: 0             !important;
  margin: 0 0 24px              !important;
  text-align: left;
}

/* ── 1. Top contact strip — Chat / Email / Phone pill cards ── */
#cp-cont .ft-cont {
  margin-bottom: 28px;
}
#cp-cont .ftr_cont_ico {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: #fff;
  border: 1px solid #e5e9f2;
  border-radius: 10px;
  padding: 16px 20px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #1f2a44 !important;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(0, 38, 122, 0.05);
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
#cp-cont .ftr_cont_ico:hover {
  border-color: rgba(0, 38, 122, 0.2);
  box-shadow: 0 8px 20px rgba(0, 38, 122, 0.10);
  transform: translateY(-2px);
  color: #00267a !important;
}
#cp-cont .ftr_cont_ico .ft-icon {
  width: 28px; height: 28px;
  background: rgba(0, 38, 122, 0.08);
  border-radius: 50%;
  padding: 5px;
  flex-shrink: 0;
}

/* ── 2. Locations / Form — each city tile becomes its own card ── */
/* Markup varies between templates (some have a 2-col layout, others
   put Locations below the form). Rather than trying to draw a card
   around each column, give every city tile its own card surface and
   let them flow naturally inside whichever grid the template uses.   */
#cp-cont > .container,
#cp-cont > .container-fluid { max-width: 1200px; }
/* The chat/email/phone strip gets gap between the 3 pill cards */
#cp-cont .ft-cont { padding-left: 8px; padding-right: 8px; }
/* Soft separator between the top icon strip and the main 2-column block */
#cp-cont .row + .row { margin-top: 12px; }
/* Individual city tiles inside the Locations card */
/* City tile (.col-12 col-lg-* containing .cp-loc + .addr) — keep heading
   and address card together; align all tiles to the top of their row so
   shorter addresses don't visually overlap the next row's headings. */
#cp-cont .row.px-4 { align-items: flex-start; padding-left: 0 !important; padding-right: 0 !important; }
#cp-cont .row.px-4 > [class*="col-"] {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px !important;
  min-width: 0;                    /* lets flex children shrink past content width */
}
#cp-cont .addr {
  background: #f9fafd;
  border: 1px solid #eef1f7;
  border-radius: 10px;
  padding: 16px 18px 14px;
  flex: 0 0 auto;                  /* size to content, don't auto-stretch */
  width: 100%;
  word-break: break-word;
  overflow-wrap: anywhere;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
#cp-cont .row.px-4 > [class*="col-"]:hover .addr,
#cp-cont .row.px-4 > [class*="col-"]:focus-within .addr {
  border-color: rgba(242, 196, 51, 0.55);
  box-shadow: 0 6px 16px rgba(0, 38, 122, 0.08);
  transform: translateY(-2px);
}
#cp-cont .cp-loc {
  display: inline-block;
  font-size: 1.0625rem          !important;
  font-weight: var(--wt-bold)   !important;
  font-family: var(--pkc-font)  !important;
  color: #1f2a44               !important;
  letter-spacing: 0             !important;
  border-bottom: 2px solid #f2c433;
  padding-bottom: 6px           !important;
  margin: 0 0 10px              !important;
  line-height: 1.3              !important;
}
/* Win specificity over the template's inline `.addr p { font-size: 1rem }` */
#cp-cont .addr p,
section#cp-cont .addr p {
  font-size: 0.9375rem !important;       /* 15px — readable body */
  line-height: 1.55    !important;
  color: #4a505d;
  margin: 0;
}
/* Some templates nest the locations grid inside a narrow `.col-md-6` and
   author it with `col-lg-4` tiles — 3 columns × ~50% width = tiny cards.
   Override to 2 columns inside the half-width container so addresses
   wrap cleanly. The grid still stays inside its own column, so the form
   on the right is untouched. */
#cp-cont > .container-fluid > .row > .col-md-6 > .row.px-4 {
  margin-left: -8px;
  margin-right: -8px;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
#cp-cont > .container-fluid > .row > .col-md-6 > .row.px-4 > [class*="col-lg-"] {
  flex: 0 0 50% !important;
  max-width: 50% !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
}
@media (max-width: 575px) {
  #cp-cont > .container-fluid > .row > .col-md-6 > .row.px-4 > [class*="col-lg-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* ── 3. Form panel — Drop us a note ── */
#cp-cont .cform { max-width: none !important; }
#cp-cont .cform input[type="text"],
#cp-cont .cform input[type="email"],
#cp-cont .cform input[type="tel"],
#cp-cont .cform input[type="number"],
#cp-cont .cform textarea,
#cp-cont .cform select {
  width: 100%;
  border: 1px solid #d6dce8;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.9375rem;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
#cp-cont .cform input:focus,
#cp-cont .cform textarea:focus,
#cp-cont .cform select:focus {
  outline: none;
  border-color: #00267a;
  box-shadow: 0 0 0 3px rgba(0, 38, 122, 0.12);
}
#cp-cont .cform .nav-tabs .nav-link {
  font-size: 0.9375rem;
  padding: 10px 22px;
}

@media (max-width: 575px) {
  #cp-cont { padding: 48px 0 56px; }
  #cp-cont h2.lxd { font-size: 1.625rem !important; }
  #cp-cont .cp-ttl { font-size: 1.25rem !important; margin-bottom: 18px !important; }
  #cp-cont .cp-loc { font-size: 1rem !important; }
  #cp-cont .addr p { font-size: 0.875rem; }
  #cp-cont .addr { padding: 14px 16px 12px; }
  #cp-cont .ftr_cont_ico { padding: 13px 16px; }
}

/* Bootstrap-card accordion (`#accordlnk` / `.faq` / `.faq2`) used on the
   pkcpromis-style landing templates ("Our Expertise in Retail" etc.).
   The card-body uses <h4> for sub-section titles, but the global
   `h4 { font-size: 22px !important }` rule plus the ambient line-height
   makes those headings + their <ul> bullets look like body-text giants.
   Tighten the typography so the accordion reads as a structured panel. */
#accordlnk .card-header h4,
#accordlnk .card-header h4 .btn-link {
  font-size:   1.0625rem          !important;  /* 17px — accordion trigger */
  font-weight: var(--wt-semibold) !important;
  line-height: 1.4                !important;
  letter-spacing: 0               !important;
  margin: 0                       !important;
}
#accordlnk .card-body h4 {
  font-size:   1.125rem           !important;  /* 18px — sub-section title */
  font-weight: var(--wt-bold)     !important;
  line-height: 1.35               !important;
  letter-spacing: 0               !important;
  color: #1f2a44;
  margin: 16px 0 8px              !important;
}
#accordlnk .card-body h4:first-child { margin-top: 0 !important; }
#accordlnk .card-body p,
#accordlnk .card-body li {
  font-size:   0.9375rem;                       /* 15px — body / list */
  line-height: 1.6;
  color: #3a3f4d;
}
#accordlnk .card-body ul {
  padding-left: 22px;
  margin: 0 0 14px;
}
#accordlnk .card-body ul li { margin-bottom: 6px; }
#accordlnk .card-body .btn.btn-primary {
  font-size: 0.9375rem !important;            /* 15px CTA */
  padding: 9px 22px;
}
@media (max-width: 575px) {
  #accordlnk .card-header h4,
  #accordlnk .card-header h4 .btn-link { font-size: 1rem !important; }
  #accordlnk .card-body h4 { font-size: 1.0625rem !important; }
  #accordlnk .card-body p,
  #accordlnk .card-body li { font-size: 0.875rem; }
}
.awrds-cont .awd_gby {
  font-size:   0.9375rem          !important;  /* 15px — issuer name */
  font-weight: var(--wt-medium)   !important;
  line-height: 1.4                !important;
  margin: 0 0 4px                 !important;
}
@media (max-width: 575px) {
  .awrds-cont .awd_desc,
  .awrds-cont .awd_desc.lxd { font-size: 1.125rem !important; }
}

/* Stats bar heading:  was style="font-size:3.2em" (51px) */
#hp_logos > .container h3.text-center {
  font-size:   var(--t-2xl)       !important;  /* 32px */
  font-weight: var(--wt-bold)     !important;
  line-height: var(--lh-snug)     !important;
}

/* Stats chips (37 years | 200+ employees | >1500 clients) */
#hp_logos h3.d-inline-block {
  font-size:   var(--t-lg)        !important;  /* 22px */
  font-weight: var(--wt-semibold) !important;
}

/* "Clients Speak" heading: was h5 style="font-size:32px" */
#home-anim-banner ~ section h5[style],
section h5[style*="32px"],
section h5[style*="font-size:32"] {
  font-size:   var(--t-2xl)       !important;  /* 32px via CSS not inline */
  font-weight: var(--wt-bold)     !important;
}

/* "What we do" section title: was h3 style="font-size:32px" */
section h3[style*="font-size:32"],
section h3[style*="font-size: 32"] {
  font-size:   var(--t-2xl)       !important;
  font-weight: var(--wt-bold)     !important;
}

/* ── 13. Hero banner carousel — prevent next slide bleed-through ──
   pkc-custom.css sets overflow:visible on several owl carousels.
   None target #sync3 directly, but reinforce here to be safe.
   The column itself also needs clipping so the stage can't escape
   into the adjacent lottie column.                               */
#sync3 .owl-stage-outer {
  overflow: hidden !important;
}

#home-anim-banner .hbst {
  overflow: hidden;
}

/* ── 14. Success Stories section (#hp-casestudy) ───────────────
   Section bg: #00267a (dark navy). btn-primary is also #193b87
   (dark navy), making "View More" invisible. Fix to gold + centre
   the heading block. Eyebrow "Success Stories" h4 → small/gold.  */

#hp-casestudy .casestudy-ttl {
  text-align: center;
  margin-bottom: 1.5rem;
}

#hp-casestudy .casestudy-ttl h4 {
  font-size:      0.8125rem          !important;  /* 13px — eyebrow */
  font-weight:    var(--wt-semibold) !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          #f2c433;                        /* PKC gold on dark bg */
  line-height:    1.5                !important;
  display:        block              !important;
}

#hp-casestudy .casestudy-ttl h3 {
  font-size:   var(--t-xl)           !important;  /* 28px */
  font-weight: var(--wt-bold)        !important;
  color:       #fff;
  line-height: var(--lh-snug)        !important;
}

/* "View More" CTA — dark btn-primary on dark section bg = invisible.
   Override to PKC gold so it reads against #00267a background.    */
#hp-casestudy .btn-primary {
  background-color: #f2c433 !important;
  color:            #00267a !important;
  border:           none    !important;
}
#hp-casestudy .btn-primary:hover {
  background-color: #fff    !important;
  color:            #00267a !important;
}

/* ── 15. Services tab — "What we do" section ───────────────────
   Hierarchy target:
     Panel heading h3     28px bold   (.hp-link-blue)
     Panel description p  16px reg    (.tab-pane > p)
     Sub-item label h4    15px semi   (.pgs-offlst h4)
     Sub-item body p      13px reg    (.pgs-offlst p)
   Left nav:
     Number counter       11px semi   (.serv-vert-nav .nav-link > span-equiv)
     Service name h4      16px semi   (.serv-vert-nav h4)             */

/* Panel description — lock size & weight so no inherited rule inflates it */
#hp-servi .serv-vert-det .tab-pane > p {
  font-size:   var(--t-base)      !important;  /* 16px */
  font-weight: var(--wt-regular)  !important;
  line-height: var(--lh-body)     !important;
  color:       #444;
  margin-bottom: 1.25rem;
}

/* Sub-item label — matches the 18px content-label size used across the site
   (blog card titles, footer labels, strategies h4 = 18px) */
.pgs-offlst h4 {
  font-size:      var(--t-md)        !important;  /* 18px — consistent with site-wide label size */
  font-weight:    var(--wt-semibold) !important;
  margin-bottom:  0;
  line-height:    var(--lh-snug)     !important;
  color:          #1d2327;
  flex:           1;
}

/* Sub-item description — one step below the label */
.pgs-offlst p {
  font-size:   var(--t-sm)           !important;  /* 14px */
  font-weight: var(--wt-regular)     !important;
  line-height: var(--lh-body)        !important;
  color:       #555;
  margin-bottom: 0;
}

/* .pgs-offlst layout — style.css uses position:absolute on the span,
   offset by padding-left on the container.  Keep that approach but
   fix the font-size so number and title are the same visual scale.  */
.pgs-offlst {
  display:       block    !important;   /* undo any flex override */
  position:      relative !important;
  padding-left:  2rem     !important;   /* room for the absolute number */
  margin-bottom: 1.25rem;
}

/* Number — same size as the h4 title so they sit at the same weight.
   Gold colour provides the visual distinction instead of size.      */
.pgs-offlst > span {
  position:       absolute           !important;
  left:           0                  !important;
  top:            0.05em             !important;  /* fine-tune to match h4 cap-height */
  font-size:      var(--t-md)        !important;  /* 18px — matches h4 */
  font-weight:    var(--wt-bold)     !important;
  color:          #f2c433            !important;  /* PKC gold */
  line-height:    var(--lh-snug)     !important;
}

/* Description — full width, no flex-basis needed */
.pgs-offlst p {
  width: 100%;
}

/* Left tab-nav: service names — match 18px used for footer labels and
   content labels across the rest of the site */
.serv-vert-nav h4 {
  font-size:   var(--t-md)           !important;  /* 18px */
  font-weight: var(--wt-semibold)    !important;
  margin:      0;
  line-height: var(--lh-snug)        !important;
}

/* Left tab-nav: number counter ("01", "02"…) inherits 2em=32px from
   .serv-vert-nav a — reset to small label */
.serv-vert-nav .nav-link {
  font-size:      0.6875rem          !important;  /* 11px — just the number */
  letter-spacing: 0.06em;
  font-weight:    var(--wt-semibold) !important;
}
/* h4 inside overrides back to 18px via .serv-vert-nav h4 above */

/* ── 16. Services tab content title (.hp-link-blue) ────────────
   The service panel h3 uses <a class="hp-link-blue"> for the title.
   style.css sets a { color:#4169e1 } but a:visited { color:inherit }
   so visited links turn dark while unvisited stay blue — inconsistent.
   Lock to PKC brand dark blue regardless of visited/hover state.    */
.hp-link-blue,
.hp-link-blue:link,
.hp-link-blue:visited,
.hp-link-blue:hover,
.hp-link-blue:active,
.hp-link-blue:focus {
  color:           #193b87 !important;  /* PKC dark blue — consistent across all states */
  text-decoration: none    !important;
}

/* ── 15. Case study cards — remove forced min-height ───────────
   pkc-service.css:497 sets  a.cstudy-post { min-height: 470px }
   which leaves a large empty white gap under short titles.
   Remove the floor so cards size to their content; Bootstrap row
   flex still equalises column heights within the same row.        */

#hp-casestudy a.cstudy-post {
  min-height: auto !important;
  display:    flex           !important;
  flex-direction: column     !important;
  width:      100%           !important;
  padding-bottom: 15px;
}
section#hp-plan {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}
/* Image fills full card width and doesn't flex-shrink */
#hp-casestudy a.cstudy-post img {
  width:   100%  !important;
  display: block !important;
  flex-shrink: 0;
  min-height: 300px;
}

/* Title area fills remaining space so text sits just after image */
#hp-casestudy a.cstudy-post h3 {
  flex: 1;
}

/* Column needs flex so the anchor can grow to full column height */
#hp-casestudy .cs-row .col-md-4 {
  display:        flex           !important;
  flex-direction: column         !important;
}

/* ============================================================
   ── 16. FOOTER (rewrite for the new layout in footer.php) ────
   Structure:
     <footer #colophon>
       .footer-clients-strip  ← full-width white strip, owl carousel
       .footer-main           ← full-width dark navy, 4-column grid
         .container > .row.footer-row > .footer-col × 4
       .footer-copyright      ← full-width darker bar, centred text
   ============================================================ */

.site-footer,
#colophon {
  font-family: var(--pkc-font) !important;
  background: #ffffff;
}

/* 16.1 Clientele strip ─────────────────────────────────────── */
.footer-clients-strip {
  background: #ffffff;
  padding: 36px 0 32px;
  border-bottom: 1px solid #ececec;
}

.footer-clients-title {
  font-size:   var(--t-lg)        !important;  /* 22px */
  font-weight: var(--wt-semibold) !important;
  color: #00267a;
  text-align: center;
  margin: 0 0 24px;
  letter-spacing: 0.01em;
}

#clntlogsld.owl-carousel .item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  padding: 0 12px;
}

#clntlogsld.owl-carousel .item img {
  max-height: 60px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: filter 0.25s ease, opacity 0.25s ease;
}

#clntlogsld.owl-carousel .item img:hover {
  filter: grayscale(0);
  opacity: 1;
}

/* 16.2 Main footer ─────────────────────────────────────────── */
.footer-main {
  background: linear-gradient(180deg, #00267a 0%, #001a55 100%);
  color: #d6deef;
  padding: 64px 0 48px;
  position: relative;
}

.footer-main::before {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(90deg, #f2c433 0%, transparent 60%);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.footer-main .footer-row {
  --bs-gutter-x: 32px;
  row-gap: 40px;
}

.footer-col {
  color: #d6deef;
}

/* Column title (h5) — shared across non-brand columns */
.footer-col-title {
  font-family:    var(--pkc-font)     !important;
  font-size:      var(--t-md)         !important;  /* 18px */
  font-weight:    var(--wt-bold)      !important;
  color:          #ffffff             !important;
  margin: 0 0 18px;
  padding-bottom: 10px;
  position: relative;
  letter-spacing: 0.02em;
  text-transform: none;
}
.footer-col-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 36px;
  height: 2px;
  background: #f2c433;
}

/* Section label (h6) inside brand & contact columns */
.footer-section-label {
  font-family:    var(--pkc-font)     !important;
  font-size:      0.75rem             !important;  /* 12px */
  font-weight:    var(--wt-semibold)  !important;
  color:          #f2c433             !important;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 16px 0 10px;
}
.footer-section-label-spaced {
  margin-top: 28px;
}

/* 16.2a Brand column ───────────────────────────────────────── */
.footer-brand {
  font-family:    var(--pkc-font)     !important;
  font-size:      var(--t-xl)         !important;  /* 28px */
  font-weight:    var(--wt-bold)      !important;
  color:          #ffffff             !important;
  margin: 0 0 14px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.footer-tagline {
  font-size:   var(--t-sm)        !important;  /* 14px */
  font-weight: var(--wt-regular)  !important;
  color:       #b9c5e2;
  line-height: 1.6;
  margin: 0 0 4px;
  max-width: 360px;
}

/* 16.2b Quick Links column ──────────────────────────────────── */
.footer-col .footer-menu-list,
.footer-col ul.menu,
.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-col .footer-menu-list li,
.footer-col ul li {
  margin: 0;
  padding: 0;
}
.footer-col .footer-menu-list a,
.footer-col ul li a {
  display: inline-block;
  padding: 6px 0;
  font-family: var(--pkc-font) !important;
  font-size: var(--t-sm)        !important;   /* 14px */
  font-weight: var(--wt-regular) !important;
  color: #b9c5e2                !important;
  line-height: 1.4;
  text-decoration: none !important;
  transition: color 0.15s ease, transform 0.15s ease;
}
.footer-col .footer-menu-list a:hover,
.footer-col .footer-menu-list a:focus,
.footer-col ul li a:hover,
.footer-col ul li a:focus {
  color: #f2c433 !important;
  transform: translateX(3px);
  outline: none;
}

/* 16.2c Contact column ─────────────────────────────────────── */
.footer-contact {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-family:  var(--pkc-font)     !important;
  font-size:    var(--t-sm)         !important;  /* 14px */
  font-weight:  var(--wt-regular)   !important;
  color:        #d6deef             !important;
  line-height:  1.4;
  text-decoration: none !important;
  transition: color 0.15s ease;
  word-break: break-word;
}
.footer-contact .ft-icon {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  opacity: 0.85;
  transition: opacity 0.15s ease;
}
.footer-contact:hover,
.footer-contact:focus {
  color: #f2c433 !important;
  outline: none;
}
.footer-contact:hover .ft-icon,
.footer-contact:focus .ft-icon {
  opacity: 1;
}

/* 16.2d Social icons ───────────────────────────────────────── */
.footer-col-brand .footer-social {
  display: flex;
  gap: 10px;
  margin: 4px 0 0;
}
.footer-col-brand .footer-social .ftr_soc_ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  transition: background 0.15s ease, transform 0.15s ease;
}
.footer-col-brand .footer-social .ftr_soc_ico svg {
  width: 16px;
  height: 16px;
  display: block;
}
.footer-col-brand .footer-social .ftr_soc_ico:hover,
.footer-col-brand .footer-social .ftr_soc_ico:focus {
  background: #f2c433;
  transform: translateY(-2px);
  outline: none;
}
.footer-col-brand .footer-social .ftr_soc_ico:hover svg path,
.footer-col-brand .footer-social .ftr_soc_ico:focus svg path {
  fill: #00267a;
}

/* 16.2e Newsletter column ──────────────────────────────────── */
.footer-col-newsletter {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.footer-col-newsletter .footer-newsletter-blurb {
  font-size:   var(--t-sm)       !important;  /* 14px */
  color:       #b9c5e2;
  margin: 0 0 16px;
  line-height: 1.5;
  max-width: 320px;
}

/* The Zoho embed has a hard-coded 300x445 outer div with inline
   styles. To make it look like a smooth-cornered card inside our
   dark footer, we clip it with overflow:hidden + border-radius
   on the outermost embed wrapper, then make it responsive by
   shrink-scaling on smaller columns.                            */
.footer-col-newsletter [id^="sf3z"] {
  margin: 0 !important;
  width: 100%;
  max-width: 300px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  background: #ffffff;
}

/* The inner SIGNUP_BODY is hard-sized 300×445. Keep it but clip
   to the rounded wrapper above and centre it.                    */
.footer-col-newsletter [id^="sf3z"] > #customForm,
.footer-col-newsletter [id^="sf3z"] > #customForm > div[name="SIGNUP_BODY"] {
  margin: 0 auto !important;
  max-width: 100%;
  border-radius: 0 !important;
}

/* The placeholder text colours inside the Zoho inputs read poorly
   on the cream bg. Force a darker, consistent placeholder.       */
.footer-col-newsletter [id^="sf3z"] input::placeholder {
  color: #6b6b6b !important;
  opacity: 1;
}

/* Smooth the field borders + button radius — Zoho's inline values
   are 15px on inputs and a sharp 0 on the wrapper. Unify at 8px. */
.footer-col-newsletter [id^="sf3z"] input[type="text"],
.footer-col-newsletter [id^="sf3z"] input[id="EMBED_FORM_EMAIL_LABEL"] {
  border-radius: 8px !important;
  border: 1px solid #c9d1dd !important;
  font-size: 14px !important;
}
.footer-col-newsletter [id^="sf3z"] input[type="button"][name="SIGNUP_SUBMIT_BUTTON"] {
  border-radius: 8px !important;
  background-color: #f2c433 !important;
  color: #00267a !important;
  font-size: 14px !important;
  letter-spacing: 0.02em;
  font-weight: 700 !important;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.footer-col-newsletter [id^="sf3z"] input[type="button"][name="SIGNUP_SUBMIT_BUTTON"]:hover {
  background-color: #ffd84a !important;
  transform: translateY(-1px);
}

/* Shrink-scale the widget on small lg / md viewports where the
   newsletter column ends up < 300px wide. Origin centre so it
   stays balanced in the column.                                  */
@media (min-width: 992px) and (max-width: 1199px) {
  .footer-col-newsletter [id^="sf3z"] {
    transform: scale(0.92);
    transform-origin: top left;
    margin-bottom: -36px !important;   /* claw back vertical space lost to scale */
  }
}

/* 16.3 Copyright bar ───────────────────────────────────────── */
.footer-copyright {
  background: #001233;
  padding: 16px 0;
  color: #8a9bc3;
  font-size: var(--t-xs) !important;          /* 12px */
  text-align: center;
  letter-spacing: 0.02em;
}
.footer-copyright .container { padding: 0 24px; }
.footer-copyright span {
  font-size: var(--t-xs) !important;
  color: inherit;
}

/* Defeat the inherited site-footer link/paragraph rules so our
   new typography wins inside the redesigned footer.            */
.site-footer .footer-main p,
.site-footer .footer-main li,
.site-footer .footer-main span,
.site-footer .footer-main a {
  font-size: var(--t-sm) !important;
}
.site-footer .footer-main h2 { font-size: var(--t-xl) !important; }
.site-footer .footer-main h5 { font-size: var(--t-md) !important; }
.site-footer .footer-main h6 { font-size: 0.75rem    !important; }

/* 16.4 Responsive ──────────────────────────────────────────── */
@media (max-width: 991px) {
  .footer-main { padding: 48px 0 36px; }
  .footer-main .footer-row { row-gap: 32px; }
  .footer-col-newsletter { align-items: center; text-align: center; }
  .footer-col-newsletter .footer-col-title::after { left: 50%; transform: translateX(-50%); }
}

@media (max-width: 767px) {
  .footer-clients-strip { padding: 28px 0; }
  .footer-clients-title { font-size: 1.125rem !important; }
  .footer-main { padding: 40px 0 28px; }
  .footer-brand { font-size: 1.5rem !important; }
  .footer-col-brand { text-align: center; }
  .footer-col-brand .footer-tagline { margin-left: auto; margin-right: auto; }
  .footer-col-brand .footer-social { justify-content: center; }
  .footer-col-contact { text-align: left; }
}

/* ── 19. Blog & single posts ────────────────────────────────── */
.single-post .entry-title,
.blog .entry-title {
  font-size:   var(--t-2xl)    !important;   /* 32px */
  font-weight: var(--wt-bold)  !important;
  line-height: var(--lh-snug);
}

.single-post .entry-content h2 {
  font-size:   var(--t-xl)          !important;  /* 28px */
  font-weight: var(--wt-bold)       !important;
}

.single-post .entry-content h3 {
  font-size:   var(--t-lg)          !important;  /* 22px */
  font-weight: var(--wt-semibold)   !important;
}

.single-post .entry-content h4 {
  font-size:   var(--t-md)          !important;  /* 18px */
  font-weight: var(--wt-medium)     !important;
}

.single-post .entry-content p,
.single-post .entry-content li {
  font-size:   var(--t-base)        !important;  /* 16px */
  line-height: var(--lh-body)       !important;
}

/* Blog/Newsroom/Case-study card titles — compact grid layout needs smaller headings */
.blog-post h3,
.indx-bp h3,
.cstudy-post h3 {
  font-size:   var(--t-md)          !important;  /* 18px — was browser-default ~18px, restored */
  font-weight: var(--wt-semibold)   !important;
  line-height: var(--lh-snug)       !important;
}

/* Blog card excerpt */
.blog p,
.blog-post p,
.indx-bp p {
  font-size:   var(--t-sm)          !important;  /* 14px */
  line-height: var(--lh-body);
}

/* ── 17. Service pages ──────────────────────────────────────── */
h1 {
  font-size: var(--t-3xl) !important;  /* Unifies the 42px in pkc-service.css */
}

/* ── 17a. Section title rhythm across template-parts ───────────
   Every service-page section has its own h2/heading style with
   wildly varying margins (some have mb-3, some pb-4, some none).
   Standardise the bottom space so the spacing between a section
   title and the content beneath it is consistent.
   Applies to:
     • our component sections (.pkc-*-sec, .listen-to-our-sec,
       .success-stories, #hp-casestudy, .why-choose-sec, etc.)
     • Bootstrap-grid component headings centred inside .container */
.pkc-service-page section h2,
.pkc-service-page .pkc-section-title,
section.pkc-related-sec h2,
section.pkc-leaders-sec h2,
section.pkc-clients-sec h2,
section.pkc-faq-sec h2,
section.pkc-res-sec h2,
section.pkc-sc-sec h2,
section.core-sec h2,
section.why-choose-sec h2,
section.listen-to-our-sec h2,
section.bg-lightyellow h2,
section.success-stories h2,
#hp-casestudy h2,
.pkc-section h2 {
    margin-bottom: 32px !important;
    line-height: 1.25;
}

/* If a section has a decorative gold divider directly under the
   heading, the heading gets only a small margin; the divider
   carries the spacing instead.                                  */
.pkc-section-divider {
    width: 56px;
    height: 3px;
    background: #f2c433;
    margin: 0 auto 32px;
    border-radius: 2px;
}
.pkc-service-page section h2 + .pkc-section-divider,
.pkc-section h2 + .pkc-section-divider,
section .pkc-section-title + .pkc-section-divider {
    margin-top: -14px;            /* pull tight under the heading */
}
.pkc-service-page section h2:has(+ .pkc-section-divider),
.pkc-section h2:has(+ .pkc-section-divider),
section .pkc-section-title:has(+ .pkc-section-divider) {
    margin-bottom: 14px !important; /* divider handles the rest of the gap */
}

.banner-sec div#content p {
  font-size:   var(--t-md)      !important;  /* 18px — was 18px, preserve */
  line-height: var(--lh-body)   !important;
}

.click-in h2 {
  font-size:   var(--t-2xl)     !important;  /* 32px */
  font-weight: var(--wt-bold)   !important;
}

.click-in p {
  font-size:   var(--t-base)    !important;  /* 16px */
  line-height: var(--lh-body);
}

/* Metrics / stats numbers */
.landing_middle_section_metrics_section_content_title {
  font-size:   var(--t-2xl)     !important;  /* 32px — was 2.5rem/40px */
  font-weight: var(--wt-bold)   !important;
}

.landing_middle_section_metrics_section_content_description {
  font-size:   var(--t-base)    !important;  /* 16px — was 1.2rem */
  font-weight: var(--wt-medium) !important;
  line-height: var(--lh-snug);
}

/* Section title h2 across service pages */
.success-stories .section-title h2,
.strategies-sec h2 {
  font-size:   var(--t-2xl)     !important;  /* 32px */
  font-weight: var(--wt-bold)   !important;
}

/* Service offering grid items — heading should stay compact (was browser-default ~24px) */
.pgs-offlst h2 {
  font-size:   1.5rem           !important;  /* 24px — matches browser default that was in use */
  font-weight: var(--wt-bold)   !important;
}

.strategies-sec h3 {
  font-size:   1.5rem           !important;  /* 24px — original pkc-custom value */
  font-weight: var(--wt-bold)   !important;
}

.strategies-sec h4 {
  font-size:   1rem             !important;  /* 16px — original pkc-custom value */
  font-weight: var(--wt-bold)   !important;
}

/* ── 18. Testimonials ───────────────────────────────────────── */
#tstmnlsld p,
#tstmnlslds p,
.tstpg-oc p {
  font-size:   var(--t-md)   !important;  /* 18px */
  line-height: var(--lh-loose) !important;
}

/* ── 19. Sidebar ────────────────────────────────────────────── */
.sidebar h2,
.widget-title {
  font-size:   var(--t-md)        !important;  /* 18px */
  font-weight: var(--wt-semibold) !important;
}

.sidebar p,
.sidebar li,
.sidebar a,
.widget p,
.widget li {
  font-size:   var(--t-sm)  !important;  /* 14px */
  line-height: var(--lh-body);
}

/* ── 20. Forms ──────────────────────────────────────────────── */
input:not([type="submit"]):not([type="button"]),
textarea,
select {
  font-family: var(--pkc-font) !important;
  font-size:   var(--t-base)   !important;
  line-height: var(--lh-snug);
}

label {
  font-family: var(--pkc-font) !important;
  font-size:   var(--t-sm);
  font-weight: var(--wt-medium);
}

/* ── 21. Elementor headings ─────────────────────────────────── */
h3.elementor-heading-title.elementor-size-default {
  font-size:   var(--t-lg)          !important;  /* 22px — was 18px */
  font-weight: var(--wt-semibold)   !important;
  line-height: var(--lh-snug);
}

/* ── 22. Responsive: Tablet (≤ 1024px) ─────────────────────── */
@media (max-width: 1024px) {
  :root {
    --t-3xl:  2.25rem;   /* 36px */
    --t-hero: 2.25rem;
    --t-2xl:  1.75rem;   /* 28px */
    --t-xl:   1.5rem;    /* 24px */
  }

  .hp-sec.common-class,
  .strategies-sec.common-class,
  section#hp-casestudy,
  section#home-anim-banner {
    padding-top:    60px !important;
    padding-bottom: 60px !important;
  }
}

/* ── 23. Responsive: Mobile (≤ 768px) ──────────────────────── */
@media (max-width: 768px) {
  :root {
    --t-3xl:  1.75rem;   /* 28px */
    --t-hero: 1.75rem;
    --t-2xl:  1.5rem;    /* 24px */
    --t-xl:   1.25rem;   /* 20px */
    --t-lg:   1.125rem;  /* 18px */
  }

  /* Hero headline explicitly sized for narrow screens */
  .lxd {
    font-size:     1.75rem    !important;  /* 28px */
    margin-bottom: 12px;
    letter-spacing: -0.01em;
  }

  /* Buttons keep readable tap targets */
  .btn,
  .btn-primary,
  .btn-lg {
    font-size: var(--t-sm) !important;    /* 14px */
    padding:   10px 18px   !important;
  }

  h1 { font-size: 1.75rem !important; }
  h2 { font-size: 1.5rem  !important; }
  h3 { font-size: 1.25rem !important; }
  h4 { font-size: 1.125rem !important; }

  .hp-sec.common-class,
  .strategies-sec.common-class,
  section#hp-casestudy,
  section#home-anim-banner {
    padding-top:    40px !important;
    padding-bottom: 40px !important;
  }
}

/* ── 24. Responsive: Small mobile (≤ 480px) ────────────────── */
@media (max-width: 480px) {
  :root {
    --t-3xl:  1.5rem;    /* 24px */
    --t-hero: 1.5rem;
    --t-2xl:  1.25rem;   /* 20px */
  }

  .lxd {
    font-size:  1.5rem !important;   /* 24px */
  }

  h1 { font-size: 1.5rem  !important; }
  h2 { font-size: 1.25rem !important; }
  h3 { font-size: 1.125rem !important; }
}