/* WebKeyIndia — home hero, premium dark bento  2026-09-24r
   (markup: home-slider.php, script: js/wk-hero.js)
   A dark canvas holding four glass tiles: the message, the award photographs, the Google rating and
   the Google Partner badge. Everything is scoped to .wkb, a class no other stylesheet here uses. */

.wkb {
  --b-ink:    #07080B;
  --b-tile:   rgba(255,255,255,.045);
  --b-edge:   rgba(255,255,255,.085);
  --b-white:  #FFFFFF;
  --b-soft:   #A7ADBB;
  --b-org:    #FF7A1A;
  --b-red:    #E11D2A;
  --b-gold:   #E8B84B;
  --b-gold2:  #FFDF9B;

  position: relative;
  isolation: isolate;
  margin-top: var(--wk-navh, 122px);   /* the navbar publishes its real height; see site-header.php */
  padding: 34px 0 30px;
  overflow: hidden;
  background: var(--b-ink);
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--b-white);
}

.wkb-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(48% 55% at 12% 8%,  rgba(255,122,26,.20), transparent 68%),
    radial-gradient(42% 52% at 88% 12%, rgba(232,184,75,.16), transparent 70%),
    radial-gradient(60% 60% at 70% 105%, rgba(225,29,42,.16), transparent 72%),
    linear-gradient(175deg, #101219 0%, #07080B 62%);
}
.wkb-bg::after {                   /* a fine grid, faded away from the top */
  content: "";
  position: absolute;
  inset: 0;
  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% 82% at 50% 0%, #000 8%, transparent 74%);
          mask-image: radial-gradient(120% 82% at 50% 0%, #000 8%, transparent 74%);
}

.wkb-wrap { position: relative; max-width: 1260px; margin: 0 auto; padding: 0 24px; }

/* ---- the grid: just two tiles now ------------------------------------------------------------ */
.wkb-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  align-items: center;
  gap: 16px;
}
.wkb--nopic .wkb-grid { grid-template-columns: minmax(0, 1fr); }

.wkb-tile {
  position: relative;
  border: 1px solid var(--b-edge);
  border-radius: 20px;
  background: var(--b-tile);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  overflow: hidden;
}
/* ---- the message tile ------------------------------------------------------------------------ */
.wkb-main {
  display: flex;
  flex-direction: column;
  padding: 26px 30px 16px;
  background:
    radial-gradient(90% 120% at 0% 0%, rgba(255,122,26,.13), transparent 62%),
    linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.028));
}
.wkb-stack { display: grid; flex: 1 1 auto; }
.wkb-slide {
  grid-area: 1 / 1;
  align-self: center;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "kick motif" "title motif" "sub motif" "chips chips" "cta cta";
  align-items: start;
  column-gap: 26px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease, visibility .5s;
}
.wkb-slide.is-active { opacity: 1; visibility: visible; }
.wkb-slide > * { opacity: 0; transform: translateY(14px); }
.wkb-slide.is-active > * { animation: wkbUp .55s cubic-bezier(.2,.7,.3,1) forwards; }
.wkb-slide.is-active .wkb-kicker { animation-delay: .03s; }
.wkb-slide.is-active .wkb-title  { animation-delay: .10s; }
.wkb-slide.is-active .wkb-sub    { animation-delay: .16s; }
.wkb-slide.is-active .wkb-chips  { animation-delay: .22s; }
.wkb-slide.is-active .wkb-cta    { animation-delay: .28s; }
@keyframes wkbUp { to { opacity: 1; transform: none; } }

.wkb-kicker {
  grid-area: kick;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 15px;
  border: 1px solid rgba(232,184,75,.3);
  border-radius: 999px;
  background: rgba(232,184,75,.09);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--b-gold2);
}
.wkb-kicker i { width: 6px; height: 6px; border-radius: 50%; background: var(--b-gold); box-shadow: 0 0 0 4px rgba(232,184,75,.18); }

