/* ==========================================================================
   WebKeyIndia — service pages  (2026-09-24)
   One stylesheet for the two things category.php renders:

     .wksv   a SERVICE CATEGORY page - the grid of sub-services
             (e.g. /website-designing-services.html, 12 cards)
     .wksd   a SERVICE DETAIL page - one service, with its sidebar
             (e.g. /static-web-designing.html)

   category.php draws 154 pages on its own (11 categories + 143 services), and
   the same template is reached again under every location and industry prefix,
   so everything here has to hold up at any word length and in any of those
   combinations.

   Same brand system as the other wk-*.css files. Everything is scoped to .wksv
   or .wksd; the page banner and the closing panel come from css/wk-page.css.
   ========================================================================== */
.wksv, .wksd {
  --v-ink:     #0E0F12;
  --v-text:    #2A2D36;
  --v-muted:   #6B7080;
  --v-line:    #E6E9F0;
  --v-orange:  #FF7A1A;
  --v-crimson: #E11D2A;
  --v-grad:    linear-gradient(90deg, #FF7A1A 0%, #F0471E 55%, #E11D2A 100%);
  --v-font:    "Poppins","Segoe UI",Roboto,-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  position: relative;
  font-family: var(--v-font);
}
.wksv *, .wksv *::before, .wksv *::after,
.wksd *, .wksd *::before, .wksd *::after { box-sizing: border-box; }

.wksv-in, .wksd-in { max-width: 1240px; margin: 0 auto; padding: 0 20px; }

/* ==========================================================================
   CATEGORY PAGE — the grid of services
   ========================================================================== */
.wksv {
  overflow: hidden; padding: 66px 0 76px;
  background:
    radial-gradient(640px 300px at 100% 0%, rgba(255,122,26,.07), transparent 62%),
    radial-gradient(600px 300px at 0% 100%, rgba(225,29,42,.05), transparent 62%),
    linear-gradient(180deg, #FFFFFF 0%, #F4F6FA 100%);
}
.wksv > * { position: relative; }

/* the banner image the admin can set per category */
.wksv-banner { margin: 0 0 40px; }
.wksv-banner img {
  display: block; width: 100%; height: auto; border-radius: 20px;
  box-shadow: 0 24px 54px -34px rgba(14,15,18,.55);
}

.wksv-lead { max-width: 760px; margin: 0 0 34px; }
.wksv-lead h2 {
  margin: 0 0 10px !important; padding: 0 !important;
  font-family: var(--v-font) !important; font-size: 26px !important; font-weight: 700 !important;
  line-height: 1.3 !important; letter-spacing: -.3px; color: var(--v-ink) !important; text-align: left;
}
.wksv-lead p { margin: 0; font-size: 15px; line-height: 1.75; color: var(--v-muted); }

/* ---------- the cards ----------
   Icon-led, not picture-led: see the note in category.php. The card is a quiet
   white panel that comes alive on hover - a brand rule draws across the top, a
   warm wash rises from the bottom-right, the icon tile fills with the gradient
   and the arrow travels. The big outlined numeral in the corner gives the grid
   a rhythm without adding another colour. */
.wksv-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
  margin: 0; padding: 0; list-style: none;
}
.wksv-card {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 28px 26px 22px; border-radius: 22px; background: #fff;
  border: 1px solid var(--v-line);
  box-shadow: 0 1px 2px rgba(14,15,18,.04), 0 20px 46px -34px rgba(14,15,18,.5);
  transition: transform .32s cubic-bezier(.2,.8,.2,1), box-shadow .32s ease, border-color .32s ease;
}
.wksv-card::before {                    /* brand rule that draws in from the left */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; z-index: 3;
  background: var(--v-grad);
  transform: scaleX(0); transform-origin: left; transition: transform .38s cubic-bezier(.2,.8,.2,1);
}
.wksv-card::after {                     /* a warm wash that rises on hover */
  content: ""; position: absolute; right: -60px; bottom: -70px; z-index: -1;
  width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,122,26,.16), transparent 66%);
  opacity: 0; transform: scale(.6); transition: opacity .4s ease, transform .5s cubic-bezier(.2,.8,.2,1);
}

/* the number: a glass chip over the picture, or an outlined numeral when there
   is no picture to sit on */
.wksv-num {
  position: absolute; top: 12px; right: 12px; z-index: 2; pointer-events: none;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 28px; padding: 0 10px; border-radius: 9px;
  background: rgba(7,8,11,.58); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.20);
  font-size: 12px; font-weight: 700; letter-spacing: .5px; color: #fff;
  transition: background .32s ease;
}
.wksv-num--bare {
  top: 14px; right: 20px; z-index: 0;
  min-width: 0; height: auto; padding: 0; border: 0; background: none; backdrop-filter: none;
  font-size: 44px; font-weight: 800; line-height: 1; letter-spacing: -2px;
  color: transparent; -webkit-text-stroke: 1.5px rgba(14,15,18,.10);
  transition: -webkit-text-stroke-color .32s ease, transform .32s ease;
}

