/* ==========================================================================
   WebKeyIndia — inner "View All" pages  (2026-09-24)

   The five home-page sections that carry a "View All" button now open detail
   pages built from the SAME design language as the section they came from:

     SEO Portfolio          home: seo-portfolio-desktop.php  ->  all-seo-portfolio.php
     Digital Mktg Packages  home: home-packages.php          ->  packages.php
     Life Beyond Technology home: index-gallery.php          ->  my-gallery.php
     Our Achievements       home: home-certificates.php      ->  certificates.php
     Why Our Client's Love  home: home-video.php             ->  video-testimonial.php

   This file holds only what the SECTION stylesheets cannot supply, namely:
     .wkpg   the dark page banner that stands in for the missing hero, and the
             clearance under the fixed header (the same four heights the hero
             uses: 122 / 170 / 218 / 69 px)
     .wkpg-cta  the closing "talk to us" strip
     .wkvt   the written testimonials under the video wall
     a handful of "full page" overrides so a section that shows 2-3 cards on
     the home page can show all of them here without changing the card design.

   The card designs themselves are NOT duplicated here - the pages link
   css/wk-portfolio.css, css/wk-offer.css, css/wk-gallery.css and
   css/wk-home.css exactly as the home page does, so a change to a section on
   the home page follows through to its detail page automatically.
   ========================================================================== */

/* The brand variables have to be declared on EVERY root this file styles, not
   just on the banner. .wkpg-dir sits inside .wkp (a section styled by
   wk-offer.css, which declares its own --o-* names), and .wkpg-page sits on
   .wka / .wkv / .wkg / .wkseo, none of which declare --p-*. A var() that
   resolves to nothing makes the whole declaration invalid, which is what made
   the "View Details" button turn white-on-white on hover: the gradient
   background vanished while color:#fff still applied. */
/* 2026-09-24f: .wksd, .wksv and .wksc added. The SAME bug had come back in a
   second place - the service detail page uses .wkpg-btn--solid inside .wksd,
   which declares its own --v-* names but none of the --p-* ones, so
   background: var(--p-grad) was dropped as invalid and color:#fff still applied.
   The "Get a Free Quote" button was white text on a white card: present,
   clickable, and invisible. Any block that borrows a .wkpg-* class has to be on
   this list. */