.wkb-title {
  grid-area: title;
  margin: 15px 0 0;
  max-width: none;
  font-size: 44px;
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -.028em;
  color: var(--b-white);
  text-transform: none;
}
.wkb-title span {
  background: linear-gradient(100deg, var(--b-gold2) 4%, var(--b-org) 52%, var(--b-red) 96%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.wkb-sub {
  grid-area: sub;
  max-width: 52ch;
  margin: 12px 0 0;
  font-size: 14.5px;
  line-height: 1.6;
  font-weight: 400;
  color: var(--b-soft);
}

.wkb-chips { grid-area: chips; display: flex; flex-wrap: wrap; gap: 7px; margin: 15px 0 0; padding: 0; list-style: none; }
.wkb-chips li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border: 1px solid var(--b-edge);
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  font-size: 11.5px;
  font-weight: 500;
  color: #D7DBE4;
}
.wkb-chips svg { color: var(--b-org); }

.wkb-cta { grid-area: cta; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.wkb-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 22px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.wkb-btn--go {
  border: 0;
  background: linear-gradient(100deg, var(--b-org), var(--b-red));
  color: #fff;
  box-shadow: 0 18px 38px -18px rgba(255,122,26,.95);
}
.wkb-btn--go:hover, .wkb-btn--go:focus { color: #fff; transform: translateY(-2px); box-shadow: 0 26px 48px -18px rgba(255,122,26,1); }
.wkb-btn--go i { transition: transform .2s ease; }
.wkb-btn--go:hover i { transform: translateX(4px); }
.wkb-btn--quote {
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  padding: 0 24px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
  color: #fff;
}
.wkb-btn--quote span { font-size: 9.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--b-soft); }
.wkb-btn--quote b { font-size: 15px; font-weight: 700; color: #fff; }
.wkb-btn--quote:hover { color: #fff; transform: translateY(-2px); border-color: rgba(232,184,75,.55); background: rgba(232,184,75,.1); }
.wkb-btn:focus-visible { outline: 3px solid rgba(232,184,75,.7); outline-offset: 3px; }


/* ---- the three points beside the headline -----------------------------------------------------
   They change with the slide, so each one says something about what that slide is about. Every
   line here is a claim the page already makes further down. ---------------------------------- */
.wkb-pts {
  grid-area: motif;
  align-self: center;
  width: 236px;
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--b-edge);
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  list-style: none;
}
.wkb-pts li { display: flex; align-items: center; gap: 10px; }
.wkb-pts i {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(255,122,26,.13);
  color: var(--b-org);
}
.wkb-pts span { font-size: 12px; line-height: 1.35; font-weight: 500; color: #CBD0DA; }
/* ---- the tabs and the arrows ------------------------------------------------------------------ */
.wkb-ctrl {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.wkb-tabs { display: flex; flex: 1 1 auto; flex-wrap: wrap; gap: 6px; min-width: 0; }
.wkb-tab {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 12px 10px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
  transition: background .2s ease;
}
.wkb-tab b { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; color: #5C6270; transition: color .2s ease; }
.wkb-tab span { font-size: 13px; font-weight: 600; white-space: nowrap; color: #8A90A0; transition: color .2s ease; }
.wkb-tab:hover { background: rgba(255,255,255,.05); }
.wkb-tab:hover span { color: #D7DBE4; }
.wkb-tab.is-on { background: rgba(255,255,255,.07); }
.wkb-tab.is-on b { color: var(--b-gold); }
.wkb-tab.is-on span { color: #fff; }
.wkb-tab:focus-visible { outline: 3px solid rgba(232,184,75,.7); outline-offset: 2px; }
.wkb-tab__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: transparent; }
.wkb-tab.is-on .wkb-tab__bar { background: rgba(255,255,255,.12); }
.wkb-tab__bar::before {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--b-gold), var(--b-org));
}
.wkb-tab.is-run .wkb-tab__bar::before { animation: wkbBar var(--dur, 7000ms) linear forwards; }
@keyframes wkbBar { to { transform: scaleX(1); } }

.wkb-arrows { flex: none; display: flex; gap: 7px; }
.wkb-nav {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  font-size: 18px;
  color: #fff;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.wkb-nav:hover { border-color: transparent; background: linear-gradient(100deg, var(--b-org), var(--b-red)); transform: translateY(-2px); }
.wkb-nav:focus-visible { outline: 3px solid rgba(232,184,75,.7); outline-offset: 2px; }

/* ---- the award photographs -------------------------------------------------------------------
   The tile is 360px wide on a desktop. The pictures in the admin are 400px wide, so at 360 they are
   shown at (or just under) their own size on an ordinary screen, and the 2x file covers a retina
   one. Nothing is laid over the picture: the caption has its own strip underneath. ------------- */
.wkb-shot {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  padding: 10px;
  border: 1px solid var(--b-edge);
  border-radius: 20px;
  background: var(--b-tile);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.wkb-frame {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  border-radius: 14px;
  overflow: hidden;
  background: #0D0F14;
}
.wkb-pic {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease, visibility .5s;
}
.wkb-pic.is-active { opacity: 1; visibility: visible; }
.wkb-pic__im { flex: 0 0 auto; display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.wkb-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }

.wkb-pic figcaption {
  padding: 12px 14px 13px;
  background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border-top: 1px solid rgba(255,255,255,.08);
}
.wkb-pic__tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 7px;
  padding: 4px 9px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--b-gold2), var(--b-gold));
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #4A360A;
}
.wkb-pic figcaption b { display: block; font-size: 13px; line-height: 1.35; font-weight: 600; color: #EDEFF3; }

.wkb-rail__all {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 13px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  font-size: 11.5px;
  font-weight: 600;
  color: #D7DBE4;
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.wkb-rail__all:hover { color: #fff; border-color: rgba(232,184,75,.6); background: rgba(232,184,75,.14); }
.wkb-rail__all i { transition: transform .2s ease; }
.wkb-rail__all:hover i { transform: translateX(3px); }

/* ---- the strip under the award card ----------------------------------------------------------
   It takes whatever height is left, so the two tiles finish level, and it holds the phone number
   rather than decoration. The number and the hours are the ones the header already shows. ----- */
.wkb-call {
  display: flex;
  flex: 1 1 auto;          /* takes whatever is left, so the two tiles still finish level */
  align-items: stretch;
  gap: 8px;
  min-height: 58px;
  max-height: 96px;
  margin-top: 10px;
}
.wkb-call__no {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
  border: 1px solid rgba(232,184,75,.28);
  border-radius: 14px;
  background: linear-gradient(120deg, rgba(232,184,75,.12), rgba(255,122,26,.07));
  text-decoration: none;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.wkb-call__no:hover { transform: translateY(-2px); border-color: rgba(232,184,75,.6); background: linear-gradient(120deg, rgba(232,184,75,.2), rgba(255,122,26,.12)); }
.wkb-call__no i {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--b-org), var(--b-red));
  color: #fff;
}
.wkb-call__no span { min-width: 0; }
.wkb-call__no small { display: block; font-size: 10.5px; font-weight: 500; color: var(--b-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wkb-call__no b { display: block; font-size: 16px; font-weight: 700; letter-spacing: -.01em; color: #fff; }

.wkb-call__all {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  font-size: 11.5px;
  font-weight: 600;
  color: #D7DBE4;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.wkb-call__all:hover { color: #fff; border-color: rgba(232,184,75,.6); background: rgba(232,184,75,.14); }
.wkb-call__all i { transition: transform .2s ease; }
.wkb-call__all:hover i { transform: translateX(3px); }
.wkb-call__no:focus-visible,
.wkb-call__all:focus-visible { outline: 3px solid rgba(232,184,75,.7); outline-offset: 2px; }
/* ---- the services ticker ---------------------------------------------------------------------- */
.wkb-ticker {
  position: relative;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.1);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.wkb-ticker__row {
  display: flex;
  align-items: center;
  width: max-content;
  animation: wkbRun 46s linear infinite;
}
.wkb-ticker:hover .wkb-ticker__row { animation-play-state: paused; }
@keyframes wkbRun { to { transform: translateX(-50%); } }

.wkb-ticker__row span {
  padding: 0 18px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
  color: rgba(255,255,255,.52);
}
.wkb-ticker__row span.is-hot {
  background: linear-gradient(100deg, var(--b-gold2), var(--b-org));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.wkb-ticker__row i {                 /* a small gold diamond between the names */
  flex: none;
  width: 6px;
  height: 6px;
  transform: rotate(45deg);
  border-radius: 1px;
  background: rgba(232,184,75,.65);
}
/* ---- widths: laptop, tablet, phone ----------------------------------------------------------- */
@media (max-width: 1199px) {          /* small laptops - the menu wraps onto two rows */
  .wkb { margin-top: var(--wk-navh, 170px); padding: 30px 0 28px; }
  .wkb-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); }
  .wkb-pts { width: 208px; padding: 12px; gap: 7px; }
  .wkb-pts span { font-size: 11.5px; }
  .wkb-main { padding: 24px 24px 14px; }
  .wkb-title { font-size: 38px; max-width: 20ch; }
  .wkb-tab { padding: 8px 10px 10px; gap: 6px; }
  .wkb-tab span { font-size: 12px; }
}
@media (max-width: 991px) {           /* tablets - the menu wraps onto three rows */
  .wkb { margin-top: var(--wk-navh, 218px); padding: 26px 0 26px; }
  .wkb-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 280px); gap: 14px; }
  /* the points would crowd the headline here, so the headline takes the whole tile */
  .wkb-slide { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kick" "title" "sub" "chips" "cta"; }
  .wkb-pts { display: none; }
  .wkb-title { font-size: 33px; max-width: none; }
  .wkb-sub { font-size: 14px; }
  .wkb-pic figcaption { padding: 40px 13px 12px; }
  .wkb-pic figcaption b { font-size: 12.5px; }
  .wkb-pic__all { font-size: 11px; padding: 6px 11px; }
}
@media (max-width: 767px) {           /* large phones and small tablets - one short header bar */
  .wkb { margin-top: var(--wk-navh, 69px); padding: 16px 0 18px; }
  .wkb-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .wkb-main { padding: 20px 16px 10px; }
  .wkb-title { font-size: 28px; }
  .wkb-sub { font-size: 13.5px; margin-top: 10px; }
  .wkb-chips { margin-top: 12px; }
  .wkb-chips li { padding: 5px 10px; font-size: 11px; }
  /* the award tile uses the whole width on a phone - a narrow card left odd gaps at the sides */
  .wkb-shot { max-width: none; width: 100%; padding: 8px; align-self: stretch; }
  .wkb-pic__im { min-height: 0; }
  .wkb-pic figcaption { padding: 10px 12px 11px; }
  /* one line on a phone too, so the tile does not grow a second row */
  .wkb-call { flex-wrap: nowrap; gap: 6px; }
  .wkb-call__no { padding: 9px 11px; gap: 9px; }
  .wkb-call__no i { width: 32px; height: 32px; }
  .wkb-call__no b { font-size: 14px; }
  .wkb-call__no small { font-size: 9.5px; }
  .wkb-call__all { padding: 0 10px; font-size: 10.5px; }
  /* the chips run in one scrolling line instead of wrapping onto a second row */
  .wkb-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 2px; }
  .wkb-chips::-webkit-scrollbar { display: none; }
  .wkb-chips li { flex: none; }
  .wkb-ticker { margin-top: 14px; padding-top: 14px; }
  .wkb-ticker__row span { font-size: 13px; padding: 0 13px; }
}
@media (max-width: 575px) {           /* phones */
  .wkb-wrap { padding: 0 14px; }
  .wkb-title { font-size: 23px; }
  .wkb-kicker { font-size: 10px; padding: 6px 12px; }
  .wkb-btn { height: 46px; padding: 0 18px; font-size: 13.5px; }
  .wkb-btn--go { flex: 1 1 auto; justify-content: center; }
  .wkb-btn--quote { flex: 1 1 auto; align-items: center; }
  /* the tabs shrink to their numbers so they and the arrows share one line */
  .wkb-ctrl { gap: 8px; }
  .wkb-tabs { flex-wrap: nowrap; gap: 3px; }
  .wkb-tab { flex: none; padding: 7px 9px 9px; }
  .wkb-tab span { display: none; }
  .wkb-tab b { font-size: 11.5px; }
  .wkb-nav { width: 34px; height: 34px; font-size: 15px; }
  .wkb-pic figcaption b { font-size: 12px; }
  .wkb-ticker { margin-top: 10px; padding-top: 10px; }
  .wkb-ticker__row span { font-size: 12px; padding: 0 11px; }
}
@media (min-width: 1600px) {          /* large desktops and iMacs - a little more room, same shape */
  .wkb-wrap { max-width: 1340px; }
  .wkb-title { font-size: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .wkb-slide, .wkb-pic, .wkb-btn, .wkb-btn i, .wkb-nav, .wkb-tab, .wkb-pic img { transition: none; }
  .wkb-slide > *, .wkb-slide.is-active > * { animation: none; opacity: 1; transform: none; }
  .wkb-pic img, .wkb-pic.is-active img { transform: none; }
  .wkb-tab.is-run .wkb-tab__bar::before { animation: none; }
  .wkb-ticker__row { animation: none; }
}