/* ==========================================================================
   WebKeyIndia — SEO Portfolio  (.wkseo, rendered by seo-portfolio-desktop.php)

   HISTORY, so this cannot happen twice:
   These rules were written on 2026-09-17 into css/wk-portfolio.css. On
   2026-09-25 the portfolio PAGE was rebuilt and reused that same filename for
   its own .wkpf rules, overwriting this file completely. From that day the SEO
   Portfolio section had no stylesheet at all: unstyled on desktop, and gone
   entirely on phones, because the one rule that kept it visible there --
   #SeoDesktop { display:block !important } -- lived in here too.

   It now has its own filename, which the portfolio page cannot collide with,
   and seo-portfolio-desktop.php links it itself, so any page that renders the
   section carries its CSS with it.
   ========================================================================== */
.wkseo {
  --s-ink:     #0E0F12;
  --s-text:    #2A2D36;
  --s-muted:   #6B7080;
  --s-line:    #E6E9F0;
  --s-orange:  #FF7A1A;
  --s-crimson: #E11D2A;
  --s-green:   #15803D;
  --s-grad:    linear-gradient(90deg, #FF7A1A 0%, #F0471E 55%, #E11D2A 100%);
  --s-font:    "Poppins","Segoe UI",Roboto,-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  position: relative; overflow: hidden;
  margin: 0; padding: 80px 0;
  font-family: var(--s-font);
  background:
    radial-gradient(640px 300px at 100% 0%, rgba(255,122,26,.08), transparent 62%),
    radial-gradient(600px 300px at 0% 100%, rgba(225,29,42,.05), transparent 62%),
    linear-gradient(180deg, #F3F5FA 0%, #F8F9FC 100%);
}
.wkseo *, .wkseo *::before, .wkseo *::after { box-sizing: border-box; }

/* the old section's wrappers in index.php: #SeoDesktop was hidden on phones and
   #SeoMobile held a separate copy. One responsive section now serves both. */
#SeoDesktop { display: block !important; }

.wkseo .wk-sec__head { max-width: 820px; margin-bottom: 30px; }
.wkseo .wk-sec__title {
  margin: 14px 0 10px !important; padding: 0 !important;
  font-family: var(--s-font) !important; font-size: 36px !important; font-weight: 700 !important;
  line-height: 1.2 !important; letter-spacing: -.3px; text-align: center; color: var(--s-ink) !important;
}
.wkseo .wk-sec__sub { color: var(--s-muted); }

.wkseo-sum {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  margin: 20px 0 0; padding: 0; list-style: none;
}
.wkseo-sum li {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 16px; border-radius: 999px;
  background: #fff; border: 1px solid var(--s-line); color: var(--s-muted); font-size: 13.5px;
  box-shadow: 0 8px 20px -16px rgba(14,15,18,.4);
}
.wkseo-sum b {
  font-size: 17px; font-weight: 800; letter-spacing: -.3px;
  background: var(--s-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #E8590C;
}

/* ---------- industry filters ---------- */
.wkseo-filters {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  margin: 0 0 28px; padding: 0;
}
.wkseo-filter {
  display: inline-flex; align-items: center; gap: 9px; height: 46px; margin: 0; padding: 0 8px 0 7px;
  border: 1.5px solid var(--s-line); border-radius: 999px; background: #fff; cursor: pointer;
  font-family: var(--s-font); font-size: 14px; font-weight: 600; color: var(--s-text); white-space: nowrap;
  transition: border-color .2s ease, box-shadow .2s ease, color .2s ease, transform .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.wkseo-filter__ic {
  width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 50%;
  background: #F2F4F8; color: #6B7080; font-size: 15px;
}
.wkseo-filter__ic img { width: 20px; height: 20px; object-fit: contain; display: block; }
.wkseo-filter__n {
  min-width: 24px; height: 24px; padding: 0 7px; display: grid; place-items: center; border-radius: 999px;
  background: #F2F4F8; color: var(--s-muted); font-size: 12px; font-weight: 700;
}
@media (hover: hover) { .wkseo-filter:hover { border-color: rgba(255,122,26,.55); transform: translateY(-2px); } }
.wkseo-filter[aria-selected="true"] {
  border-color: transparent; color: #fff; background: var(--s-grad);
  box-shadow: 0 14px 28px -14px rgba(225,29,42,.7);
}
.wkseo-filter[aria-selected="true"] .wkseo-filter__ic { background: rgba(255,255,255,.95); color: #E8590C; }
.wkseo-filter[aria-selected="true"] .wkseo-filter__n { background: rgba(255,255,255,.22); color: #fff; }
.wkseo-filter:focus-visible { outline: 3px solid rgba(255,122,26,.55); outline-offset: 3px; }

/* ---------- Google "G" (inline SVG) ---------- */
.wkseo-g { display: inline-block; flex: none; width: 16px; height: 16px; vertical-align: -3px; }
.wkseo-sum--g .wkseo-g { margin: 0 -1px 0 1px; }
.wkseo-gword { font-weight: 600; color: var(--s-text); }

/* ---------- client slider: "All Clients" shows all 16, a filter narrows it ---------- */
.wkseo-slider { position: relative; max-width: 1160px; margin: 0 auto; }
.wkseo-grid {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 44px) / 3); column-gap: 22px;
  align-items: stretch; justify-content: start;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  margin: 0; padding: 6px 2px 20px;
}
.wkseo-grid::-webkit-scrollbar { display: none; }
/* One industry with fewer cards than the row holds: centre them - but SAFELY.
   Plain justify-content:center on a row that also scrolls sideways splits the
   overflow across BOTH sides, and the left half can never be reached: scrollLeft
   cannot go below 0. On a 360px phone that left the first card starting 115px off
   the left edge, permanently cut in half, with no way to swipe back to it.
   "safe" makes the browser fall back to start as soon as the content overflows. */
.wkseo:not(.is-scrollable) .wkseo-grid { justify-content: safe center; }

.wkseo-nav {
  position: absolute; top: calc(50% - 30px); z-index: 2; width: 48px; height: 48px; margin: 0; padding: 0;
  display: none; place-items: center; border: 1px solid var(--s-line); border-radius: 50%;
  background: #fff; color: var(--s-ink); font-size: 26px; line-height: 1; cursor: pointer;
  box-shadow: 0 14px 30px -14px rgba(14,15,18,.45);
  transition: background .2s ease, color .2s ease, opacity .2s ease, transform .2s ease;
}
.wkseo.is-scrollable .wkseo-nav { display: grid; }
.wkseo-nav--prev { left: -24px; }
.wkseo-nav--next { right: -24px; }
.wkseo-nav i { margin-top: -2px; }
.wkseo-nav:hover:not(:disabled) { background: var(--s-grad); border-color: transparent; color: #fff; transform: scale(1.06); }
.wkseo-nav:disabled { opacity: 0; pointer-events: none; }
.wkseo-nav:focus-visible { outline: 3px solid rgba(255,122,26,.55); outline-offset: 3px; }

.wkseo-bottom { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 6px 0 0; }
.wkseo-progress { position: relative; width: 180px; height: 4px; border-radius: 99px; background: #E3E6EE; overflow: hidden; display: none; }
.wkseo.is-scrollable .wkseo-progress { display: block; }
.wkseo-progress__bar { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; border-radius: 99px; background: var(--s-grad); transition: transform .15s linear; }
.wkseo-status { margin: 0 !important; font-size: 13px; color: var(--s-muted); }
.wkseo-status b { color: var(--s-ink); font-weight: 700; }

/* ---------- client cards ---------- */
.wkseo-card {
  display: flex; flex-direction: column; min-width: 0; scroll-snap-align: start;
  border-radius: 22px; background: #fff; border: 1px solid var(--s-line); overflow: hidden;
  box-shadow: 0 1px 2px rgba(14,15,18,.04), 0 22px 44px -34px rgba(14,15,18,.4);
  transition: box-shadow .3s ease, border-color .3s ease, transform .3s ease;
}
.wkseo-card[hidden] { display: none; }
.wkseo-card.is-in { animation: wkseoIn .38s ease both; }
@keyframes wkseoIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (hover: hover) { .wkseo-card:hover { border-color: rgba(255,122,26,.35); box-shadow: 0 28px 54px -34px rgba(225,29,42,.38); } }

.wkseo-card__head {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px 12px;
  padding: 18px 18px 16px;
  background: linear-gradient(180deg, #FFF7F1 0%, #FFFFFF 100%);
  border-bottom: 1px solid var(--s-line);
}
.wkseo-card__head::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--s-grad); }

.wkseo-logo {
  position: relative; width: 112px; height: 56px; flex: none; display: grid; place-items: center;
  padding: 6px 10px; border-radius: 12px; background: #fff; border: 1px solid var(--s-line);
}
.wkseo-logo img { max-width: 100%; max-height: 42px; width: auto; height: auto; object-fit: contain; display: block; }
.wkseo-logo em { display: none; }
.wkseo-logo.is-fallback { background: var(--s-grad); border-color: transparent; }
.wkseo-logo.is-fallback em {
  display: block; font-style: normal; font-size: 19px; font-weight: 800; letter-spacing: .5px; color: #fff;
}

.wkseo-badge {
  justify-self: end; display: flex; align-items: center; gap: 7px; padding: 7px 11px 7px 9px; border-radius: 14px;
  background: #fff; border: 1px solid #DDEFE3; color: var(--s-green); line-height: 1.1;
  box-shadow: 0 8px 18px -14px rgba(21,128,61,.6);
}
.wkseo-badge .wkseo-g { width: 20px; height: 20px; }
.wkseo-badge b { font-size: 24px; font-weight: 800; letter-spacing: -.5px; }
.wkseo-badge small { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: #3F7F55; }

.wkseo-card__id { grid-column: 1 / -1; min-width: 0; }
.wkseo-ind {
  display: inline-block; margin-bottom: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; color: #D9480F;
}
.wkseo .wkseo-card__id h3 {
  margin: 0 !important; padding: 0 !important;
  font-family: var(--s-font) !important; font-size: 16.5px !important; font-weight: 700 !important;
  line-height: 1.3 !important; color: var(--s-ink) !important; text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wkseo-domain, .wkseo-promoted { display: block; margin-top: 3px; font-size: 12.5px; color: var(--s-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wkseo-domain i { color: #A3A8B5; margin-right: 3px; }
.wkseo-promoted { font-size: 11.5px; letter-spacing: .3px; color: #9AA0AE; }

/* keyword rows: keyword over its ranking, Google + copy buttons beside */
.wkseo-kws { margin: 0; padding: 6px 12px; list-style: none; }
.wkseo-kw {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 4px 8px;
  padding: 8px 4px 8px 6px; border-radius: 10px;
}
.wkseo-kw + .wkseo-kw { border-top: 1px dashed #EDF0F5; }
@media (hover: hover) { .wkseo-kw:hover { background: #FAFBFD; } }
.wkseo-kw.is-extra { display: none; }
.wkseo-card.is-open .wkseo-kw.is-extra { display: grid; animation: wkseoIn .3s ease both; }
.wkseo-kw__t { grid-column: 1; grid-row: 1; font-size: 14px; line-height: 1.4; color: var(--s-text); overflow-wrap: anywhere; }
.wkseo-kw__rank {
  grid-column: 1; grid-row: 2; justify-self: start;
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px;
  background: #EAF7EF; color: var(--s-green); font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.wkseo-kw__rank i { font-size: 10px; }
.wkseo-kw__g, .wkseo-kw__copy {
  grid-row: 1 / span 2; width: 34px; height: 34px; display: grid; place-items: center; margin: 0; padding: 0;
  border: 1px solid var(--s-line); border-radius: 10px; background: #fff; color: #6B7080;
  font-size: 14px; cursor: pointer; text-decoration: none !important;
  transition: color .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.wkseo-kw__g { grid-column: 2; }
.wkseo-kw__copy { grid-column: 3; }
.wkseo-kw__g .wkseo-g { width: 17px; height: 17px; }
.wkseo-kw__g:hover { border-color: #C9D7F5; box-shadow: 0 8px 16px -10px rgba(66,133,244,.7); transform: translateY(-1px); }
.wkseo-kw__copy:hover { color: #D9480F; border-color: rgba(255,122,26,.5); }
.wkseo-kw__copy.is-done { color: #fff; background: var(--s-green); border-color: transparent; }
.wkseo-kw__g:focus-visible, .wkseo-kw__copy:focus-visible { outline: 3px solid rgba(255,122,26,.5); outline-offset: 2px; }

.wkseo-card__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: auto; padding: 12px 18px 16px; border-top: 1px solid var(--s-line);
}
.wkseo-more {
  display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 8px 2px; border: 0; background: none;
  font-family: var(--s-font); font-size: 13px; font-weight: 600; color: #D9480F; cursor: pointer;
}
.wkseo-more i { transition: transform .25s ease; }
.wkseo-card.is-open .wkseo-more i { transform: rotate(180deg); }
.wkseo-cta {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 15px; border-radius: 999px;
  background: var(--s-ink); color: #fff !important; font-size: 13px; font-weight: 600; text-decoration: none !important;
  white-space: nowrap; transition: background .2s ease, transform .2s ease;
}
.wkseo-cta:hover { background: #D9480F; transform: translateY(-1px); }
.wkseo-cta i { transition: transform .2s ease; }
.wkseo-cta:hover i { transform: translateX(3px); }

.wkseo-foot { margin-top: 26px; text-align: center; }
.wkseo-all {
  display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 26px; border-radius: 999px;
  border: 1.5px solid var(--s-line); background: #fff; color: var(--s-ink) !important;
  font-size: 14.5px; font-weight: 600; text-decoration: none !important;
  transition: background .2s, border-color .2s, color .2s, transform .2s, box-shadow .2s;
}
.wkseo-all:hover { background: var(--s-grad); border-color: transparent; color: #fff !important; transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(225,29,42,.5); }

/* ---------- responsive ---------- */
@media (max-width: 1199px) {
  .wkseo-grid { grid-auto-columns: calc((100% - 22px) / 2); }
}
@media (max-width: 1240px) {
  .wkseo-nav--prev { left: -12px; }
  .wkseo-nav--next { right: -12px; }
}
@media (max-width: 991px) {
  .wkseo { padding: 60px 0; }
  .wkseo .wk-sec__title { font-size: 30px !important; }
  .wkseo-grid { grid-auto-columns: calc((100% - 18px) / 2); column-gap: 18px; }
  /* industries become one swipeable row */
  .wkseo-filters {
    flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scroll-snap-type: x proximity;
    margin: 0 -20px 22px; padding: 4px 20px 10px; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
  }
  .wkseo-filters::-webkit-scrollbar { display: none; }
  .wkseo-filter { flex: none; scroll-snap-align: center; }
  /* narrower cards: 3 keywords until "Show all" */
  .wkseo-card:not(.is-open) .wkseo-kw:nth-child(n+4) { display: none; }
  .wkseo-nav { width: 42px; height: 42px; font-size: 22px; }
  .wkseo-nav--prev { left: -8px; }
  .wkseo-nav--next { right: -8px; }
}
@media (max-width: 767px) {
  /* one card and a peek of the next: swipe, the arrows would cover the card */
  .wkseo-grid { grid-auto-columns: 86%; column-gap: 14px; margin: 0 -20px; padding: 6px 20px 18px; scroll-padding: 0 20px; }
  .wkseo.is-scrollable .wkseo-nav { display: none; }
}
@media (max-width: 575px) {
  .wkseo { padding: 46px 0; }
  .wkseo .wk-sec__title { font-size: 25px !important; }
  .wkseo .wk-sec__head { margin-bottom: 22px; }
  .wkseo-sum { gap: 6px; margin-top: 14px; }
  .wkseo-sum li { padding: 6px 11px; font-size: 12px; }
  .wkseo-sum b { font-size: 15px; }
  .wkseo-filters { margin: 0 -16px 18px; padding: 4px 16px 10px; }
  .wkseo-filter { height: 42px; font-size: 13px; }
  .wkseo-filter__ic { width: 28px; height: 28px; }
  .wkseo-grid { grid-auto-columns: 88%; column-gap: 12px; margin: 0 -16px; padding: 6px 16px 16px; scroll-padding: 0 16px; }
  .wkseo-card { border-radius: 18px; }
  .wkseo-card__head { gap: 12px 10px; padding: 14px 14px 12px; }
  .wkseo-logo { width: 84px; height: 46px; padding: 5px 8px; }
  .wkseo-logo img { max-height: 34px; }
  .wkseo-badge { padding: 5px 9px 5px 7px; }
  .wkseo-badge b { font-size: 19px; }
  .wkseo-badge .wkseo-g { width: 17px; height: 17px; }
  .wkseo .wkseo-card__id h3 { font-size: 15px !important; }
  .wkseo-promoted { display: none; }
  .wkseo-kws { padding: 4px 8px; }
  .wkseo-kw__copy { display: none; }
  .wkseo-kw__t { font-size: 13.5px; }
  .wkseo-card__foot { gap: 6px; padding: 8px 14px 14px; }
  .wkseo-cta { width: 100%; justify-content: center; }
  .wkseo-more { width: 100%; justify-content: center; padding: 4px; }
  .wkseo-bottom { flex-direction: column; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .wkseo-grid { scroll-behavior: auto; }
  .wkseo-card.is-in, .wkseo-card.is-open .wkseo-kw.is-extra { animation: none; }
  .wkseo-filter, .wkseo-card, .wkseo-more i, .wkseo-cta, .wkseo-cta i, .wkseo-all, .wkseo-nav, .wkseo-progress__bar { transition: none; }
}
.wkseo-hint--swipe { display: none; }
@media (max-width: 767px) { .wkseo-hint--arrows { display: none; } .wkseo-hint--swipe { display: inline; } }


/* --------------------------------------------------------------------------
   Two rules the 17 September file never had, because the markup gained these
   two classes afterwards. */

/* The industry tabs switch panels with the hidden attribute. Give it a rule of
   its own: a display value set elsewhere would otherwise beat the browser
   default and show every panel at once. */
.wkseo-panel[hidden] { display: none !important; }

/* "+3 more Travels clients ranking on Google page 1" under a panel. */
.wkseo-rest {
  margin: 14px 0 0;
  text-align: center;
  font-size: 14px;
  color: var(--s-muted);
}
.wkseo-rest .wkseo-g { vertical-align: -3px; margin: 0 2px; }


/* --------------------------------------------------------------------------
   A row that cannot fill.

   The grid is built for three cards across. The home page shows at most TWO
   clients per industry on purpose, so on a wide screen those two sat at a third
   of the width each with a wide empty gap on both sides - a desktop screen
   showing what looked like a phone layout. seo-portfolio-desktop.php marks the
   section "wkseo--few" when no industry has enough cards to fill the row, and
   the cards then share the width, up to a comfortable maximum so a single card
   never stretches the full 1200px.

   Only above 1200px: below that the row is already two-across and full. */
@media (min-width: 1200px) {
  .wkseo--few .wkseo-grid { grid-auto-columns: minmax(0, 560px); }
}


/* Browsers that do not understand "safe" (anything before Chrome 93 / Safari
   15.4) would still centre the overflowing row and clip the first card. Below
   768px the row ALWAYS overflows - it is one card plus a peek of the next, by
   design - so centring is never the right answer there and plain start is. */
@media (max-width: 767px) {
  .wkseo .wkseo-grid, .wkseo:not(.is-scrollable) .wkseo-grid { justify-content: start; }
}