.wkpg, .wkpg-cta, .wkvt, .wkpg-dir, .wkpg-page, .wkpg-count,
.wksd, .wksv, .wksc {
  --p-ink:     #07080B;
  --p-text:    #2A2D36;
  --p-muted:   #6B7080;
  --p-line:    #E6E9F0;
  --p-orange:  #FF7A1A;
  --p-crimson: #E11D2A;
  --p-grad:    linear-gradient(90deg, #FF7A1A 0%, #F0471E 55%, #E11D2A 100%);
  --p-font:    "Poppins","Segoe UI",Roboto,-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  font-family: var(--p-font);
}
.wkpg *, .wkpg *::before, .wkpg *::after,
.wkpg-cta *, .wkpg-cta *::before, .wkpg-cta *::after,
.wkvt *, .wkvt *::before, .wkvt *::after { box-sizing: border-box; }

/* ==========================================================================
   PAGE BANNER
   The nav is .navbar-fixed-top, so the banner carries the clearance itself
   rather than relying on .pedforsec (145px / 99px), which does not match the
   header at every width. These four values are measured, and are the same
   ones css/wk-hero.css uses on the home page.
   ========================================================================== */
.wkpg {
  position: relative;
  /* the fixed navbar publishes its REAL height as --wk-navh (site-header.php). The
     old hard-coded numbers stay as the no-JavaScript fallback. They were wrong the
     moment the top bar slid away on scroll: the navbar got shorter, this did not,
     and a white gap opened between the menu and the page. */
  margin-top: var(--wk-navh, 122px);
  padding: 34px 0 32px;          /* deliberately short: a banner, not a second hero */
  overflow: hidden;
  color: #fff;
  /* the same four-layer wash the home page hero uses (css/wk-hero.css, .wkb-bg),
     so the banner reads as the top of the same design rather than a new one */
  background:
    radial-gradient(48% 120% at 12% 0%,  rgba(255,122,26,.20), transparent 68%),
    radial-gradient(42% 110% at 88% 10%, rgba(232,184,75,.15), transparent 70%),
    radial-gradient(60% 130% at 70% 110%, rgba(225,29,42,.16), transparent 72%),
    linear-gradient(175deg, #101219 0%, #07080B 72%);
}
.wkpg::before {                      /* the hero's fine grid, faded away from the top */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 62px 62px;
  -webkit-mask-image: radial-gradient(120% 96% at 50% 0%, #000 8%, transparent 78%);
          mask-image: radial-gradient(120% 96% at 50% 0%, #000 8%, transparent 78%);
}
.wkpg > * { position: relative; }
.wkpg-in { max-width: 1240px; margin: 0 auto; padding: 0 20px; }

/* ---------- breadcrumb ----------
   Owner's rule, 2026-09-24: not pills, and not at the top. It sits at the FOOT
   of the strip as one plain line of small text, separated by a thin rule from
   what is above it. No pill, no gradient, no icon - the links are grey, the step
   you are on is white, and orange appears only on hover. */
.wkpg-crumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0;
  margin: 20px 0 0; padding: 14px 0 0;
  border-top: 1px solid rgba(255,255,255,.08);
  list-style: none;
  font-size: 12.5px; letter-spacing: .2px; line-height: 1.6;
}
.wkpg-crumb li { display: inline-flex; align-items: center; }
.wkpg-crumb li + li::before {
  content: "/"; margin: 0 9px; color: #4E5259; font-size: 12px; line-height: 1;
}
.wkpg-crumb a, .wkpg-crumb > li > span { color: #8C919C; text-decoration: none; font-weight: 400; }
.wkpg-crumb a { transition: color .2s ease; }
.wkpg-crumb a:hover, .wkpg-crumb a:focus { color: var(--p-orange); text-decoration: none; }
.wkpg-crumb a:focus-visible { outline: 2px solid var(--p-orange); outline-offset: 3px; }
.wkpg-crumb [aria-current] { color: #E6E8EC; font-weight: 500; }

/* ---------- headline block ---------- */
.wkpg-head { max-width: 760px; }
.wkpg-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(255,122,26,.14); color: #FFB47A;
  font-size: 12px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; line-height: 1.4;
}
.wkpg h1.wkpg-title {
  margin: 12px 0 8px !important; padding: 0 !important;
  font-family: var(--p-font) !important;
  font-size: 35px !important; font-weight: 700 !important; line-height: 1.2 !important;
  letter-spacing: -.4px; color: #fff !important; text-align: left;
}
/* The heading is ONE colour (owner's rule, 2026-09-24: "not too much colours").
   A <span> inside it no longer picks up the brand gradient - it stays white like
   the rest of the line, the same way the menu in the navbar above is one colour.
   The orange is kept for small accents only: the eyebrow pill, the step you are
   on in the breadcrumb, and the chip icons. */
.wkpg h1.wkpg-title span { color: inherit; background: none; -webkit-text-fill-color: currentColor; }
.wkpg-sub { margin: 0; max-width: 680px; font-size: 15.5px; line-height: 1.7; color: #A7ABB4; }

/* ---------- figure chips ---------- */
.wkpg-stats {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 16px 0 0; padding: 0; list-style: none;
}
.wkpg-stats li {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 16px; border-radius: 999px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.10);
  font-size: 13.5px; color: #C8CCD4;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.wkpg-stats li i { color: var(--p-orange); }
.wkpg-stats li b {
  font-size: 16px; font-weight: 800; letter-spacing: -.3px; color: #fff;
}

/* ==========================================================================
   CLOSING CTA STRIP  (shared by all five pages)
   ========================================================================== */
.wkpg-cta {
  position: relative; overflow: hidden;
  padding: 72px 0;
  background:
    radial-gradient(620px 300px at 0% 0%, rgba(255,122,26,.08), transparent 62%),
    radial-gradient(580px 300px at 100% 100%, rgba(225,29,42,.06), transparent 62%),
    linear-gradient(180deg, #F3F5FA 0%, #F8F9FC 100%);
}
.wkpg-cta::before {                     /* the hero's grid lines, very faint */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(14,15,18,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,15,18,.035) 1px, transparent 1px);
  background-size: 62px 62px;
  -webkit-mask-image: radial-gradient(110% 90% at 50% 0%, #000 6%, transparent 76%);
          mask-image: radial-gradient(110% 90% at 50% 0%, #000 6%, transparent 76%);
}
.wkpg-cta > * { position: relative; }
.wkpg-cta__in { max-width: 1240px; margin: 0 auto; padding: 0 20px; }

/* one white card, not a bare strip: it reads as a deliberate closing panel and
   is the same on every detail page (see page-cta.php) */
.wkpg-cta__card {
  position: relative; overflow: hidden;
  display: flex; flex-wrap: wrap; align-items: center; gap: 26px;
  padding: 34px 36px; border-radius: 26px;
  background: #fff; border: 1px solid var(--p-line);
  box-shadow: 0 1px 2px rgba(14,15,18,.04), 0 30px 70px -44px rgba(14,15,18,.55);
}
.wkpg-cta__card::before {               /* brand rule down the left edge */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--p-grad);
}
.wkpg-cta__card::after {                /* a warm glow behind the buttons */
  content: ""; position: absolute; right: -80px; top: -80px; width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,122,26,.13), transparent 68%); pointer-events: none;
}
.wkpg-cta__card > * { position: relative; }

.wkpg-cta__ic {
  flex: none; width: 66px; height: 66px; border-radius: 20px;
  display: grid; place-items: center;
  background: var(--p-grad); color: #fff; font-size: 26px;
  box-shadow: 0 16px 32px -14px rgba(225,29,42,.6);
}
.wkpg-cta__txt { flex: 1 1 380px; min-width: 0; }
.wkpg-cta__eyebrow {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 8px;
  padding: 5px 12px; border-radius: 999px;
  background: rgba(255,122,26,.10); color: #D9480F;
  font-size: 11px; font-weight: 600; letter-spacing: 1.1px; text-transform: uppercase; line-height: 1.4;
}
.wkpg-cta__txt h2 {
  margin: 0 0 8px !important; padding: 0 !important;
  font-family: var(--p-font) !important; font-size: 27px !important; font-weight: 700 !important;
  line-height: 1.25 !important; letter-spacing: -.3px; color: var(--p-ink) !important; text-align: left;
}
.wkpg-cta__txt p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--p-muted); }
.wkpg-cta__btns { flex: none; display: flex; flex-wrap: wrap; gap: 12px; }

/* the reassurance row under the card */
.wkpg-cta__trust {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  margin: 16px 0 0; padding: 0; list-style: none;
}
.wkpg-cta__trust li {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 16px; border-radius: 999px;
  background: rgba(255,255,255,.75); border: 1px solid var(--p-line);
  font-size: 13px; color: var(--p-muted);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.wkpg-cta__trust i { color: var(--p-orange); }
.wkpg-cta__trust b { color: var(--p-ink); font-weight: 600; }
.wkpg-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 26px; border-radius: 999px;
  font-size: 14.5px; font-weight: 600; text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.wkpg-btn--solid { background: var(--p-grad); color: #fff !important; box-shadow: 0 14px 30px -12px rgba(225,29,42,.55); }
.wkpg-btn--solid:hover, .wkpg-btn--solid:focus { color: #fff !important; text-decoration: none; transform: translateY(-2px); box-shadow: 0 18px 36px -12px rgba(225,29,42,.65); }
.wkpg-btn--ghost { background: #fff; color: var(--p-text) !important; border: 1px solid var(--p-line); }
.wkpg-btn--ghost:hover, .wkpg-btn--ghost:focus { color: var(--p-ink) !important; text-decoration: none; border-color: var(--p-orange); transform: translateY(-2px); }

/* ==========================================================================
   PER-PAGE "FULL PAGE" ADJUSTMENTS
   Each section keeps its own card design; only the framing changes, because a
   detail page has its own <h1> banner and so does not need the centred section
   head, and it shows every record rather than the two or three on the home page.
   ========================================================================== */

/* ---- the section head is the banner's job on a detail page ----
   The eyebrow, the <h2> and its one-line summary are hidden, because the banner
   above already says all three - and a page must not carry two headings that say
   the same thing. The head itself is NOT hidden, because on the Achievements
   section the badge pills live inside it and are worth keeping. The SEO section's
   figure strip IS hidden, because those same figures are in the banner's chips. */
.wkpg-page.wkseo .wk-sec__head,
.wkpg-page.wkv   .wk-sec__head { display: none; }

.wkpg-page.wka .wk-sec__head > .wk-eyebrow,
.wkpg-page.wka .wk-sec__head > .wk-sec__title,
.wkpg-page.wka .wk-sec__head > .wk-sec__sub { display: none; }
.wkpg-page.wka .wk-sec__head { max-width: none; margin-bottom: 34px; }

/* ---- SEO Portfolio (.wkseo) ---- */
.wkpg-page.wkseo { padding-top: 44px; }
.wkpg-page.wkseo .wkseo-foot { display: none; }        /* "View All" would link to this page */

/* ---- Gallery (.wkg) ----
   The home page shows a curated handful in three columns. This page shows every
   photo in the admin, so it goes to four columns on a desktop to keep the page
   from becoming twenty rows long. */
.wkpg-page.wkg { padding-top: 44px; }
.wkpg-page.wkg .wkg-foot { display: none; }            /* likewise */
.wkpg-page.wkg .wkg-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wkpg-count {
  margin: 0 0 20px; text-align: center;
  font-size: 13.5px; color: var(--p-muted);
}
.wkpg-count b { color: var(--p-text); font-weight: 600; }

/* ==========================================================================
   LIGHT DETAIL PAGES  (owner's rule, 2026-09-24)
   "On any detail page don't use dark theme - dark only in the breadcrumb."

   Two of the five home sections are dark by design: "Our Achievements" (.wka)
   and the video wall (.wkv). On the home page they must stay dark, because they
   are what breaks up a long light page. On their own detail page the only dark
   band is the breadcrumb banner at the top, so both sections are turned light
   here. The card design itself is untouched - only the surface behind it.

   These rules carry #id and !important because the originals in wk-gallery.css
   and wk-home.css do; nothing in those files is edited, so the home page is
   unaffected.
   ========================================================================== */
#certificatess.wka.wkpg-page,
#vdoYt.wkv.wkpg-page {
  background:
    radial-gradient(700px 320px at 100% 0%, rgba(255,122,26,.07), transparent 62%),
    radial-gradient(640px 320px at 0% 100%, rgba(225,29,42,.05), transparent 62%),
    linear-gradient(180deg, #FFFFFF 0%, #F4F6FA 100%) !important;
}
.wkpg-page.wka::before,
.wkpg-page.wkv::before {               /* the dot texture, inverted for a light surface */
  background-image: radial-gradient(rgba(14,15,18,.05) 1px, transparent 1px);
  opacity: .5;
}
.wkpg-page.wka .wk-sec__title,
.wkpg-page.wkv .wk-sec__title { color: var(--p-ink) !important; }
.wkpg-page.wka .wk-sec__sub,
.wkpg-page.wkv .wk-sec__sub { color: var(--p-muted); }
.wkpg-page.wka .wk-eyebrow,
.wkpg-page.wkv .wk-eyebrow { background: rgba(255,122,26,.10); color: #D9480F; }

/* badge pills under the achievements heading */
.wkpg-page.wka .wka-badges li {
  background: #fff; border-color: var(--p-line); color: var(--p-text);
  box-shadow: 0 8px 20px -16px rgba(14,15,18,.4);
}
.wkpg-page.wka .wka-badges b { color: var(--p-ink); }

/* the certificate card's deep shadow was tuned for a black surface */
.wkpg-page.wka .wka-card {
  border: 1px solid var(--p-line);
  box-shadow: 0 18px 40px -26px rgba(14,15,18,.45);
}
@media (hover: hover) {
  .wkpg-page.wka .wka-card:hover { box-shadow: 0 30px 56px -26px rgba(255,122,26,.42); }
}

/* the video cards keep their black frame - they hold portrait video posters -
   but the ring around them has to read against white instead of black */
.wkpg-page.wkv .wkv-card {
  border-color: var(--p-line);
  box-shadow: 0 20px 44px -26px rgba(14,15,18,.5);
}
@media (hover: hover) {
  .wkpg-page.wkv .wkv-card:hover { box-shadow: 0 30px 58px -24px rgba(225,29,42,.32); }
}

/* ---- Achievements (.wka) ----
   On the home page the certificates sit in a swipeable rail. A detail page has
   room for all of them at once, so the same .wka-card is laid out in a grid.
   The rail's own rules are overridden here, not edited in wk-gallery.css, so
   the home page is untouched. */
.wkpg-page.wka { padding-top: 44px; }
.wkpg-page.wka .wka-track {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px;
  overflow: visible; scroll-snap-type: none; padding: 0; margin: 0;
}
.wkpg-page.wka .wka-item { flex: none; width: auto; scroll-snap-align: none; }
.wkpg-page.wka .wka-nav { display: none; }   /* arrows are pointless in a grid, and the
                                               "View All Certificates" button would link
                                               to the page you are already on */
.wkpg-page.wka .wka-badges { margin-bottom: 30px; }

/* ---- Video testimonials (.wkv) ---- */
.wkpg-page.wkv .wkv-foot { display: none; }  /* likewise: it links to this page */

/* ---- "Hire Dedicated Team / Resource" on certificates.php ----
   #hireservices is a legacy block painted rgba(174,0,0,.8) by css/main.css, and
   it also appears on about-us.php and hire-dedicated.php, which are still on the
   old design. Those two are left exactly as they are; this class is added to the
   copy on certificates.php ONLY, so that page has no dark band below the
   breadcrumb banner. Nothing in main.css is edited.
   The three brand colours the cards carried as inline styles are kept - they
   move from the whole card to a rule across its top, which is why these rules
   need !important (an inline style otherwise wins). */
.wkpg-hire#hireservices {
  padding: 72px 0 !important;
  background:
    radial-gradient(620px 300px at 0% 0%, rgba(255,122,26,.07), transparent 62%),
    linear-gradient(180deg, #FFFFFF 0%, #F4F6FA 100%) !important;
}
.wkpg-hire h2 { color: var(--p-ink) !important; }
.wkpg-hire .lead { max-width: 900px; margin: 12px auto 34px; font-size: 15px; line-height: 1.75; color: var(--p-muted) !important; text-align: center; }
.wkpg-hire .services-wrap {
  position: relative; overflow: hidden; height: 100%;
  padding: 30px 26px 26px !important; border-radius: 20px;
  background: #fff !important;
  border: 1px solid var(--p-line);
  box-shadow: 0 1px 2px rgba(14,15,18,.04), 0 20px 46px -32px rgba(14,15,18,.5);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease;
}
.wkpg-hire .services-wrap::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: #0052A4; }
.wkpg-hire .col-md-4:nth-child(2) .services-wrap::before { background: #3C3C3C; }
.wkpg-hire .col-md-4:nth-child(3) .services-wrap::before { background: #006C6C; }
@media (hover: hover) {
  .wkpg-hire .services-wrap:hover { transform: translateY(-6px); border-color: rgba(255,122,26,.42); box-shadow: 0 1px 2px rgba(14,15,18,.04), 0 34px 60px -30px rgba(225,29,42,.34); }
}
.wkpg-hire .services-wrap img { max-height: 92px; width: auto; margin: 0 auto 16px; }
.wkpg-hire .media-heading { margin: 0 0 8px; font-size: 17px; font-weight: 700; line-height: 1.35; }
.wkpg-hire .media-heading a { color: var(--p-ink) !important; text-decoration: none; }
.wkpg-hire .media-heading a:hover { color: #D9480F !important; }
.wkpg-hire .media-body p { margin: 0; font-size: 14px; line-height: 1.75; color: var(--p-muted) !important; }
.wkpg-hire .white-clr { color: var(--p-muted) !important; }
.wkpg-hire .row { display: flex; flex-wrap: wrap; }
.wkpg-hire .row > div { display: flex; margin-bottom: 24px; }
@media (max-width: 767px) {
  .wkpg-hire#hireservices { padding: 52px 0 !important; }
  .wkpg-hire .lead { font-size: 14px; margin-bottom: 26px; }
}

/* ---- Packages (.wkp) ----
   The home page shows three priced plans. This page is the directory of every
   package, so the card is the same shell without the price block: icon, name,
   what it covers, and the link to that package's own page (where the prices
   live, exactly as before). */
.wkpg-page.wkp { padding-top: 44px; }
.wkpg-page.wkp .wkp-foot { display: none; }
.wkpg-dir {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
  margin: 0; padding: 0; list-style: none;
}
.wkpg-dir__card {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; gap: 16px;
  padding: 30px 26px 26px; border-radius: 22px;
  background: #fff; border: 1px solid var(--p-line);
  box-shadow: 0 1px 2px rgba(14,15,18,.04), 0 20px 46px -32px rgba(14,15,18,.5);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease;
}
/* a brand rule across the top that draws itself in from the left on hover */
.wkpg-dir__card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: var(--p-grad);
  transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
/* a soft wash that fades up from the bottom corner, so the card is not a flat box */
.wkpg-dir__card::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(420px 260px at 100% 100%, rgba(255,122,26,.10), transparent 68%);
  opacity: 0; transition: opacity .35s ease;
}
@media (hover: hover) {
  .wkpg-dir__card:hover {
    transform: translateY(-6px); border-color: rgba(255,122,26,.42);
    box-shadow: 0 1px 2px rgba(14,15,18,.04), 0 34px 60px -30px rgba(225,29,42,.38);
  }
  .wkpg-dir__card:hover::before { transform: scaleX(1); }
  .wkpg-dir__card:hover::after  { opacity: 1; }
  .wkpg-dir__card:hover .wkpg-dir__ic { transform: rotate(-6deg) scale(1.06); }
  .wkpg-dir__card:hover .wkpg-dir__ic::before { opacity: 1; }
}
.wkpg-dir__card:focus-within { border-color: rgba(255,122,26,.42); }
.wkpg-dir__card:focus-within::before { transform: scaleX(1); }

.wkpg-dir__top { display: flex; align-items: center; gap: 15px; }
.wkpg-dir__ic {
  position: relative; flex: none; width: 56px; height: 56px; border-radius: 17px;
  display: grid; place-items: center;
  background: linear-gradient(145deg, rgba(255,122,26,.15), rgba(225,29,42,.11));
  color: #E8590C; font-size: 22px;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), color .3s ease;
}
.wkpg-dir__ic::before {              /* the tile fills with the brand gradient on hover */
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: var(--p-grad); opacity: 0; transition: opacity .3s ease;
}
.wkpg-dir__ic i { position: relative; z-index: 1; transition: color .3s ease; }
@media (hover: hover) { .wkpg-dir__card:hover .wkpg-dir__ic i { color: #fff; } }

.wkpg-dir__card h3 {
  margin: 0 0 6px !important; padding: 0 !important;
  font-family: var(--p-font) !important; font-size: 18px !important; font-weight: 700 !important;
  line-height: 1.3 !important; letter-spacing: -.2px; color: var(--p-ink) !important; text-align: left;
}
.wkpg-dir__tag {
  display: inline-block; padding: 4px 11px; border-radius: 999px;
  background: rgba(255,122,26,.10);
  font-size: 11px; font-weight: 600; letter-spacing: .7px; text-transform: uppercase; color: #D9480F;
}
.wkpg-dir__txt {
  flex: 1 1 auto; margin: 0; padding-top: 2px;
  font-size: 14px; line-height: 1.75; color: var(--p-muted);
  border-top: 1px solid var(--p-line); padding-top: 16px;
}
.wkpg-dir__go {
  align-self: stretch;
  display: inline-flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 14px 13px 20px; border-radius: 14px;
  background: #F4F6FA; border: 1px solid var(--p-line);
  font-size: 13.5px; font-weight: 600; color: var(--p-text) !important; text-decoration: none !important;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
/* the link covers the whole card, so the entire tile is clickable - but it is
   still one link, and still the only focus stop */
.wkpg-dir__go::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.wkpg-dir__go i {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px;
  background: #fff; border: 1px solid var(--p-line); color: #D9480F;
  transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.wkpg-dir__card:hover .wkpg-dir__go,
.wkpg-dir__go:hover, .wkpg-dir__go:focus {
  background: var(--p-grad); border-color: transparent; color: #fff !important; text-decoration: none !important;
}
.wkpg-dir__card:hover .wkpg-dir__go i,
.wkpg-dir__go:hover i, .wkpg-dir__go:focus i {
  background: rgba(255,255,255,.22); border-color: transparent; color: #fff; transform: translateX(3px);
}
.wkpg-dir__go:focus-visible { outline: 3px solid rgba(255,122,26,.6); outline-offset: 3px; }

/* ==========================================================================
   CLIENT REVIEWS PANEL  (.wkrw, video-testimonial.php, under the video wall)

   The layout the owner asked for on 2026-09-24: a score card on the left and a
   rail of review cards on the right, the way a Google review widget reads.

   EVERY FIGURE IS REAL. The score, the total and the bars come from
   reviews-data.php - the same six rows the home page "Outstanding Reviews"
   section prints. The bars show how the reviews are SPREAD ACROSS PLATFORMS,
   which is data we actually hold; they are deliberately not a 5/4/3/2/1 star
   breakdown, because nobody has that number and it would have to be invented.
   The cards are the Active rows of Admin -> Testimonials.
   ========================================================================== */
.wkrw {
  --p-ink:     #07080B;
  --p-text:    #2A2D36;
  --p-muted:   #6B7080;
  --p-line:    #E6E9F0;
  --p-orange:  #FF7A1A;
  --p-grad:    linear-gradient(90deg, #FF7A1A 0%, #F0471E 55%, #E11D2A 100%);
  --p-font:    "Poppins","Segoe UI",Roboto,-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  position: relative; overflow: hidden; padding: 76px 0;
  font-family: var(--p-font);
  background:
    radial-gradient(620px 300px at 100% 0%, rgba(255,122,26,.07), transparent 62%),
    linear-gradient(180deg, #F8F9FC 0%, #F3F5FA 100%);
}
.wkrw *, .wkrw *::before, .wkrw *::after { box-sizing: border-box; }
.wkrw-in { max-width: 1240px; margin: 0 auto; padding: 0 20px; }

.wkrw-head { max-width: 720px; margin: 0 auto 38px; text-align: center; }
.wkrw-head .wkpg-eyebrow { background: rgba(255,122,26,.10); color: #D9480F; }
.wkrw-head h2 {
  margin: 14px 0 10px !important; padding: 0 !important;
  font-family: var(--p-font) !important; font-size: 32px !important; font-weight: 700 !important;
  line-height: 1.2 !important; letter-spacing: -.3px; color: var(--p-ink) !important; text-align: center;
}
.wkrw-head p { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--p-muted); }

.wkrw-body { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 26px; align-items: start; }

/* ---------- the score card ---------- */
.wkrw-score {
  position: sticky; top: 140px;
  padding: 26px 24px; border-radius: 22px;
  background: #fff; border: 1px solid var(--p-line);
  box-shadow: 0 1px 2px rgba(14,15,18,.04), 0 24px 54px -36px rgba(14,15,18,.5);
}
.wkrw-score__top { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--p-line); }
.wkrw-score__top svg { width: 30px; height: 30px; flex: none; }
.wkrw-score__top b { display: block; font-size: 15.5px; font-weight: 700; line-height: 1.3; color: var(--p-ink); }
.wkrw-score__top small { display: block; font-size: 12.5px; line-height: 1.4; color: var(--p-muted); }

.wkrw-big { display: flex; align-items: center; gap: 14px; padding: 20px 0 18px; }
.wkrw-big__n { font-size: 46px; font-weight: 800; line-height: 1; letter-spacing: -1.5px; color: var(--p-ink); }
.wkrw-big__r { min-width: 0; }
.wkrw-big__sub { margin: 4px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--p-muted); }

/* the star row: one gradient clipped to a percentage, so half stars are exact */
.wkrw-stars {
  --p: 100%;
  display: block; width: 104px; height: 18px;
  background: linear-gradient(90deg, #FFC53D var(--p), #DDE1E9 var(--p));
  -webkit-mask: repeat-x left center/20.8px 18px
     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.9 7.1.6-5.4 4.7 1.7 7-6.3-3.9-6.3 3.9 1.7-7L2 9.5l7.1-.6z'/%3E%3C/svg%3E");
          mask: repeat-x left center/20.8px 18px
     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.9 7.1.6-5.4 4.7 1.7 7-6.3-3.9-6.3 3.9 1.7-7L2 9.5l7.1-.6z'/%3E%3C/svg%3E");
}
.wkrw-stars--sm { width: 87px; height: 15px; -webkit-mask-size: 17.4px 15px; mask-size: 17.4px 15px; }

/* how the reviews are spread across the six platforms */
.wkrw-bars { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 8px; }
.wkrw-bars li { display: grid; grid-template-columns: 74px minmax(0, 1fr) 34px; align-items: center; gap: 9px; font-size: 12px; color: var(--p-muted); }
.wkrw-bars__n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--p-text); font-weight: 500; }
.wkrw-bars__t { height: 8px; border-radius: 999px; background: #EDF0F5; overflow: hidden; }
.wkrw-bars__t span { display: block; height: 100%; border-radius: 999px; background: var(--c, #FFC53D); }
.wkrw-bars__v { text-align: right; font-variant-numeric: tabular-nums; }

.wkrw-cta {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; padding: 13px 20px; border-radius: 14px;
  background: var(--p-grad); color: #fff !important;
  font-size: 14px; font-weight: 600; text-decoration: none !important;
  box-shadow: 0 14px 30px -14px rgba(225,29,42,.6);
  transition: transform .2s ease, box-shadow .2s ease;
}
.wkrw-cta:hover, .wkrw-cta:focus { transform: translateY(-2px); box-shadow: 0 20px 38px -14px rgba(225,29,42,.7); }
.wkrw-note { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: var(--p-muted); text-align: center; }

/* ---------- the rail of review cards ---------- */
.wkrw-rail { position: relative; min-width: 0; }
.wkrw-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  gap: 20px; margin: 0; padding: 4px; list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior-x: contain;
}
.wkrw-track::-webkit-scrollbar { display: none; }
.wkrw-card {
  display: flex; flex-direction: column; gap: 14px; scroll-snap-align: start;
  padding: 22px; border-radius: 18px;
  background: #fff; border: 1px solid var(--p-line);
  box-shadow: 0 1px 2px rgba(14,15,18,.04), 0 18px 44px -32px rgba(14,15,18,.5);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
@media (hover: hover) {
  .wkrw-card:hover { transform: translateY(-4px); border-color: rgba(255,122,26,.4); box-shadow: 0 1px 2px rgba(14,15,18,.04), 0 28px 54px -30px rgba(225,29,42,.3); }
}
.wkrw-who { display: flex; align-items: center; gap: 12px; }
.wkrw-ava {
  flex: none; width: 46px; height: 46px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center;
  background: var(--c, #E8590C); color: #fff; font-size: 17px; font-weight: 700;
}
.wkrw-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wkrw-who__t { flex: 1 1 auto; min-width: 0; }
.wkrw-who__t b { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.35; color: var(--p-ink); }
.wkrw-who__t small { display: block; font-size: 12px; line-height: 1.45; color: var(--p-muted); }
.wkrw-mark { flex: none; width: 22px; height: 22px; opacity: .9; }

.wkrw-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.wkrw-verified {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 500; color: #15803D;
}
.wkrw-verified i { font-size: 13px; }

.wkrw-text { flex: 1 1 auto; margin: 0; font-size: 14px; line-height: 1.75; color: var(--p-text); }
.wkrw-text p { margin: 0 0 9px; color: inherit; }
.wkrw-text p:last-child { margin-bottom: 0; }
/* long reviews are clipped to a readable height until "Read more" is pressed,
   so one three-paragraph review cannot make every card in the row that tall */
.wkrw-card:not(.is-open) .wkrw-text {
  display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden;
}
.wkrw-more {
  align-self: flex-start; padding: 0; border: 0; background: none;
  font-family: var(--p-font); font-size: 13px; font-weight: 600; color: #D9480F; cursor: pointer;
}
.wkrw-more:hover { text-decoration: underline; }
.wkrw-foot { padding-top: 13px; border-top: 1px solid var(--p-line); font-size: 12.5px; color: var(--p-muted); }
.wkrw-foot b { color: var(--p-text); font-weight: 600; }

/* arrows + dots */
.wkrw-nav { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 20px; }
.wkrw-arrow {
  width: 42px; height: 42px; flex: none; display: grid; place-items: center; padding: 0;
  border-radius: 50%; border: 1px solid var(--p-line); background: #fff;
  color: var(--p-text); font-size: 14px; cursor: pointer;
  box-shadow: 0 10px 24px -18px rgba(14,15,18,.6);
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.wkrw-arrow:hover { background: var(--p-grad); border-color: transparent; color: #fff; }
.wkrw-arrow:active { transform: scale(.94); }
.wkrw-arrow[disabled] { opacity: .35; cursor: default; }
.wkrw-arrow[disabled]:hover { background: #fff; color: var(--p-text); border-color: var(--p-line); }
.wkrw-dots { display: flex; align-items: center; gap: 7px; }
.wkrw-dots button {
  width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%;
  background: #C9CEDA; cursor: pointer; transition: background .2s, transform .2s;
}
.wkrw-dots button.is-on { background: var(--p-grad); transform: scale(1.35); }

@media (max-width: 1199px) {
  .wkrw-body { grid-template-columns: 300px minmax(0, 1fr); }
  .wkrw-track { grid-auto-columns: minmax(0, 300px); }
}
@media (max-width: 991px) {
  .wkrw-body { grid-template-columns: minmax(0, 1fr); }
  .wkrw-score { position: static; }
  .wkrw-track { grid-auto-columns: minmax(0, 320px); }
}
@media (max-width: 767px) {
  .wkrw { padding: 56px 0; }
  .wkrw-in { padding: 0 16px; }
  .wkrw-head { margin-bottom: 28px; }
  .wkrw-head h2 { font-size: 24px !important; }
  .wkrw-head p { font-size: 14px; }
  .wkrw-score { padding: 22px 20px; border-radius: 18px; }
  .wkrw-big__n { font-size: 40px; }
  .wkrw-track { grid-auto-columns: minmax(0, 84%); gap: 14px; }
  .wkrw-card { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .wkrw-track { scroll-behavior: auto; }
  .wkrw-card, .wkrw-cta, .wkrw-arrow, .wkrw-dots button { transition: none; }
  .wkrw-card:hover, .wkrw-cta:hover { transform: none; }
}

/* ==========================================================================
   WRITTEN TESTIMONIALS  (superseded by .wkrw above; kept because the markup
   may still be in a page that has not been rebuilt yet)
   ========================================================================== */
.wkvt {
  position: relative; padding: 76px 0;
  background:
    radial-gradient(620px 300px at 100% 0%, rgba(255,122,26,.07), transparent 62%),
    linear-gradient(180deg, #F8F9FC 0%, #F3F5FA 100%);
}
.wkvt-in { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.wkvt-head { max-width: 720px; margin: 0 auto 38px; text-align: center; }
.wkvt-head .wkpg-eyebrow { background: rgba(255,122,26,.10); color: #D9480F; }
.wkvt-head h2 {
  margin: 14px 0 10px !important; padding: 0 !important;
  font-family: var(--p-font) !important; font-size: 32px !important; font-weight: 700 !important;
  line-height: 1.2 !important; letter-spacing: -.3px; color: var(--p-ink) !important; text-align: center;
}
.wkvt-head p { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--p-muted); }

.wkvt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.wkvt-card {
  position: relative; display: flex; flex-direction: column; gap: 16px;
  padding: 30px 26px 26px; border-radius: 20px;
  background: #fff; border: 1px solid var(--p-line);
  box-shadow: 0 18px 44px -30px rgba(14,15,18,.45);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.wkvt-card:hover { transform: translateY(-5px); border-color: rgba(255,122,26,.45); box-shadow: 0 26px 54px -26px rgba(225,29,42,.3); }
.wkvt-card::before {
  content: "\201C";
  position: absolute; top: 6px; right: 22px;
  font-family: Georgia, "Times New Roman", serif; font-size: 78px; line-height: 1;
  color: rgba(255,122,26,.16); pointer-events: none;
}
.wkvt-stars { display: flex; gap: 3px; }
.wkvt-stars svg { width: 15px; height: 15px; fill: #FFC53D; }
.wkvt-quote { flex: 1 1 auto; margin: 0; font-size: 14.5px; line-height: 1.8; color: var(--p-text); }
.wkvt-quote p { margin: 0 0 10px; }
.wkvt-quote p:last-child { margin-bottom: 0; }
.wkvt-who { display: flex; align-items: center; gap: 13px; padding-top: 16px; border-top: 1px solid var(--p-line); }
.wkvt-ava {
  flex: none; width: 52px; height: 52px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center;
  background: var(--p-grad); color: #fff; font-size: 17px; font-weight: 700; letter-spacing: .5px;
}
.wkvt-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wkvt-who b { display: block; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--p-ink); }
.wkvt-who small { display: block; font-size: 12.5px; line-height: 1.45; color: var(--p-muted); }

/* ==========================================================================
   RESPONSIVE
   The three breakpoints below mirror the header exactly, the same way the
   hero does, so the banner never slides under the menu on a tablet.
   ========================================================================== */
@media (max-width: 1199px) {          /* small laptops - the menu wraps onto two rows */
  .wkpg { margin-top: var(--wk-navh, 170px); padding: 30px 0 28px; }
  .wkpg h1.wkpg-title { font-size: 34px !important; }
  .wkpg-dir, .wkvt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wkpg-page.wka .wka-track { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wkpg-page.wkg .wkg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991px) {           /* tablets - the menu wraps onto three rows */
  .wkpg { margin-top: var(--wk-navh, 218px); padding: 28px 0 26px; }
  .wkpg h1.wkpg-title { font-size: 30px !important; }
  .wkpg-cta__card { padding: 30px 28px; gap: 22px; }
  .wkpg-cta__btns { flex: 1 1 100%; }
}
@media (max-width: 767px) {           /* large phones and small tablets - one short header bar */
  .wkpg { margin-top: var(--wk-navh, 70px); padding: 20px 0 20px; }   /* 70, not 69: the header measures 69.4-69.7px at some phone widths once its logo has loaded */
  .wkpg-in, .wkpg-cta__in, .wkvt-in { padding: 0 16px; }
  .wkpg h1.wkpg-title { font-size: 22px !important; }   /* phones: 22px, as asked */
  .wkpg-sub { font-size: 14px; }
  /* the chips scroll sideways in one row instead of stacking into three, which
     is what kept the banner short on a phone (they wrap on every other size) */
  .wkpg-stats {
    flex-wrap: nowrap; gap: 8px; margin: 14px -16px 0; padding: 2px 16px 4px;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .wkpg-stats::-webkit-scrollbar { display: none; }
  .wkpg-stats li { flex: none; padding: 7px 13px; font-size: 12.5px; white-space: nowrap; }
  .wkpg-stats li b { font-size: 14.5px; }
  /* two columns on a phone, as on the home page - three made the tiles too
     small to read the caption on */
  .wkpg-page.wkg .wkg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wkpg-dir, .wkvt-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .wkpg-page.wka .wka-track { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .wkpg-cta { padding: 52px 0; }
  .wkpg-cta__card { flex-direction: column; align-items: flex-start; padding: 26px 22px; border-radius: 20px; gap: 18px; }
  .wkpg-cta__ic { width: 54px; height: 54px; border-radius: 16px; font-size: 22px; }
  .wkpg-cta__btns { width: 100%; }
  .wkpg-cta__trust { gap: 8px; }
  .wkpg-cta__trust li { padding: 7px 13px; font-size: 12.5px; }
  .wkpg-cta__txt h2 { font-size: 22px !important; }
  .wkpg-btn { padding: 12px 22px; font-size: 14px; }
  .wkvt { padding: 56px 0; }
  .wkvt-head { margin-bottom: 28px; }
  .wkvt-head h2 { font-size: 24px !important; }
  .wkvt-card { padding: 24px 20px 20px; }
}
@media (max-width: 575px) {           /* phones */
  .wkpg-crumb { font-size: 12px; margin-bottom: 12px; }
  .wkpg-btn { flex: 1 1 100%; justify-content: center; }
  .wkpg-cta__btns { width: 100%; }
}
@media (min-width: 1600px) {          /* large desktops and iMacs */
  .wkpg { padding: 42px 0 40px; }
  .wkpg h1.wkpg-title { font-size: 35px !important; }   /* 35px on every desktop size, as asked */
}
@media (prefers-reduced-motion: reduce) {
  .wkpg-dir__card, .wkvt-card, .wkpg-btn, .wkpg-dir__go { transition: none; }
  .wkpg-dir__card:hover, .wkvt-card:hover, .wkpg-btn:hover, .wkpg-dir__go:hover { transform: none; }
}