/* the icon tile */
.wksv-ic {
  position: relative; z-index: 2;
  width: 54px; height: 54px; margin: -34px 0 16px; border-radius: 17px;
  border: 3px solid #fff;
  display: grid; place-items: center;
  /* OPAQUE, not a tint. It used to be a translucent orange wash, and because the
     tile sits ON TOP OF THE PICTURE the artwork showed straight through it - the
     icon was unreadable until you hovered and the gradient filled in. It is now a
     solid warm tile at rest and the brand gradient on hover. */
  background: #FFF1E4;
  box-shadow: 0 10px 22px -12px rgba(14,15,18,.40);
  color: #E8590C; font-size: 23px;
  transition: transform .36s cubic-bezier(.2,.8,.2,1), color .3s ease, box-shadow .3s ease;
}
.wksv-ic::before {                      /* fills with the brand gradient on hover */
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: var(--v-grad); opacity: 0; transition: opacity .3s ease;
}
.wksv-ic i { position: relative; z-index: 1; transition: color .3s ease; }
.wksv-card--noimg .wksv-ic { margin: 0 0 18px; border: 0; width: 58px; height: 58px; }

/* optional picture, only when $wkSvCardImg is switched on */
.wksv-card__img {
  position: relative; display: block; margin: -28px -26px 0; overflow: hidden;
  aspect-ratio: 5 / 2;                  /* the shape 141 of the 153 files already are, so
                                           object-fit: cover crops nothing and enlarges nothing */
  background: #EDF0F5;
}
.wksv-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.wksv-card:hover .wksv-card__img img { transform: scale(1.05); }

.wksv-card__body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 9px; flex: 1 1 auto; }
.wksv-card h3 {
  margin: 0 !important; padding: 0 !important;
  font-family: var(--v-font) !important; font-size: 17.5px !important; font-weight: 700 !important;
  line-height: 1.35 !important; letter-spacing: -.2px; color: var(--v-ink) !important; text-align: left;
}
.wksv-card h3 a { color: inherit; text-decoration: none !important; }
.wksv-card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 4; }   /* whole card is the link */
.wksv-blurb {
  flex: 1 1 auto; margin: 0; font-size: 13.8px; line-height: 1.7; color: var(--v-muted);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

.wksv-card__foot {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--v-line);
}
.wksv-go { font-size: 13px; font-weight: 600; letter-spacing: .2px; color: var(--v-text); transition: color .3s ease; }
.wksv-arrow {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%;
  background: #F4F6FA; border: 1px solid var(--v-line); color: #D9480F; font-size: 13px;
  transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}

