/* Vivacity homepage section two. Every selector is scoped; no other page changes. */
.viv-quick{--vqa-dark:var(--viv-primary-deep);--vqa-ink:var(--viv-ink);--vqa-teal:var(--viv-primary);--vqa-aqua:var(--viv-primary);--vqa-gold:var(--viv-accent);position:relative;isolation:isolate;overflow:hidden;padding:86px 22px 108px;background:radial-gradient(circle at 93% 98%,color-mix(in srgb,var(--viv-primary) 11%,transparent),transparent 35%),linear-gradient(135deg,var(--viv-primary-soft) 0%,var(--viv-primary-soft) 57%,var(--viv-accent-soft) 100%);color:var(--vqa-ink)}
.viv-quick::before{content:"";pointer-events:none;position:absolute;z-index:-1;width:580px;height:580px;left:-380px;bottom:-315px;border:1px solid color-mix(in srgb,var(--viv-primary) 12%,transparent);border-radius:50%}
.viv-quick__container{width:min(100%,1340px);margin:0 auto}
.viv-quick__intro{position:relative;isolation:isolate;overflow:hidden;min-height:335px;display:flex;align-items:flex-start;padding:58px clamp(28px,5.1vw,78px) 96px;background:linear-gradient(112deg,var(--viv-primary-deep) 0%,var(--viv-primary-deep) 66%,var(--viv-primary) 100%);border-radius:32px 32px 52px 32px;box-shadow:0 25px 55px color-mix(in srgb,var(--viv-primary-deep) 13%,transparent);color:#fff}
.viv-quick__intro::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle at 85% 0%,color-mix(in srgb,color-mix(in srgb,var(--viv-primary) 48%,var(--viv-white)) 17%,transparent),transparent 32%),linear-gradient(100deg,transparent 66%,rgba(255,255,255,.018) 66%,rgba(255,255,255,.018) 67%,transparent 67%)}
.viv-quick__intro-copy{position:relative;z-index:1;width:min(690px,75%)}
.viv-quick__eyebrow{display:inline-flex;align-items:center;gap:13px;color:color-mix(in srgb,var(--viv-primary) 48%,var(--viv-white));font-size:11px;line-height:1.4;font-weight:800;letter-spacing:.19em;text-transform:uppercase}
.viv-quick__eyebrow-line{width:36px;height:2px;background:var(--vqa-gold)}
.viv-quick__intro h2{max-width:720px;margin:18px 0 16px;font-size:clamp(34px,3.45vw,48px);line-height:1.15;letter-spacing:-.046em;font-weight:800;color:#fff}
.viv-quick__intro h2 em{font-style:normal;color:color-mix(in srgb,var(--viv-primary) 48%,var(--viv-white))}
.viv-quick__intro p{margin:0;max-width:585px;color:var(--viv-primary-soft-2);font-size:16px;line-height:1.8}
.viv-quick__intro-art{position:absolute;z-index:0;right:8%;top:25px;width:290px;height:290px;display:grid;place-items:center;color:color-mix(in srgb,var(--viv-primary) 48%,var(--viv-white));opacity:.65}
.viv-quick__intro-art span{position:absolute;border-radius:50%;border:1px solid color-mix(in srgb,var(--viv-primary-soft-2) 23%,transparent)}
.viv-quick__intro-art span:nth-child(1){inset:0}
.viv-quick__intro-art span:nth-child(2){inset:30px}
.viv-quick__intro-art span:nth-child(3){inset:62px}
.viv-quick__intro-art svg{width:74px;height:74px;opacity:.6;stroke-width:1}
.viv-quick__grid{position:relative;z-index:2;margin:-58px 20px 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.viv-quick__card{--vqa-hover:var(--viv-primary);--vqa-icon:var(--viv-primary);--vqa-iconbg:var(--viv-primary-soft-2);min-width:0;position:relative;isolation:isolate;overflow:hidden;min-height:232px;background:#fff;border:1px solid var(--viv-primary-soft-2);border-radius:21px;box-shadow:0 14px 32px color-mix(in srgb,var(--viv-primary-deep) 6%,transparent);transition:transform .36s cubic-bezier(.2,.7,.2,1),box-shadow .36s ease,border-color .3s ease}
.viv-quick__card--aqua{--vqa-hover:var(--viv-primary);--vqa-icon:var(--viv-primary);--vqa-iconbg:var(--viv-primary-soft-2)}
.viv-quick__card--gold{--vqa-hover:color-mix(in srgb,var(--viv-accent) 72%,var(--viv-ink));--vqa-icon:color-mix(in srgb,var(--viv-accent) 72%,var(--viv-ink));--vqa-iconbg:var(--viv-accent-soft)}
.viv-quick__card--blue{--vqa-hover:var(--viv-primary);--vqa-icon:var(--viv-primary);--vqa-iconbg:var(--viv-primary-soft-2)}
.viv-quick__card::before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(135deg,var(--vqa-hover),var(--viv-primary-deep));transform:translateY(102%);transition:transform .52s cubic-bezier(.21,.75,.2,1);border-radius:inherit}
.viv-quick__card::after{content:"";position:absolute;z-index:-1;right:-60px;bottom:-135px;width:230px;height:230px;border:1px solid rgba(255,255,255,.16);border-radius:50%;opacity:0;transform:scale(.5);transition:opacity .4s,transform .55s}
.viv-quick__card-link{display:flex;flex-direction:column;justify-content:space-between;min-height:inherit;height:100%;padding:24px;text-decoration:none!important;color:inherit!important;outline-offset:4px}
.viv-quick__card-link:focus-visible{outline:3px solid var(--vqa-gold)}
.viv-quick__card-top{display:flex;align-items:flex-start;gap:10px;position:relative;z-index:1}
.viv-quick__icon{display:grid;place-items:center;flex:none;width:77px;height:77px;border-radius:21px;background:var(--vqa-iconbg);color:var(--vqa-icon);transition:background .3s,color .3s,transform .45s cubic-bezier(.2,.7,.2,1),border-radius .4s}
.viv-quick__icon svg{width:44px;height:44px}
.viv-quick__icon img{width:50px;height:50px;object-fit:contain}
.viv-quick__card-number{margin-left:auto;font-size:11px;font-weight:800;letter-spacing:.11em;color:var(--viv-slate);transition:color .3s}
.viv-quick__card-bottom{display:flex;align-items:flex-end;gap:10px;margin-top:22px;position:relative;z-index:1}
.viv-quick__card-text{flex:1;min-width:0}
.viv-quick__card h3{margin:0 0 7px;font-size:clamp(17px,1.25vw,21px);line-height:1.3;letter-spacing:-.035em;font-weight:800;color:var(--viv-primary-deep);transition:color .3s}
.viv-quick__card p{margin:0;color:var(--viv-slate);font-size:13px;line-height:1.65;transition:color .3s}
.viv-quick__arrow{display:grid;place-items:center;flex:none;width:37px;height:37px;border-radius:12px;color:var(--viv-primary);border:1px solid var(--viv-primary-soft-2);transition:background .3s,color .3s,transform .3s,border-color .3s}
.viv-quick__arrow svg{width:19px;height:19px}
.viv-quick__card--featured{grid-column:span 2;min-height:232px;background:linear-gradient(112deg,var(--viv-primary-deep),var(--viv-primary));border-color:var(--viv-primary);box-shadow:0 22px 44px color-mix(in srgb,var(--viv-primary-deep) 19%,transparent)}
.viv-quick__card--featured::before{background:linear-gradient(108deg,var(--viv-primary-deep),var(--viv-primary))}
.viv-quick__card--featured .viv-quick__card-link{padding:27px 32px}
.viv-quick__card--featured .viv-quick__icon{background:color-mix(in srgb,var(--viv-primary-soft-2) 13%,transparent);border:1px solid color-mix(in srgb,var(--viv-primary-soft-2) 26%,transparent);color:color-mix(in srgb,var(--viv-primary) 48%,var(--viv-white));width:82px;height:82px}
.viv-quick__card--featured h3{font-size:clamp(21px,2.05vw,29px);color:#fff}
.viv-quick__card--featured p{max-width:430px;font-size:14px;color:var(--viv-primary-soft-2)}
.viv-quick__card--featured .viv-quick__arrow{color:#fff;border-color:rgba(255,255,255,.35)}
.viv-quick__card--featured .viv-quick__card-number{color:color-mix(in srgb,var(--viv-primary) 48%,var(--viv-white))}
.viv-quick__tag{align-self:flex-start;display:inline-flex;align-items:center;margin:12px 0 0 3px;padding:7px 11px;border-radius:40px;border:1px solid color-mix(in srgb,color-mix(in srgb,var(--viv-primary) 48%,var(--viv-white)) 24%,transparent);color:#d3f1eb;font-size:9px;font-weight:800;letter-spacing:.12em}
.viv-quick__featured-action{position:absolute;right:32px;bottom:34px;display:inline-flex;gap:8px;align-items:center;color:var(--viv-primary-soft-2);font-weight:800;font-size:12px}
.viv-quick__card--featured .viv-quick__card-bottom{padding-right:110px}
.viv-quick__card--featured .viv-quick__arrow{display:none}
.viv-quick__card:hover,.viv-quick__card:focus-within{transform:translateY(-7px);box-shadow:0 24px 43px color-mix(in srgb,var(--viv-primary-deep) 18%,transparent);border-color:transparent}
.viv-quick__card:hover::before,.viv-quick__card:focus-within::before{transform:translateY(0)}
.viv-quick__card:hover::after,.viv-quick__card:focus-within::after{opacity:1;transform:scale(1)}
.viv-quick__card:hover .viv-quick__icon,.viv-quick__card:focus-within .viv-quick__icon{background:rgba(255,255,255,.15);color:#fff;transform:rotate(-6deg) scale(1.08);border-radius:25px}
.viv-quick__card:hover h3,.viv-quick__card:focus-within h3,.viv-quick__card:hover .viv-quick__card-number,.viv-quick__card:focus-within .viv-quick__card-number{color:#fff}
.viv-quick__card:hover p,.viv-quick__card:focus-within p{color:var(--viv-primary-soft-2)}
.viv-quick__card:hover .viv-quick__arrow,.viv-quick__card:focus-within .viv-quick__arrow{background:#fff;color:var(--viv-primary);border-color:#fff;transform:rotate(-35deg)}
@media(max-width:1060px){.viv-quick{padding:72px 20px 90px}.viv-quick__intro{min-height:316px;padding:48px 45px 92px}.viv-quick__grid{grid-template-columns:repeat(2,minmax(0,1fr));margin-left:10px;margin-right:10px}.viv-quick__card--featured{grid-column:span 2}.viv-quick__intro-art{right:-25px;opacity:.35}}
@media(max-width:600px){.viv-quick{padding:52px 15px 65px}.viv-quick__intro{min-height:0;padding:37px 26px 93px;border-radius:23px 23px 39px 23px}.viv-quick__intro-copy{width:100%}.viv-quick__intro h2{font-size:clamp(32px,8.6vw,42px)}.viv-quick__intro p{font-size:14px}.viv-quick__intro-art{right:-115px;top:0;opacity:.18}.viv-quick__grid{margin:-56px 7px 0;grid-template-columns:1fr;gap:13px}.viv-quick__card--featured{grid-column:auto}.viv-quick__card,.viv-quick__card--featured{min-height:210px}.viv-quick__card-link,.viv-quick__card--featured .viv-quick__card-link{padding:22px}.viv-quick__icon,.viv-quick__card--featured .viv-quick__icon{width:72px;height:72px}.viv-quick__icon svg{width:42px;height:42px}.viv-quick__card--featured .viv-quick__card-bottom{padding-right:0}.viv-quick__featured-action{display:none}.viv-quick__tag{font-size:8px}.viv-quick__card h3{font-size:20px}}
@media(prefers-reduced-motion:reduce){.viv-quick__card,.viv-quick__card::before,.viv-quick__card::after,.viv-quick__icon,.viv-quick__arrow,.viv-quick__card h3,.viv-quick__card p{transition:none!important}.viv-quick__card:hover,.viv-quick__card:focus-within{transform:none}}

/* v2 layout: a calm editorial directory rather than a dark masthead with
   overlapping tiles. Preserve the existing card hover/colour interactions. */
.viv-quick {
  padding: 88px 22px 100px;
  background:
    radial-gradient(ellipse at 92% 12%, color-mix(in srgb,var(--viv-primary) 7.5%,transparent), transparent 36%),
    linear-gradient(180deg,var(--viv-primary-soft) 0%,var(--viv-primary-soft) 100%);
}
.viv-quick::before {
  left:auto;right:-350px;top:-350px;bottom:auto;
  width:660px;height:660px;
  border-color:color-mix(in srgb,var(--viv-primary) 13%,transparent);
}
.viv-quick__intro {
  min-height:0;
  display:block;
  overflow:visible;
  padding:0 0 38px;
  background:transparent;
  border-radius:0;
  box-shadow:none;
  color:var(--vqa-ink);
  border-bottom:1px solid var(--viv-primary-soft-2);
}
.viv-quick__intro::before,.viv-quick__intro-art { display:none; }
.viv-quick__intro-copy { width:100%;max-width:850px; }
.viv-quick__eyebrow { color:var(--viv-primary); }
.viv-quick__intro h2 {
  max-width:870px;
  margin:19px 0 17px;
  color:var(--viv-primary-deep);
  font-size:clamp(36px,3.5vw,50px);
  line-height:1.12;
  letter-spacing:-.047em;
}
.viv-quick__intro h2 em { color:var(--viv-primary); }
.viv-quick__intro p {
  max-width:680px;
  color:var(--viv-slate);
  font-size:16px;
  line-height:1.75;
}
.viv-quick__grid {
  margin:32px 0 0;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:21px;
}
.viv-quick__card { min-height:236px; }
.viv-quick__card--featured {
  grid-column:1/-1;
  min-height:195px;
  border-radius:25px;
  background:linear-gradient(110deg,var(--viv-primary-deep) 0%,var(--viv-primary-deep) 60%,var(--viv-primary) 100%);
}
.viv-quick__card--featured .viv-quick__card-link {
  display:grid;
  grid-template-columns:minmax(170px,220px) minmax(0,1fr);
  align-items:center;
  column-gap:36px;
  padding:30px 39px;
}
.viv-quick__card--featured .viv-quick__card-top {
  align-items:center;
  gap:20px;
  min-width:0;
}
.viv-quick__card--featured .viv-quick__icon { width:94px;height:94px;border-radius:23px; }
.viv-quick__card--featured .viv-quick__icon svg { width:54px;height:54px; }
.viv-quick__card--featured .viv-quick__icon img { width:62px;height:62px; }
.viv-quick__card--featured .viv-quick__tag {
  margin:0;
  max-width:96px;
  line-height:1.6;
}
.viv-quick__card--featured .viv-quick__card-number {
  position:absolute;
  top:29px;right:39px;
  margin:0;
}
.viv-quick__card--featured .viv-quick__card-bottom {
  margin:0;
  padding:0 180px 0 36px;
  min-height:100px;
  align-items:center;
  border-left:1px solid color-mix(in srgb,var(--viv-primary-soft-2) 21%,transparent);
}
.viv-quick__card--featured h3 { font-size:clamp(23px,2.15vw,31px); }
.viv-quick__card--featured p { max-width:550px; }
.viv-quick__featured-action { right:43px;bottom:46px; }
@media(max-width:1050px) {
  .viv-quick { padding:72px 20px 86px; }
  .viv-quick__grid {grid-template-columns:repeat(2,minmax(0,1fr));margin:28px 0 0;gap:17px;}
  .viv-quick__card--featured {grid-column:1/-1;}
  .viv-quick__card--featured .viv-quick__card-link {grid-template-columns:170px 1fr;column-gap:20px;padding:28px;}
  .viv-quick__card--featured .viv-quick__card-bottom {padding-right:118px;padding-left:24px;}
  .viv-quick__featured-action {right:27px;bottom:37px;}
}
@media(max-width:650px) {
  .viv-quick {padding:55px 16px 70px;}
  .viv-quick__intro {padding:0 0 26px;}
  .viv-quick__intro h2 {font-size:clamp(33px,8vw,41px);}
  .viv-quick__intro p {font-size:14px;}
  .viv-quick__grid {grid-template-columns:1fr;margin:24px 0 0;gap:14px;}
  .viv-quick__card--featured {grid-column:auto;min-height:245px;}
  .viv-quick__card--featured .viv-quick__card-link {display:flex;flex-direction:column;align-items:stretch;gap:24px;padding:23px;}
  .viv-quick__card--featured .viv-quick__card-top {gap:18px;}
  .viv-quick__card--featured .viv-quick__icon {width:76px;height:76px;}
  .viv-quick__card--featured .viv-quick__icon svg {width:44px;height:44px;}
  .viv-quick__card--featured .viv-quick__card-number {right:23px;top:23px;}
  .viv-quick__card--featured .viv-quick__card-bottom {min-height:0;border:0;padding:0;}
  .viv-quick__featured-action {display:none;}
}
@media(max-width:650px) {
  .viv-quick__card {min-height:176px;}
  .viv-quick__card-link {padding:20px;}
  .viv-quick__card--featured {min-height:207px;}
  .viv-quick__card--featured .viv-quick__card-link {gap:18px;}
  .viv-quick__card-bottom {margin-top:15px;}
}


/* Refined Quick Access introduction + first (featured) card only.
   The six standard cards and their original hover transitions remain untouched. */
.viv-quick__intro {
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:0 22px 35px;
  border-bottom:0;
}
.viv-quick__intro-copy { width:100%; max-width:920px; }
.viv-quick__eyebrow { justify-content:center; color:var(--viv-primary); }
.viv-quick__eyebrow-line { width:27px; }
.viv-quick__intro h2 {
  max-width:850px;
  margin:17px auto 13px;
  font-size:clamp(36px,3.45vw,49px);
  line-height:1.15;
  text-wrap:balance;
}
.viv-quick__intro p {
  max-width:710px;
  margin:0 auto;
  line-height:1.7;
  text-wrap:pretty;
}
.viv-quick__grid { margin-top:22px; }
.viv-quick__card--featured {
  min-height:199px;
  background:linear-gradient(108deg,#ffffff 0%,var(--viv-primary-soft) 100%);
  border:1px solid color-mix(in srgb,var(--viv-primary) 48%,var(--viv-white));
  border-radius:24px;
  box-shadow:0 17px 40px color-mix(in srgb,var(--viv-primary-deep) 7.5%,transparent);
}
.viv-quick__card--featured::before {
  background:linear-gradient(110deg,var(--viv-primary-deep) 0%,var(--viv-primary) 100%);
}
.viv-quick__card--featured .viv-quick__card-link {
  display:grid;
  grid-template-columns:184px minmax(0,1fr) minmax(160px,196px);
  align-items:center;
  column-gap:32px;
  padding:17px 27px 17px 17px;
}
.viv-quick__card--featured .viv-quick__card-top {
  height:100%; min-height:161px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:9px;
  padding:16px 13px;
  border-radius:17px;
  background:var(--viv-primary-deep);
  transition:background .4s ease;
}
.viv-quick__card--featured .viv-quick__icon {
  width:67px;height:67px;
  border:1px solid color-mix(in srgb,var(--viv-primary-soft-2) 24%,transparent);
  border-radius:17px;
  background:color-mix(in srgb,var(--viv-primary-soft-2) 11%,transparent);
  color:var(--viv-primary-soft-2);
}
.viv-quick__card--featured .viv-quick__icon svg {width:39px;height:39px}
.viv-quick__card--featured .viv-quick__icon img {width:44px;height:44px}
.viv-quick__card--featured .viv-quick__tag {
  margin:0;max-width:none;
  padding:4px 10px;
  border-color:color-mix(in srgb,var(--viv-primary-soft-2) 32%,transparent);
  color:#ddfaf2;
  font-size:9px;
  line-height:1.45;
  text-align:center;
}
.viv-quick__card--featured .viv-quick__card-number {
  position:absolute;top:18px;right:24px;
  color:color-mix(in srgb,var(--viv-primary) 48%,var(--viv-white));
}
.viv-quick__card--featured .viv-quick__card-bottom {
  margin:0;
  padding:0;
  min-height:0;
  border:0;
  align-items:center;
}
.viv-quick__card--featured h3 {
  margin:0 0 9px;
  color:var(--viv-primary-deep);
  font-size:clamp(24px,2.2vw,32px);
  line-height:1.15;
}
.viv-quick__card--featured p {
  max-width:500px;
  color:var(--viv-slate);
  font-size:14px;
  line-height:1.7;
}
.viv-quick__featured-action {
  position:static;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  align-self:center;
  justify-self:stretch;
  min-height:49px;
  margin-top:13px;
  padding:12px 16px;
  border-radius:12px;
  background:var(--viv-primary);
  color:#fff;
  text-align:center;
  font-size:13px;
  font-weight:800;
  white-space:normal;
  transition:background .35s,color .35s,transform .35s;
}
.viv-quick__featured-action span {font-size:18px;line-height:1}
.viv-quick__card--featured:hover .viv-quick__featured-action,
.viv-quick__card--featured:focus-within .viv-quick__featured-action {
  background:#fff;color:var(--viv-primary);transform:translateX(3px);
}
.viv-quick__card--featured:hover .viv-quick__card-top,
.viv-quick__card--featured:focus-within .viv-quick__card-top {
  background:color-mix(in srgb,var(--viv-primary-deep) 40%,transparent);
}
.viv-quick__card--featured:hover h3,.viv-quick__card--featured:focus-within h3{color:#fff}
.viv-quick__card--featured:hover p,.viv-quick__card--featured:focus-within p{color:var(--viv-primary-soft-2)}
@media(max-width:1050px){
  .viv-quick__intro{padding:0 8px 30px}
  .viv-quick__card--featured .viv-quick__card-link{grid-template-columns:144px minmax(0,1fr) 155px;column-gap:18px;padding:15px}
  .viv-quick__card--featured .viv-quick__card-top{min-height:158px}
  .viv-quick__card--featured .viv-quick__card-bottom{padding:0}
  .viv-quick__card--featured .viv-quick__card-number{right:18px;top:13px}
}
@media(max-width:750px){
  .viv-quick__card--featured .viv-quick__card-link{grid-template-columns:115px minmax(0,1fr);column-gap:21px;row-gap:13px;padding:16px}
  .viv-quick__card--featured .viv-quick__card-top{grid-row:1/3;min-height:156px}
  .viv-quick__card--featured .viv-quick__card-bottom{grid-column:2;grid-row:1;align-self:end}
  .viv-quick__featured-action{grid-column:2;grid-row:2;display:inline-flex;margin:0;min-height:43px;align-self:start}
  .viv-quick__card--featured .viv-quick__card-number{top:9px;right:12px}
  .viv-quick__card--featured h3{font-size:23px}
}
@media(max-width:480px){
  .viv-quick__intro{padding:0 3px 24px}
  .viv-quick__intro h2{font-size:clamp(31px,8vw,39px)}
  .viv-quick__card--featured .viv-quick__card-link{grid-template-columns:89px minmax(0,1fr);column-gap:14px;row-gap:12px;padding:13px}
  .viv-quick__card--featured .viv-quick__card-top{grid-row:1/3;min-height:145px;gap:8px;padding:13px 8px}
  .viv-quick__card--featured .viv-quick__icon{width:59px;height:59px}
  .viv-quick__card--featured .viv-quick__icon svg{width:35px;height:35px}
  .viv-quick__card--featured .viv-quick__tag{font-size:8px;padding:4px 6px}
  .viv-quick__card--featured .viv-quick__card-bottom{padding:0}
  .viv-quick__card--featured h3{font-size:19px;line-height:1.2}
  .viv-quick__card--featured p{font-size:12px;line-height:1.55}
  .viv-quick__featured-action{padding:8px 9px;font-size:11px;min-height:38px}
}
@media(prefers-reduced-motion:reduce){
 .viv-quick__card--featured .viv-quick__card-top,.viv-quick__featured-action{transition:none!important}
 .viv-quick__card--featured:hover .viv-quick__featured-action{transform:none}
}

/* Featured Quick Access: calm editorial action card. No hover animation here.
   Intentionally scoped to the first card; standard cards remain unchanged. */
.viv-quick .viv-quick__card--featured {
  min-height:228px;
  background:linear-gradient(115deg,#ffffff 0%,#ffffff 60%,var(--viv-primary-soft-2) 100%);
  border:1px solid color-mix(in srgb,var(--viv-primary) 48%,var(--viv-white));
  border-radius:25px;
  box-shadow:0 14px 34px color-mix(in srgb,var(--viv-primary-deep) 6.5%,transparent);
  transform:none;
  transition:none;
}
.viv-quick .viv-quick__card--featured::before,
.viv-quick .viv-quick__card--featured::after { display:none; }
.viv-quick .viv-quick__card--featured .viv-quick__card-link {
  display:grid;
  grid-template-columns:minmax(0,1fr) 150px;
  grid-template-rows:auto auto auto;
  column-gap:34px;
  row-gap:10px;
  align-content:center;
  align-items:start;
  min-height:228px;
  padding:29px 39px;
}
.viv-quick .viv-quick__card--featured .viv-quick__card-top { display:contents; }
.viv-quick .viv-quick__card--featured .viv-quick__tag {
  grid-column:1;
  grid-row:1;
  justify-self:start;
  align-self:end;
  margin:0 0 5px;
  padding:5px 11px;
  color:var(--viv-primary);
  background:var(--viv-primary-soft-2);
  border:1px solid var(--viv-primary-soft-2);
  border-radius:999px;
  font-size:10px;
  line-height:1.45;
  letter-spacing:.09em;
}
.viv-quick .viv-quick__card--featured .viv-quick__icon {
  grid-column:2;
  grid-row:1 / 4;
  justify-self:center;
  align-self:center;
  display:grid;
  place-items:center;
  width:132px;
  height:132px;
  border:1px solid var(--viv-primary-soft-2);
  border-radius:33px;
  background:var(--viv-primary-soft-2);
  color:var(--viv-primary);
  transform:none;
  transition:none;
}
.viv-quick .viv-quick__card--featured .viv-quick__icon svg {width:67px;height:67px}
.viv-quick .viv-quick__card--featured .viv-quick__icon img {width:77px;height:77px;object-fit:contain}
.viv-quick .viv-quick__card--featured .viv-quick__card-number {
  top:17px;
  right:19px;
  color:color-mix(in srgb,var(--viv-primary) 48%,var(--viv-white));
  transition:none;
}
.viv-quick .viv-quick__card--featured .viv-quick__card-bottom {
  grid-column:1;
  grid-row:2;
  display:block;
  margin:0;
  padding:0;
  min-height:0;
  border:0;
}
.viv-quick .viv-quick__card--featured h3 {
  margin:0 0 7px;
  color:var(--viv-primary-deep);
  font-size:clamp(24px,2.1vw,31px);
  line-height:1.2;
  transition:none;
}
.viv-quick .viv-quick__card--featured p {
  max-width:640px;
  color:var(--viv-slate);
  font-size:14px;
  line-height:1.65;
  transition:none;
}
.viv-quick .viv-quick__card--featured .viv-quick__featured-action {
  grid-column:1;
  grid-row:3;
  justify-self:start;
  align-self:center;
  position:static;
  display:inline-flex;
  margin:8px 0 0;
  padding:11px 18px;
  min-width:146px;
  min-height:44px;
  color:#fff;
  background:var(--viv-primary);
  border-radius:12px;
  box-shadow:none;
  transform:none;
  transition:none;
}
.viv-quick .viv-quick__card--featured .viv-quick__arrow {display:none}
/* Do not use the animated hover treatment on the featured card. Keep the
   keyboard focus outline on its actual link for accessibility. */
.viv-quick .viv-quick__card--featured:hover,
.viv-quick .viv-quick__card--featured:focus-within {
  background:linear-gradient(115deg,#ffffff 0%,#ffffff 60%,var(--viv-primary-soft-2) 100%);
  border-color:color-mix(in srgb,var(--viv-primary) 48%,var(--viv-white));
  box-shadow:0 14px 34px color-mix(in srgb,var(--viv-primary-deep) 6.5%,transparent);
  transform:none;
}
.viv-quick .viv-quick__card--featured:hover .viv-quick__card-top,
.viv-quick .viv-quick__card--featured:focus-within .viv-quick__card-top {background:transparent}
.viv-quick .viv-quick__card--featured:hover .viv-quick__icon,
.viv-quick .viv-quick__card--featured:focus-within .viv-quick__icon {
  background:var(--viv-primary-soft-2);
  color:var(--viv-primary);
  border-color:var(--viv-primary-soft-2);
  border-radius:33px;
  transform:none;
}
.viv-quick .viv-quick__card--featured:hover h3,
.viv-quick .viv-quick__card--featured:focus-within h3 {color:var(--viv-primary-deep)}
.viv-quick .viv-quick__card--featured:hover p,
.viv-quick .viv-quick__card--featured:focus-within p {color:var(--viv-slate)}
.viv-quick .viv-quick__card--featured:hover .viv-quick__card-number,
.viv-quick .viv-quick__card--featured:focus-within .viv-quick__card-number {color:color-mix(in srgb,var(--viv-primary) 48%,var(--viv-white))}
.viv-quick .viv-quick__card--featured:hover .viv-quick__featured-action,
.viv-quick .viv-quick__card--featured:focus-within .viv-quick__featured-action {
  background:var(--viv-primary);
  color:#fff;
  transform:none;
}
@media(max-width:750px) {
  .viv-quick .viv-quick__card--featured .viv-quick__card-link {
    grid-template-columns:minmax(0,1fr) 108px;
    min-height:205px;
    padding:25px;
    column-gap:16px;
    row-gap:8px;
  }
  .viv-quick .viv-quick__card--featured .viv-quick__icon {width:100px;height:100px;border-radius:25px}
  .viv-quick .viv-quick__card--featured .viv-quick__icon svg {width:52px;height:52px}
  .viv-quick .viv-quick__card--featured .viv-quick__icon img {width:58px;height:58px}
  .viv-quick .viv-quick__card--featured:hover .viv-quick__icon,
  .viv-quick .viv-quick__card--featured:focus-within .viv-quick__icon {border-radius:25px}
  .viv-quick .viv-quick__card--featured .viv-quick__card-bottom {grid-column:1;grid-row:2;align-self:start}
  .viv-quick .viv-quick__featured-action {grid-column:1;grid-row:3}
}
@media(max-width:480px) {
  .viv-quick .viv-quick__card--featured {min-height:212px}
  .viv-quick .viv-quick__card--featured .viv-quick__card-link {
    grid-template-columns:minmax(0,1fr) 74px;
    min-height:212px;
    padding:20px;
    column-gap:13px;
    row-gap:7px;
  }
  .viv-quick .viv-quick__card--featured .viv-quick__icon {width:72px;height:72px;border-radius:20px}
  .viv-quick .viv-quick__card--featured .viv-quick__icon svg {width:39px;height:39px}
  .viv-quick .viv-quick__card--featured .viv-quick__icon img {width:44px;height:44px}
  .viv-quick .viv-quick__card--featured:hover .viv-quick__icon,
  .viv-quick .viv-quick__card--featured:focus-within .viv-quick__icon {border-radius:20px}
  .viv-quick .viv-quick__card--featured .viv-quick__card-number {top:10px;right:13px}
  .viv-quick .viv-quick__card--featured h3 {font-size:clamp(20px,5.5vw,24px)}
  .viv-quick .viv-quick__card--featured p {font-size:12px}
  .viv-quick .viv-quick__card--featured .viv-quick__featured-action {padding:9px 14px;min-height:40px;margin-top:3px;font-size:12px}
}

/* Homepage Quick Access: featured action panel follows the standard cards.
   Decorative shapes belong to the SECTION, not to individual card hover states. */
.viv-quick {
  background:
    radial-gradient(ellipse 46% 36% at 97% 10%, color-mix(in srgb,var(--viv-primary) 14%,transparent), transparent 100%),
    radial-gradient(ellipse 44% 40% at 0% 96%, color-mix(in srgb,var(--viv-accent) 7.5%,transparent), transparent 100%),
    linear-gradient(153deg,var(--viv-primary-soft) 0%,var(--viv-primary-soft-2) 54%,var(--viv-primary-soft) 100%);
}
.viv-quick::before {
  z-index:-1;
  width:620px;height:620px;
  right:-320px;left:auto;
  top:-335px;bottom:auto;
  border:1px solid color-mix(in srgb,var(--viv-primary) 17%,transparent);
  border-radius:43%;
  transform:rotate(-24deg);
}
.viv-quick::after {
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:-1;
  left:-185px;bottom:-255px;
  width:500px;height:500px;
  border:1px solid color-mix(in srgb,var(--viv-primary) 11%,transparent);
  border-radius:40%;
  transform:rotate(22deg);
}
.viv-quick__container {position:relative;z-index:1}
.viv-quick .viv-quick__grid {row-gap:22px}
.viv-quick .viv-quick__card--featured {
  grid-column:1/-1;
  margin-top:9px;
}
@media(max-width:650px) {
  .viv-quick::before {width:350px;height:350px;right:-240px;top:-180px}
  .viv-quick::after {width:300px;height:300px;left:-220px;bottom:-135px}
  .viv-quick .viv-quick__grid {row-gap:14px}
  .viv-quick .viv-quick__card--featured {margin-top:5px}
}


/* One active Quick Access tile at rest. As soon as a visitor hovers or
   keyboard-focuses another tile, that tile takes the existing hover style.
   This changes presentation only; links, order and saved settings are intact. */
.viv-quick__grid:not(:has(> .viv-quick__card:is(:hover, :focus-within))) > .viv-quick__card:first-child {
  transform: translateY(-7px);
  box-shadow: 0 24px 43px color-mix(in srgb,var(--viv-primary-deep) 18%,transparent);
  border-color: transparent;
}
.viv-quick__grid:not(:has(> .viv-quick__card:is(:hover, :focus-within))) > .viv-quick__card:first-child::before {
  transform: translateY(0);
}
.viv-quick__grid:not(:has(> .viv-quick__card:is(:hover, :focus-within))) > .viv-quick__card:first-child::after {
  opacity: 1;
  transform: scale(1);
}
.viv-quick__grid:not(:has(> .viv-quick__card:is(:hover, :focus-within))) > .viv-quick__card:first-child .viv-quick__icon {
  background: rgba(255,255,255,.15);
  color: #fff;
  transform: rotate(-6deg) scale(1.08);
  border-radius: 25px;
}
.viv-quick__grid:not(:has(> .viv-quick__card:is(:hover, :focus-within))) > .viv-quick__card:first-child h3,
.viv-quick__grid:not(:has(> .viv-quick__card:is(:hover, :focus-within))) > .viv-quick__card:first-child .viv-quick__card-number {
  color: #fff;
}
.viv-quick__grid:not(:has(> .viv-quick__card:is(:hover, :focus-within))) > .viv-quick__card:first-child p {
  color: var(--viv-primary-soft-2);
}
.viv-quick__grid:not(:has(> .viv-quick__card:is(:hover, :focus-within))) > .viv-quick__card:first-child .viv-quick__arrow {
  background: #fff;
  color: var(--viv-primary);
  border-color: #fff;
  transform: rotate(-35deg);
}
@media (prefers-reduced-motion: reduce) {
  .viv-quick__grid:not(:has(> .viv-quick__card:is(:hover, :focus-within))) > .viv-quick__card:first-child,
  .viv-quick__grid:not(:has(> .viv-quick__card:is(:hover, :focus-within))) > .viv-quick__card:first-child .viv-quick__icon,
  .viv-quick__grid:not(:has(> .viv-quick__card:is(:hover, :focus-within))) > .viv-quick__card:first-child .viv-quick__arrow {
    transform: none;
  }
}