@media (hover: hover) {
  .wksv-card:hover {
    transform: translateY(-6px); border-color: rgba(255,122,26,.42);
    box-shadow: 0 1px 2px rgba(14,15,18,.04), 0 34px 62px -30px rgba(225,29,42,.36);
  }
  .wksv-card:hover::before { transform: scaleX(1); }
  .wksv-card:hover::after  { opacity: 1; transform: scale(1); }
  .wksv-card:hover .wksv-num { -webkit-text-stroke-color: rgba(255,122,26,.30); transform: translateY(-2px); }
  .wksv-card:hover .wksv-ic { transform: rotate(-6deg) scale(1.06); box-shadow: 0 14px 28px -12px rgba(225,29,42,.55); }
  .wksv-card:hover .wksv-ic::before { opacity: 1; }
  .wksv-card:hover .wksv-ic i { color: #fff; }
  .wksv-card:hover .wksv-go { color: #D9480F; }
  .wksv-card:hover .wksv-arrow { background: var(--v-grad); border-color: transparent; color: #fff; transform: translateX(3px); }
}
.wksv-card:focus-within { border-color: rgba(255,122,26,.42); }
.wksv-card:focus-within::before { transform: scaleX(1); }
.wksv-card h3 a:focus-visible { outline: 3px solid rgba(255,122,26,.6); outline-offset: 4px; }

/* ---------- the category's own write-up, under the grid ----------
   Some categories have three lines here and some have three screens, so it is a
   panel with the text at a readable measure rather than a bare column - a short
   write-up no longer looks like half an empty row. */
.wksv-more {
  margin: 52px 0 0; padding: 34px 36px; border-radius: 22px;
  background: #fff; border: 1px solid var(--v-line);
  box-shadow: 0 1px 2px rgba(14,15,18,.04), 0 20px 46px -36px rgba(14,15,18,.5);
}
.wksv-more > h2 {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 18px !important; padding: 0 0 16px !important;
  border-bottom: 1px solid var(--v-line);
  font-family: var(--v-font) !important; font-size: 22px !important; font-weight: 700 !important;
  line-height: 1.3 !important; color: var(--v-ink) !important; text-align: left;
}
.wksv-more > h2 i {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 11px;
  background: linear-gradient(145deg, rgba(255,122,26,.15), rgba(225,29,42,.11));
  color: #E8590C; font-size: 15px;
}
.wksv-more .wk-prose { max-width: 900px; }

/* ==========================================================================
   PROSE — the HTML the admin's editor produces, on both page types.
   The admin content is left exactly as written; these rules only give it
   readable measure, spacing and colour.
   ========================================================================== */
.wk-prose { max-width: 820px; font-size: 15px; line-height: 1.85; color: var(--v-text); }
.wksd .wk-prose { max-width: none; }
.wk-prose > *:first-child { margin-top: 0; }
.wk-prose > *:last-child { margin-bottom: 0; }
.wk-prose p { margin: 0 0 16px; color: inherit; }
.wk-prose h1, .wk-prose h2, .wk-prose h3, .wk-prose h4, .wk-prose h5, .wk-prose h6 {
  margin: 30px 0 12px !important; padding: 0 !important;
  font-family: var(--v-font) !important; font-weight: 700 !important;
  line-height: 1.35 !important; letter-spacing: -.2px; color: var(--v-ink) !important; text-align: left;
}
.wk-prose h1, .wk-prose h2 { font-size: 22px !important; }
.wk-prose h3 { font-size: 19px !important; }
.wk-prose h4, .wk-prose h5, .wk-prose h6 { font-size: 16.5px !important; }
.wk-prose strong, .wk-prose b { color: var(--v-ink); font-weight: 600; }
.wk-prose ul, .wk-prose ol { margin: 0 0 16px; padding-left: 0; list-style: none; }
.wk-prose ol { counter-reset: wkp; }
.wk-prose li { position: relative; margin: 0 0 9px; padding-left: 28px; }
.wk-prose ul > li::before {
  content: ""; position: absolute; left: 4px; top: .62em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--v-grad);
}
.wk-prose ol > li { counter-increment: wkp; }
.wk-prose ol > li::before {
  content: counter(wkp); position: absolute; left: 0; top: .1em;
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,122,26,.13); color: #D9480F; font-size: 11px; font-weight: 700;
}
.wk-prose a { color: #D9480F; text-decoration: underline; }
.wk-prose img { max-width: 100%; height: auto; border-radius: 14px; margin: 8px 0 16px; }
.wk-prose table {
  width: 100%; margin: 0 0 18px; border-collapse: collapse;
  border: 1px solid var(--v-line); border-radius: 12px; overflow: hidden;
}
.wk-prose th, .wk-prose td { padding: 11px 14px; border: 1px solid var(--v-line); text-align: left; font-size: 14px; }
.wk-prose th { background: #F4F6FA; color: var(--v-ink); font-weight: 600; }
.wk-prose blockquote {
  margin: 0 0 18px; padding: 14px 20px; border-left: 4px solid var(--v-orange);
  background: #F7F8FC; border-radius: 0 12px 12px 0; color: var(--v-muted);
}

/* ==========================================================================
   SERVICE DETAIL PAGE
   ========================================================================== */
.wksd {
  overflow: hidden; padding: 60px 0 76px;
  background:
    radial-gradient(620px 300px at 100% 0%, rgba(255,122,26,.06), transparent 62%),
    linear-gradient(180deg, #FFFFFF 0%, #F4F6FA 100%);
}
.wksd > * { position: relative; }
.wksd-body { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 34px; align-items: start; }

.wksd-main {
  padding: 30px 32px; border-radius: 22px; background: #fff;
  border: 1px solid var(--v-line);
  box-shadow: 0 1px 2px rgba(14,15,18,.04), 0 22px 50px -36px rgba(14,15,18,.5);
}
.wksd-hero { margin: 0 0 26px; border-radius: 16px; overflow: hidden; background: #EDF0F5; }
.wksd-hero img { display: block; width: 100%; height: auto; }

/* the "ask us" bar under the write-up */
.wksd-ask {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  margin: 30px 0 0; padding: 22px 24px; border-radius: 18px;
  background:
    radial-gradient(420px 200px at 100% 0%, rgba(255,122,26,.12), transparent 66%),
    linear-gradient(180deg, #F7F8FC 0%, #F1F3F9 100%);
  border: 1px solid var(--v-line);
}
.wksd-ask b { display: block; font-size: 17px; font-weight: 700; line-height: 1.35; color: var(--v-ink); }
.wksd-ask small { display: block; margin-top: 3px; font-size: 13.5px; color: var(--v-muted); }
.wksd-ask__btns { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- sidebar ---------- */
.wksd-side { position: sticky; top: 140px; display: grid; gap: 20px; }
.wksd-box {
  border-radius: 20px; background: #fff; border: 1px solid var(--v-line);
  box-shadow: 0 1px 2px rgba(14,15,18,.04), 0 18px 44px -34px rgba(14,15,18,.5);
  overflow: hidden;
}
.wksd-box__h {
  display: flex; align-items: center; gap: 10px;
  padding: 15px 20px; border-bottom: 1px solid var(--v-line);
  font-size: 12.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--v-ink);
}
.wksd-box__h i {
  width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 8px;
  background: rgba(255,122,26,.12); color: #D9480F; font-size: 12px;
}
.wksd-list { margin: 0; padding: 10px; list-style: none; display: grid; gap: 2px; }
.wksd-list a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 11px;
  font-size: 13.8px; line-height: 1.45; color: var(--v-text); text-decoration: none !important;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.wksd-list a::before {
  content: "\f105"; font-family: FontAwesome; flex: none;
  color: #C0C5D0; font-size: 14px; transition: color .2s ease, transform .2s ease;
}
.wksd-list a:hover { background: #F5F7FB; color: #D9480F; transform: translateX(2px); }
.wksd-list a:hover::before { color: var(--v-orange); }
.wksd-list a:focus-visible { outline: 2px solid rgba(255,122,26,.6); outline-offset: -2px; }
.wksd-list .is-current a { background: rgba(255,122,26,.10); color: #D9480F; font-weight: 600; }
.wksd-list .is-current a::before { color: var(--v-orange); }

/* the phone card at the foot of the sidebar */
.wksd-call {
  padding: 22px 20px; border-radius: 20px; text-align: center; color: #fff;
  background:
    radial-gradient(300px 180px at 100% 0%, rgba(255,122,26,.30), transparent 68%),
    linear-gradient(160deg, #1B1C22 0%, #0E0F12 100%);
  border: 1px solid rgba(255,255,255,.08);
}
.wksd-call i.wksd-call__ic {
  width: 46px; height: 46px; margin: 0 auto 12px; display: grid; place-items: center; border-radius: 50%;
  background: var(--v-grad); color: #fff; font-size: 18px;
  box-shadow: 0 14px 28px -12px rgba(225,29,42,.7);
}
.wksd-call b { display: block; font-size: 15.5px; font-weight: 600; line-height: 1.4; color: #fff; }
.wksd-call small { display: block; margin: 4px 0 14px; font-size: 13px; line-height: 1.5; color: #A7ABB4; }
.wksd-call__no {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; padding: 12px 18px; border-radius: 12px;
  background: var(--v-grad); color: #fff !important;
  font-size: 15px; font-weight: 700; letter-spacing: .3px; text-decoration: none !important;
  transition: transform .2s ease, box-shadow .2s ease;
}
.wksd-call__no:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(225,29,42,.7); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1199px) {
  .wksv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .wksd-body { grid-template-columns: minmax(0, 1fr) 300px; gap: 26px; }
}
@media (max-width: 991px) {
  .wksv { padding: 52px 0 62px; }
  .wksv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wksd-body { grid-template-columns: minmax(0, 1fr); }
  .wksd-side { position: static; }
}
@media (max-width: 767px) {
  .wksv { padding: 42px 0 52px; }
  .wksv-in, .wksd-in { padding: 0 16px; }
  .wksv-banner { margin-bottom: 26px; }
  .wksv-banner img { border-radius: 14px; }
  .wksv-lead { margin-bottom: 24px; }
  .wksv-lead h2 { font-size: 20px !important; }
  .wksv-lead p { font-size: 14px; }
  .wksv-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .wksv-card { padding: 22px 20px 18px; border-radius: 18px; }
  .wksv-card h3 { font-size: 16.5px !important; }
  .wksv-ic { width: 50px; height: 50px; margin-bottom: 14px; border-radius: 15px; font-size: 20px; }
  .wksv-num { top: 12px; right: 16px; font-size: 36px; }
  .wksv-card__img { margin: -22px -20px 14px; }
  .wksv-card__foot { margin-top: 14px; padding-top: 13px; }
  .wksv-more { margin-top: 40px; padding-top: 30px; }
  .wksv-more > h2 { font-size: 20px !important; }

  .wksd { padding: 40px 0 52px; }
  .wksd-main { padding: 22px 18px; border-radius: 18px; }
  .wksd-ask { padding: 18px; border-radius: 14px; }
  .wksd-ask__btns { width: 100%; }
  .wk-prose { font-size: 14.5px; line-height: 1.8; }
  .wk-prose h1, .wk-prose h2 { font-size: 19px !important; }
  .wk-prose h3 { font-size: 17px !important; }
  .wk-prose table, .wk-prose thead, .wk-prose tbody, .wk-prose tr { display: block; }
  .wk-prose th, .wk-prose td { display: block; width: 100% !important; }
}
@media (prefers-reduced-motion: reduce) {
  .wksv-card, .wksv-card::before, .wksv-card__img img, .wksv-go, .wksv-go i,
  .wksd-list a, .wksd-call__no { transition: none; }
  .wksv-card:hover, .wksd-call__no:hover { transform: none; }
  .wksv-card:hover .wksv-card__img img { transform: none; }
}

/* ==========================================================================
   SERVICES HUB — /services.html  (.wksc, added 2026-09-24)

   The one page that lists all 11 service CATEGORIES, each with the services
   that sit under it. It is a different job from .wksv (which lists the services
   inside ONE category), so it gets its own block rather than being bent out of
   that one: every card here also has to carry a list of child links.

   Card anatomy: picture (5:2, the shape the admin files already are) with the
   number over it, the category icon as a solid tile straddling the picture and
   the body, the name, the write-up, then the services themselves as chips -
   six shown, the rest behind a <details> so EVERY child link is still in the
   HTML and nothing is hidden from a crawler. No JavaScript.

   The whole card is NOT one link here, unlike .wksv: the chips inside it are
   links of their own and an overlay would swallow every one of them.
   ========================================================================== */
.wksc {
  --v-ink:     #0E0F12;
  --v-text:    #2A2D36;
  --v-muted:   #6B7080;
  --v-line:    #E6E9F0;
  --v-orange:  #FF7A1A;
  --v-crimson: #E11D2A;
  --v-grad:    linear-gradient(90deg, #FF7A1A 0%, #F0471E 55%, #E11D2A 100%);
  --v-font:    "Poppins","Segoe UI",Roboto,-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  position: relative; overflow: hidden;
  font-family: var(--v-font);
  padding: 66px 0 76px;
  background:
    radial-gradient(640px 300px at 100% 0%, rgba(255,122,26,.07), transparent 62%),
    radial-gradient(600px 300px at 0% 100%, rgba(225,29,42,.05), transparent 62%),
    linear-gradient(180deg, #FFFFFF 0%, #F4F6FA 100%);
}
.wksc *, .wksc *::before, .wksc *::after { box-sizing: border-box; }
.wksc > * { position: relative; }
.wksc-in { max-width: 1240px; margin: 0 auto; padding: 0 20px; }

.wksc-lead { max-width: 780px; margin: 0 0 36px; }
.wksc-lead h2 {
  margin: 0 0 10px !important; padding: 0 !important;
  font-family: var(--v-font) !important; font-size: 26px !important; font-weight: 700 !important;
  line-height: 1.3 !important; letter-spacing: -.3px; color: var(--v-ink) !important; text-align: left;
}
.wksc-lead p { margin: 0; font-size: 15px; line-height: 1.75; color: var(--v-muted); }

.wksc-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
  margin: 0; padding: 0; list-style: none;
}
.wksc-card {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 28px 26px 22px; border-radius: 22px; background: #fff;
  border: 1px solid var(--v-line);
  box-shadow: 0 1px 2px rgba(14,15,18,.04), 0 20px 46px -34px rgba(14,15,18,.5);
  transition: transform .32s cubic-bezier(.2,.8,.2,1), box-shadow .32s ease, border-color .32s ease;
}
.wksc-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; z-index: 3;
  background: var(--v-grad);
  transform: scaleX(0); transform-origin: left; transition: transform .38s cubic-bezier(.2,.8,.2,1);
}

/* picture: 5:2, the exact shape of the admin's category files, so object-fit
   crops nothing and enlarges nothing */
.wksc-card__img {
  position: relative; display: block; margin: -28px -26px 0; overflow: hidden;
  aspect-ratio: 5 / 2; background: #EDF0F5;
}
.wksc-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.wksc-card:hover .wksc-card__img img { transform: scale(1.05); }
.wksc-num {
  position: absolute; top: 12px; right: 12px; z-index: 2; pointer-events: none;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 28px; padding: 0 10px; border-radius: 9px;
  background: rgba(7,8,11,.58); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.20);
  font-size: 12px; font-weight: 700; letter-spacing: .5px; color: #fff;
}

/* the icon tile - solid, because it sits on top of the picture (a translucent
   tint let the artwork show straight through and read as a smudge) */
.wksc-ic {
  position: relative; z-index: 2;
  width: 54px; height: 54px; margin: -34px 0 16px; border-radius: 17px;
  border: 3px solid #fff; display: grid; place-items: center;
  background: #FFF1E4; box-shadow: 0 10px 22px -12px rgba(14,15,18,.40);
  color: #E8590C; font-size: 23px;
  transition: transform .36s cubic-bezier(.2,.8,.2,1), color .3s ease, box-shadow .3s ease;
}
.wksc-ic::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: var(--v-grad); opacity: 0; transition: opacity .3s ease;
}
.wksc-ic i { position: relative; z-index: 1; transition: color .3s ease; }

.wksc-card h3 {
  margin: 0 0 8px !important; padding: 0 !important;
  font-family: var(--v-font) !important; font-size: 19px !important; font-weight: 700 !important;
  line-height: 1.32 !important; letter-spacing: -.2px; color: var(--v-ink) !important; text-align: left;
}
.wksc-card h3 a { color: inherit; text-decoration: none !important; }
.wksc-card h3 a:hover { color: var(--v-crimson) !important; }
/* Exactly three lines, always: clamped when the write-up is long and held open
   to the same height when it is short, so every card in a row lines up. */
.wksc-blurb {
  margin: 0 0 16px; font-size: 14px; line-height: 1.62; color: var(--v-muted);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  min-height: calc(14px * 1.62 * 3);
}

/* how many services are under this category */
.wksc-count {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  margin: 0 0 12px; padding: 5px 11px; border-radius: 999px;
  background: rgba(255,122,26,.10); border: 1px solid rgba(255,122,26,.22);
  font-size: 11.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: #C2410C;
}
.wksc-count i { font-size: 11px; }

/* The services themselves. A FIXED 2x2 grid, not a wrapping row: service names
   run from "SEO" to "Ecommerce Website Designing", and a flex-wrap row turned
   that into one to three rows of chips depending on the category, which is what
   left the cards at different heights. Two columns, one line each, ellipsis if a
   name is too long - so this block is the same height on all eleven cards. */
/* ONE column, four rows. Two columns fitted more in but cut half the names to
   "Dynamic Website Desi..." - a truncated link is worse than a longer card, and
   four rows is the same height on every card either way. */
.wksc-tags {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px;
  margin: 0 0 4px; padding: 0; list-style: none;
}
.wksc-tags li { margin: 0; padding: 0; min-width: 0; }
/* Plain links, no boxes. Boxed chips put a border around every service name and
   eleven cards' worth of them read as clutter; a small brand dot carries the same
   "this is a list of links" signal at a fraction of the weight. */
.wksc-tags a {
  /* block, not flex: a flex item ignores text-overflow, and some service names
     are long enough to need the ellipsis */
  position: relative; display: block; padding: 2px 0 2px 14px;
  font-size: 13px; line-height: 1.45; color: var(--v-text) !important; text-decoration: none !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .2s ease;
}
.wksc-tags a::before {
  content: ""; position: absolute; left: 0; top: 50%; margin-top: -2.5px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--v-orange); transition: transform .2s ease;
}
.wksc-tags a:hover { color: #C2410C !important; }
.wksc-tags a:hover::before { transform: scale(1.5); }

/* the rest of the services - in the HTML, just folded away */
.wksc-rest { margin: 8px 0 0; }
.wksc-rest > summary {
  display: inline-flex; align-items: center; gap: 6px; width: auto;
  list-style: none; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--v-muted);
  padding: 4px 2px; transition: color .22s ease;
}
.wksc-rest > summary::-webkit-details-marker { display: none; }
.wksc-rest > summary:hover { color: #C2410C; }
.wksc-rest > summary i { transition: transform .26s ease; font-size: 11px; }
.wksc-rest[open] > summary i { transform: rotate(180deg); }
.wksc-rest .wksc-tags { margin-top: 8px; }

.wksc-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: auto; padding-top: 18px; border-top: 1px dashed var(--v-line);
}
.wksc-go {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 700; letter-spacing: .1px;
  color: var(--v-ink) !important; text-decoration: none !important;
  transition: color .26s ease;
}
.wksc-arrow {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; flex: 0 0 34px;
  background: #F3F5F9; border: 1px solid var(--v-line); color: var(--v-muted); font-size: 13px;
  transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s cubic-bezier(.2,.8,.2,1);
}

@media (hover: hover) {
  .wksc-card:hover { transform: translateY(-6px); border-color: rgba(255,122,26,.34);
                     box-shadow: 0 1px 2px rgba(14,15,18,.04), 0 34px 60px -34px rgba(14,15,18,.55); }
  .wksc-card:hover::before { transform: scaleX(1); }
  .wksc-card:hover .wksc-ic { transform: rotate(-6deg) scale(1.06); box-shadow: 0 14px 28px -12px rgba(225,29,42,.55); }
  .wksc-card:hover .wksc-ic::before { opacity: 1; }
  .wksc-card:hover .wksc-ic i { color: #fff; }
  .wksc-card:hover .wksc-go { color: #C2410C !important; }
  .wksc-card:hover .wksc-arrow { background: var(--v-grad); border-color: transparent; color: #fff; transform: translateX(3px); }
}
.wksc-go:focus-visible, .wksc-tags a:focus-visible, .wksc-card h3 a:focus-visible,
.wksc-rest > summary:focus-visible { outline: 2px solid var(--v-orange); outline-offset: 3px; border-radius: 8px; }

@media (max-width: 1100px) { .wksc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .wksc { padding: 44px 0 52px; }
  .wksc-in { padding: 0 16px; }
  .wksc-grid { grid-template-columns: 1fr; gap: 18px; }
  .wksc-card { padding: 22px 20px 18px; border-radius: 18px; }
  .wksc-card__img { margin: -22px -20px 0; }
  .wksc-ic { width: 50px; height: 50px; margin: -30px 0 14px; border-radius: 15px; font-size: 20px; }
  .wksc-lead h2 { font-size: 22px !important; }
  .wksc-card h3 { font-size: 17.5px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .wksc-card, .wksc-card::before, .wksc-card__img img, .wksc-ic, .wksc-arrow, .wksc-rest > summary i {
    transition: none !important;
  }
  .wksc-card:hover { transform: none; }
  .wksc-card:hover .wksc-card__img img { transform: none; }
  .wksc-card:hover .wksc-ic { transform: none; }
}

/* ==========================================================================
   SERVICE DETAIL PAGE — the 2026-09-24f rebuild
   (.wksd-quick, .wksd-toc, .wksd-prose, .wksd-feat, .wksd-ticks,
    .wksd-why, .wksd-rel)

   These 143 pages are the ones the site is meant to rank on, and they were a
   picture, a wall of text and a sidebar. The structure they now have is built
   out of the admin's own words at render time - see service-content.php.
   ========================================================================== */

/* ---------- at a glance ---------- */
.wksd-quick {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 0 0 26px; padding: 0; list-style: none;
}
.wksd-quick li {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 15px; border-radius: 12px;
  background: #fff; border: 1px solid var(--v-line);
  box-shadow: 0 1px 2px rgba(14,15,18,.04);
  font-size: 13.5px; line-height: 1.3; color: var(--v-muted);
}
.wksd-quick li > i {
  display: grid; place-items: center; flex: 0 0 26px; width: 26px; height: 26px;
  border-radius: 8px; background: rgba(255,122,26,.12); color: #D9480F; font-size: 13px;
}
.wksd-quick b, .wksd-quick a { color: var(--v-ink); font-weight: 600; }
.wksd-quick a { text-decoration: none !important; }
.wksd-quick a:hover { color: #D9480F; }

/* ---------- on this page ---------- */
.wksd-toc {
  margin: 0 0 28px; padding: 20px 22px; border-radius: 16px;
  background: linear-gradient(180deg, #FFF8F3 0%, #FFFFFF 100%);
  border: 1px solid rgba(255,122,26,.22);
}
.wksd-toc__h {
  display: flex; align-items: center; gap: 9px; margin: 0 0 12px;
  font-size: 12px; font-weight: 700; letter-spacing: .10em; text-transform: uppercase; color: #C2410C;
}
.wksd-toc ol {
  margin: 0; padding: 0; list-style: none;
  columns: 2; column-gap: 28px;
  counter-reset: wktoc;
}
.wksd-toc li {
  break-inside: avoid; margin: 0 0 8px; padding: 0 0 0 26px; position: relative;
  counter-increment: wktoc;
}
.wksd-toc li::before {
  content: counter(wktoc, decimal-leading-zero);
  position: absolute; left: 0; top: 1px;
  font-size: 11px; font-weight: 700; color: rgba(255,122,26,.75); letter-spacing: -.02em;
}
.wksd-toc a {
  font-size: 13.8px; line-height: 1.45; color: var(--v-text) !important;
  text-decoration: none !important; transition: color .2s ease;
}
.wksd-toc a:hover { color: #C2410C !important; text-decoration: underline !important; }

/* ---------- the write-up ----------
   The headings below are REAL <h2>s now, built from the bold lines the admin
   typed. scroll-margin-top keeps them clear of the fixed navbar when the
   contents list jumps to one. */
.wksd-prose h2 {
  position: relative;
  margin: 34px 0 14px !important; padding: 0 0 0 16px !important;
  font-size: 21px !important; font-weight: 700 !important; line-height: 1.35 !important;
  letter-spacing: -.2px; color: var(--v-ink) !important;
  scroll-margin-top: calc(var(--wk-navh, 122px) + 18px);
}
.wksd-prose h2::before {
  content: ""; position: absolute; left: 0; top: .18em; bottom: .18em;
  width: 4px; border-radius: 3px; background: var(--v-grad);
}
.wksd-prose > h2:first-child { margin-top: 0 !important; }

/* ---------- feature cards, from "Label - description" bullets ---------- */
.wksd-feat {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
  margin: 0 0 22px !important; padding: 0 !important; list-style: none !important;
}
.wksd-feat__i {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 0 !important; padding: 15px 16px !important; border-radius: 14px;
  background: #fff; border: 1px solid var(--v-line);
  box-shadow: 0 1px 2px rgba(14,15,18,.04);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.wksd-feat__i::before { content: none !important; }   /* kill the .wk-prose bullet */
/* The tile is a <span>, and so is the description, so ".wksd-feat__i span" used
   to win over ".wksd-feat__ic" on specificity and quietly reset the tile to
   display:block at 13.6px - the glyph fell out of the centre into the top-left
   corner and shrank. The description is now addressed by its position (a direct
   child of the inner div), which cannot match the tile at all. */
.wksd-feat__ic {
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 40px; width: 40px; height: 40px;
  border-radius: 12px; background: #FFF1E4; color: #E8590C;
  transition: background .25s ease, color .25s ease;
}
.wksd-feat__ic i {
  /* Font Awesome 4.x sets font-size:inherit on .fa, so the glyph takes its size
     from here; line-height:1 keeps it on the optical centre of the tile. */
  font-size: 17px; line-height: 1; color: inherit;
}
.wksd-feat__i > div { min-width: 0; }
.wksd-feat__i b {
  display: block; margin: 0 0 3px;
  font-size: 14.5px; font-weight: 700; line-height: 1.35; color: var(--v-ink);
}
.wksd-feat__i > div > span { display: block; font-size: 13.6px; line-height: 1.62; color: var(--v-muted); }

/* ---------- plain bullets become a tick list ---------- */
.wksd-ticks {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 22px;
  margin: 0 0 22px !important; padding: 0 !important; list-style: none !important;
}
.wksd-ticks li {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0 !important; padding: 0 !important;
}
.wksd-ticks li::before { content: none !important; }
.wksd-ticks li > i {
  flex: 0 0 18px; width: 18px; height: 18px; margin-top: 3px;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(255,122,26,.14); color: #D9480F; font-size: 9px;
}
.wksd-ticks li > span { font-size: 14px; line-height: 1.6; color: var(--v-text); }

/* ---------- the ask block ---------- */
.wksd-ask__ic {
  display: grid; place-items: center; flex: 0 0 48px; width: 48px; height: 48px;
  border-radius: 14px; background: var(--v-grad); color: #fff; font-size: 21px;
  box-shadow: 0 14px 26px -14px rgba(225,29,42,.6);
}
.wksd-ask__txt { min-width: 0; flex: 1 1 260px; }

/* ---------- why us, in the sidebar ---------- */
.wksd-why { margin: 0; padding: 14px; list-style: none; display: grid; gap: 11px; }
.wksd-why li { display: flex; align-items: flex-start; gap: 10px; margin: 0; }
.wksd-why li > i {
  flex: 0 0 26px; width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 8px; background: rgba(255,122,26,.12); color: #D9480F; font-size: 12px;
}
.wksd-why span { font-size: 13.4px; line-height: 1.5; color: var(--v-muted); }
.wksd-why b { color: var(--v-ink); font-weight: 600; }

/* ---------- other services in this category ---------- */
.wksd-rel { margin: 34px 0 0; }
.wksd-rel h2 {
  margin: 0 0 16px !important; padding: 0 !important;
  font-family: var(--v-font) !important; font-size: 20px !important; font-weight: 700 !important;
  line-height: 1.3 !important; color: var(--v-ink) !important; text-align: left;
}
.wksd-rel ul {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
  margin: 0; padding: 0; list-style: none;
}
.wksd-rel li { margin: 0; padding: 0; }
.wksd-rel li a {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: 14px;
  background: #fff; border: 1px solid var(--v-line);
  box-shadow: 0 1px 2px rgba(14,15,18,.04);
  text-decoration: none !important;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.wksd-rel__ic {
  display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px;
  border-radius: 11px; background: #FFF1E4; color: #E8590C; font-size: 15px;
  transition: background .25s ease, color .25s ease;
}
.wksd-rel__t {
  flex: 1 1 auto; min-width: 0;
  font-size: 14.2px; font-weight: 600; line-height: 1.35; color: var(--v-ink);
}
.wksd-rel__go { flex: 0 0 auto; color: var(--v-muted); font-size: 13px; transition: transform .25s ease, color .25s ease; }
.wksd-rel__all {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  font-size: 14px; font-weight: 700; color: #C2410C !important; text-decoration: none !important;
}
.wksd-rel__all:hover { text-decoration: underline !important; }

@media (hover: hover) {
  .wksd-feat__i:hover { border-color: rgba(255,122,26,.34); transform: translateY(-2px);
                        box-shadow: 0 1px 2px rgba(14,15,18,.04), 0 18px 34px -24px rgba(14,15,18,.5); }
  .wksd-feat__i:hover .wksd-feat__ic { background: var(--v-grad); color: #fff; }
  .wksd-rel li a:hover { border-color: rgba(255,122,26,.34); transform: translateY(-2px);
                         box-shadow: 0 1px 2px rgba(14,15,18,.04), 0 18px 34px -24px rgba(14,15,18,.5); }
  .wksd-rel li a:hover .wksd-rel__ic { background: var(--v-grad); color: #fff; }
  .wksd-rel li a:hover .wksd-rel__go { color: #D9480F; transform: translateX(3px); }
}
.wksd-toc a:focus-visible, .wksd-rel li a:focus-visible, .wksd-quick a:focus-visible {
  outline: 2px solid var(--v-orange); outline-offset: 3px; border-radius: 8px;
}

@media (max-width: 1100px) {
  .wksd-rel ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .wksd-quick { gap: 8px; margin-bottom: 20px; }
  .wksd-quick li { padding: 8px 12px; font-size: 12.8px; }
  .wksd-toc { padding: 16px 16px; border-radius: 14px; }
  .wksd-toc ol { columns: 1; }
  .wksd-prose h2 { font-size: 18.5px !important; margin-top: 28px !important; }
  .wksd-feat { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .wksd-ticks { grid-template-columns: minmax(0, 1fr); }
  .wksd-rel ul { grid-template-columns: minmax(0, 1fr); }
  .wksd-rel h2 { font-size: 18px !important; }
  .wksd-ask__ic { width: 42px; height: 42px; flex-basis: 42px; font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .wksd-feat__i, .wksd-rel li a, .wksd-rel__go, .wksd-feat__ic, .wksd-rel__ic { transition: none !important; }
  .wksd-feat__i:hover, .wksd-rel li a:hover { transform: none; }
}